@charset "utf-8";
@import url("../css/NotoKR.css");
/* CSS Document */
/*-- reset css --*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    box-sizing:border-box;
}
html, body {font-family: 'Noto Sans Regular';
    width:100%;
    height:100%;
}
form {
    width:100%;
    height:100%;
}
body {
    line-height:1;
    overflow-x: hidden;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
ul, ol {list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;

	 /* Link Style - change colours to suit your needs*/
	 color:#666;
	 -webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 outline:none;
}
a:hover {
	text-decoration:none;
	color:#000;
}


/* common */
.clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/

/* change colours to suit your needs */
table {
    border-collapse:collapse;
    border-spacing:0;
    vertical-align:middle;
}
th, td {vertical-align:middle;}
input, select {
    vertical-align:middle;
}
/*-- END reset css --*/

/*---- common ----*/
div.wrap {
    margin:0 auto;
    width:1200px;
}
div.endline {
    clear:both;
}
/*-- END common --*/


/*---- header ----*/
div#header {
    position:fixed;
    width:100%;
    z-index:9999;
}
div.navInner {
    width:100%;
    background:rgba(0,0,0,0.7);
}
div.topArea {
    position:relative;
    width:100%;
    height:70px;
}
div.topArea::after {
    content:'';
    position:absolute;
    bottom:0;
    display:block;
    width:100%;
    height:1px;
    background:#333;
}
div.menuBtn {
    width:70px;
    height:70px;
    border-left:1px solid #333;
    border-right:1px solid #333;
    overflow:hidden;
    cursor:pointer;
}
div.menuBtn span.bar {
    margin:0 auto;
    display:block;
    width:18px;
    height:2px;
    background-color:#fff;
    transition:0.3s;
}
div.menuBtn span.bar:nth-child(1) {
    margin-top:26px;
}
div.menuBtn span.bar:nth-child(2) {
    margin:6px auto;
}
div.menuBtn.active span.bar:nth-child(1) {
    transform: translateY(8px) rotate(-45deg);
}
div.menuBtn.active span.bar:nth-child(2) {
    transform: rotate(-45deg);
    opacity: 0;
}
div.menuBtn.active span.bar:nth-child(3) {
    transform: translateY(-8px) rotate(-135deg);
}
h1.logo {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-20px;
    margin-left:-90px;
}
h1.logo a {
    display:block;
    width:180px;
    height:40px;
    background:url('../img/logo.png') no-repeat;
}
div.weather {}

div.gnb {
    position:relative;
    height:40px;
    border-bottom:1px solid transparent;
}
div.gnb::after {
    display:block;
    content:'';
    position:absolute;
    top:40px;
    width:100%;
    height:0;
    background:#fff;
    z-index:-1px;
    transition:0.3s;
}
div.gnbInner {
    margin:0 auto;
    width:1200px;
    height:40px;
}
ul.lnb {
    position:relative;
    float:left;
    margin-left:70px;
    width:950px;
    z-index:1;
}
ul.lnb li {
    position:relative;
    float:left;
    width:190px;
    height:40px;
    text-align:center;
}
ul.lnb li:first-child div.depth2 {
    border-left:1px solid #e9e9e9;
}
ul.lnb li:hover::after {
    position:absolute;
    left:0;
    bottom:0;
    display:block;
    content:'';
    width:100%;
    height:2px;
    background-color:#ffcb16;
}
ul.lnb li a.depth1 {
    position:relative;
    font-size:17px;
    line-height:40px;
    color:#fff;
}
div.depth2 {
    display:block;
    height:0;
    border-right:1px solid #e9e9e9;
    overflow:hidden;
    transition:0.3s;
}
div.depth2 a {
    margin:15px 0;
    display:none;
    font-size:15px;
    color:#777;
}
/*div.depth2 a:hover {
    text-decoration:underline;
}*/
div.util {
    float:right;
    width:180px;
    height:40px;
    background-color:#ffcb16;
    text-align:center;
}
div.util a {
    padding:0 8px;
    font-size:15px;
    line-height:40px;
    color:#fff;
}
div.util span.bar {
    display:inline-block;
    width:1px;
    height:11px;
    background-color:#fff2c4;
}

/*Navigation hover event */
div.navInner:hover {
    transition:0.2s;
    background:rgba(255,255,255,1);
}
div.navInner:hover div.topArea::after {
    transition:0.2s;
    background:#e9e9e9;
}
div.navInner:hover div.menuBtn {
    transition:0.2s;
    border-color:#e9e9e9;
}
div.navInner:hover div.menuBtn span.bar {
    transition:0.2s;
    background-color:#000;
}
div.navInner:hover h1.logo a {
    display:block;
    width:180px;
    height:40px;
    background:url('../img/logo_over.png') no-repeat;
}
div.navInner:hover ul.lnb a.depth1 {color:#333;}
div.gnb.open {border-bottom:1px solid #e9e9e9;}
div.gnb.open::after {border-bottom:1px solid #e9e9e9; height:260px;}
div.gnb.open ul.lnb div.depth2 {height:260px;}
div.gnb.open ul.lnb div.depth2 a {display:block;}
/*-- END header --*/

/*---- footer ----*/
div#footer {
    width:100%;
    background-color:#071721;
}
div.footTop {
    position:relative;
    margin:0 auto;
    width:1200px;
    height:40px;
    line-height:40px;
}
div.link a {
    margin-right:60px;
    font-size:14px;
    color:#aaadaf;
}
div.tel {
    position:absolute;
    top:0;
    right:0;
}
div.tel p.telTit {
    padding:0 10px 0 30px;
    color:#ffcb16;
    background:url('../img/footTel.png') no-repeat left center;
}
div.tel p {
    display:inline-block;
    font-size:18px;
    color:#fff;
}
p.footTxt {
    border-top:1px solid #283b46;
    padding:35px 0;
    font-size:15px;
    line-height:26px;
    color:#aaadaf;
    text-align:center;
}
/*-- END footer --*/


/*--- 날씨앱 추가 190917 김행도---*/
div.wrap .weather_sub {position: absolute; top: 5px; left: 42.8%; margin-left: 630px;display: inline-block}
div.wrap .weather_sub > .calIcon {float: left;}
div.wrap .weather_sub > .calIcon > img {width:35px; margin-top: 13px; opacity: 0.6;}
div.wrap .weather_sub > .calIcon > img:hover {opacity:1}
div.wrap .weather_sub > .weather_date {display: inline-block; margin: 14px 0 10px 5px; font-size: 12px; color: #a9a9a9}
div.wrap .weather_sub > .weather_date > span {display: block; color:#a9a9a9; font-size:17px; padding: 5px 0;}
div.wrap .weather_date:hover {color: #a9a9a9}
div.wrap .weather_sub > .weather_date:hover span {color:  #a9a9a9}