@charset "utf-8";
@import url(https://cdnjs.cloudflare.com/ajax/libs/spoqa-han-sans/2.1.1/css/SpoqaHanSans-kr.min.css);
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css);

@font-face {
    font-family: 'NotoSansKR-Thin';
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Light';
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Regular';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Medium';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Black';
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/GothamBold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/Gotham-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/GothamMedium.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/Gotham-Light.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/GothamLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/Gotham-Medium.woff') format('woff');
}

@font-face {
    font-family: 'chosun_ilbo_myungjo';
    font-style: normal;
    font-weight: normal;
    src: url('/Resource/font/chosun_ilbo_myungjo.woff') format('woff');
}


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p, blockquote, th, td, legend, button {margin:0; padding:0;}
* {margin: 0px;padding: 0px;box-sizing: border-box;}
body {font-family: 'NotoSansKR-Regular', sans-serif; width: 100%; height: 100%; font-size:1rem;}
ul, li { list-style: none; }
a { text-decoration: none; }
img {width:100%;vertical-align: top;border: 0 none;}

#header { width: 100%; height: 100%; position: relative; }
#header .logo {text-align:center;position: absolute;margin-left: -18vw;left: 50%;top: 50%;margin-top: -3.5vw;}
#header .logo a {display:inline-block;width: 36vw;}
#header .logo a img {width:100%;}
#header .nav { background: #fff; height: 20vw; position: relative; }
#header .nav-links {opacity: 0;visibility: hidden;transform: translateY(-20px);transition: all .3s;position: absolute;top: 0;background-color: #3c78dd;left: 0;z-index: 9;width: 100%;padding: 6vw 0;}
#header .nav_bg {background: rgba(0, 0, 0, 0.5);content: '';height: 100vh;z-index: 3;left: 0;top: 0;position: absolute;opacity: 0;visibility: hidden;width: 100%;transition: all .3s;}
#header .nav-links li {margin: 0 auto;}
#header .nav-links li:last-child a{border-bottom:0px;}
#header .nav-links li a {color: #fff;margin:0 8vw;border-bottom: 1px solid #9ebcee;display: block;font-size: 5vw;padding: 15px 0;text-align: center;transition: all .3s;}
#header input[type="checkbox"] {position: absolute;z-index: 99;opacity: 0;visibility: hidden;}
#header input[type="checkbox"]:checked ~ .content nav {background-color:#3c78dd}
#header input[type="checkbox"]:checked + label {height: 0.2vw;top: 50%;left: 4vw;width: 5vw;transform: rotate(-135deg);border: 0px;}
#header input[type="checkbox"]:checked + label::before {background: #fff;left: 0px;width: 6vw;}
#header input[type="checkbox"]:checked + label::after {background: #fff;opacity: 1;top: -0.3vw;left: 0px;visibility: visible;width: 6vw;}
#header input[type="checkbox"]:checked + label:hover {border-color: #fff;}
#header input[type="checkbox"]:checked + label:hover::before, #header input[type="checkbox"]:checked + label:hover::after {background: #fff;}
#header input[type="checkbox"]:checked ~ .nav_bg { opacity: 1; visibility: visible; }
#header input[type="checkbox"]:checked ~ .nav-links  { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;}
#header label {background: none transparent;border: 0.8vw solid #3c78dd;border-left: 0 solid transparent;border-right: 0 solid transparent;cursor: pointer;display: block;height: 5vw;position: absolute;z-index: 99;top: 50%;margin-top: -2.5vw;left: 4vw;width: 5vw;transition: all .2s;}
#header label::before {background: #3c78dd;content: '';height: 0.8vw;left: 0;position: absolute;top: 50%;margin-top: -0.4vw;width: 5vw;transition: all .2s;}
#header label::after {background: #3c78dd;content: '';height: 0.8vw;left: 0;position: absolute;top: 50%;opacity: 0;visibility: hidden;width: 100%;transform: rotate(90deg);transition: all .2s;}

#footer {position:relative;}
.top {position:fixed; width:10vw;right:1vw; bottom:34.5vw;z-index:10;display:none;}