@charset "utf-8";

/*공통*/

.cont-tab{overflow:hidden;}
.cont-tab ul{margin:3% 0 0; font-family: 'GmarketSansMedium'; overflow:hidden; border-bottom:solid 1px #e4e4e4;}
.cont-tab ul li{width:19%; float:left; text-align:center; box-sizing:border-box; background:#f7f7f7; color:#999; padding:1.5%; font-size:17px; letter-spacing:-1.2px; cursor:pointer;}
.cont-tab ul li:first-child{letter-spacing:0;}
.cont-tab ul li:nth-child(2), .cont-tab ul li:nth-child(3), .cont-tab ul li:nth-child(4){border-left:none;}
.cont-tab ul li.on{background:#03a678; color:#fff; background-size:cover;}

.cont-wrap{overflow:hidden; margin:0 0 10%;}
.cont-wrap .cont_box{display:none;} 
.cont-wrap .cont_box.on{display:block;}

.product-box{width:100%; height:100%; background-color:#f7f7f7; margin:3% 0;}
.product-box:after{content:""; display:block; clear:both;}

.product-box .left{width:500px;}
.product-box .left img{width:100%;}
.product-box .right{width:700px; position:relative;}

.product-box .right .cont-box{background:#f7f7f7; padding:24px 50px 70px 100px; box-sizing:border-box;}
.product-box .right .cont-box p{font-size:16px; color:#000; letter-spacing:-0.8px; padding-left:26px; position:relative; margin:1% 0;}
.product-box .right .cont-box p::after{content:"!"; display:block; position:absolute; top:4px; left:0; background:#03a678; color:#fff; width:20px; height:20px; line-height:20px; border-radius:10px; text-align:center;}
.product-box .right .p-tite{font-size:25px;}

.product-box .right dl.pur-box{overflow:hidden; padding:2% 0; border-bottom:solid 1px #ddd;}
.product-box .right dl.pur-box dd{float:left; border:solid 1px #ddd; margin-right:1%; background-color:#fff; padding:1% 2%; border-radius:13px;}

.product-box .right .w-box{width:100%;}
.product-box .right .w-box dl{background:#fff; margin-top:2%; overflow:hidden; padding:15px 30px; box-sizing:border-box;}
.product-box .right .w-box dl dd div{float:left; width:50%; padding-bottom:2%;}
.product-box .right .w-box dl dd:last-child div{padding-bottom:0;}
.product-box .right .w-box dl dd .tit{text-align:left; color:#666; font-size:15px;}
.product-box .right .w-box dl dd .txt{text-align:right; color:#333; font-size:15px; /*word-break:keep-all;*/}
.product-box .right dl.color{width:100%; overflow:hidden; background-color:#fff; margin-top:2%;  box-sizing:border-box; font-size:16px;}
.product-box .right dl.color dd{float:left; width:50%;  box-sizing:border-box;}
.product-box .right dl.color dd:nth-child(2){text-align:right; position:relative;}

.product-box .right dl.color dd.black{color:#fff; background-color:#000;}
.product-box .right dl.color dd.gray{color:#000; background-color:#e2e2e2;}
.product-box .right dl.color dd.natural{color:#8a8578; background-color:#d5d1c5;}
.product-box .right dl.color dd.white{color:#000; background-color:#fff; border-left:solid 1px #efefef;}

.product-box .right dl.color dd div{padding:4% 12%; box-sizing:border-box;}

.online-btn{display:block; padding:2% 6%; text-align:center; margin:2% 0 0; background:#f2b705; color:#fff; transition: all 0.5s, color 0.5s; cursor:pointer; float:right; border-radius:15px;}
.online-btn:hover{box-shadow:6px 7px 7px #ddd; background: linear-gradient(to right, rgba(3,166,120,0.8), rgba(242,183,5,0.8));}


/*#tab-2
dl.fair-box{overflow:hidden; margin:3% 0 10%;}

dl.fair-box dd{float:left; width:380px; margin-right:30px; position:relative; margin-bottom:3%;}
dl.fair-box dd:nth-child(3n){margin-right:0;}

dl.fair-box dd::before{font-family: 'GmarketSansMedium'; font-size:18px; width:56px; height:56px; line-height:56px; text-align:center; color:#fff; background-color:#03a678; position:absolute; top:0; left:0;}
dl.fair-box dd:nth-child(1)::before{content:"01";}
dl.fair-box dd:nth-child(2)::before{content:"02";}
dl.fair-box dd:nth-child(3)::before{content:"03";}
dl.fair-box dd:nth-child(4)::before{content:"04";}
dl.fair-box dd:nth-child(5)::before{content:"05";}
dl.fair-box dd:nth-child(6)::before{content:"06";}


dl.fair-box dd div.img img{display:block;}
dl.fair-box dd div.txt{font-size:16px; text-align:center; padding:5% 0; box-sizing:border-box; border:solid 1px #ddd;}*/

/*21-04-16*/
.fair-wrap{overflow:hidden;}
.fair-wrap div{margin-top:3%;}
h3.f-tite{font-size:24px; font-family: 'GmarketSansMedium'; letter-spacing:-1.0px; position:relative; text-indent:32px;}
h3.f-tite::after{content:""; display:block; width:27px; height:27px; background:#03a678; position:absolute; top:0; left:0; color:#fff; text-indent:0; font-size:15px; text-align:center; line-height:27px; font-family:"GmarketSansLight";  letter-spacing:0px;}
h3.f-tite.one::after{content:"01"}
h3.f-tite.two::after{content:"02"}
h3.f-tite.three::after{content:"03"}
h3.f-tite.four::after{content:"04"}
h3.f-tite.five::after{content:"05"}


.fair-wrap dl{overflow:hidden; margin:1% 0 3%;}
.fair-wrap dl dd{float:left; width:24%; margin-right:1%;}
.fair-wrap dl dd:nth-child(4){margin-right:0;}




/*media*/

/*노트북 해상도 125%일때*/
@media screen and (max-width:1580px){


}

/*S:max-width:1024*/
@media all and (max-width:1024px) {
.cont-tab.w50 ul li{width:30%; padding:2%;}

.flex-direction-nav a{top:38% !important;}

.product-box .left{width:100%; float:none;}
.product-box .right{width:100%; float:none;}
.product-box .right .cont-box{padding:5%;}

.online-btn{margin:2% 0; width:100%; float:none; border-radius:0; box-sizing:border-box; padding:3%;}


/*#tab-2
dl.fair-box dd{width:32.3%; margin-right:1%;}
dl.fair-box dd div.img img{width:100%;}*/

/*21-04-16*/
.fair-wrap dl dd img{width:100%;}

}
/*E:max-width:1024*/

/*S:max-width:800*/
@media all and (max-width:800px){
.cont-tab.w50 ul li{width:30%;}
dl.fair-box dd::before{width:42px; height:42px; line-height:42px; font-size:15px;}

}
/*E:max-width:800*/

/*S:max-width:650*/
@media all and (max-width:650px){
.flexslider .slides img{width:99.8% !important;}

.cont-tab.w50 ul li{width:50%; padding:4%;}
.cont-tab ul{border-bottom:none; margin:10% 0 0;}
.cont-tab ul li{font-size:15px;}

.product-box .right .cont-box{padding:5% 5% 10%;}
.product-box .right .p-tite{font-size:25px;}
.product-box .right .p-txt{font-size:13px;}

.product-box .right dl.pur-box{padding:3% 0;}
.product-box .right dl.pur-box dd{margin-right:2%; margin-bottom:2%; padding:1% 3%; border-radius:18px;}

.product-box .right .w-box dl{margin-top:5%; padding:5%;}
.product-box .right .w-box dl dd div.tit{width:30%;}
.product-box .right .w-box dl dd div.txt{width:70%; word-break:normal;}
.product-box .right .w-box dl dd .txt{font-size:15px;}

.product-box .right dl.color{font-size:14px;}
.product-box .right dl.color dd{width:30%;}
.product-box .right dl.color dd:nth-child(2){width:70%;}
.product-box .right dl.color dd div{padding:3% 11%;}
.product-box .right dl.color dd:nth-child(1) div{padding:6% 11%;}
.product-box .right dl.color dd.lf20:nth-child(2) div{padding:3% 0;}

.product-box .right .cont-box p{font-size:15px; padding-left:7%;}
.product-box .right .cont-box p::after{font-size:12px; top:2px;}
.online-btn{padding:4%;}


#tab-1 dl.ibox dd img{width:100%;}
#tab-1 div.tit{font-size:14px;}
#tab-1 div.tit span{display:inline;}

/*#tab-2
dl.fair-box dd{width:49%;}
dl.fair-box dd:nth-child(2n){margin-right:0;}
dl.fair-box dd:nth-child(3){margin-right:1%;}
dl.fair-box dd::before{width:30px; height:30px; line-height:30px; font-size:12px;}
dl.fair-box dd div.txt{font-size:14px;}*/

/*21-04-16*/
.fair-wrap{margin-top:3%;}
.fair-wrap div{margin-top:5%;}
h3.f-tite{font-size:20px; text-indent:29px;}
h3.f-tite::after{width:23px; height:23px; font-size:12px; line-height:23px; font-family: 'GmarketSansMedium'; letter-spacing:-0.1px;}

.fair-wrap dl{margin:3% 0;}
.fair-wrap dl dd{width:49%;}


}
/*E:max-width:650*/

/*S:max-width:375*/
@media all and (max-width:375px){

.online-btn{margin:4% 0;}
}
/*E:max-width:375*/

/*S:max-width:320*/
@media all and (max-width:320px){
.product-box .right .w-box dl dd{overflow:hidden;}
.product-box .right .w-box dl dd .tit, .product-box .right .w-box dl dd .txt{font-size:13px !important;}

/*#tab-2
dl.fair-box dd{width:100%; float:none; margin-right:0;}
dl.fair-box dd:nth-child(3){margin-right:0;}*/


}
/*E:max-width:320*/