@charset "utf-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");


#wrap #header #home {z-index:1;}


.mainvisual {position:relative; height:500px; background:url('/common/img/image-3.png')no-repeat center; text-align:center;}
.mainvisual .headerlogo {position:absolute; top:21px; left:32px; z-index:2;}
.mainvisual .bg {position:absolute; left:0; bottom:0;}

.mainvisual .txt {text-align:center; display:inline-block; margin:41px 0 0;}
.mainvisual .txt img {display:block; margin:0 auto;}
.mainvisual .txt p {font-size:11px; font-weight:500; color:#6e6e6f; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; letter-spacing:-0.2px; display:inline-block; margin:4px 0 0 6px;}


.mainvisual ul {font-size:0; position:absolute; top:191px; left:79px;}
.mainvisual ul li {display:inline-block; vertical-align:top; padding:0 18px;}
.mainvisual ul li a {position:relative; display:block; width:204px; height:241px; text-align:center; overflow:hidden; box-sizing:border-box; border:4px solid #fff; border-radius:25px;}
.mainvisual ul li a .bgimg {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); transition:all 1s ease;}
.mainvisual ul li:hover a .bgimg {transform:translate(-50%,-50%) scale(1.2);}
.mainvisual ul li a h2 {position:relative; font-size:16px; font-weight:700; color:#fff; z-index:1; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; margin:14px 0 0;}



#navi {position:relative; height:80px; text-align:center; border-bottom:1px solid #dfdfdf;}
#navi:after {content:''; display:inline-block; width:100%; height:4px; background:url('/common/img/bg-shadow.png')no-repeat center; position:absolute; left:0; bottom:-5px;}
#navi .gnbbg {position:absolute; top:0; left:0; background:#43a0ac; width:100%; height:43px;}

#navi .gnb {display:inline-block; vertical-align:middle; padding:0; box-sizing:border-box;}
#navi .gnb:after {display:block; content:''; clear:both;}
#navi .gnb > ul {padding:0; font-size:0;}
#navi .gnb > ul > li {position:relative; display:inline-block; padding:0 38.5px; vertical-align:top;}
#navi .gnb > ul > li > a {position:relative; display:block; font-size:19px; font-weight:500; color:#fff; padding:6.5px 0 33px; text-align:center; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; text-decoration:none !important;}
.msie11 #navi .gnb > ul > li > a {font-weight:600;}
#navi .gnb > ul > li > a:after {content:''; display:inline-block; width:120px; height:36px; background:url('/common/img/gnb-on.png')no-repeat center / cover; position:absolute; top:7px; left:50%; transform:translate(-50%,0); transition:opacity 0.1s ease; opacity:0; z-index:0;}
#navi .gnb > ul > li > a span {display:inline-block; position:relative; z-index:2; transition:padding 0.3s ease;}

#navi .gnb > ul > li > ul {position:absolute; display:inline-block; top:51px; left:0; opacity:0; transition:all 0.3s ease; padding:0; padding:0 8px 0 13px; z-index:2;}
#navi .gnb > ul > li > ul:after {display:block; content:''; clear:both;}
#navi .gnb > ul > li > ul > li {display:inline-block; float:left; vertical-align:top; margin:0 12px}
#navi .gnb > ul > li > ul > li > a {display:none; font-size:13px; font-weight:600; color:#333; padding:0.5px 0 2.5px; transition:all 0.3s ease; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; text-decoration:none !important;}
#navi .gnb .gnb_bg {position:absolute; top:31px; left:0; right:0; width:100%; height:0; background:#d2e3fd; opacity:0; transition:all 0.3s ease; z-index:-1;}
#navi .gnb > ul > li:hover {}
#navi .gnb > ul > li:hover > a {color:#04659f;}
#navi .gnb > ul > li:hover > a:after {opacity:1;}
#navi .gnb > ul > li:hover > a span {padding:4px 0 0;}
#navi .gnb > ul > li > ul.active > li > a {display:block;}
#navi .gnb > ul > li > ul.active > li > a:hover {color:#02619c;}
#navi .gnb > ul > li > ul.active {opacity:1;}


#navi .gnb > ul > li:nth-child(1) > ul {width:250px; left:-35px;}

#navi .gnb > ul > li:nth-child(2) > ul {width:280px; left:-40px;}

#navi .gnb > ul > li:nth-child(3) > ul {width:610px; left:-220px;}

#navi .gnb > ul > li:nth-child(4) > ul {width:90px; left:25px;}

#navi .gnb > ul > li:nth-child(5) > ul {width:145px; left:20px;}


.subvisual {position:relative; height:240px; background:url('/common/img/subvisual.png')no-repeat center;}
.subvisual .homelink {position:absolute; top:10px; left:60px; width:187px; height:45px;}