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

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:57px; margin-bottom:15px; z-index:9}
.sub-tab-list-style ul{display:block; width:100%; height:100%; table-layout:fixed; display:table;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{display:table-cell; position:relative; background-color:#fff; border-top:1px solid #000; border-bottom:1px solid #e5e5e5 }
.sub-tab-list-style ul li:after{position:absolute; content:""; width:1px; height:20px; background-color:#b2b2b2; right:-1px; top:50%; margin-top:-9px; z-index:9}
.sub-tab-list-style ul li:last-child:after{display:none}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; position:relative}
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; }
.sub-tab-list-style ul li.selected a{background-color:#233a65; border-bottom-color:#333}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:0; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:after{position:absolute; top:0px; top:0; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #000; transition:all 0.5s}
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:1px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:after,
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

.page-tit{font-weight:600; font-size:40px; letter-spacing:-0.75px; color:#333; text-align:center; margin-bottom:60px}

/* ****************** 제품소개 ********************** */
/* 제품리스트*/
.prd-page-tit{text-align:center; font-weight:500; font-size:40px; letter-spacing:-1.75px; color:#333; line-height:1.3}
.prd-list-con{margin:40px -0.4% 0}
.prd-list-con li{float:left; width:; margin:0 0.4% 0.8%; width:24.2%; }
.prd-list-con li a{display:block; border:1px solid #cfcfcf; padding:19px 15px 11%; position:relative; box-sizing:border-box; text-align:center}
.prd-list-con li a:after{position:absolute; content:""; width:calc(100% + 2px); height:calc(100% + 2px); border:0px solid #233a65; box-sizing:border-box; top:-1px; left:-1px; box-sizing:border-box; z-index:9; opacity:0; transition:border-width 0.2s, opacity 0.35s}
.prd-list-con li a .prd-img{position:relative; height:0; padding-top:96%}
.prd-list-con li a .prd-img img{position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; margin:auto}
.prd-list-con li a .prd-txt{padding-top:15px}
.prd-list-con li a .prd-txt .tit{font-weight:500; display:block; font-size:20px; letter-spacing:-0.75px; color:#000; line-height:1.3}
.prd-list-con li a .prd-txt .explain{font-weight:400; font-size:16px; letter-spacing:-0.75px; color:#666; line-height:1.625; margin-top:20px; height:3.25em; overflow:hidden}
.prd-list-con li a .new-cate{position:absolute; top:20px; left:20px; z-index:9; width:70px; height:70px; text-align:center; font-weight:700; font-size:15px; letter-spacing:-0.35px; color:#fff; background-color:#233a65; line-height:70px; box-shadow:7px 7px 15px 2px rgba(0,0,0,0.2)}
.prd-list-con li a:hover:after{border-width:8px; opacity:1}
/* 검색폼 */
.prd-search-box{}
.prd-search-box select,
.prd-search-box input,
.prd-search-box button{float:left; height:50px}
.prd-search-box select{width:22.8%; margin-right:10px; background-color:#eee; border:0; box-sizing:border-box; padding-left:20px; font-weight:400; font-size:16px; letter-spacing:-0.75px; color:#333}
.prd-search-box select{
	-webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;
    background: #eee url("/images/icon/select_arrow_icon.png") no-repeat 94% 50%; 
}
.prd-search-box select::-ms-expand { display: none; }

.prd-search-box input{border:0; width:calc(59.4% - 10px); background-color:#eee; font-weight:400; font-size:15px; letter-spacing:-0.75px; color:#333; padding:0 20px; box-sizing:border-box}
.prd-search-box input::placeholder{color:#bcbcbc}
.prd-search-box button{width:17.8%; background-color:#333; text-align:left; padding:0 20px; box-sizing:border-box; position:relative; font-weight:400; font-size:16px; letter-spacing:-0.75px; color:#fff; line-height:50px}
.prd-search-box button i{position:absolute; right:20px; top:50%; font-size:18px; margin-top:-9px}


/* 제품뷰페이지*/
/* 상단 */
.prd-view-top{display:table; width:100%; margin:85px 0 110px}
.prd-view-top > div{display:table-cell; vertical-align:middle; box-sizing:border-box}
.prd-view-top .prd-img{width:38.5%; text-align:center; border:1px solid #e5e5e5; padding:15px}
.prd-view-top .prd-img span{position:relative; display:block; height:0; padding-top:87%}
.prd-view-top .prd-img span img{position:absolute; left:0; right:0; top:0; bottom:0; max-width:100%; max-height:100%; margin:auto}
.prd-view-top .prd-detail{padding-left:6.5%}
.prd-view-top .prd-detail .prd-name{font-weight:700; font-size:50px; letter-spacing:-0.25px; color:#000; line-height:1.2}
.prd-view-top .prd-detail .prd-txt-01{display:block; font-weight:700; font-size:18px; letter-spacing:-0.25px; color:#000; line-height:1.35; margin-top:20px}
.prd-view-top .prd-detail .prd-txt-02{font-weight:400; font-size:18px; letter-spacing:-0.75px; color:#666; line-height:1.51; margin-top:30px}
.prd-view-top .prd-detail .prd-txt-03{margin-top:40px}
.prd-view-top .prd-detail .prd-txt-03 dt,
.prd-view-top .prd-detail .prd-txt-03 dd{display:inline-block; vertical-align:top; margin:0 -1px; font-weight:600; font-size:18px; letter-spacing:-0.75px; color:#000; box-sizing:border-box}
.prd-view-top .prd-detail .prd-txt-03 dt{width:85px; padding-right:10px}
.prd-view-top .prd-detail .prd-txt-03 dd{max-width:calc(100% - 85px)}
.prd-view-top .prd-detail .pdf-btn{margin-top:55px; display:inline-block; width:220px; height:60px; text-align:center; line-height:60px; background-color:#233a65; font-weight:700; font-size:16px; letter-spacing:-0.75px; color:#fff}
.prd-view-top .prd-detail .pdf-btn i{display:inline-block; margin-right:15px; vertical-align:middle; position:relative; font-size:24px; top:-2px}
/* 하단 :: 설명 */
.prd-info-con .sub-tab-con:first-chid{border-top:1px solid #e5e5e5;}
.prd-info-con .sub-tab-con{border-bottom:1px solid #e5e5e5; padding:90px 0}
.prd-info-con .sub-tab-con .prd-info-tit{position:relative; display:inline-block; font-weight:600; font-size:30px; letter-spacing:-0.25px; color:#000; margin-bottom:50px}
.prd-info-con .sub-tab-con .prd-info-tit:after{position:absolute; content:""; width:8px; height:8px; border-radius:50%; background-color:#233a65; right:-15px; bottom:2px}
.prd-info-con .sub-tab-con .prd-info-txt{font-weight:400; font-size:16px; letter-spacing:-0.65px; color:#666; line-height:1.5}
.prd-info-con .sub-tab-con .dot-txt li{position:relative; padding-left:16px; margin-bottom:5px}
.prd-info-con .sub-tab-con .dot-txt li:before{position:absolute; content:""; width:4px; height:4px; background-color:#000; border-radius:50%; left:0; top:11px}



/* ****************** 회사주요활동 ********************** */
.bbs-basic-gallery-con05 .gallery-list li a:hover .list-tit{color:#233a65 !important}



/* ****************** 회사소개 ********************** */
.intro-wrap .intro-txt{font-size:26px; line-height:1.61em; letter-spacing:-1.4px; color:#333; font-weight:bold; margin-bottom:30px;}
.intro-wrap .intro-explain{font-size:16px; line-height:1.75em; letter-spacing:-1px; color:#666; margin-bottom:50px;}
.intro-wrap .intro-img img{width:100%;}



/* ****************** 브랜드 소개 ********************** */

/* ****************** c+ ********************** 
	*********************************************/
.brand-wrap{margin-bottom:30px;}
/* c+ :: 이미지 */
.brand-img{width:43.76%; float:left;}
.brand-img span{display:block; width:84.51%; max-width:480px;}
.brand-img span img{width:100%; /* max-width:450px; */ /* box-shadow:30px 30px #233a65; */}
.m-brand-img{display:none;}

/* c+ :: 설명 */
.brand-explain{width:56.24%; float:left; margin-top:40px;}
.cplus-box{border-bottom:1px solid #e9ebef;}
.brand-txt{padding-bottom:50px;}
.brand-txt.cplus-txt{width:100%; float:left; padding-right:10px; box-sizing:border-box;}
.brand-txt .brand-main-txt{font-size:40px; line-height:1.37em; letter-spacing:-3px; color:#333; font-weight:bold; margin-bottom:18px;}
.brand-txt .txt{font-size:18px; line-height:1.83em; letter-spacing:-1.3px; color:#333;}
.cplus-logo{float:left; width:23.64%; margin-right:8.2%;}
.cplus-logo img{width:100%; max-width:163px; margin-top:5px;}
/* c+ :: 특징,특허 */
.cplus-char{margin:45px 0 32px; padding-bottom:40px;}
.cplus-sub-tit{font-size:22px; line-height:1.5em; letter-spacing:-0.75px; color:#333; margin-bottom:20px;}
.char-list{float:left; width:50%;}
.char-list ul li{font-size:18px; line-height:2em; letter-spacing:-1px; color:#333;}
.char-list ul li i{margin-right:12px;}
.patent{float:left; width:50%;}
.patent span img{width:100%; max-width:274px;}
/* c+ :: 비교 */
.brand-oil-wrap{margin-bottom:50px;}
.cplus-oil{width:50%; float:left; text-align:center;}
.cplus-oil:last-child{border-left:1px solid #e9ebef; box-sizing:border-box;}
.cplus-oil .oil-name{background:#233a65; color:#fff;}
.cplus-oil .oil-name.normal-oil{background:#eee; color:#333;}
.cplus-oil .oil-name{font-size:16px; line-height:2.06em; letter-spacing:-0.75px; padding:14px 0;}
.cplus-oil .oil-img-wrap{ padding:21px 17px 10px;}
.cplus-oil .oil-img-wrap .oil-img{display:block; border:1px solid #cfcfcf;}
.cplus-oil .oil-img-wrap .oil-img img{padding:40px 0; width:100%; max-width:154px;}
.cplus-oil .oil-txt{font-size:16px; line-height:1.75em; letter-spacing:-0.75px; color:#333; padding:0 10px 0 26px; text-align:left; padding-bottom:10px; text-align:center;}

/*c+ :: 하단 이미지*/
/* .brand_bottom_img{margin-top:40px;} */
.brand_bottom_img img{ width:100%}