/*headStyle.css*/
.dark-mode { background:#333; }
.dark-mode h1, h2 , h3, p { color:#fff; }
.dark-mode p,
.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#c71526;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#c71526;
    color:#ee1e
}
button { background:#c71526; }
#darkLight {
    width:70px; height:90px; 
    font-size:3em;
    padding-left:0.5%;
    position:fixed;
    right:0; bottom:3%;
    border-radius:100px 0 0 100px;
    transition:all .3s;
    z-index:99999;
}
#darkLight:hover {
    width:130px;
    padding-left:1%;
    background-color:#111;
}
#hd{width: 100%; }
#hd_wrapper{height: 100%; }
#logo{position: absolute; width: 120px; height:42px; left: 0px; top: 45%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10;}
#logo img{width: 100%;}
#gnb{position: absolute; right: -22%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 60%;}
#gnb .gnb_1dli{line-height: 90px; width: 14%; text-align: center;}
.hd_login { width:20%; overflow: hidden; position:fixed; right:5%; top:35%; z-index:999999;}
.hd_login a {float:left; margin:0 5%; color:#fff; }
.gnb_1da{width: 100%; /* color: #fff; */ font-weight: 700;}
.gnb_1da:hover { }
.gnb_1dli .bg{display: none;}
.gnb_2dul{top: 90px; left: 50%;  width: 100%; background: rgba(0,0,0,0.9);}
.gnb_1dli_over .gnb_2dul{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0,0,0,0.9);}



.gal_tab { width: 100%; margin: 0 auto; padding: 0; text-align: center; }
.gal_tab a { display: inline-block; padding: 10px 15px; border: 1px solid #eee ; }

#nav_bar{height: 1px; background: #fff; position: absolute; bottom: 0;}
.gnb_2dli{border: none;}
.gnb_2da{color: #fff; text-align: center; font-weight: 300; font-size: 12px;}
a.gnb_2da:hover{background-color: #000;}
#tnb{ width: 1200px; height: 90px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#tnb ul{min-width: inherit; width: 100%;}
#tnb li{position: absolute; height: 40px; font-size: 14px; border-left: none; z-index: 10;}
#tnb li a{ /* width: 100%; */ height: 100%; overflow: hidden;  }
#tnb li .fa{display: none;}
#tnb .tnb_admin a{color: #d40424;}
#tnb a:hover{background: none; color: #000;}
#tnb .tnb_admin a:hover{color: #d40424;}
#tnb li.register{/* background: url(../../img/common/register_icon1.png) center no-repeat; */ position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#tnb li.join{display: none;}
#tnb li.tnb_admin{display: none;}
#tnb li.login{/* background: url(../../img/common/login_icon2.png) center no-repeat */; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#tnb li.logout{/* background: url(../../img/common/logout_icon2.png) center no-repeat; */ position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#aside{position: fixed;right: -100%; top: 0px; bottom: 0; margin: 0px;width: 100%; border-top: 0;z-index: 1005;overflow-y: auto;background-color: rgba(255, 255, 255, 0.9);border: 0;}
.close_menu {position: fixed;z-index: 1100; top: 20px; right: -100%; width: 35px; height: 35px;}
.close_menu span {position:absolute; left:0; display:block; width:100%; height:2px; background:#000; -webkit-transition:all .4s ease; transition:all .4s ease; }
.close_menu .close-line1 {top:17px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
.close_menu .close-line2 {top:17px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
.mask {display: none;position: fixed;top: 0;right: 0;width: 100%;height: 100%;background: #000;opacity: .7;cursor: pointer; z-index: 1000;}
.mb-sub-ul {display: none; /* background: #333; */}
.mb-sub-ul li a {display: block; font-size: 16px; font-weight: 400; padding: 10px 0; color: #000;}
.mobile_menu{position: absolute; width: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.mobile_menu ul{width: 100%; overflow: hidden; text-align: center; vertical-align: top; }
.mobile-list {width: 13%; display: inline-block; vertical-align: top;}
.mobile-list a { cursor: pointer; padding: 20px 0; width: 100%; color: #000; font-size: 16px; text-align: center; font-weight: normal;}

.mobile-list ul.mb-sub-ul:before { display: block; content: ''; width: 10%; height: 1px; background-color: #000;  margin: 10px auto 10px auto; }

#mb-open-menu{position: absolute;right: 20px;top: 50%;-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%);width: 26px;height: 16px;cursor: pointer;z-index: 10;}
#mb-open-menu span {position: absolute;left: 0;display: block;width: 100%;height: 2px; background: #000; -webkit-transition: all .1s ease;transition: all .1s ease;}
#mb-open-menu:hover span { background: #000; color: #ffffff; font-size: 50px;}
#mb-open-menu .line1 {top: 0px;}
#mb-open-menu .line2 {top: 7px;}
#mb-open-menu .line3 {bottom: 0;}


.mtop { position: relative; margin: 0; padding: 0; text-align: center; line-height: 0;}
.mtop .vtxt { color: #ffffff; line-height: 85px; font-size: 68px; font-weight: 700; position: absolute; top:250px; left:170px; text-align: left; z-index: 999; overflow: hidden; width: 80%; /* text-shadow: 3px 3px 4px black; */ }
.mtop .vtxt1 { color: #ffffff; }
.mtop .vtxt2 { font-weight: 400; color: #ffffff; }


.mtop .vtxt-bottom { color: #ffffff; line-height: 85px; font-size: 68px; font-weight: 700; position: absolute; bottom:22%; left:12%;  /* transform: translate(-50%, -50%); */ text-align: left; z-index: 9999999; overflow: hidden; width: 100%; text-shadow: 3px 3px 4px black; }



@media all and (max-width:950px){
	.mtop .vtxt { font-size: 40px; line-height: 55px; left: 20px; top:100px; width: 80%  }
}

@media all and (max-width:650px){
}


@media all and (max-width:1200px){
    #hd_wrapper{width: 100%;}
}

@media all and (max-width:1199px){
    #tnb{width: 100%;}
}
@media all and (min-width:1025px){
    #hd{height: 90px; z-index: 10; position: fixed; top: 0; min-width: none; width: 100%; }
    #hd_wrapper{background: rgba(255,255,255,0); -webkit-transition-duration: 0.0s; transition-duration: 0.0s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; /* border-bottom: 1px solid #b2b2b2; */}
    #hd.scrollBg #hd_wrapper{ background: rgba(255,255,255,0.9); /*-webkit-box-shadow: -2px 6px 16px 0px rgba(0,0,0,0.26); box-shadow: -2px 6px 16px 0px rgba(0,0,0,0.26); */}
    #hd_wrapper{position: absolute; width: 100%; height: 90px;}
    #hd_wrapper .inner{height: 90px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
    #hd.scrollBg .gnb_1da{color: #000000;}
	#hd.scrollBg #tnb li a { color: #000000; }
    /* #hd.scrollBg #tnb li.login{background-image: url(../../img/common/login_icon1.png);}
    #hd.scrollBg #tnb li.logout{background-image: url(../../img/common/logout_icon1.png);}
    #hd.scrollBg #tnb li.register{background-image: url(../../img/common/register_icon2.png);} */
	#hd.scrollBg #mb-open-menu span { background-color: #000; }
    
    #gnb{ /* width: 850px;  */    margin: 0 0 0 40px;}
    .logo_pc{display: block;}
    .logo_mobile{display: none;}
    .logo_main{display: none;}
    #aside{display: none;}
    #gnb{display: block;}
    /* .close_menu{display: none;} */
/*     #mb-open-menu{display: none;} */
    #hd.scrollBg #nav_bar{background: #000; bottom: -1px;}
}

@media all and (max-width:1279px){
	#tnb li.register { right:55px;}
}

@media all and (min-width:1026px){
	#aside{display: block;}
}
@media all and (max-width:1024px){
    #hd{width: 100%; display: block; height: 60px;}
    #hd_wrapper{width: 100%;}
    #tnb{width: 100%; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; height: 60px; border:0px;}
    #tnb li{ height: auto;}
    #tnb li.login, #tnb li.register{right: inherit; left: 5px;}
    #tnb li.logout{right: inherit; left: 70px;}
    #tnb li{height: 40px; line-height: 40px;}
    #gnb{display: none;}
    #logo{width: 110px; height: 39px; left: 0%; margin-left: 14px; top: 49%;}
    .logo_mobile{display: block;}
    .logo_pc{display: none;}
    #aside{display: block; z-index: 2000;}
}
@media all and (max-width:980px){
    .hd_login {
        width: 20%;
        overflow: hidden;
        position: absolute;
        right: 5%;
        top: 35%;
    }
}

@media all and (max-width:600px){
    .hd_login { display: none; }
    #aside{width: 100%;}
    #tnb li{ height: auto;}
    #tnb a{padding: 0; line-height: 17px;}
    #tnb li.logout{right: inherit; left: 56px;}
	.mobile-list { width: 100%; }
	.mobile_menu { top: 47%; }
}