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


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

/* -------- 공통 Fixed Move Tab -------- */
@media all and (max-width:1220px){
	.fixed-move-tab-list.fixed{top:80px;}
}
@media all and (max-width:800px){
	.fixed-move-tab-list ul li a{height:40px; line-height:40px; font-size:14px;}
}
@media all and (max-width:480px){
	.fixed-move-tab-list.fixed{top:60px;}
}





/* ****************** about us ::  Introduction ********************** */
@media all and ( max-width:1500px ){
	ul.intro-award-list{margin: 0 0;}
	.intro-award-list{padding: 0 100px;}
	.intro-award-list .slick-prev{margin-left: 0;} 
	.intro-award-list .slick-next{margin-right: 0;} 
}
@media all and ( max-width:1320px ){
	.intro-up-con.center-up-con .img-con{width: 47%; margin-right: 0;}
}
@media all and ( max-width:1024px ){
	.intro-up-con.center-up-con .img-con{width: 100%;}
	.intro-up-con.center-up-con .txt-con{margin-top: 20px; width: 100%;}
}
@media all and ( max-width:800px ){
	.intro-cm-tit{margin-bottom: 25px; line-height: 45px; font-size: 20px;}
	
	.intro-mission-con{margin-top: 30px;}
	.intro-bnr{padding-top: 40%; background: url("/images/content/intro_img02.png") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
	.intro-bnr-txt{top: 7%; left: 3%; right: 3%;}
	.intro-bnr-txt .txt01{font-size: 16px;}
	.intro-bnr-txt .txt02{margin-top: 10px; font-size: 14px;}

	.intro-award-con{margin-top: 40px;}
	.intro-award-list{padding: 0 45px;}
	ul.intro-award-list li{margin: 0 10px;}
	ul.intro-award-list li .txt-con{border: 2px solid #fff;}
	ul.intro-award-list li .txt-con .inner{padding: 15px 20px; height: 170px;}
	ul.intro-award-list li .txt-con .year{font-size: 18px;}
	ul.intro-award-list li .txt-con .txt{margin-top: 15px; font-size: 13px; line-height: 1.6;}

	.intro-award-list .slick-arrow{margin-top: -20px;}
	.intro-award-list .slick-arrow img{height: 40px;}
}
@media all and ( max-width:480px ){
	.intro-bnr{padding-top: 60%; background: url("/images/content/intro_img02.png") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
	.intro-bnr-txt .txt01{font-size: 14px;}
	.intro-bnr-txt .txt01 br{display: none;}
	.intro-bnr-txt .txt02{margin-top: 10px; font-size: 12px;}
	.intro-bnr-txt .txt02 br{display: none;}

	.intro-award-list{padding: 0 35px;}
	ul.intro-award-list li .txt-con .inner{height: 240px;}
	.intro-award-list .slick-arrow{margin-top: -15px;}
	.intro-award-list .slick-arrow img{height: 30px;}
}






/* ****************** about us :: R&BD Center ********************** */
@media all and ( max-width:1320px ){
	.center-up-con .img-con{width: 47%; margin-left: 0;}
}
@media all and ( max-width:1024px ){
	.center-up-con .img-con{width: 100%;}
	.center-up-con .txt-con{margin-top: 20px; width: 100%;}
}
@media all and ( max-width:800px ){
	.center-up-con .txt-con h5{font-size: 31px; line-height: 1.1;}
	.center-up-con .txt-con .txt01{margin-top: 15px; font-size: 15px; line-height: 1.4;}
	.center-up-con .txt-con .txt02{margin-top: 10px; font-size: 13px; line-height: 1.6;}

	.center-down-tit{margin-top: 65px; font-size: 20px;}
	.center-down-tit.mt-short{margin-top: 35px;}
	.center-down-con{margin-top: 20px;}
	.center-down-con ul{margin: -10px -1.5%;}
	.center-down-con ul li{width: 47%; float: left; margin: 10px 1.5%;}
	.center-down-con ul li:nth-child(3n+1){clear: none;}
	.center-down-con ul li:nth-child(2n+1){clear: both;}
	.center-down-con ul li p{padding: 15px 5px; font-size: 13px; line-height: 1.3;}

	.center-down-sub-tit{margin-top: 25px; font-size: 15px; line-height: 1.4;}
	.center-middle-con{margin-top: 25px;}
	.center-middle-con ul{margin: -10px -1.25%;}
	.center-middle-con ul li{width: 47.5%; margin: 10px 1.25%;}
	.center-middle-con ul li .img-con{position: relative; width: 100%; height: 0; padding-top: 52%;}
	.center-middle-con ul li .img-con img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.center-middle-con ul li .txt-con .inner{padding: 15px;}
	.center-middle-con ul li .txt-con .tit{font-size: 15px; line-height: 1.4;}
	.center-middle-con ul li .txt-con .txt{margin-top: 10px; font-size: 13px; line-height: 1.6;}
}
@media all and ( max-width:480px ){
	.center-middle-con ul li{width: 97.5%;}
}



/* ****************** about us :: 오시는길 ********************** */
@media all and ( max-width:800px ){
	/* 오시는길 :: 상단 */
	.map-script-wrapper{height:300px; margin-bottom:15px;}
	.map-script-wrapper .map-script-con{height:300px; }
	/* 오시는길 :: 다른지도링크 */
	.map-other-link-box ul li{width:31%; margin-left:1%; font-size:15px; max-width:180px;}
	/* 오시는길 :: 하단정보1 */
	.map-tbl th,.map-tbl td{padding:15px 10px; font-size:13px; vertical-align:top;}
	.map-tbl th{width:60px}
	/* 오시는길 :: 하단정보2 */
	.location-info{padding:15px 0;}
	.location-info .location-info-box{font-size:13px;}
	.location-info .location-info-box dt{width:80px; }
	.location-info .location-info-box dd{width:calc(100% - 110px);}
	/* 오시는길 :: 하단정보3 */
	.location-list > li > dl > dt span{font-size:15px;}
	.location-list > li > dl > dt span i{font-size:18px;}
	.location-list > li > dl > dd{font-size:13px; line-height:18px;}
}




/* ****************** product :: product_list ********************** */
@media all and (max-width:1300px){
	/* 제품리스트 */
	.prd-info-wrapper{width: calc(100% - 20px);}
}
@media all and (max-width:1220px){
	ul.prd-tab-list li{width: 17.5%;}
	/* 제품리스트 */
	ul.prd-info-list li a{height: 0; padding-top: 52%;}
	ul.prd-info-list li a .prd-inner .img-con{position: absolute; top: 0; left: 0; padding-top: 52%;}
	ul.prd-info-list li a .prd-inner .txt-con{bottom: auto; top: 15%; height: 240px; padding: 30px 35px 0;}
	.prd-up-con.area {padding-bottom: 205px;}
}
@media all and (max-width:1024px){
	/* 제품리스트 */
	.prd-info-wrapper{width: 100%;}
	ul.prd-info-list li a .prd-inner .txt-con p{display: none;}
	ul.prd-info-list li a .prd-inner .txt-con{width: 50%; top: 0; height: 0; padding-top: 52%; right: 0;}
	ul.prd-info-list li a .prd-inner .txt-con .txt{position: absolute; width: 76%; top: 50%; left: 12%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
}
@media all and (max-width:800px){
	.prd-tab-con{padding-top: 5px;}
	ul.prd-tab-list{margin-top: -3px;}
	ul.prd-tab-list li{display: inline-block; width: 30%; margin: 3px;}
	ul.prd-tab-list.half li{width: 47%;}
	ul.prd-tab-list li a{height: 40px; font-size: 13px; line-height: 1.3;}
	ul.prd-tab-list li a span{padding: 0 5px;}
	/* 제품리스트 */
	.prd-info-wrapper{margin-top: 40px;}
	ul.prd-info-list{margin: -15px -2%;}
	ul.prd-info-list li{float: left; width: 96%; margin: 15px 2%;}
	ul.prd-info-list li a .prd-inner .txt-con{border-top: 2px solid #999;}
	ul.prd-info-list li a .prd-inner .txt-con:before{height: 2px; top: -2px;}
	ul.prd-info-list li a .prd-inner .txt-con h1{font-size: 17px; line-height: 22px;}
	ul.prd-info-list li a .prd-inner .txt-con p{display: block; margin-top: 15px; font-size: 13px; line-height: 19px; height:38px;}
	ul.prd-info-list li a .prd-inner .txt-con span{margin-top: 15px; display: block; font-size: 12px;}
	ul.prd-info-list li a .prd-inner .txt-con span i{font-size: 16px;}
	ul.prd-info-list li a .prd-inner .txt-con span em{margin-left: 10px;}
	.prd-up-con.area {padding-bottom: 100px;}
}
@media all and (max-width:359px){
	ul.prd-info-list li a .prd-inner .txt-con p{display: none;}
}



/* ****************** product :: product_view ********************** */
/* 상단 */
@media all and (max-width:1024px){
	.prd-info-txt .btn-list li{margin-left: 9%;}
	.prd-info-txt .btn-list li a img{height: 40px;}
	.prd-info-txt .btn-list li a span{margin-left: 10px;}
}
@media all and (max-width:800px){
	.thum-prd-img-con{width:100%; float: left;}
	.thum-prd-img-con .large-thum{width:100%; text-align:center;} /* 이미지 크기에따라 높이값 조절 */
	.thum-prd-img-con .large-thum img{width:100%;}
	.thum-prd-img-con .small-thum-list{width: 100%; padding: 10px 0;}

	.thum-prd-info-con{width: 100%; float: right;}
	.prd-info-tit{position: relative; padding-left: 0;}
	.prd-info-tit h5{position: relative; display: inline-block; padding-bottom: 15px; font-size: 25px; line-height: 1.2;}
	.prd-info-tit h5:before{width: 15px; height: 3px; margin-top: 15px; margin-bottom: 12px;}
	.prd-info-txt{padding-left: 0;}
	.prd-info-txt .txt01{margin-top: 20px; font-size: 25px; line-height: 1.2;}
	.prd-info-txt .txt02{margin-top: 10px; font-size: 13px; line-height: 1.4;}
	.prd-count-list li{float: left; margin-top: 15px;}
	.prd-count-list li:first-child{margin-right: 45px;}
	.prd-info-txt .price{padding-left: 60px; position: relative; font-size: 15px; line-height: 27px;}
	.prd-info-txt .quantity{padding-left: 80px; font-size: 15px; line-height: 27px;}
	.prd-count-total{margin-top: 10px; padding-top: 15px; font-size: 15px;}
	.prd-info-txt table{margin-top: 25px;}
	.prd-info-txt table th, .prd-info-txt table td{padding: 10px 15px; font-size: 12px; line-height: 1.4;}
	.prd-info-txt table th{width: 36%;}
	.prd-info-txt .btn-list{margin-top: 25px;}
	.prd-info-txt .btn-list li{margin-left: 9%;}
	.prd-info-txt .btn-list li:first-child{margin-left: 0;}
	.prd-info-txt .btn-list li a img{height: 30px;}
	.prd-info-txt .btn-list li a span{margin-left: 10px; font-size: 12px;}

	/* 추가된 옵션 컨텐츠 */
	.new-option-con{margin-top: 15px;}
	.new-option-con .tit-con{position: relative; padding-left: 80px;}
	.new-option-con .tit-con .tit{font-size: 15px; line-height: 27px;}
	.new-option-con .tit-con select{width: 100%; height: 28px; font-size: 12px; text-indent: 10px;}
	ul.option-list-con{margin-top: 15px;}
	ul.option-list-con li{padding: 11px 0;}
	ul.option-list-con li p{padding-right: 15px; width: calc(100% - 115px); font-size: 12px; line-height: 20px; margin-top: 4px;}
	.prd-count-total.add-css{border-top: none; margin-top: 0;}
}
@media all and (max-width:480px){
	.prd-count-list li{float: left; width: 100%; margin-top: 5px;}
	.prd-count-list li:first-child{margin-right: 0; margin-top: 15px;}
}
/* 하단 */
@media all and (max-width:800px){
	/* 하단 :: 탭 */
	.sub-prd-tab-con{position: relative; top: -47px; height: 47px;}
	ul.editor-tab-list.fixed{position: fixed; top: 59px; left: 0; z-index: 10;}
	ul.editor-tab-list{/* top: -47px; */}
	ul.editor-tab-list li a{height: 45px; font-size: 14px; line-height: 1.2;}
	/* 하단 :: 공통사항 */
	.prd-con-wrapper{margin-top: -47px;}
	.cm-prd-con{padding: 35px 0;}
	.cm-prd-con .tit{margin-bottom: 15px; font-size: 25px;}
	/* 하단 :: 텍스트 설명 */
	ul.prd-txt-list li{margin-top: 5px; padding-left: 15px; font-size: 13px;}
	ul.prd-txt-list li:before{top: 7px; width: 3px; height: 3px;}
	/* 하단 :: 테이블 설명 */
	.prd-txt-table th, .prd-txt-table td{padding: 15px; font-size: 14px; line-height: 1.3; -ms-word-break: break-all; word-break: break-all;}
	.prd-txt-table th{width: 33%;}
	/* 하단 :: 관련제품 */
	ul.sub-prd-list{margin: 0 -3.75%;}
	ul.sub-prd-list li{float: left; width: 25.83%; margin: 0 3.75%;}
	ul.sub-prd-list li a{display: block;}
	ul.sub-prd-list li a .img{display:block; position: relative; height: 0; padding-top: 100%;}
	/* ul.sub-prd-list li a .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} */
	ul.sub-prd-list li a p{padding: 5px 5px 0; font-size: 15px;}
}




/* ****************** inquiry ********************** */
@media all and (max-width:800px){
	.custom-checkbox01 .checkbox-item{width:50%;}
	.custom-checkbox01 .checkbox-item:last-child{width:100%;}
	.order-form-tbl th{font-size: 13px;}
	.custom-checkbox01 .checkbox-item label{font-size: 12px;}
	.order-form-tbl .select-basic{width: 40% !important;}
}
@media all and (max-width:640px){
	.order-form-tbl th.pc-th{display: none;}
	.order-form-tbl th.m-th{display: table-cell;}
}
@media all and (max-width:480px){
	.custom-checkbox01 .checkbox-item{/*width:100%;*/}
}