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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@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; }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-cm-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-cm-style.fixed{top:81px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-cm-tab-wrapper{height:40px;}
	.sub-tab-cm-style{height:41px;}
	.sub-tab-cm-style ul li a{height:40px; }
	.sub-tab-cm-style ul li a em{font-size:13px}
	/* 모바일 드롭메뉴 버튼 */
	.sub-tab-cm-style .cm-tab-m-btn{position:relative; display:block; padding:0 15px; height:40px; line-height:40px; background-color:#333;}
	.sub-tab-cm-style .cm-tab-m-btn span{color:#fff; }
	.sub-tab-cm-style .cm-tab-m-btn .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-tab-cm-style .cm-tab-m-btn.open .arrow{transform:rotate(180deg)}
	/* 모바일 드롭메뉴 리스트 */
	.cm-drop-tab-list ul{display:none; margin:0;  position:absolute; top:40px; left:0px; right:0px;background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11;}
	.cm-drop-tab-list ul li{position:static; float:none; border-top:1px solid #eee; width:auto; background-color:transparent}
	.cm-drop-tab-list ul li:first-child{border-top:0}
	.cm-drop-tab-list ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.cm-drop-tab-list ul li a em{font-size:13px;}
	.cm-drop-tab-list ul li.selected a{background-color:transparent;}
	.cm-drop-tab-list ul li.selected a em{color:#f57f20; font-weight:600; }
	/* 회사소개 탭 */
	.sub-tab-cm-style .history-tab-list li a em{font-size:13px}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-cm-style.fixed{top:61px;}
}

/* **************************
* 회사소개 *
************************** */
/* ******************  회사소개 :: CEO인사말  ********************** */
@media all and (max-width:1220px){
	#greetingContent{margin:0 15px;}
	.greeting-right-photo-con{width:calc(100% - 650px);}
	.greeting-right-photo-con img{max-width:100%;}
}
@media all and (max-width:1024px){
	.greeting-right-photo-con{float:none; max-width:300px; margin:0px auto 8%; width:50%;}
	.greeting-left-txt-con{float:none; text-align:center; width:auto; padding:0; font-size:15px;}
	.greeting-left-txt-con:after,
	.greeting-left-txt-con:before{display:none}
	.greeting-left-txt-con .greeting-bold-txt{font-size:30px;}
	.greeting-left-txt-con .greeting-txt-con br{display:none;}
	.greeting-left-txt-con .greeting-txt-con span{display:block;}
}
@media all and (max-width:800px){
	.ceo-photo-deco-line-box{display:none;}
}
@media all and (max-width:480px){
	.greeting-left-txt-con{font-size:13px;}
	.greeting-left-txt-con .greeting-bold-txt{font-size:20px;}
}

/* ******************  회사소개 :: 회사소개  ********************** */
@media all and (max-width:1024px){
	/* -------- 회사소개 :: 상단 -------- */
	.intro-top-txt-con{font-size:33px}
	.intro-top-txt-con span{display:inline-block;}
	.intro-detail-txt-con{font-size:15px}
	.intro-detail-txt-con p br{display:none;}
	.intro-detail-txt-con p span{display:block;}
	/* -------- 회사소개 :: 하단 -------- */
	.business-area{font-size:13px; width:50%; padding:5% 0;}
	.business-area:nth-child(3),
	.business-area:nth-child(4){border-top:1px solid rgba(255,255,255,0.1);}
	.business-area .icon img{height:40px;}
}
@media all and (max-width:480px){
	/* -------- 회사소개 :: 상단 -------- */
	.intro-top-container{margin-bottom:45px}
	.intro-top-txt-con{font-size:20px; margin-bottom:25px;}
	.intro-detail-txt-con{font-size:13px;}
	.intro-detail-txt-con p{margin-top:25px;}
	/* -------- 회사소개 :: 하단 -------- */
	.business-area{float:none; width:auto; border-top:1px solid rgba(255,255,255,0.1);}
	.business-area:first-child{border-top:0}
	.business-area .icon{margin-bottom:15px;}
	.business-area .icon img{height:30px;}
}

/* ******************  회사소개 :: CI소개  ********************** */
@media all and (max-width:1320px){
	#ciContent .ci-anatomy-logo-container3{padding-top:5%}
}
@media all and (max-width:1024px){
	#ciContent{font-size:15px;}
	.ci-cm-tit{margin-bottom:1.5em;}
	.ci-basic-txt br{display:none;}
	/* CI소개 :: 상단 */
	.ci-top-container{margin-bottom:15%}
	.ci-top-container .ci-top-txt2{margin-bottom:2em}
	/* CI 소개 :: 로고 소개 00 */
	.ci-anatomy-logo-container{margin-bottom:15%;}
	.ci-anatomy-logo-container .anatomy-logo-con{margin-bottom:5%;}
	.ci-anatomy-logo-container .anatomy-logo-con span{width:175px;}
	.ci-anatomy-logo-container .anatomy-logo-con span:first-child{margin-right:80px; }
	.ci-anatomy-logo-container .anatomy-logo-con span:first-child:after{width:80px; background-size:80px auto; }
	.ci-anatomy-logo-container .anatomy-logo-con span img{width:100%;}
	/* CI 소개 :: 로고 소개 01 */
	.ci-anatomy-logo-container2{padding:15% 15px;}
	.ci-anatomy-logo-container2 .ci-logo-img{width:70%; margin:0px auto 10%;}
	.ci-anatomy-logo-container2 .ci-logo-img img{max-width:100%;}
	/* CI 소개 :: 로고 소개 02 */
	.ci-anatomy-logo-container3{margin-top:15%;}
	.ci-anatomy-logo-container3 .anatomy-color-item{width:175px; height:175px; margin:0 15px;}
}
@media all and (max-width:480px){
	#ciContent{font-size:13px;}
	/* CI소개 :: 상단 */
	.ci-top-container .ci-top-txt{font-size:2em}
	.ci-top-container .ci-top-txt2{font-size:1em}
	/* CI 소개 :: 로고 소개 00 */
	.ci-anatomy-logo-container .anatomy-logo-con {width:140px; margin:0px auto 10%;}
	.ci-anatomy-logo-container .anatomy-logo-con span{display:block; width:140px;}
	.ci-anatomy-logo-container .anatomy-logo-con span:first-child{margin-right:0px; margin-bottom:80px; }
	.ci-anatomy-logo-container .anatomy-logo-con span:first-child:after{left:50%; top:100%; margin-top:20px; height:30px; margin-left:-40px;}
	.ci-anatomy-logo-container .anatomy-logo-con span em{margin:10px -50% 0;}
	/* CI 소개 :: 로고 소개 02 */
	.ci-anatomy-logo-container3 .anatomy-logo-color{margin-bottom:10%}
	.ci-anatomy-logo-container3 .anatomy-color-item{width:140px; height:140px; margin:0 5px}
}

/* ******************  회사소개 :: 오시는길  ********************** */
/* -------- 회사소개 :: 오시는길 -------- */
@media all and ( max-width:800px ){
    /* 오시는길 :: 상단 */
    .map-script-wrapper{height:300px; margin-bottom:15px;}
    .map-script-wrapper .map-script-con{height:300px; margin-top:-150px;}
    /* 오시는길 :: 하단정보1 */
    .map-tbl th,.map-tbl td{padding:15px 10px; font-size:13px; vertical-align:top;}
    .map-tbl th{width:60px}
}

/* **************************
* 제품소개 *
************************** */
/* ******************  제품 리스트 ********************** */
@media all and ( max-width: 1536px ){
	/* 제품리스트 :: 타이틀 */
	.product-container .prd-list-tit{padding-left:60px}
	.product-container .prd-list-tit:before{left:0;}
}
@media all and ( max-width: 1024px ){
	/* 제품리스트 :: 리스트 */
	.product-list-box ul{margin-right:-4px}
	.product-list-box .prd-list-item{width:100%}
	.product-list-box .prd-list-item a{padding:10% 0 20%}
}
@media all and ( max-width: 800px ){
	/* 제품리스트 :: 타이틀 */
	.product-container .prd-list-tit{font-size:29px; padding-left:30px; margin-bottom:5%}
	.product-container .prd-list-tit:before{width:20px;}
}
@media all and ( max-width: 480px ){
	/* 제품리스트 :: 타이틀 */
	.product-container .prd-list-tit{font-size:23px}
	/* 제품리스트 :: 리스트 */
	.product-list-box ul{margin-right:-3px}
	.product-list-box .prd-list-item{width:100%}
	.product-list-box .prd-list-item a{font-size:15px}
}

/* ******************  제품 뷰페이지 ********************** */


@media all and ( max-width: 1366px ){
	/* 제품 상세 :: 통이미지 */
	.prd-detail-img-box{margin-top:5%;}
	.prd-detail-img-box img{max-width:100%;}
}
@media all and ( max-width: 1024px ){
	#productTopCon{padding:3% 0 10%; border-bottom:0}
	/* -------- 제품 뷰 :: 상단 -------- */
	.prd-info-inner-container{display:block}
	.left-prd-photo-con{display:block; width:auto; max-width:580px; margin:0px auto; }
	.right-prd-info-con{display:block; width:auto; text-align:center;}
	.right-prd-info-con .prd-name{font-size:30px; margin-bottom:20px;}
	.right-prd-info-con .prd-sub-txt,
	.right-prd-info-con .prd-spec-tag span{font-size:14px;}
	/* -------- 제품 뷰 :: 하단 -------- */
	#productDetailCon {margin-top:0}
	#productDetailCon .sub-cm-tab-wrapper{margin:0 -16px}
	.prd-view-tab-container{font-size:14px}
	/* 제품 상세 :: Box 디자인 */
	.prd-detail-info-box1.col2 .prd-detail-info-box1-inner,
	.prd-detail-info-box1.col3 .prd-detail-info-box1-inner{float:none; width:auto}
	.prd-detail-info-box1.col2 .prd-detail-info-box1-inner:first-of-type{padding-bottom:0; margin-bottom:0.5em}
	.prd-detail-info-box1.col2 .prd-detail-info-box1-inner:last-of-type{padding-top:0}
	/* 제품 상세 :: 권함/피함 */
	.col2 .prd-detail-recom-box{float:none; width:100%;}
}
@media all and ( max-width: 800px ){
	/* 제품 상세 :: 타이틀디자인, 텍스트 */
	.prd-view-tab-container .prd-detail-tit:after{width:5px; height:5px; margin-left:5px;}
	/* 제품 상세 :: Bullet스타일 */
	.prd-view-tab-container .excla-bullet{padding-left:30px;}
	.prd-view-tab-container .excla-bullet:before{top:0px;font-size:15px; width:24px; height:24px; line-height:24px;}
	.prd-view-tab-container .tip-bullet{padding-left:60px;}
	.prd-view-tab-container .tip-bullet:before{width:50px; height:20px; line-height:20px; top:1px;}
	/* 제품 상세 :: Box 디자인 */
	.prd-detail-info-box1 .prd-detail-info-box1-inner{padding:15px;}
	.prd-detail-info-box2 dd{padding:15px 0}
	.prd-detail-info-box2.col2{float:none; width:auto}
	/* 제품 상세 */
	.prd-detail-recom-box dl dt{padding:15px; line-height:1.3}
	.prd-detail-recom-box dl dt > span:before{top:10px;}
	/* 제품 상세 :: 통이미지 */
	.prd-detail-img-box img{width:800px; max-width:none;}
}
@media all and ( max-width: 480px ){
	/* -------- 제품 뷰 :: 하단 -------- */
	.prd-view-tab-container{font-size:13px; margin-top:4em}

	/* 제품 상세 :: Bullet스타일 */
	.prd-view-tab-container .circle-bullet-large{padding-left:10px;}
	.prd-view-tab-container .circle-bullet-large:before{width:4px; height:4px; top:9px;}
}


/* -------- 제품 뷰 :: 제품별 스타일 -------- */
@media all and ( max-width: 1366px ){
	/*  ::  */
	.marin-function-inner{max-width:900px}
}
@media all and ( max-width: 1024px ){
	/*  ::  */
	.smeal-spec-list-con .smeal-spec-item{padding:20px 10px; box-sizing:Border-box;}
	.smeal-spec-list-con .smeal-spec-item .icon{width:60px; height:60px; line-height:60px; margin:0 auto 10px; }
	.smeal-spec-list-con .smeal-spec-item .icon img{height:60px;}
	.smeal-spec-list-con .smeal-spec-item dl dt{margin-top:3px;}

	/*  ::  */
	.marine-function-con .marin-function-item{float:none; display:inline-block; vertical-align:middle; margin:0 10px;}
	.marine-function-con .marin-function-img{display:block; margin-top:15px;}

	/*  ::  */
	.herb-eat-guide-list{margin:0}
	.herb-eat-guide-list li,
	.herb-eat-guide-list.col4 li{margin:0 0 5px 0; float:none; width:auto;}

	/*  ::  */
	.prd-evanen-func-box{margin:0;}
	.evanen-func-con{overflow:hidden; float:none; width:auto; margin:0 0 10px 0; padding:25px 15px;}
	.evanen-func-con .icon{margin-right:25px}
	.evanen-func-con .icon img{width:60px}
	.evanen-func-con .evanen-func-info{width:calc(100% - 90px)}
}
@media all and ( max-width: 800px ){
	/*  ::  */
	.eat-guide-timeline-con .timeline-list-con li .time{padding-left:20px; width:80px;}
	.eat-guide-timeline-con .timeline-list-con li{padding-left:95px}
	/*  ::  */
	.smeal-spec-list-con{margin:0}
	.smeal-spec-list-con .smeal-spec-item{float:none; overflow:hidden; width:auto; text-align:left; margin:0 0 10px 0;}
	.smeal-spec-list-con .smeal-spec-item .icon{float:left; margin-right:15px; margin-bottom:0 ; margin-top:-3px;}
	.smeal-spec-list-con .smeal-spec-item dl{float:left; width:calc(100% - 80px);}
	/*  ::  */
	.marine-function-con .marin-function-item{width:150px; height:150px;}
	.marine-function-con .marin-function-img img{max-width:100%;}
	/*  ::  */
	.herb-eat-guide-list li{padding:15px;}
}
@media all and ( max-width: 480px ){
	/*  ::  */
	.marine-function-con .marin-function-item{width:100px; height:100px; border-width:5px; margin:0 5px; font-size:1.2em}
}
/* -------- 제품 뷰 :: ODM OEM -------- */
@media all and ( max-width: 800px ){
	#oemViewContainer{margin:50px 15px;}
	#oemViewContainer .modal-close-btn {top:-30px;}
	.oem-photo-con{float:none; width:auto;}
	.oem-info-con{float:none; width:auto; padding:30px 20px;}
	.oem-info-con .oem-name{font-size:25px; margin-bottom:20px;}
	.oem-info-con .oem-info-box{font-size:13px;}
}

/* -------- 제품 뷰 :: ODM OEM(200821) -------- */
@media all and ( max-width: 1366px ){
	.odm-oem-photo-box img{max-width:100%;}
}
@media all and ( max-width: 1024px ){
	.odm-oem-photo-box,
	.odm-oem-photo-box.mar0{float:none; width:auto; margin:5% 15px; text-align:center; }
	.odm-oem-info-tbl-box{float:none; width:100%;}
}
@media all and ( max-width: 800px ){
	.odm-oem-info-tbl th,
	.odm-oem-info-tbl td{padding:12px 0; font-size:14px; }
	.odm-oem-info-tbl td{padding-left:15px !important;}
}
@media all and ( max-width: 480px ){
	.odm-oem-photo-box,
	.odm-oem-photo-box.mar0{margin:10% 15px;}
	.odm-oem-info-tbl colgroup{display:none;}
	.odm-oem-info-tbl th,
	.odm-oem-info-tbl td{display:block; font-size:13px;}
}

/* **************************
* 연구소 소개 *
************************** */
/* ******************  연구소 소개 ********************** */
@media all and (max-width:1024px){
	.rnd-intro-wrapper{padding:10% 0;}
	.rnd-intro-wrapper h4{font-size:26px;}
	.rnd-intro-txt{font-size:20px}
	.rnd-activity-list-con li .rnd-info-box{font-size:20px;}
	.rnd-activity-list-con li .rnd-info-box dt{font-size:20px;}
	.rnd-activity-list-con li .rnd-info-box dd{font-size:13px;}
	.rnd-activity-list-con li .rnd-info-box dd br{display:none;}
}
@media all and (max-width:800px){
	.rnd-intro-wrapper h4{margin-bottom:20px;}
	.rnd-intro-txt{font-size:15px; padding:0 15px;}
	.rnd-activity-list-con{max-width:370px; margin:0px auto;}
	.rnd-activity-list-con li{float:none; width:auto; margin-bottom:20px;}
	.rnd-activity-list-con li .rnd-info-box{padding-top:15px;}
}

/* ******************  핵심기술/역량 ********************** */
@media all and (max-width:1220px){
	/*  */
	.healthy-project-detail-list li{padding-right:0}
	.healthy-project-detail-list li br{display:none;}
	.rnd-healty-img-con{position:static; margin-top:5%; max-width:600px; margin:5% auto 0; box-shadow:none; border:1px solid #eee;}
	.rnd-healty-img-con img{max-width:100%;}
}
@media all and (max-width:1024px){
	/*  */
	.rnd-healty-project-con1{padding-bottom:10%; margin-bottom:10%;}
	.healthy-tit-con{padding:70px 0 50px;}
	.healthy-tit-con h4{font-size:40px;}
	.healthy-tit-con h4:before{top:-25px; height:2px; width:50px}
	.healthy-project-detail-list li{margin-top:35px; }
	.healthy-project-detail-list li dl{font-size:14px;}

	/*  */
	.rnd-healty-project-con2 h4{font-size:30px; line-height:1.5}
	.rnd-healty-project-effect{margin:0%}
	.healty-project-effect-item{float:none; width:auto; margin:0 0 5px 0;}
	.healty-project-effect-item dl{height:auto; padding-left:80px; font-size:13px;}
	.healty-project-effect-item dl:before{left:20px; width:40px; height:38px; background-size:40px 38px}
	.rnd-healthy-project-txt{font-size:15px;}	
}
@media all and (max-width:800px){
	/*  */
	.healthy-tit-con h4{font-size:30px;}
	.healthy-project-detail-list li dl{font-size:13px;}
	.healthy-project-detail-list li dl dt{margin-bottom:0.5em}

	/*  */
	.rnd-healty-project-con2 h4{font-size:24px;}
	.rnd-healthy-project-txt{font-size:13px;}	
}