@charset "utf-8";

/* 
    Resource - 공통적으로 사용하는 것들을 모아두었습니다.
*/

/* ETC */
.btn_wrap{margin:25px 0; text-align:center}
.btn_wrap .btn{margin-left:6px; }
.btn_wrap .btn:first-child{margin-left:0}
.img_wrap{text-align:center; font-weight:500; border-radius:5px; overflow:hidden;}
.img_wrap span{display:block; margin:5px auto 0; text-align:center; font-size:15px;}
.flex_wrap{display:flex; flex-wrap:wrap;}
.box_wrap{margin-bottom:80px;}
.box_wrap:last-child{margin-bottom:0;}
.gray_box{background:rgba(236,237,242,0.85); padding:40px;}
.gray_box p{line-height:24px;}

article{margin-bottom:100px;}
article:last-child{margin-bottom:0;}
article p{margin-bottom:20px;}
article p.last-child{margin-bottom:0;}

.img_wr{display:flex; flex-wrap:wrap; gap:5px;}
.img_wr .img_wrap{flex:1;}

.floatRight{float:right; margin-left:20px; margin-bottom:20px;}

img.mb{display:none;}

.img_wr4{display:flex; flex-wrap:wrap;}
.img_wr4 .img_wrap{width:49.5%; margin-bottom:1%;}
.img_wr4 .img_wrap:nth-child(odd){margin-right:1%;}

.border_box{margin:5px 0; padding:15px 20px; border:3px solid #eee}
.full_box{padding:30px; background:#f4f5f3;}

.sup_box{font-size:15px;}
.sup_box ul li{position:relative; padding-left:20px; margin-bottom:12px; line-height:24px;}
.sup_box ul li:last-child{margin-bottom:0;}
.sup_box ul li i{position:absolute; left:0; top:0px; font-style:normal;}

.ingredient_img{width:200px; height:200px; overflow:hidden; border-radius:50%; float:right; margin-left:50px; border:2px solid #d9e9b6;}
.ingredient_img img{width:100%; height:100% !important; object-fit:cover;}

.vd_box{display:flex; flex-wrap:wrap;}
.vd_box iframe{width:100%;}
.vd_box iframe:nth-child(1){margin-bottom:1%;}
.vd_box span.tit{display:block; width:fit-content; background:#8fc31f; color:#fff; font-weight:600; padding:10px 21px; margin-bottom:11px; border-radius:70px; word-break:keep-all;}

@media only screen and (max-width : 600px) {
.vd_box span.tit{text-align:center; line-height:22px;}
}

.respon_table{overflow-x:auto}
.requir{font-size:0.88em; color:#da030d; text-align:right;}

.clear{*zoom:1;}
.clear:after{display:block; clear:both; content:" ";}
.blind{position:absolute; left:-99999px;}
#wait{max-width:530px; width:90%; margin:0 auto; padding:100px 0;}
#wait img{width:100%; }

.ovh{overflow: hidden;}
.ovYs{overflow-y: scroll;}
.ovXs{overflow-x: scroll;}

/* magin_padding */
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}

.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}

.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}

.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr40{padding-right:40px}
.pr50{padding-right:50px}

.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}

.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl40{padding-left:40px}
.pl50{padding-left:50px}

/* width, height */
.w100p{width: 100%;}
.w80p{width: 80%;}
.w60p{width: 60%;}
.w50p{width: 50%;}
.w40p{width: 40%;}
.w30p{width: 30%;}
.w20p{width: 20%;}
.w10p{width: 10%;}

.h100p{height: 100%;}
.h80p{height: 80%;}
.h60p{height: 60%;}
.h50p{height: 50%;}
.h40p{height: 40%;}
.h30p{height: 30%;}
.h20p{height: 20%;}
.h10p{height: 10%;}

.h100px{height: 100px;}
.h150px{height: 150px;}
.h200px{height: 200px;}
.h250px{height: 250px;}
.h300px{height: 300px;}
.h350px{height: 350px;}
.h400px{height: 400px;}
.h450px{height: 450px;}
.h500px{height: 500px;}

/* float */
.fl{float:left}
.fr{float:right}

/* align */
.tal{text-align:left}
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.taj{text-align:justify}

.vam{vertical-align: middle;}
.vat{vertical-align: top;}
.vabt{vertical-align: bottom;}
.vabs{vertical-align: baseline;}

/* color */
.black{color:#252525}
.white{color:#fff}
.blue {color:#548cb7}
.green{color:#76ad00;}
.mint {color:#6fe1cd}
.sky_blue {color:#94e4f2}
.red{color:#fd4c38}
.pink{color:#ffabb3}
.coral{color:#ff7676}
.orange{color:#ff9f52}
.yellow{color:#fdd741}
.purple{color:#7c51bb}
.gray{color:#7d7d78}
.light_gray{color:#bbbbb3}

/* Background Color */
.bg_black{background: #252525;}
.bg_white{background: #fff;}
.bg_blue{background: #0072bc;}
.bg_mint{background: #6fe1cd;}
.bg_skyBlue{background: #94e4f2;}
.bg_red{background: #f1131d;}
.bg_pink{background: #ffabb3;}
.bg_coral{background: #ff7676;}
.bg_orange{background: #ff9f52;}
.bg_yellow{background: #fdd741;}
.bg_purple{background: #7c51bb;}
.bg_gray{background: #7d7d78;}
.bg_lightGray{background: #bbbbb3;}

/* text_style */
b.flb{font-weight:800;}
.fb{font-weight:700}
.fn{font-weight:normal}
.tlt{text-decoration:line-through} 
.fi{font-style:italic} 
.tu{text-decoration:underline} 


.bl{display:block; width:fit-content;}
.ibl{display:inline-block; width:fit-content; vertical-align:middle;}

/* input */
input{border:1px solid #ccc}
input[type="text"] , input[type="password"] , input[type="tel"]{height:35px; padding:0 5px; line-height:33px;}
input[type="radio"]{margin-right:5px}
input[type="checkbox"]{margin-right:5px; }
input:disabled{background: #ddd;}
select{height:35px; padding:0 0 0 5px; background:#fff; border:1px solid #ccc; line-height:33px;}
option{padding:5px 0}
textarea{padding:15px; border:1px solid #ccc; resize: none; width: 100%;}

/* ol_li_list */
.lss-ol{margin-left:18px;}

.lss-dot > li{position: relative; padding-left: 10px; margin-bottom:10px; line-height:30px;}
.lss-dot > li:last-child{margin-bottom:0;}
.lss-dot > li::before{content: ''; position:absolute; top: 12px; left:0; width:3px; height:3px; background:#333; border-radius:50%;}
.lss-dot > li p{margin-bottom:0;}

.lss-circle > li::before{border-radius: 50%;}

.lss-chk > li{background:url(../../../img/common/bul_che.png) 0 6px no-repeat; padding-left: 15px; margin-bottom:13px;}
.lss-chk > li:last-child{margin-bottom:0;}

.lss-line > li{padding-left: 10px; background: url(../../../img/common/bul_line.gif) 0 14px no-repeat;}
.lss-line > li p{margin-bottom:0;}

.lss-num > li{margin-bottom:12px; position:relative; padding-left:30px; }
.lss-num > li:last-child{margin-bottom:0;}
.lss-num > li i{position:absolute; left:0; top:4px; font-style:normal; width:20px; height:20px; border-radius:50%; background:#a1b576; color:#fff; display:flex; align-items:center; justify-content:center;}
.lss-num > li p{margin-bottom:0;}


/* tab_menu */
.tab_menu{clear:both}
.tab_menu ul{overflow:hidden; display: table; margin: 0 auto;}
.tab_menu ul li{float:left; margin: 1px;}
.tab_menu ul li a{display:block; position:relative; /*height:35px;*/ /*margin-left:-1px;*/ padding: 12px 30px;; border:1px solid #62b13a; /*line-height:35px;*/ color:#292929; text-align:center; font-family: 'JAGothic'; font-weight:700;}
.tab_menu ul li:first-child a{margin-left:0}
.tab_menu ul li a:hover{background:#62b13a; color:#fff;}
.tab_menu ul li.on a{color:#fff;border-color:#62b13a;  background:#62b13a; z-index:50}

.tab_menu_line{overflow:hidden;}
.tab_menu_line ul{width:100%; height:41px; margin-bottom:15px; border-bottom:1px solid #0f6bb0;}
.tab_menu_line li{display:inline-block; }
.tab_menu_line li a{display:block; padding:10px 30px; background:#f8f8f8; border:1px solid #eaeaea; border-bottom:1px solid #0f6bb0; font-size:1.067em; line-height:20px; color:#888; text-align:center; text-decoration:none;  }
.tab_menu_line li a:hover, .tab_menu li a:active{background-color:#f1f1f1;transition:background 0.5s ease}
.tab_menu_line li a.on{background-color:#fff; border:1px solid #005596; border-bottom:1px solid #fff; color:#005596; font-weight:400; }

/* table */
.tbs{width:100%; border-spacing:5px 20px; /*border-bottom: 1px solid #eee;*/ margin-top: 5px;}
.tbs caption{height:0; text-indent:-9999px; overflow:hidden}
.tbs th, .tbs td{border: 1px solid #eee;}
.tbs th{padding:20px 10px; /* border-top:1px solid #ddd; border-left:1px solid #eee; */color:#434343; vertical-align:middle; background: #f9f9f9;}
.tbs th:first-child{border-left:0}
.tbs th:last-child{border-right:0}
.tbs td{padding:10px;/* border-top:1px solid #ddd; border-left:1px solid #eee;*/}
.tbs td:first-child{border-left:0}
.tbs td:last-child{border-right:0}
.tbs tfoot th{color:#222}
.tbs tfoot td{font-weight:600; text-align:center; vertical-align:middle}
.tbs .item{font-weight:bold}
.tbs .bg{background:#f9f9f9}

.tbs-bdt{border-top:2px solid #222; }
.tbs-bdbt{border-bottom:2px solid #222; }
.tbs-fixed th{position: sticky; top: 0; background: #f9f9f9;}
.tbs-fixed th::before{content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: #222;}

/* link */
a.link{display:inline-block; color:#398d3c; word-break:break-all;}
a.link:hover{text-decoration:underline}

.email{display:inline-block; color:#0068bf}
.email:hover{text-decoration: underline}

.external{position: relative;}
.external::after{content: ''; position: absolute; top: 50%; right: -25px; background: url(../../../img/common/icon_external.png) 0 0 no-repeat; width: 14px; height: 14px; background-size: 14px; transform: translate(-50%, -50%);}

/* paging */
.paging{clear:both; padding:5px 0; text-align:center}
.paging strong{display:inline-block; width:30px; margin:0 2px; background:#222; border:1px solid #222; font-size:0.8em; line-height:30px; font-weight:bold; color:#fff}
.paging a.paging_num{display:inline-block; width:30px; margin:0 2px; border:1px solid #ddd; font-size:0.8em; line-height:30px; color:#aaa}
.paging a.paging_num:hover{color:#585858}
.paging img{padding:5px 0; vertical-align:top; opacity: .2;}
.paging .prev{margin:0 30px 0 20px}
.paging .next{margin:0 20px 0 30px}

/* 반응형 폼 구성 */
.form_area {width:100%; margin:10px 0; }
.form_area select { height:30px;}
.form_area input[type=text] { height:30px;}
.form_area input[type=password] { height:30px;}
.form_area textarea{ width:100%; padding:5px; font-size:0.95em;}
.form_area > .row {display:flex; flex-wrap: wrap; gap: 2%; line-height: 35px; flex-direction: row; align-items: flex-start; align-content: flex-start; justify-content: flex-start; line-height:35px;} 
.form_area > .row > span.title {flex:1; border-top:1px solid #333; font-weight:bold; min-width:180px; padding:5px 10px;}
.form_area > .row > span.info {flex:3; border-top:1px solid #eee; min-width:400px; padding:5px 10px;}
.form_area > .row > span.info_sub {flex:3; border-top:none; min-width:400px;}
.form_area > .row > span.info_sub > span.sub {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; align-content: flex-start; gap: 1%; padding:0px; }
.form_area > .row > span.info_sub > span.sub > span.title {flex:1; border-top:1px solid #777; color:#555; font-weight:bold; min-width:160px; padding:5px 10px;}
.form_area > .row > span.info_sub > span.sub > span.info {flex:3; border-top:1px solid #eee; min-width:300px; padding:5px 10px;}
/* .form_area sample
<ul class="form_area">	<li class="row">		<span class="title">Title</span>		<span class="info">Info</span>	</li>	<li class="row">		<span class="title">Title2</span>		<span class="info_sub">			<span class="sub">				<span class="title">Sub Title1</span>				<span class="info">Sub Info1</span>			</span>			<span class="sub">				<span class="title">Sub Title2</span>				<span class="info">Sub Info2</span>			</span>		</span>	</li></ul>*/

/* Form - 4column */
.form_col4{border-top: 2px solid #222;}
.form_col4 .row{display: flex; justify-content: space-between; border-bottom: 1px solid #eee;}
.form_col4 .row .col{width: 48%; display: flex;}
.form_col4 .row span{padding: 10px;}
.form_col4 .row .title{width: 20%; font-weight: bold; background: #f9f9f9; word-break: keep-all;}
.form_col4 .row .info{width: 80%;}




/* ----------------------------------------- Media Query ----------------------------------------- */

@media only screen and (max-width: 1000px){
	.sup_box{font-size:13px;}
	.sup_box ul li{line-height:21px;}

	.lss-dot > li{line-height:22px;}

	.lss-num > li{padding-left:26px;}
	.lss-num > li i{width:17px; height:17px; font-size:13px; top:1px;}
}



@media only screen and (max-width: 900px){

    /* Form 4column */
	.form_col4 .row{flex-wrap: wrap; border-bottom: none;}
	.form_col4 .row .col{width: 100%; border-bottom: 1px solid #eee;}

}

@media only screen and (max-width: 800px){
	.img_wr .img_wrap{flex:unset; width:100%; margin-bottom:5px;}

	.img_wr4 .img_wrap{width:100%;}
	.img_wr4 .img_wrap:nth-child(odd){margin-right:0;}

	.obj_img{height:250px;}
	.obj_img img{height:100% !important; width:100%; object-fit:cover;}

	.gray_box{padding:30px;}

	br.none,div.none{display:none;}

	.ingredient_img{float:unset; margin:0 auto 30px;}

	.floatRight{float:unset; margin-left:0;}

	.vd_box iframe{height:500px;}
	.vd_box.shorts iframe{height:370px;}
}

@media only screen and (max-width: 600px){
	img.mb{display:block; margin:0 auto;}
	img.pc{display:none;}

    /* Form 4column */
	.form_col4 .row .col{flex-wrap: wrap;}
	.form_col4 .row .title, .form_col4 .row .info{width: 100%;}

}