@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:-15px; cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.custom-scrollbar-cover{display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5)}
	.custom-scrollbar-cover .scroll-cover-txt{position:absolute; top:50%; left:0; width:100%; text-align:center; color:#fff; font-size:300; font-size:15px;}
	.custom-scrollbar-cover .scroll-cover-txt i{font-size:30px; display:block; margin-bottom:20px; }

	.page-tit{font-size:28px; margin-bottom:30px}

}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	.sub-tab-list-style ul li:after{height:15px; margin-top:-7px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/* ****************** 제품소개 ********************** */
@media all and (max-width:1024px){
	/* 제품리스트*/
	.prd-list-con li a .new-cate{font-size:13px; width:55px; height:55px; line-height:55px; top:10px; left:10px}
}
@media all and (max-width:960px){	
	/* 제품뷰페이지*/
	/* 상단 */
	.prd-view-top{display:block; text-align:center}
	.prd-view-top > div{display:block}
	.prd-view-top .prd-detail{padding:30px 0 0}
	.prd-view-top .prd-img{width:415px; margin:0 auto}
}
@media all and (max-width:800px){
	/* 제품리스트*/
	.prd-page-tit{font-size:25px}
	.prd-list-con{margin-top:20px}
	.prd-list-con li{width:32.533%}
	.prd-list-con li a .prd-txt .tit{font-size:15px}
	.prd-list-con li a .prd-txt .explain{font-size:13px; margin-top:10px}
	.prd-list-con li a .new-cate{font-size:11px; width:45px; height:45px; line-height:45px;}
	/* 검색폼 */
	.prd-search-box select, .prd-search-box input, .prd-search-box button{height:40px}
	.prd-search-box select{padding-left:10px; font-size:13px; width:100px; margin-right:5px}
	.prd-search-box button{width:100px; font-size:13px; padding:0 10px; line-height:42px}
	.prd-search-box button i{font-size:15px; margin-top:-7px; right:10px}
	.prd-search-box input{width:calc(100% - 205px); font-size:13px; padding:0 10px}

	/* 제품뷰페이지*/
	/* 상단 */
	.prd-view-top{margin:40px 0 50px}
	.prd-view-top .prd-img{width:100%; max-width:350px}
	.prd-view-top .prd-detail .prd-name{font-size:30px;}
	.prd-view-top .prd-detail .prd-txt-01{font-size:14px; margin-top:10px}
	.prd-view-top .prd-detail .prd-txt-02{font-size:14px; margin-top:15px}
	.prd-view-top .prd-detail .prd-txt-03{margin-top:20px;}
	.prd-view-top .prd-detail .prd-txt-03 dt, .prd-view-top .prd-detail .prd-txt-03 dd{font-size:14px;}
	.prd-view-top .prd-detail .prd-txt-03 dt{width:70px}
	.prd-view-top .prd-detail .prd-txt-03 dd{max-width:calc(100% - 70px)}
	.prd-view-top .prd-detail .pdf-btn{width:160px; height:40px; line-height:40px; font-size:13px; margin-top:30px}
	.prd-view-top .prd-detail .pdf-btn i{font-size:18px; margin-right:9px}
	/* 하단 :: 설명 */
	.prd-info-con .sub-tab-con{padding:50px 0}
	.prd-info-con .sub-tab-con .prd-info-tit{font-size:20px; margin-bottom:20px}
	.prd-info-con .sub-tab-con .prd-info-tit:after{width:5px; height:5px; right:-10px}
	.prd-info-con .sub-tab-con .prd-info-txt{font-size:13px;}
	.prd-info-con .sub-tab-con .dot-txt li:before{top:9px}
}
@media all and (max-width:480px){
	/* 제품리스트*/
	.prd-list-con li{width:49.2%}
	/* 검색폼 */
	.prd-search-box select, .prd-search-box input, .prd-search-box button{float:none}
	.prd-search-box select{width:100%; background:#eee url("/images/icon/select_arrow_icon.png") no-repeat 96% 50%; margin:0 0 5px}
	.prd-search-box input{display:inline-block; width:calc(100% - 103px); vertical-align:top}
	.prd-search-box button{display:inline-block; vertical-align:top}
}


/* ****************** 브랜드소개 ********************** */
@media all and (max-width:800px){
	.intro-wrap .intro-txt{font-size:18px;}
	.intro-wrap .intro-explain{font-size:13px;}
}
/* ****************** c+ ********************** 
	*********************************************/
@media all and (max-width:800px){
	.brand-txt .brand-main-txt{font-size:25px;}
	.brand-txt .txt, .char-list ul li{font-size:14px;}
	.cplus-sub-tit{font-size:16px;} 
	.cplus-oil .oil-name, .cplus-oil .oil-txt{font-size:13px;}	
	.brand-img{width:100%; float:none;}
	.brand-img span{width:100%; max-width:none;}
	.brand-img span img{display:block; max-width:300px; margin:auto;}
	.brand-explain{width:100%; float:none;}
}
@media all and (max-width:480px){
	.char-list{float:none; width:100%; margin-bottom:20px;}
	.patent{float:none; width:100%;}
	.cplus-oil{width:100%; }
	.cplus-oil:last-child{border-left:none;}
}