@charset "utf-8";
/* CSS Document */
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 CSS
 * date : 2020-06-29
******************************************************** */
/******************* 메인 공통 ***********************/
.main_sec { padding-top:80px; position:relative;}
.main_sec .titlebox{margin-bottom:56px; text-align:center; position:relative;}
.main_sec .titlebox .sub_title{margin-bottom:16px; line-height:20px; color:#ef860d; font-size:18px; letter-spacing:0;}
.main_sec .titlebox h2{line-height:50px; color:#000; font-size:44px; font-weight:200; letter-spacing:-0.05em;}
.main_sec .titlebox h2 strong{font-weight:600;}
.main_sec .titlebox .lt_more{display:block; position:absolute; top:50%; right:35px; width:50px; height:50px; border:1px solid #a7a7a7; color:transparent; font-size:0; margin-top:-25px}
.main_sec .titlebox .lt_more:before{display:block; position:absolute; top:calc(50% - 12px); left:calc(50% - 12px); width:24px; height:24px; background:url(../../img/more.png) no-repeat left top; content:''; transition:transform 300ms ease-in-out;}
.main_sec .titlebox .lt_more:hover:before{transform:rotate(180deg);}
.main_sec .titlebox.notice-detai {float: none;position: absolute;right: 0; top: 0; width: auto;margin: 0;}
.main_sec .titlebox.notice-detai .lt_more{right: 0;top:0; margin:0; border-bottom:0; border-color:#ddd}
/* main visual */
.main_visual {width:100%; position:relative;}
.main_visual .main_slide {width:100%;}
.main_visual .bx-wrapper .bx-viewport {left:0; border:none; box-shadow:none;}
.main_visual .main_slide {position:relative;}
.main_visual .main_slide ul li {position:relative; min-height:73vh; height:73vh}
.main_visual .main_slide ul li.main_s0{background:url('../../img/main_s_img01.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li.main_s1{background:url('../../img/main_s_img02.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li.main_s2{background:url('../../img/main_s_img03.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li .img {width:100%; height:100%;}
.main_visual .main_slide ul li .txt {}
.main_visual .main_slide ul li .txt .tit {font-size:60px; color:#363636;font-weight:500; line-height:120%; position:relative;}
.main_visual .main_slide ul li .txt .tit h3{margin-bottom:1.2%;}
.main_visual .main_slide ul li .txt .tit:after { content:"";display:block;width:45px; height:2px;background:#363636; margin:20px 0;}
.main_visual .main_slide ul li .txt p {font-size:20px; color:#363636;}
.main-more-btn {background-image: linear-gradient(45deg, #fff 50%, transparent 50%); background-position: 99%; background-size: 400%;-webkit-transition: color 300ms, background 300ms ease-in-out; -moz-transition: color 300ms, background 300ms ease-in-out; -o-transition: color 300ms, background 300ms ease-in-out; -ms-transition: color 300ms, background 300ms ease-in-out;transition: color 300ms, background 300ms ease-in-out;display: inline-block; min-width:180px;font-size:15px;font-weight: 300; color: rgba(0,0,0,0.8);font-weight: 500;padding: 15px 37px 15px 22px;border: 2px solid rgba(0,0,0,0.7); position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top:1.7%}
.main-more-btn .arrow {position: absolute;right: 20px;top: 50%; margin-top: -12px;}
.main-more-btn:hover { background-position: 1%; color: #333;}
.main_visual .bx-controls {position: absolute; top:45%; left: 0;z-index: 52;width: 100%;box-sizing: border-box;padding: 0 3% ;}
.main_visual .bx-wrapper .bx-pager {z-index:52;position: absolute;width: 100%; top: 100%;margin-top: 300px;}
.main_visual .bx-wrapper .bx-pager .bx-pager-item {display:inline-block; margin:0 5px}
.main_visual .bx-wrapper .bx-pager .bx-pager-item:last-child {margin-bottom:0;}
.main_visual .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:before {display:none;}
.main_visual .bx-wrapper .bx-pager.bx-default-pager a.active {position:relative;}
.main_visual .bx-wrapper .bx-controls-direction{ width:100%; position:relative; }
.main_visual .bx-wrapper .bx-controls-direction a {display:block; transform:translateY(-50%) ;width:31px; height:61px;}
.main_visual .bx-wrapper .bx-next {background:url("../../img/main_s_next.png") no-repeat center;background-size:100%; margin-top:35px; right:0;}
.main_visual .bx-wrapper .bx-prev {background:url("../../img/main_s_prev.png") no-repeat center;background-size:100%; margin-top:20px;}
/*슬라이드 텍스트 효과*/
/*
.main_visual .main_slide ul li .txt {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%) ; text-align:center; }
.main_visual .main_slide ul li .txt .tit {font-size:66px; color:#ffffff;font-weight:600; line-height:100%; opacity:0; transition:all 1s; transform:translateY(30px);}
.main_visual .main_slide ul li .txt .tit.on {opacity:1; transform:translateY(0);}
.main_visual .main_slide ul li .txt p {font-size:20px; color:#ffffff; letter-spacing:-0.2px;opacity:0; transition:all 1s 0.2s;; transform:translateY(30px)}
.main_visual .main_slide ul li .txt p.on {opacity:1; transform:translateY(0);}
*/
/* main 점포소식 */
#main_sec02 .area-box{ /*background:#fff;padding-bottom:45px;*/}
#main_sec02:after{ content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:30%; background:#f4efe9; z-index:-1}
#main_sec02 .area-box .area{background: #fff;padding: 0 3% 3.7%; box-sizing: content-box;}
#main_sec03{position:relative; background-color:#f4efe9; padding-bottom:80px}
#main_sec03 .area-box{}
/*퀵메뉴*/
.quick{position:relative;}
.quick .quick_control{ display:none}
.quick .quick_control button{display:block; position:absolute; top:calc(50% - 18px); width:36px; height:36px; margin:0; padding:0; border:none; background-repeat:no-repeat; background-image:url(../../img/quick_controls.png); color:transparent; font-size:0; z-index:11; transition:opacity 200ms ease-in-out;}
.quick .quick_control button.prev{left:0; background-position:left center;}
.quick .quick_control button.next{right:0; background-position:right center;}
.quick .quick_control button.slick-hidden{opacity:0.6;}
.quick .quick_list .quick_item a{display:block; position:relative; text-align:center; color:#34363a;}
.quick .quick_list .quick_item a:before{display:block; width:131px; height:131px; margin:0 auto 16px; background-repeat:no-repeat; background-image:url(../../img/quick_icons.png); content:'';padding: 0px 8%; box-sizing: border-box;}
.quick .quick_list .quick_item.item01 a:before{background-position:left top;}
.quick .quick_list .quick_item.item02 a:before{background-position:-131px top;}
.quick .quick_list .quick_item.item03 a:before{background-position:-262px top;}
.quick .quick_list .quick_item.item04 a:before{background-position:-393px top;}
.quick .quick_list .quick_item.item05 a:before{background-position:-524px top;}
.quick .quick_list .quick_item.item06 a:before{background-position:-655px top;}
.quick .quick_list .quick_item.item07 a:before{background-position:-786px top;}
.quick .quick_list .quick_item.item08 a:before{background-position:-917px top;}
.quick .quick_list .quick_item a:hover:before{transform:rotateY(360deg); transition:transform 300ms ease-in-out;}
.quick .quick_list .quick_item a .text{display:block; font-size:18px; letter-spacing:-0.03em;}
.quick .thumnailbox{display:none; margin-top:16px;}
.quick .thumnailbox ul{line-height:0; text-align:center; font-size:0;}
.quick .thumnailbox ul li{display:inline-block; width:11px; margin:0 2px; vertical-align:top;}
.quick .thumnailbox ul li button{display:block; width:100%; height:11px; margin:0; padding:0; border-width:2px; border-style:solid; border-color:#42464d; border-radius:11px; overflow:hidden; color:transparent; font-size:0; transition:background-color 200ms ease-in-out;}
.quick .thumnailbox ul li.slick-active button{background-color:#42464d;}
/*공지사항 등 최신글*/
#main_sec04  > div{ height:345px; overflow:hidden; box-sizing:border-box;}
#main_sec04 .inner_wrap{float:left;position: relative; height:100%;}
#main_sec04 .inner_wrap.left-box{width: calc(100% - 400px);}
#main_sec04 .inner_wrap.right-box{  width:350px;float:right;}
#main_sec04 .inner_wrap.right-box .banner-img img{ width:100%; }
#main_sec04 .main-slide-banner{ position:relative; width:100%;}
.slide-arrow-box{position: absolute;z-index: 999;right: 0;bottom: 0;width: auto;text-align: center;}
.slide-arrow-box .inner{ position:relative;}
.slide-arrow-box .inner p{float: left;display: block; background: rgba(0,0,0,0.7); width: 50px;height: 50px; line-height: 50px; margin-left: 1px; color: #fff; cursor:pointer;}
.slide-arrow-box .inner p i{ font-size:18px}
#main_sec04 .main-slide-banner .banner-img-m{ display:none}

@media all and (max-width:1600px) {
.area-box, .area {padding: 0 15px;max-width:100%}	
/* ****************** visual ********************** */
.main_visual .bx-controls{ padding:0 1%}
.main_visual .main_slide ul li .area-box{padding: 0 10.5%;}
}
@media all and (max-width:1400px) {
	
}
@media all and (max-width:1350px) {
.main_visual .bx-wrapper .bx-controls-direction a { height:40px; }		
#main_sec03 .area-box{ width:95%;}
.quick .quick_list{padding:0 60px}

}
@media all and (max-width:1280px){
/*공통*/
.main_sec{ padding-top:50px}	
#main_sec02.main_sec .titlebox .lt_more{width:40px; height:40px; margin-top:-20px}s
.main_sec .titlebox .lt_more:before{top:calc(50% - 9px); left:calc(50% - 9px); width:18px; height:18px; background-position:left top; background-size:auto 18px;}
.main_visual .main_slide ul li .txt .tit{ font-size:48px}	
.main_visual .main_slide ul li .txt p{ font-size:16px}
#main_sec03{ padding-bottom:50px}
.quick .quick_control{ display:block;}
}
@media all and (max-width:1200px){
.main_sec .titlebox .sub_title{ margin-bottom:5px}	
.main_sec .titlebox h2{ font-size:36px}	
.quick .quick_list .quick_item a:before{width:121px; height:121px; background-size:auto 121px;}
.quick .quick_list .quick_item.item01 a:before{background-position:left top;}
.quick .quick_list .quick_item.item02 a:before{background-position:-121px top;}
.quick .quick_list .quick_item.item03 a:before{background-position:-242px top;}
.quick .quick_list .quick_item.item04 a:before{background-position:-363px top;}
.quick .quick_list .quick_item.item05 a:before{background-position:-484px top;}
.quick .quick_list .quick_item.item06 a:before{background-position:-605px top;}
.quick .quick_list .quick_item.item07 a:before{background-position:-726px top;}
.quick .quick_list .quick_item.item08 a:before{background-position:-847px top;}
}
@media all and (max-width:1120px){
/*공통*/
.main_sec .titlebox{ margin-bottom:30px}	
#main_sec04.main_sec .titlebox.notice-detai .lt_more{width:40px; height:40px;}
/*공지사항 최신글 섹션*/
#main_sec04 .inner_wrap.right-box{ width:350px;}
}
@media all and (max-width:1080px) {
	
}
@media all and (max-width:990px) {
	
}
@media all and (max-width:900px) {
.main_visual .main_slide ul li .txt .tit{ font-size:30px}
.main_visual .main_slide ul li .txt p{ font-size:13px} 	
.main-more-btn{ font-size: 12px; margin-top: 4%; min-width: 150px;}
#main_sec04 .inner_wrap.left-box{width:calc(100% - 340px)}
#main_sec04 .inner_wrap.right-box{width: 300px;}
.slide-arrow-box .inner p{ width:40px; height:40px; line-height:40px}
}
@media all and (max-width:850px) {
	
}
@media all and (max-width:800px) {
/*공통*/	
.main_sec .titlebox h2{ font-size:30px}		
.main_sec .titlebox .sub_title{ font-size:15px; margin-bottom:0}

.main_visual .main_slide ul li .table-cell, .main_visual .main_slide ul li .table{ display:block;}
.main_visual .main_slide ul li .table{ padding-top:13%!important}
.main_visual .bx-wrapper .bx-controls-direction{ display:none;}	
.main_visual .main_slide ul li .area-box{ padding:0 20px}
.main_visual .main_slide ul li .txt .tit h3{ width:80px; margin-bottom:3%}
.main_visual .main_slide ul li .txt .tit:after{ margin:10px 0}
.main_visual .bx-controls{ top:75%; text-align:left}
.main_visual .bx-wrapper .bx-pager{ margin-top:0;} 
.bx-wrapper .bx-pager{ text-align:left!important; padding-left:20px}
.bx-wrapper .bx-pager.bx-default-pager a{ border-color:#f6821c;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{ background:#f6821c}
}
@media all and (max-width:768px) {
/*공통*/
/*점포소식*/
#main_sec02 .area-box{}
/*컨트롤*/
#main_sec02 .slick-arrow{width:28px; height:28px; top:42%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:99; background-size:cover !important; font-size:0; position:absolute; background-image:url(../../img/quick_controls.png); background-repeat:no-repeat; bac}
#main_sec02 .slick-arrow.slick-prev{left:-50px; background-position:left top}
#main_sec02 .slick-arrow.slick-next{right:-50px; background-position:right top}
#main_sec02 .slick-arrow i{font-size:50px; color:#434343}
.quick .quick_control{display:none;}
.quick .thumnailbox{display:block;}	
#main_sec03{padding: 30px 0 31px;}
.quick .quick_list{ padding:0;}
/*공지사항 최신글*/
#main_sec04 > div{ height:auto;}
#main_sec04 .inner_wrap.right-box, #main_sec04 .inner_wrap.left-box{ width:100%; float:none}
#main_sec04 .main-slide-banner .banner-img-pc{ display:none}
#main_sec04 .main-slide-banner .banner-img-m{ display:block; border:1px solid #ddd; box-sizing:border-box;}
}
@media all and (max-width:640px) {
#main_sec02 .area-box .area{ padding: 0 5% 30px;}
.quick .quick_list{padding:0;}
.quick .quick_list .quick_item a:before{width:85px; height:85px; margin:0 auto 6px; background-size:auto 85px;}
.quick .quick_list .quick_item.item01 a:before{background-position:left top;}
.quick .quick_list .quick_item.item02 a:before{background-position:-85px top;}
.quick .quick_list .quick_item.item03 a:before{background-position:-170px top;}
.quick .quick_list .quick_item.item04 a:before{background-position:-255px top;}
.quick .quick_list .quick_item.item05 a:before{background-position:-340px top;}
.quick .quick_list .quick_item.item06 a:before{background-position:-425px top;}
.quick .quick_list .quick_item.item07 a:before{background-position:-510px top;}
.quick .quick_list .quick_item.item08 a:before{background-position:-595px top;}
.quick .quick_list .quick_item a .text{line-height:21px; font-size:14px;}

}
@media all and (max-width:576px) {
/*공통*/
.main_sec .titlebox{ margin-bottom:18px}		
#main_sec02.main_sec .titlebox .lt_more{display:none}
/*개별*/
.main_visual .main_slide ul li.main_s0{background:url('../../img/main_m_img01.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li.main_s1{background:url('../../img/main_m_img02.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li.main_s2{background:url('../../img/main_m_img03.jpg') no-repeat center; background-size:cover;}
.main_visual .main_slide ul li .txt .tit h3{margin-bottom:4%}	
.main_visual .main_slide ul li .txt .tit{ font-size:24px}
.main_visual .main_slide ul li .txt p{ font-size:11px} 	
.main-more-btn{ font-size:11px; padding: 2% 5% 2% 3%;}	
.bx-wrapper .bx-pager.bx-default-pager a{width:8px; height:8px}
#main_sec04.main_sec .titlebox.notice-detai .lt_more{width:32px; height:32px}	
.main_sec .titlebox .lt_more:before{ width:13px; height:13px; background-size:auto 13px; top: calc(50% - 6px); left: calc(50% - 6px); }
}
@media all and (max-width:520px) {
	
}
@media all and ( max-width: 480px ) {
/*공통*/	
.main_sec{padding-top: 30px;}
.main_sec .titlebox h2{ font-size:24px;line-height: 1.5;}		
.main_sec .titlebox .sub_title{ font-size:13px;}	
.main_visual .main_slide ul li .txt .tit{ letter-spacing:-1px;}
	
}
@media all and ( max-width: 359px ) {
	

}