@charset "utf-8";

/*************************************************************************************************************
** layout
*************************************************************************************************************/
#wrap {position:relative;width:100%;height:100%;min-height:100%;height:auto !important;background:#999;}

#header {position:fixed;top:0;left:0;right:0;height:130px;z-index:3;}
#header .logo {padding:32px 0 0;text-align:center;}
#header .logo a {display:inline-block;width:170px;height:79px;vertical-align:top;background:url('../img/logo_W.png') no-repeat center top;background-size:auto 100%;}

#header .hUtil {position:absolute;right:80px;bottom:16px;}
#header .hUtil a,
#header .hUtil button {display:inline-block;margin:0 0 0 30px;line-height:26px;font-size:22px;color:#fff;font-weight:300;vertical-align:top; letter-spacing: 0.06em;}

#header .searchOpen {width:26px;height:26px;background:url('../img/searching-magnifying-glass.png') no-repeat center;}
#header .searchWrap {display:none;position:fixed;top:0;right:0;left:0;height:150px;background:rgba(0, 0, 0, 0.7);z-index:1;}
#header .searchWrap .searchClose {position:absolute;right:80px;bottom:40px;width:26px;height:26px;background:url('../img/X.png') no-repeat center;}
#header .searchWrap .searchWord {position:absolute;left:80px;right:120px;bottom:30px;padding:0 0 6px;border-bottom:2px solid #fff;}
#header .searchWrap .searchWord label {position:absolute;left:0;top:0;right:0;bottom:0;line-height:26px;color:#fff;font-size:20px;}
#header .searchWrap .searchWord input[type="text"] {width:100%;line-height:26px;font-size:20px;color:#fff;}

#header .hGnb {position:absolute;left:4vw;bottom:18px;}
#header .hGnb .gnbOpen {float:left;width:26px;height:26px;background:url('../img/Bar.png') no-repeat center;}
#header .hGnb .gnbAlarm { float:left; margin-left: 80px; line-height:26px;font-size:24px;color:#fff;font-weight:300;}
#header .hGnb .gnbAlarm .ic-bell {display: inline-block;width: 21px;height: 25px;background:url('../img/ic_bell_w.png') no-repeat center;margin-right: 32px;vertical-align: top;}

#header .gnb {display:none;position:fixed;top:0;bottom:0;left:0;width:360px;background:rgba(0, 0, 0, 0.7);}
#header .gnb .gnbMenu {position:absolute;left:80px;top:50%;transform:translate(0, -50%);}
#header .gnb .gnbMenu ul li {margin:30px 0 0;}
#header .gnb .gnbMenu ul li:first-child {margin:0;}
#header .gnb .gnbMenu ul li a {display:block;line-height:38px;font-size:22px;color:#fff;font-weight:300;}

#header .gnb .weather {position:absolute;bottom:20px;left:80px;color:#fff;}
#header .gnb .weather .national {display:block;padding:0 0 0 15px;line-height:22px;font-size:20px;font-weight:100;background:url('../img/map-placeholder.png') no-repeat left center;letter-spacing: 0;}
#header .gnb .weather .temperature {display:block;margin:10px 0 0;padding:0 0 0 55px;font-size:25px;}
#header .gnb .weather .temperature em {display:inline-block;line-height:50px;font-size:48px;vertical-align:top;}
#header .gnb .weather .temperature.ico01 {background:url('../img/raining-cloud.png') no-repeat left top; background-size:46px;}
#header .gnb .weather .temperature.ico02 {background:url('../img/shining-sun.png') no-repeat left top; background-size:46px;}
#header .gnb .weather .temperature.ico03 {background:url('../img/snowflake.png') no-repeat left top; background-size:46px;}
#header .gnb .weather .temperature.ico04 {background:url('../img/sun-and-cloud.png') no-repeat left top; background-size:46px;}

#header .gnb .gnbClose {position:absolute;top:85px;left:80px;width:26px;height:26px;background:url('../img/X.png') no-repeat center;}

#header.ver01 .logo a {background:url('../img/logo_B.png') no-repeat center top;background-size:auto 100%;}
#header.ver01 .hUtil a,
#header.ver01 .hUtil button {color:#000;} 
#header.ver01 .searchOpen {background:url('../img/searching-magnifying-glass-Black.png') no-repeat center;}
#header.ver01 .gnbOpen {background:url('../img/Bar-Black.png') no-repeat center;}
#header.ver02 {background:#fff;}
#header.ver02 .logo a {background:url('../img/logo_B.png') no-repeat center top;background-size:auto 100%;}
#header.ver02 .hUtil a,
#header.ver02 .hUtil button {color:#000;} 
#header.ver02 .searchOpen {background:url('../img/searching-magnifying-glass-Black.png') no-repeat center;}

#header.ver01  .hGnb .gnbOpen {background:url('../img/Bar-Black.png') no-repeat center;}
#header.ver01  .hGnb .gnbAlarm { color:#000;}
#header.ver01  .hGnb .gnbAlarm .ic-bell {background:url('../img/ic_bell.png') no-repeat center;}
#header.ver02  .hGnb .gnbOpen {background:url('../img/Bar-Black.png') no-repeat center;}
#header.ver02  .hGnb .gnbAlarm { color:#000;}
#header.ver02  .hGnb .gnbAlarm .ic-bell {background:url('../img/ic_bell.png') no-repeat center;}

#container {padding:0 0 13.80208333333333vw;}

#footer {overflow:hidden;position:absolute;bottom:0;left:0;right:0;box-sizing:border-box;height:13.80208333333333vw;padding:4.427083333333333vw 0 0;background:#000;}
#footer .fUtil {text-align:center;}
#footer .fUtil a {display:inline-block;margin:0 0 0 3vw !important;line-height:1.67vw;color:#fff;font-size:1.2vw; letter-spacing: 0.06em;}
#footer .fUtil a:first-child {margin:0;}

#footer .fInfo {margin:1.5625vw 0 0;line-height:1.0vw;color:#fff;font-size:0.6vw;text-align:center;} 

/**********************************************************************************
## MOBILE
**********************************************************************************/
@media screen and (max-width:800px) {
#header {height:16.67vw;}
#header .logo {padding:2.56vw 0 0;}
#header .logo a {width:16.67vw;height:11.12vw;}

#header .gnbOpen {left:4.45vw;bottom:4vw;width:6.67vw;height:6.67vw;background-size:100%;}
#header .gnb .gnbClose {
	left:4.45vw;
	top: 11vw;
    width: 4vw;
    height: 4vw;
    background-size: cover;
}

#header .hUtil {display:none;right:4.45vw;bottom:0;z-index:1;}
#header .hUtil a,
#header .hUtil button  {display:inline-block;margin:0 0 0 2.78vw;line-height:3.62vw;font-size:3.34vw;vertical-align:middle;}

#header .searchOpen {
	width: 3vw;
    height: 3.15vw;
    background-size: cover !important;
}
#header .searchWrap {height:25vw;}
#header .searchWrap .searchClose {right:4.45vw;bottom:4.5vw;width:3.62vw;height:3.621vw;background-size:auto 100%;}
#header .searchWrap .searchWord {left:4.45vw;right:13.89vw;bottom:2.78vw;padding:0 0 6px;border-bottom:2px solid #fff;}
#header .searchWrap .searchWord label {line-height:3.611111111111111vw;color:#fff;font-size:2.78vw;}
#header .searchWrap .searchWord input[type="text"] {line-height:3.62vw;font-size:2.78vw;}

#header .gnb {box-sizing:border-box;width:100%;}
#header .gnb .gnbMenu {left:4.45vw;}
#header .gnb .gnbMenu ul li {margin:4.17vw 0 0;}
#header .gnb .gnbMenu ul li a {line-height:8.89vw;font-size:4.48vw;}

#header .gnb .weather {position:absolute;bottom:2.6.67vw;left:4.45vw;color:#fff;}
#header .gnb .weather .national {display:block;padding:0 0 0 2.09vw;line-height:3.06vw;font-size:2.78vw;background-size:auto 1.95vw;}
#header .gnb .weather .temperature {display:block;height:6.94vw;margin:1.39vw 0 0;padding:0 0 0 7.64vw;font-size:3.47vw;}
#header .gnb .weather .temperature em {line-height:6.94vw;font-size:6.67vw;}
#header .gnb .weather .temperature.ico01 {background-size:6.67vw;}
#header .gnb .weather .temperature.ico02 {background-size:6.67vw;}
#header .gnb .weather .temperature.ico03 {background-size:6.67vw;}
#header .gnb .weather .temperature.ico04 {background-size:6.67vw;}

#header.ver01 .logo a {background-size:auto 100%;}
#header.ver01 .hUtil a {color:#000;} 
#header.ver01 .searchOpen {background-size:auto 100%;}
#header.ver01 .gnbOpen {background-size:auto 100%;}
#header.ver02 {background:#fff;}
#header.ver02 .logo a {background-size:auto 100%;}
#header.ver02 .hUtil a {color:#000;} 
#header.ver02 .searchOpen {background-size:auto 100%;}
#header.ver02 .gnbOpen {background-size:auto 100%;}

#container {padding:0 0 50vw;background-color: #eee;}

#footer {height:60vw;padding:4.16vw 0 0;}
#footer .fUtil {text-align:center;}
#footer .fUtil a {display:block;margin:1.38vw 0 0;line-height:6vw;color:#fff;font-size:2.33vw;}
#footer .fUtil a:first-child {margin:0;}

#footer .fInfo {margin:1.5625vw 16px 0;line-height:3.2vw;color:#fff;font-size:1.38vw;text-align:center;} 
}