@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');


@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('PretendardVariable.woff2') format('woff2-variations');
}




html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button, input, textarea{ font-family: 'Pretendard', 'Montserrat', Malgun Gothic,'Malgun Gothic', sans-serif; margin:0;padding:0;border:0; line-height:150%; letter-spacing:normal;  word-break: keep-all;} /* delete vertical-align,font:inherit; */
html {overflow-x:hidden;}
body,html{width:100%; font-size:16px; color: #444; font-weight:400; font-family: 'Pretendard', 'Montserrat', 'Malgun Gothic', sans-serif; word-break: keep-all;}
*{font-family: 'Pretendard', 'Montserrat', 'Malgun Gothic', sans-serif; word-break: keep-all;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:1rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:0.9375rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;} 


span, b, strong, br {line-height:inherit; font-family:inherit;}


.w1400{max-width:1400px; /*padding:0 20px;*/ margin: 0 auto;}
/*
#wrap{width:100%; overflow:hidden;}
#wrap.noScroll{height:100vh;}
*/
/** S::헤더 **/
#header{position:fixed; width:100%; left:0; top:0; padding:16px 0; z-index:90000;transition:all .2s linear;}
#header::before{content:""; display:block; width:100%; height:0; background:#fff; position:absolute; left:0; top:0; transition:all .4s; opacity: 0; border-bottom: 1px solid #ddd; z-index:1}
#header::after{content:""; display:block; position:absolute; left:0; top:100px; width:100%; height:1px; background:rgba(255,255,255,0.2); z-index:2}
#header .header_in{display:flex; align-items:center; justify-content: space-between; position:relative; z-index:10;}
#header .header_in h1{display:block; width: 257px; height: 68px;}
#header .header_in h1 a{display:block; width:80%; height:100%; background:url('../img/logo_w.svg') no-repeat center/100% auto; font-size:0; text-indent:-9999px; }
#header .header_in .btns a{display:none; width: 29px; height: 24px; background:url('../img/menu_w.svg') no-repeat center/100% auto;}


#menu{position:absolute; top:36px; z-index:9999; left:50%; margin-left:-100px;}
#menu ul{font-size:0;}
#menu ul li{display:inline-block; vertical-align:top; padding:0 11px; position:relative;}
#menu ul li > a{display:block; font-size: 1.06rem;;  color:#fff; line-height:120%; transition:all .3s linear; box-sizing:border-box; font-weight:600; padding:0 15px 45px;}
#menu ul li:hover > a{color:#fff !important;}
#menu ul li > a:after{content:''; display:block; width:0; height:4px; background:#0050A4; position:absolute; left:50%; transform:translateX(-50%); transition:all .3s linear; bottom:0; z-index:99;}
#menu ul li:hover > a:after{width:100%;}
#menu ul li dl{text-align:center; padding:70px 0 0; visibility:hidden; opacity:0; height: 0; transform-origin: top; overflow:hidden; transition:all .4s; position:absolute; left:0; top:20px; width:100%;}
#menu ul li dl dd{padding:0 0 13px;}
#menu ul li dl dd:last-child{padding:0;}
#menu ul li dl dd a{display:block; font-size:0.9rem;  word-break:keep-all; transition:all .3s linear;}
#menu ul li dl dd a:hover{font-weight:700;}


#contact{top:36px; z-index:9999; right:0; }
#contact ul {border:1px solid rgba(255,255,255,0.5); display: flex;}
#contact ul li:first-child {border-right:1px solid rgba(255,255,255,0.5)}
#contact ul li { padding:10px 15px;}
#contact ul li > a {color:#fff; display: block;}

#header.up::before{height:283px; opacity: 1;}
#header.up::after{opacity:1;}
#header.wBg #menu ul li > a,
#header.up #menu ul li > a{color:#444444;}
#header.up #menu ul li dl{visibility:visible; opacity:1; height: 250px;}

#header.wBg, #header.up{background:#fff;}
#header.wBg::after, #header.up::after{background:#EEEEEE}
#header.wBg .header_in h1 a,
#header.up .header_in h1 a{background-image:url('../img/logo.svg');}
#header.wBg .header_in .btns a,
#header.up .header_in .btns a{background-image:url('../img/menu.svg');}

#header.wBg #menu ul li:hover > a{color:#444 !important;}
#header.wBg #contact ul li > a {color:#444;}
#header.wBg #contact ul {border:1px solid rgba(0,0,0,0.2); display: flex;}
#header.wBg #contact ul li:first-child {border-right:1px solid rgba(0,0,0,0.2)}


#menuArea {display:none; position:fixed; top:0; right:0; z-index:99999999999999; height:100%; width:320px;}
#menuArea .menuList { height:100%; width:340px; background: #1D2C41; position:absolute; right:-528px; box-sizing:border-box; padding:50px 40px 0; } 

#menuArea .menuList ul, #menuArea .menuList li{list-style:none;}
#menuArea .menuList>.list {width:100%; ;}
#menuArea .menuList>.list>li{border-bottom:1px solid rgba(255,255,255,0.3); padding:0 0 15px;}
#menuArea .menuList>.list>li>a {display:inline-block; margin:20px 0 0; font-size:1.25rem; font-weight:500; color:#fff; position:relative; letter-spacing: 0; width: 100%; box-sizing:Border-box; }
#menuArea .menuList>.list>li>a i{content:''; position: absolute; right: 0; top:50%; margin-top:-4px; display:block; width:13px; height:9px; background:url('../img/lnbArrow.svg') no-repeat center/100% auto; transform:rotate(-180deg);}
#menuArea .menuList>.list>li.active>a i{ transform:rotate(0deg);}
#menuArea .menuList>.list .sMenu {position: relative; width: 100%; box-sizing:Border-box; font-size:0; }
#menuArea .menuList>.list>li .sMenu {display:none;}
#menuArea .menuList>.list .sMenu>li {display:inline-block; padding:6px 0; line-height: 120%; width:50%; }
#menuArea .menuList>.list .sMenu>li>a {font-size:1.0rem; color:#fff; font-weight: 400; line-height: 120%; letter-spacing: -0.35pt;}


#menuArea .menuList dl{border-bottom:1px solid rgba(255,255,255,0.3);padding:30px 0; margin:0 0 30px;}
#menuArea .menuList dl dd{ margin:0 0 10px;}
#menuArea .menuList dl dd:last-child a{margin:0}
#menuArea .menuList dl a{display:block; border:1px solid #fff; font-weight:600; padding:12px 0; text-align:Center; color:#fff;}

#menuArea .menuList .menuContact{text-align:center; }
#menuArea .menuList .menuContact h6{font-size:1.66667rem;; color:#fff; font-weight:600;}
#menuArea .menuList .menuContact h6 .fa-solid{font-size:19px; margin-right:10px;}
#menuArea .menuList .menuContact p{font-size: 1rem; color:#fff; }

#menuArea .menuList .btnMenu_mClose{padding:0; border:0; font-size:0; background:none; outline:none; cursor:pointer; width: 27px; height: 27px; background:url('../img/closeBtn.svg') no-repeat center/100% auto; position:absolute; right:20px; top:20px;}

#grayLayer {width:100%; height:100% !important; background:rgba(11, 4, 2, 0.40); position:fixed; left:0; top:0; z-index:99999991; overflow-x:hidden;overflow-y:auto;display:none;}
#grayLayer > a {display:block;width:100%;height:100%}
/** E::헤더 **/


/** S::푸터 **/
#footer{height:auto !important; background:#252525; }
#footer.section {overflow:visible;}
#footer .fp-tableCell{height:auto !important;}
#footer .footer_nav{border-bottom:1px solid rgba(255,255,255,0.1); padding:16px 0;}
#footer .footer_nav ul{font-size:0; }
#footer .footer_nav ul li{display:inline-block;font-size:1rem;vertical-align:middle;}
#footer .footer_nav ul li::after{content:""; display:inline-block; vertical-align:middle; width:1px; height:10px; background:rgba(255,255,255,0.2); margin:0 15px;}
#footer .footer_nav ul li:last-child::after{display:none;}
#footer .footer_nav ul li a{color:#eee; line-height:1; font-size:0.9rem;}
#footer .footer_in{padding:35px 0 45px; }
#footer .footer_in .w1400{position:relative;}
#footer .footer_in article{color:#eee;line-height:1.4rem; padding-right:250px; word-break:keep-all;}
#footer .footer_in article font{display:inline-block; margin-right:20px;}
#footer .footer_in article .copy{margin:17px 0 0; font-size:0.9rem; color:#eee;}

#footer .footer_in .sns{position:absolute; right:20px; top:5px; display:flex;}
#footer .footer_in .sns li{width:47px; height:47px; background:#515151; border-radius:50%; box-sizing:border-box; border:1px solid #515151; margin-left:10px; overflow:hidden;}
#footer .footer_in .sns li a{display:block; width:100%; height:100%; background-size:100% 100%; background-position:center; background-repeat:no-repeat; font-size:0; text-indent:-666px;}

#footer .footer_in .sns li.fb a{background-image:url("../img/sns_fb.svg");}
#footer .footer_in .sns li.insta a{background-image:url("../img/sns_insta.svg");}
#footer .footer_in .sns li.yt a{background-image:url("../img/sns_yt.svg");}
#footer .footer_in .sns li.blog a{background-image:url("../img/sns_blog.svg");}

#footer .w1400 {margin:0 auto; position:relative;}
#footer .famSite{ width:165px; position:absolute; right:0; margin-right:0; top:-16px; z-index:999;}
#footer .famSite dt{position:Relative; height:60px; line-height:60px; border-left:1px solid #575757; border-right:1px solid #575757; color:#fff; font-size:16px; box-sizing:Border-box; padding:0 15px; cursor:pointer; }
#footer .famSite dt::after{content:""; display:block; position:absolute; right:15px; top:50%; margin-top:-2px; width:9px; height:5px; background:url('../img/fam_arrow.png') no-repeat center top/100% auto; transition:transform 0.2s linear;}
#footer .famSite dd{width:100%; position:absolute; left:0; bottom:60px; z-index:500; background:#444; box-sizing:Border-box; border:1px solid #575757; padding:5px 0; display:none; z-index:999999;}
#footer .famSite dd a{ font-size:16px; color:rgba(255,255,255,0.6); display:block; box-sizing:border-box; padding:0 15px; margin:10px 0;}
#footer .famSite dd a:hover{color:#fff; }
#footer .famSite.on dd{display:block;}
#footer .famSite.on dt::after{transform:rotate(-180deg); transition:transform 0.2s linear;}
/** E::푸터 **/



#quick{position:fixed; right:20px; bottom:30px; z-index:9999;}
#quick li{position:Relative; background:#0050A4; transition:all 0.2s linear;}
#quick li a{display:block; padding:20px 0 20px 30px; color:#fff; font-size:0.9rem; box-sizing:border-box; width:142px; }

#quick li a i{width:20px; height:20px; font-size:20px; display:inline-block; margin-right:30px; transition:all 0.2s linear;text-align:Center;}


#quick li.topBtn{right:20px; width:68px; height:68px; border-radius:50px;  padding:0; padding-top:5px; text-align:center;cursor:pointer; }
#quick li.topBtn a{width:auto; padding:0;}
#quick li.topBtn::before{content:""; display:block; width:12px; height:7px; background:url('../img/top_arrow.svg') no-repeat center/100% auto; margin:15px auto 4px;}
#quick li.topBtn:hover{background:#3696FA;}


#contactPop{position:fixed; width:100%; height:100vh; left:0; top:0; background:rgba(0,0,0,0.6); z-index:-500;opacity:0; display:hidden; transition:all 0.2s linear;}
#contactPop .contactPop_in{width:50%; position:absolute; left:25%; top:50%; background:#fff; max-height:90vh; padding:50px; border-radius:10px; box-sizing:border-box; transform:translateY(-50%);}
#contactPop .contactPop_in h5{color:#252525; font-size:2rem; font-weight:700; text-align:center; margin:0 0 20px;}
#contactPop .contactPop_in .closeBtn{position:absolute; top:30px; right:30px; width:28px; font-size:28px; cursor:pointer;}
/*#contactPop .contactPop_in input{border:1px solid #ddd;}
#contactPop .contactPop_in textarea{border:1px solid #ddd;}*/
#contactPop.display{opacity:1; display:visible; transition:all 0.2s linear; z-index:999999;}
#contactPop .contactPop_in .form li {border:1px solid #ddd;}
#contactPop .contactPop_in .form .privacy label, #contactPop .contactPop_in .form .privacy .contactPrivacyView {color:#444;}


/** S::하단퀵 **/
#footQcuick {display:none;}
/** E::하단퀵 **/


/** S::다중모달 **/
 .modal-custom{padding:20px;display:none; position:fixed; z-index:99999; padding-top:10%; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* .modal-content{position:relative; background-color:#fefefe; margin:auto; padding:0; border:1px solid #888; max-width:600px; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s}*/
 .modal-content{position:relative; background-color:#fefefe; margin:auto; padding:0; border:1px solid #888; max-width:860px; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s}
 @-webkit-keyframes animatetop{
     from{top:-300px; opacity:0}
     to{top:0; opacity:1}
}
@keyframes animatetop{
    from{top:-300px; opacity:0}
    to{top:0; opacity:1}
}
.close-modal{color:#fff; float:right; font-size:28px; font-weight:bold; position:absolute; top:0; right:20px}
.close-modal:hover,.close-modal:focus{color:#000; text-decoration:none; cursor:pointer; }
.modal-header{padding:13px 20px; background-color:#1D2C41; color:white; height:50px; line-height:50px;}
.modal-header h2 {font-weight:500;}
.modal-body{margin:20px; padding:15px; border:1px solid #eee; height:400px; overflow-y:scroll;}
.modal-footer{padding:2px 16px; color:white; }
.modal-footer .close-modal2 {width:100px; text-align:center; height:50px; line-height:50px; background:#0050A4; color:#fff; margin:0 auto 20px auto; display:block;}

/** E::다중모달 **/

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1550px){
 .w1400 {padding:0 20px;}
    #menu{margin-left:-150px;}
}
@media all and (max-width:1240px){
 .w1400, .w1530 {padding:0 20px}


#contactPop{}
#contactPop .contactPop_in{width:60%; left:20%; background:#fff; padding:40px; }



}

/*******************************************************************************
    @media  ~980px                
*******************************************************************************/
@media all and (max-width:1200px){
        /** S::헤더 **/
    #header{padding:16px 0;}
    #header::after{top:auto; bottom:0;}
    #header .header_in h1{ width: 185px; height: 49px;}
    #header .header_in .btns a{width: 29px; height: 24px;}
    #header .header_in .btns a.menuBtn.pc{display:none; }
    #header .header_in .btns a.menuBtn.mo{display:block; }


    
    #menu, #contact{display:none;}

}

@media all and (max-width:980px){

body,html{ font-size:15px; }

.w1400, .w1530 {padding:0 20px; }






/** E::헤더 **/



/** S::푸터 **/
#footer{}
#footer .footer_nav ul li::after{margin:0 10px;}

#footer .footer_in{padding:20px 0 45px; }

#footer .footer_in article{padding-right:0;}
#footer .footer_in article p{padding-right:200px}

#footer .footer_in .sns{position:absolute; right:5%; top:auto; bottom:-10px;}
#footer .footer_in .sns li{width:36px; height:36px;}

#footer .famSite{right:3%;}
#footer .famSite dt{height:54px; line-height:52px; font-size:14px; padding:0 20px;  }
#footer .famSite dt::after{right:20px;}
#footer .famSite dd{bottom:53px; padding:10px 0}
#footer .famSite dd a{ font-size:14px; padding:0 20px; ;}


/** E::푸터 **/



#quick{}
#quick li{right:-73px; }
#quick li a{ padding:12px 0 12px 15px; width:118px; }
#quick li a{}
#quick li a i{width:16px; height:16px; font-size:16px; margin-right:15px; }
#quick li.topBtn{left:73px; width:45px; height:45px;}
#quick li.topBtn a{ font-size:0.8em;}
#quick li.topBtn::before{width:12px; height:7px; margin:10px auto 2px;}



#contactPop{}
#contactPop .contactPop_in{width:80%; left:10%; padding:30px; overflow-y:scroll;}
#contactPop .contactPop_in .closeBtn{ top:24px; right:24px; width:24px; font-size:24px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


body,html{ font-size:14px; }



/** S::헤더 **/
#header{padding:10px 0;}
#header::after{top:auto; bottom:0;}
#header .header_in h1{ width: 148px; height: 39px;}
#header .header_in .btns a{width: 25px; height: 21px;}


#menuArea {}
#menuArea .menuList { padding:40px 25px 0; } 

#menuArea .menuList>.list>li>a {margin:20px 0 0; font-size:1.45rem;}
#menuArea .menuList>.list>li>a i{ margin-top:-4px; width:13px; height:9px; }
#menuArea .menuList>.list .sMenu>li>a {font-size:1.3rem; ;}

#menuArea .menuList dl{padding:30px 0; margin:0 0 30px;}
#menuArea .menuList dl dd{ margin:0 0 10px;}

#menuArea .menuList dl a{padding:8px 0; }

#menuArea .menuList .btnMenu_mClose{width: 20px; height: 20px; }

#menuArea .menuList .menuContact p{margin-top:10px;}
/** E::헤더 **/


/** S::푸터 **/

#footer .footer_nav{padding:17px 0 13px;}
#footer .footer_nav ul {text-align:center;}
#footer .footer_nav ul li{margin-bottom:3px;}
#footer .footer_nav ul li::after{margin:0 6px;}

#footer .footer_in{padding:20px 0 45px; }
#footer .footer_in article p{padding-right:0; margin-top:10px;}

#footer .footer_in .sns{position:relative; right:auto; top:0; bottom:0; margin:15px 0 0; justify-content: center;}
#footer .footer_in .sns li{width:30px; height:30px;}
#footer .footer_in .sns li:first-child{margin:0;}

#footer .famSite{position:relative; width:100%; right:0; margin:30px 0 0}
#footer .famSite dt{height:44px; line-height:42px; border:1px solid #575757;  font-size:14px; padding:0 20px;  }
#footer .famSite dt::after{right:20px;}
#footer .famSite dd{bottom:43px; padding:10px 0}
#footer .famSite dd a{ font-size:14px; padding:0 20px; ;}

/** E::푸터 **/


#quick{display:none;}

/** S::하단퀵 **/
#footQcuick {display:block; position:fixed; bottom:0; width:100%; height:50px; line-height:50px; background:#BE9473; z-index:999;}
#footQcuick li {float:left; width:33.3%; text-align:center; position:relative;}
#footQcuick li::after {position:absolute; height:100%; width:1px; background:rgba(255,255,255,0.2); right:0;top:0; content:'';}
#footQcuick li:last-child::after {display:none;}
#footQcuick li a {display:block; padding:14px 0; color:#fff;}
#footQcuick li a:hover {background:#AE7A51}
#footQcuick li a i{width:18px; height:18px; display:inline-block; margin-right:0; transition:all 0.2s linear;text-align:center; margin-right:3px; font-size:0.9rem}
#footQcuick li a i.kakao{background:url('../img/kakao.svg') no-repeat center/90%; background-position-y:4px;}
/** E::하단퀵 **/


}
/*******************************************************************************
    @media ~480px                
*******************************************************************************/
@media all and (max-width:480px){




}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){



}