@charset "utf-8";
/* CSS Document */

/*公共*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, dt+dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input, select {margin: 0; padding: 0; border: 0; vertical-align: middle; list-style:none; box-sizing: border-box;}

*:after, *:before {box-sizing: border-box;}

body{margin:0; padding:0; width:100%; height: 100%; font-size:12px; background: #f9f9f9;}

html{width:100%; height: 100%; overflow-y:scroll; overflow-x:hidden; -webkit-tap-highlight-color:rgba(0,0,0,0);}

table   {border-collapse:collapse;}
caption {display:none;}

a, i, u, b, em, del, span, strong, section {vertical-align: 0; font-style: normal; font-weight: normal;}

a:link, a:active, a:visited, a:hover, u {text-decoration:none;}

.al        {text-align:left !important}
.ac        {text-align:center !important}
.ar        {text-align:right !important}
.ufl li {float:left;}
.fl {float:left !important;}
.fr {float:right !important;}
.clearfix {zoom:1}
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothic.eot'); src:url('font/NanumBarunGothic.eot') format(eot); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothic.woff'); src:url('font/NanumBarunGothic.woff') format(woff); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothic.ttf'); src:url('font/NanumBarunGothic.ttf') format(ttf); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicBold.eot'); src:url('font/NanumBarunGothicBold.eot') format(eot); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicBold.woff'); src:url('font/NanumBarunGothicBold.woff') format(woff); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicBold.ttf'); src:url('font/NanumBarunGothicBold.ttf') format(ttf); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicLight.eot'); src:url('font/NanumBarunGothicLight.eot') format(eot); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicLight.woff'); src:url('font/NanumBarunGothicLight.woff') format(woff); }
@font-face { font-family:NanumGothic; src:url('font/NanumBarunGothicLight.ttf'); src:url('font/NanumBarunGothicLight.ttf') format(ttf); }

@font-face { font-family:NanumGothic; src:url('font/NanumGothic.eot'); src:url('font/NanumGothic.eot') format(eot); }
@font-face { font-family:NanumGothic; src:url('font/NanumGothic.woff'); src:url('font/NanumGothic.woff') format(woff); }
@font-face { font-family:NanumGothic; src:url('font/NanumGothic.ttf'); src:url('font/NanumGothic.ttf') format(ttf); }

/*  'NanumGothic','Helvetica'  */

/* 电脑板 */
@media screen and (min-width: 1025px) {
    .mode_pc {display: block !important;}
    .mode_mobile {display: none !important;}

    /* 头部CSS */
    h1 {position: absolute; top: 50px; left: 48px; z-index: 100;}
    .nav_btn {position: absolute; top: 50px; right: 48px; z-index: 100;}
    .nav {position: fixed; top: 0; right: -100%; width: 340px; height: 100%; background: #fff; padding: 62px 48px 0 37px; z-index: 100; visibility: hidden; transition: .3s;}
    .nav>a {float: right; display: block;}
    .nav ul {clear: both; padding-top: 20px;}
    .nav ul li {margin-top: 20px;}
    .nav ul li a{display: block; width: 100%; font: 16px/40px 'MS Serif'; letter-spacing: 1px; color: #323232; padding-left: 13px;}
    .nav ul li.v a{color: #fff; background: #323232;}
    .nav ul li:hover a{color: #fff; background: #323232;}
    .menu {position: fixed; top: 50%; transform: rotate(90deg); z-index: 99;}
    .menu li{float: left; padding: 0 14px;}
    .menu i{display: none;}
    .menu a{position: relative; display: block; font: 18px/72px 'NanumGothic'; color: #676767;}
    .menu li.v a{color: #fff;}
    .menu li.v a:before{content: '\20'; display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #fff;}
    .menu li.v i{display: block; position: absolute; top: 50%; left: 49%; margin-left: -8px; margin-top: 20px;  transform: rotate(-90deg);}
    .menu li.v2 a{color: #0f45cd;}
    .menu li.v2 a:before{background: #0f45cd;}
    .top_btn {position: fixed; bottom: 160px; left: 50%; margin-left: 550px; z-index: 99; visibility: hidden; opacity: 0; transition: .5s;}

    /* 尾部CSS */
    .footer {width: 100%; height: 100px; padding-top: 18px; background: #212020; font: 12px/20px 'NanumGothic'; color: #9f9f9f; text-align: center;}
    .footer span{font: 12px/36px 'NanumGothic'; color: #666;}

}

/* 小电脑 */
@media screen and (max-width: 1600px) {
}

/* 手机版 */
@media screen and (max-width: 1024px) {
    .mode_pc {display: none !important;}
    .mode_mobile {display: block !important;}

    /* 头部CSS */
    h1 {position: absolute; top: 2rem; left: 2rem; z-index: 100;}
    h1 img{width: 14rem;}
    .nav_btn {position: absolute; top: 2rem; right: 2rem; z-index: 100;}
    .nav_btn img{width: 2.5rem;}
    .nav {position: fixed; top: 0; right: -100%; width: 340px; height: 100%; background: #fff; padding: 62px 48px 0 37px; z-index: 100; visibility: hidden; transition: .3s;}
    .nav>a {float: right; display: block;}
    .nav ul {clear: both; padding-top: 20px;}
    .nav ul li {margin-top: 20px;}
    .nav ul li a{display: block; width: 100%; font: 16px/40px 'MS Serif'; letter-spacing: 1px; color: #323232; padding-left: 13px; background: #f8f8f8;}
    .nav ul li.v a{color: #fff; background: #323232;}
    .menu {display: none;}
    .top_btn {position: fixed; bottom: 120px; left: 50%; margin-left: 550px; z-index: 99; visibility: hidden; opacity: 0; transition: .5s;}


    /* 尾部CSS */
    .footer {width: 100%; height: 16rem; padding: 2rem 2rem 0 2rem; background: #212020; font: .9rem/1.6rem 'NanumGothic'; color: #9f9f9f; text-align: center;}
    .footer span{font: .9rem/1rem 'NanumGothic'; color: #666;}

}