﻿


/* layout */
#wrap{ width:100%; z-index:100}
#top_wrap{ position:absolute; left:0; top:0; width:100%; padding:0; margin:0}
#nav_top{ position:absolute; right:30px; top:15px;}
#header{ position:absolute; left:0; background:rgba(255,255,255,1); display:fixed;  border-bottom:0px solid #e5e5e5;  top:0vw; height:145px; z-index:1000;  width:100%;transition:.5s height, .2s background;}
.header .inner{position:relative; width:100%;  margin:0 auto;}
.header .inner:after{display:block; clear:both; content:"";}
.header h1{overflow:hidden; float:left; width:134px; padding-top:0px; z-index:2 } /* 로고위치조절 */
.header h1 a{ overflow: hidden; display: block;height: 160px;background: url(/_images/logo.svg?ver=7) no-repeat;background-position: 0px 0px;text-indent: -9999px;}
.header h2 { position:relative; z-index:2  } /* 로고위치조절 */
.header h2 a{overflow: hidden;
    position: absolute;
    top: -15px;    overflow: hidden;
    position: absolute;
    top: -55px;
    left: 40px;
    width: 138px;
    height: 131px;
    background: url(/_images/logo.png?ver=8) no-repeat;
	background-size:138px 131px;
    background-position: 0px 0px;
    text-indent: -9999px;}
.header .gnb_wrap{ } /* 1단계 메뉴 위치 조절 */
.header .gnb{width: 930px;
    margin: 60px auto 0 auto;
    height: 3vw;}

.header .gnb li{float:left; text-align:left;} /*1단계 메뉴 가로값 */
.header .gnb li.nav1{float:left; margin-right:28px;   text-align:center; }
.header .gnb li:last-child.nav1{ margin-right:0}

.header .gnb a{ text-decoration:none; color:#fff;}
.header .gnb:after{display:block; clear:both; content:"";}
.header .gnb .depth1{position:relative; }
.header .gnb .depth1 > a{display:block; height:70px;  font-size:20px; color:#212121; font-weight:600; } /* 1단계 메뉴 폰트 조절 */
.header .gnb .depth1 > a:hover,  .header .gnb .depth1.on > a{}   /* 1단계 메뉴 호버시 색상조절 */
.header .gnb .depth2{display:none;}

.header .util_menu{ 
    text-align: center;
    margin-right: 1vw;
    position: absolute;
    z-index: 3;
    right: 0.5vw;
    top: -0.2vw;} /* 로그인 위치조절*/
.header .util_menu a{ 	background:#028ad9; border-radius:50px; padding:5px 17px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#fff;} /* 로그인 폰트*/
.header .util_menu a.mn{ background:#fff; border-radius:50px; padding:5px 6px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#7a7a7a;}

/* header */
#header.on{background:#fff; }
#header.on:before{position:absolute; left:0;  width:100%; background:#6b9ecc; content:"";}
.header.on h1 a{background-position:0px 0;}
.header.on h2 a{background-position:0px 0;}

/* header_hover */
#header.all{height:145px;  z-index:1100;} /*2단계 높이값 */
#header.all:before{position:absolute; left:0; top:0px; width:100%; height:0px; background:#fff;content:"";} /* hover시 1단계 높이값, top으로 조절 */
.header.all h1 a{background-position:0px 0;}
.header.all h2 a{background-position:0px 0;}
.header.all .util_menu a{background:#028ad9; border-radius:50px; padding:5px 17px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#fff; }
.header.all .util_menu a.mn{ background:#fff; border-radius:50px; padding:5px 6px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#7a7a7a;}
.header.all .util_menu a:hover{color:#fff;}
.header.all .util_menu .menu2:before,.header.all .util_menu .menu3:before{}
.header.all .util_menu .menu4{}
.header.all .util_menu .menu5{background-position:-100px -50px;}
.header.all .gnb_wrap{}


.header .guide{color:#000; position:absolute; top:0px; padding:6px 15px; border:1px solid #fff; font-size:13px; cursor:pointer; right:40px;}
.header .guide i{font-size:20px}
.header .guide:hover{ background:#fff; color:#000}
/*  haniso  */
/* .header.all .gnb_wrap .gnb{overflow:hidden; width:1140px; margin:0 auto; text-align:center;} */

.header.all .gnb_wrap .gnb a{}
/*haniso   .header.all .gnb_wrap .gnb a:hover, .header.all .gnb_wrap .gnb a:focus{color:#f7941d;} */ /*2단계 메뉴 호버시  폰트 조절 */

.header.all .gnb_wrap .depth1{ }
.header.all .gnb_wrap .depth1 > a{}  /*1단계 호버시 폰트컬러 */
/*haniso .header.all .gnb_wrap .depth1 > a:hover,.header.all .gnb_wrap .depth1 > a:focus{color:#cd4144; } */ /*1단계 호버시 호버되는 메뉴 폰트컬러 */
.header.all .gnb_wrap .depth1 > a:hover,.header.all .gnb_wrap .depth1{color:#26abbc; } 

.header.all .gnb_wrap .depth1.menu1{margin-left:0;}
.header .gnb .depth1 .d2{ display:none; transition: all 0.3s ease;}
.header .gnb .depth1:hover .d2{ display:flex; transition: all 0.3s ease;  position:absolute; top:0px;  left:-90px; padding:7px 19px; background:#FFFFFF; z-index:10000000; width:100%; }
.header .gnb .depth1:hover .d2 .arrow{ background:url(../_images/menu_bg.png) no-repeat; position:absolute; top:-7px; left: 50%; transform: translateX(-50%);  width:12px; height:10px;}
.header .gnb .depth1 .d2 .sub_menu1{display:flex; clear:both; padding:3px 0; width:100%;}


.header.all .gnb_wrap .depth3{}
.header.all .gnb_wrap .depth3 > li{display:block;  width:100%; font-size:13px; line-height:7px; color:#666;}
.header.all .gnb_wrap .depth3 > li a{display:inline-block; font-size:13px;  font-family:'Nanum Barun Gothic', sans-serif; line-height:7px; font-weight:300;}


#header.fixed{position:fixed;top:0; background:#fff; box-shadow:1px 2px 20px rgba(0,0,0,.07); border-bottom:0px;  left:0;width:100%; height: 145px; z-index:100;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; }
#header.fixed.all{ height: 145px; background:#fff; z-index:1100;} /* 2단계 높이값 .all앞에 공백없애야 적용됨 */
#header.fixed.all:before{position:absolute; left:0; top:87px; width:100%; height:0px;  content:"";} /* hover시 1단계 높이값 top으로 조절 */
.header.fixed .gnb .depth1 > a{color:#212121; padding:0;}
.header.fixed .gnb{width: 930px;
    margin: 60px auto 0 auto;
    height: 3vw;}

#header.fixed.all .util_menu a{background:#028ad9; border-radius:50px; padding:5px 17px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#fff; }
#header.fixed.all .util_menu a.mn{ background:#fff; border-radius:50px; padding:5px 6px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#7a7a7a;}


#header.fixed .util_menu a{background:#028ad9; border-radius:50px; padding:5px 17px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#fff; }
#header.fixed .util_menu a.mn{ background:#fff; border-radius:50px; padding:5px 6px; font-size:15px; margin-right:0.1vw; text-align:center;  z-index:10000000;  cursor:pointer;  display:inline-block; cursor:pointer; font-family:'roboto' sans-serif; font-weight:500;   text-decoration:none; color:#7a7a7a;}


.header.fixed .on{background:#fff; }
.header.fixed .on:before{position:absolute; left:0; bottom:-50px; width:100%; height:50px; background:#6b9ecc; content:"";}
.header.fixed .gnb_wrap{} /* 1단계 메뉴 위치 조절 */
.header.fixed .gnb_wrap .depth2 > li{display:block; } /*2단계 메뉴 속성 */
.header.fixed .gnb_wrap .depth2 > li > a{margin-bottom:15px; font-size:16px; font-family:'Nanum Barun Gothic', sans-serif; font-weight:400;  line-height:16px;  color:#333;} /*2단계 메뉴 폰트 조절*/
.header.fixed .gnb_wrap .depth2 > li:first-child{padding-top:0px;} /* 2단계 메뉴 높이 위치 설정 */


.header.fixed .nav_bg{width: 100%;
    position: absolute;
    height: 17vw;
    background: rgba(255,255,255,0.2);
    top: 6vw;
    z-index: 10;
    display:none;}


.today{ position:absolute; top:-3vw; right:16.5vw; background:#eeeeee; padding:0 1vw; height:1.8vw; line-height:1.8vw; text-align:center; border-radius:0.4vw; font-weight:500; font-size:0.9vw}

.header.fixed .today{ position:absolute; top:-2.5vw; right:16.5vw; background:#eeeeee; padding:0 1vw; height:1.8vw; line-height:1.8vw; text-align:center; border-radius:0.4vw; font-weight:500; font-size:0.9vw}
.header.fixed .dday{position:absolute;  height:49px; right:8vw; top:-2.7vw; }


.header.fixed h2 { position:relative; z-index:2  } /* 로고위치조절 */
.header.fixed h2 a{    overflow: hidden;
    position: absolute;
    top: -15px;
    overflow: hidden;
    position: absolute;
    top: -55px;
    left: 40px;
    width: 138px;
    height: 131px;
    background: url(/_images/logo.png?ver=8) no-repeat;
    background-size: 138px 131px;
    background-position: 0px 0px;
    text-indent: -9999px;}

.portfolio{ transition: color 0.25s ease-in-out;}
/* 서브메뉴*/
.portfolio .box{
	width:11vw;
	opacity:0;
	transition: .5s ease;
	box-sizing:border-box;
	touch-action: none;
	position: absolute;
	left: -8px;
	font-size:32px;
	padding: 1vw 22.5px;
	pointer-events: none;
	top: 1.8vw;
	color:#000;
	background:#e2f2f4;
}

.portfolio .box .b1{ z-index:10000; text-align:left; margin-bottom:9px; line-height:1vw}
/* 서브메뉴 액션*/
.portfolio .box::before{ content: '';  display:block;  position: absolute; left:22.5px;  height:0px; top:0; width:0px; height:0px; background:#fff; transition: .5s ease; }
/* 서브메뉴 호버시*/
.portfolio:hover .box::before{width:50px;}
.portfolio:hover .box{ opacity:1; pointer-events:auto; touch-action:auto;}
.portfolio:hover .box .b1 a.btn_color{color:#000; font-size:22px; transition: color 0.1s ease-in-out;-webkit-transition: color 0.1s ease-in-out;}
.portfolio:hover .box .b1 a.btn_color:hover{color:#542e91}

#header.fixed .portfolio .box{ background:#e2f2f4; }
#header.fixed .portfolio:hover .box .b1 a.btn_color{color:#000;}
#header.fixed .portfolio:hover .box .b1 a.btn_color:hover{color:#2488f8}
/* 서브메뉴 액션*/
#header.fixed .portfolio .box::before{ content: '';  display:block;  position: absolute; left:22.5px;  height:0px; top:0; width:0px; height:0px; background:#000; transition: .2s ease; }
/* 서브메뉴 호버시*/
#header.fixed .portfolio:hover .box::before{width:50px;}


#header.fixed .guide{color:#000; position:absolute; top:30px; padding:6px 15px; border:1px solid #000; font-size:18px; cursor:pointer; right:40px;}
#header.fixed .guide i{font-size:20px}
#header.fixed .guide:hover{ background:#000; color:#000}



@media (min-width:620px) and (max-width:1164px){
#header{ height:135px;}
#header.all{ height:135px; z-index:1000000}
#header.fixed.all{ height:135px; z-index:1000000}
.header .gnb .depth1 > a{display:block; height:70px;  font-size:15px; color:#212121; font-weight:600; } /* 1단계 메뉴 폰트 조절 */	
.header .gnb li.nav1 {
    float: left;
	margin-top:15px;
    margin-right: 12px;
    text-align: center;
}

.header .gnb {
    width: 650px;
    margin: 40px auto 0 auto;
    height: 3vw;
}

.header h2 a{       overflow: hidden;
        position: absolute;
        top: -30px;
        left: 20px;
        width: 161px;
        height: 130px;
        background: url(/_images/logo.png?ver=5) no-repeat;
        background-position: 0px 0px;
        background-size: 111px;
        text-indent: -9999px;}	



.header.fixed h2 a{     overflow: hidden;
        position: absolute;
        top: -30px;
        left: 20px;
        width: 161px;
        height: 130px;
        background: url(/_images/logo.png?ver=5) no-repeat;
        background-position: 0px 0px;
        background-size: 111px;
        text-indent: -9999px;}
#header.fixed{ z-index:1000000; height:135px;}
.header.fixed .gnb{
	width:650px;
    margin:40px auto;
    height: 3vw;}

}


@media (min-width:1165px) and (max-width:1345px){
#header{ height:135px;}
#header.fixed{ height:135px; z-index:1000000}
#header.all{ height:135px; z-index:1000000}
#header.fixed.all{ height:135px; z-index:1000000}
.header .gnb .depth1 > a{display:block; height:70px;  font-size:15px; color:#212121; font-weight:600; } /* 1단계 메뉴 폰트 조절 */
.header .gnb{margin:40px auto; 	width:650px;}
.header.fixed .gnb{
	width:650px;
    margin:40px auto;
    height: 3vw;}


.header h2 a{        overflow: hidden;
        position: absolute;
        top: -30px;
        left: 20px;
        width: 161px;
        height: 130px;
        background: url(/_images/logo.png?ver=5) no-repeat;
        background-position: 0px 0px;
        background-size: 111px;
        text-indent: -9999px;}	
	
.header.fixed .gnb li:last-child.nav1{ margin-right:0}
	
.header.fixed h2 a{        overflow: hidden;
        position: absolute;
        top: -30px;
        left: 20px;
        width: 161px;
        height: 130px;
        background: url(/_images/logo.png?ver=5) no-repeat;
        background-position: 0px 0px;
        background-size: 111px;
        text-indent: -9999px;}	
	
.header .gnb li.nav1{float:left; margin-right:13px; margin-top:15px;   text-align:center; }

.header.fixed .gnb li.nav1{float:left; margin-right:13px; margin-top:15px;   text-align:center; }

.header .util_menu a.mn{font-size:15px;}
.header .util_menu a{font-size:15px;}
.header .util_menu{ 
    text-align: center;
    margin-right: 1vw;
    position: absolute;
    z-index: 3;
    right: 0.5vw;
    top: 1vw;}
	
	
.header.fixed .util_menu{ 
    text-align: center;
    margin-right: 1vw;
    position: absolute;
    z-index: 3;
    right: 0.5vw;
    top: 1vw;}
	
	
.portfolio .box{
	width:11vw;
	opacity:0;
	transition: .5s ease;
	box-sizing:border-box;
	touch-action: none;
	position: absolute;
	left: -8px;
	font-size:32px;
	padding: 1vw 22.5px;
	pointer-events: none;
	top:2.5vw;
	color:#000;
	background:#e2f2f4;
}
	

}
