@charset "utf-8";


#header{width:100%; height:110px; display:flex; align-items:center; padding:0 50px; justify-content: space-between; position:fixed; z-index:10; transition:all 0.5s;}
#header h1 img{width:200px;}
.gnb{display:flex;}
.gnb > li{position:relative; padding:0 60px;}
.gnb > li > a{font-size:1.8em; color:#fff;}
.ham{width:30px; height:23px; border-top:3px solid #fff; position:relative; cursor:pointer;}
.ham:before{content:''; position:absolute; right:0; top:7px; width:20px; border-top:3px solid #fff; transition:width 0.5s;}
.ham:after{content:''; position:absolute; right:0; bottom:0; width:10px; border-top:3px solid #fff; transition:width 0.5s;}
.ham:hover:before, .ham:hover:after{width:100%; transition:width 0.5s;}

#header .subGnb{position:absolute; top:40px; left:50%; background:#ff9833; transform:translateX(-50%); padding:15px; width:150px; text-align:center; display:none;}
#header .subGnb li{padding:10px;}
#header .subGnb a{font-size:1.8em; color:#666; }
#header .subGnb a:hover{color:#fff; font-weight:600;}


/**/
#header.On{background:#fff; height:90px;}
#header.On .gnb > li > a{color:#191919;}
#header.On .ham, #header.On .ham:before, #header.On .ham:after{border-color:#191919;}


/* 모바일 */
#mGnb{position:fixed; z-index:10; width:100%; height:100%; left:0; top:0; background:#ff9833; display:none;}
#mGnb .close{position:absolute; right:5%; top:5%; width:50px; height:50px; overflow:hidden; text-indent:-999px; cursor:pointer;}
#mGnb .close:before{content:''; position:absolute; top:0; left:30px; border-left:3px solid #191919; height:50px; transform:rotate(-45deg);}
#mGnb .close:after{content:''; position:absolute; top:0; left:30px; border-left:3px solid #191919; height:50px; transform:rotate(45deg);}
#mGnb > ul{display:flex; flex-wrap:wrap; height:100%;}
#mGnb > ul > li{width:20%; padding:20% 5% 5%; border-right:1px solid rgba(255,255,255,0.3); font-size:3em;}
#mGnb > ul > li strong{padding-bottom:10px; display:flex;}
#mGnb > ul > li > ul a{font-size:0.7em; color:#666;}
#mGnb > ul > li > ul a:hover{color:#fff;}


#footer{width:100%; background:#191919; padding:110px 0;}
#footer h1 img{width:auto;}
.footerInner{width:1400px; margin:0 auto; color:#fff; font-size:1.8em;}
.footerInner .textCon{padding-bottom:8%; display:flex; justify-content: space-between; align-items: flex-end;}
.footerInner  .leftCon a{color:#fff;}
.footerInner  .leftCon a:first-of-type{font-weight:bold; margin-right:50px;}
.footerInner .rightCon {display:flex; width: 50%; justify-content: flex-end;}
.footerInner .rightCon div{padding-left:15%;}
.footerInner .rightCon p{padding-bottom:40px;}
.footerInner .rightCon div p:last-of-type{padding-bottom:0;}
.footerInner .rightCon strong{letter-spacing:0; display:block; padding-bottom:10px;}
.footerInner .color{color:#ff9833;}
.footerInner .copy{font-size:0.9em; letter-spacing:0; text-align:right;}
.bottomCon{border-top:rgba(255,255,255,0.3) 1px solid; padding-top:5%; display:flex; align-items:center; justify-content:space-between;}
.bottomCon a{display:inline-block; padding:10px; border:1px solid #f4f4f4; color:#f4f4f4;}


/* 간편문의 */
.inqBox{position:fixed; right:-100%; top:0; width:100%; height:100%; background:#ff9932; z-index:9999; align-items: center; justify-content:center; flex-direction:column; text-align:left; display:flex;}
.inqBox .inqClose{position:absolute; display:inline-block; right:5%; top:5%; width:50px; height:50px; text-indent:-999px; overflow:hidden; transform:rotate(45deg); cursor:pointer;}
.inqBox .inqClose:before{content:''; position:absolute; left:0; top:50%; width:100%; border-top:5px solid #191919; transform:translateY(-50%);}
.inqBox .inqClose:after{content:''; position:absolute; left:50%; top:0; height:100%; border-left:5px solid #191919; transform:translateX(-50%);}
.inqBox form{width:80%;}
.inqBox strong{font-size:7em; color:#191919; display:block; width:80%; padding-bottom:5%;}
.inqBox legend{width:1px; height:1px; overflow:hidden;}
.inqBox fieldset{display:flex; flex-wrap:wrap;}
.inqBox ul, .inqBox fieldset > div{width:50%;}
.inqBox li{display:flex; flex-wrap:wrap; align-items: center; padding-bottom:20px;}
.inqBox li label{font-size:2.5em; width:15%; font-weight:bold;}
.inqBox li input{width:85%; height:50px; border:0; padding:10px; font-size:1.8em;}
.inqBox fieldset > div{padding-left:5%; position:relative;}
.inqBox div label{font-size:2.5em; font-weight:bold; padding-bottom:10px; display:block;}
.inqBox div p{font-size:2em; display:flex; align-items: center; padding:20px 0 0;}
.inqBox div input[type='checkbox']{width:20px; height:20px; margin-right:5px;}
.inqBox div p span{font-size:0.8em; background:#191919; padding:5px; color:#fff; cursor:pointer; margin-left:5px;}
.inqBox textarea{width:100%; border:0; resize:none; height:200px; padding:20px; font-size:1.8em; line-height:1.6;}
.inqBox button{width:200px; height:60px; background:#191919; color:#fff; float:right; font-size:2em; margin-top:5%;}

.pChkDimm{position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.6); z-index:99999; display:none;}
.pChkCon{position:fixed; width:40%; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; font-size:1.4em; line-height:1.4; display:none; z-index:999999;}
.pConclose{position:absolute; top:0; right:0; padding:10px; color:#fff; background:#666; cursor:pointer;}