
/*header*/
#header {position: fixed; top: 0; left: 0; width: 100%; height: 110px; z-index: 1000;  -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;  /*border-bottom:1px solid #dfdfdf; */}
#header .header_inner {margin: 0 auto; position: relative;/*  padding-left:70px; */}
#header h1 {position:absolute; top:0; left: 3%; margin-top: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 10;}
#header.blk h1 {margin-top: 35px;}
#header h1 a {position: relative; display: block; width: 322px; height:53px;}
#header h1 a img {position: absolute; top: 0; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#header h1 a img.logo {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
.mobile_logo {display:none;}
#header .btn_allmenu {display: none;}
#header .btn_tel_m {display: none;}
#header .lang {position:absolute;right:3%;top: 30px;line-height:100px;padding:0 20px;box-sizing:border-box;z-index:1000;}
#header .lang .tt { cursor: pointer; width:100%; }
#header .lang .tt > a {color:#222; font-weight:500; font-size: 20px; display: flex; align-items: center; justify-content: space-between;}
/*#header .lang .tt img { vertical-align: text-top; margin-left: 10px;} */
#header .lang ul {display: none; position: absolute; left: 0; width: 100%; border: 1px solid #888; background: #fff; border-radius: 20px; box-sizing: border-box; overflow: hidden; transition:0.5s;}
#header .lang ul li {height: 35px; font-size: 13px; line-height: 37px;}
#header .lang ul li a {display: block; padding: 0 25px;}

#header:hover,
#header.scroll {background: #fff; }
#header.blk {height:95px;  box-shadow: #00000033 1px 1px 15px 1px;}

.sub #header {background: #fff; }

#header.blk {background: #fff; z-index:1000; border-bottom: 1px solid #eee;}
#header:hover h1 a img.logo,
#header.scroll h1 a img.logo,
#header.blk h1 a img.logo  {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#header:hover h1 a img.logo_w,
#header.scroll h1 a img.logo_w,
#header.blk h1 a img.logo_w  {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#header:hover .tt,
#header.scroll .tt,
#header.blk .tt  {border-color: #888;}
#header:hover .tt span,
#header.scroll .tt span,
#header.blk .tt span  {color: #222;}
/*#header:hover .lang ,
#header.scroll .lang {background: #b4c1c7;}
*/
#header.blk .lang {/*background: #b4c1c7; height:85px; line-height:85px;*/ top:25px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}

#header .inner {max-width:1200px;}

#topmenu {font-size: 0; white-space: nowrap; z-index: 505; /* max-width:1200px; margin:0 auto; */ width:85%; padding:15px 0 10px 20% ; text-align:left; display: inline-block; float: left; font-family:'NanumSquare','Noto Sans KR','Malgun Gothic', 'Nanum Gothic', Sans-serif;}
#topmenu .menu > li {position: relative; display: inline-block; /*margin-right:100px;*/ /* margin: 0 100px 0 0; */ vertical-align: top; /* width:20%; */}
#topmenu .menu > li:first-child {margin-left: 0;}
#topmenu .menu > li:nth-child(1) {width:17%;}
#topmenu .menu > li:nth-child(2) {width:28%;}
#topmenu .menu > li:nth-child(3) {width:18%;}
#topmenu .menu > li:nth-child(4) {width:19%;}
#topmenu .menu > li:nth-child(5) {width:18%;}

#topmenu .menu > li span {font-family:'Noto Sans KR','Malgun Gothic', 'Nanum Gothic', Sans-serif;}
#topmenu .menu > li > a {position:relative; display: inline-block; font-size: 22px; font-weight: 600; color: #000;  -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; border-bottom: 1px solid transparent;line-height: 80px;}
#topmenu .menu > li:hover > a, #topmenu .menu > li a.on {color: #009b4a !important; /* border-bottom: 1px solid #222; */ }

#topmenu .menu > li:hover > a:after, #topmenu .menu > li a.on:after {content:''; width:100%; height:1px; background: #009b4a; position:absolute; left:0; bottom:10px; }

#topmenu .submenu {display: none; position: absolute; left: 0; width: 100%; z-index: 50}
#topmenu .submenu ul {width:100%; height: 280px; padding-top: 5px; box-sizing: border-box; }
#topmenu .submenu ul li {text-align:left; font-size: 17px; font-weight: 400; line-height: 32px;}
#topmenu .submenu ul li a {color: #666; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#topmenu .submenu ul li a:hover {color: #222; font-weight: 400;}

#header .submenu_bg {display: none; position: absolute; top: 85px; width: 100%; height: 280px;/*  border-top: 1px solid #ddd; */ border-bottom: 1px solid #eee; background: #fff; z-index: 1;}

#header:hover #topmenu .menu > li > a,
#header.scroll #topmenu .menu > li > a,
#header.blk #topmenu .menu > li > a  {color: #222;}

#header.blk #topmenu .menu > li > a  {line-height: 70px;}

#AllMenu {display:none;}


/*======================= Tablet 1280 px ~ =======================*/

@media only screen and (max-width:1280px){

#header h1 a {position: relative; display: block; width: 200px; }
#header h1 a img {width:200px;}
    
#header .inner {max-width:1000px;}
#topmenu .menu > li:nth-child(4) {width:24%;}
#topmenu .menu > li:nth-child(5) {width:13%;}

    
}

/*======================= Tablet 1024 px ~ =======================*/


@media only screen and (max-width:1024px){
.pc {display:none !important;}
.tablet {display:block !important;}

.inner {padding: 0 30px;}
#topmenu {display:none;}
#header .lang {display:none;}


/* allmenu */
#header {height:90px;}
#header h1 { margin-top:20px;}
#header h1 a img {width:auto;}    
 
#header .btn_allmenu {display: block; position: absolute; top: 28px; right: 30px; width: 30px; height: 30px;}
#header .btn_allmenu img {position: absolute; top: 0; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; width:30px; }
#header .btn_allmenu img.b {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}

#header:hover .btn_allmenu img.b,
#header.scroll .btn_allmenu img.b,
#header.blk .btn_allmenu img.b  {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#header:hover .btn_allmenu img.w,
#header.scroll .btn_allmenu img.w,
#header.blk .btn_allmenu img.w  {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}



/* 전체메뉴 */
#AllMenu {display:block; position:fixed; top:0; right:-100vw; width:100%; height:100%; background:#fff; color:#222; z-index:1100; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#AllMenu.on {right: 0;}
#AllMenu .btn_close {position:absolute; top:50px; right:5%; width:20px; z-index: 500;}
#AllMenu .btn_close img {vertical-align:top;  width:100%;}

#AllMenu .AllMenu_wrap {position: relative; padding:55px 0; height: 100vh; }
#AllMenu .menu_wrap {padding: 0 60px;}
#AllMenu .menu_wrap dl {width:100%; height:auto; padding:0; border:none; text-align:center; }
#AllMenu .menu_wrap dl:first-child {border:none;}
#AllMenu .menu_wrap dl dt {position:relative; padding:0; font-size:25px; line-height:2.5; font-weight:500;}
#AllMenu .menu_wrap dl dt i {content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; cursor:pointer;}
#AllMenu .menu_wrap dl dd {display:none; padding:15px 0; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; font-size:18px; font-weight:400; line-height:3;}
#AllMenu .menu_wrap dl dd > ul > li:hover a {color:#222;}
#AllMenu .allmenu_util {margin-top:50px;/*  position: absolute; width: 100%; bottom: 130px; */}
#AllMenu .allmenu_util .link {float:none; width:100%;}
#AllMenu .allmenu_util .link ul {text-align:center;}
#AllMenu .allmenu_util .link ul li {float:none; display:inline-block; vertical-align:middle; padding:10px;  }
#AllMenu .allmenu_util .link ul li img {width:42px; height:42px;}
#AllMenu .allmenu_util .center {position: relative; height: 80px; padding: 0 25px;background: #b4c1c7; margin-top:35px; }
#AllMenu .allmenu_util .center .tt { cursor: pointer; width:100%; }
#AllMenu .allmenu_util .center .tt > a { color:#222; font-size:20px; font-weight:500; line-height:80px; display: flex;  align-items: center; justify-content: space-between;}



/* 메인비쥬얼 */
.mainvisual_section .mainTxt ul li strong {font-size: 50px;}
#mainvisual ul.slick-dots {width:auto; left:15%; bottom:50px;}
#mainvisual button.slick-arrow.slick-next {right:auto; left:27%;}
#mainvisual button.slick-arrow.slick-prev {left:5%; }
#mainvisual button.slick-arrow {bottom:50px;}


}

/*===============================================================*/
/*======================= Tablet 900 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:900px){
/* 메인-section2 */
.main_section_tit_w {font-size:20px;}
.main_section_tit_w br.br_none {display:none;}


/* 서브-폰트 */


}


/*===============================================================*/
/*======================= Tablet 850 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:850px){

.mainvisual_section .mainTxt .tt > p {font-size: 30px; margin-bottom: 5px;}
.mainvisual_section .mainTxt .tt strong {font-size: 46px;}


}



/*===============================================================*/
/*======================= Tablet 768 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:768px){



}



/*===============================================================*/
/*======================= Mobile 640 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:640px){
.pct {display:none !important;}
.mobile {display:block !important;}
.tablet {display:none !important;}

.inner { padding: 0 5%;}


/* header */
/*#header { height: 60px;  z-index:1001;}*/
#header {height:80px;}
#header h1 {padding-left:1%;}
#header h1 a {width: 170px;}
.pc_logo {display:none;}
.mobile_logo {display:block;}
/* #header .btn_allmenu {top: 15px; width: 28px; height: 30px;} */
#header .btn_tel_m {right: 13%; top: 16px; width: 28px; height: 30px;}
#header .btn_allmenu {right: 5%;}

#header.blk {height:65px !important;}
#header.blk h1 a img {width:170px;}

#header.blk .btn_allmenu { top: 22px;}



/* ì „ì²´ë©”ë‰´ */
#AllMenu .btn_close {top:28px; right:5%; z-index: 500;}
/* #AllMenu .AllMenu_wrap {padding:25% 0;} */
#AllMenu .menu_wrap dl dt {font-size:5vw;}
#AllMenu .menu_wrap dl dd {padding:3% 0; font-size:4vw; line-height:3;}
#AllMenu .allmenu_util {margin-top:8%;}
#AllMenu .allmenu_util .link ul li {padding:2%; font-size:3.4vw;}
#AllMenu .allmenu_util p {font-size:2.8vw; text-align:center;}
#AllMenu .allmenu_util p span {padding-left:3%;}
#AllMenu .allmenu_util .center { height: 70px; margin-top:15px;}
#AllMenu .allmenu_util .center .tt > a { font-size:4vw; line-height:70px; }



}


/*===============================================================*/
/*======================= Mobile 520 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:520px){



}



/*===============================================================*/
/*======================= Mobile 420 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:420px){

#mainvisual button.slick-arrow {bottom:30px;}
#mainvisual ul.slick-dots { bottom:30px;} 
#mainvisual button.slick-arrow.slick-next {right: 25%;}
#mainvisual button.slick-arrow.slick-prev {left: 25%;}

#mainvisual button.slick-arrow {display:none !important;}



}
/*===============================================================*/
/*======================= Mobile 380 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:380px){

}


/*===============================================================*/
/*======================= Mobile 320 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:320px){

}


