/*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%;max-width:2168px;} #hd_wrapper.over {background-color: rgba(51, 51, 51, 0.7);border-bottom:1px solid #707070;} #logo{position: absolute; width:240px; left: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10;} #logo img{width: 100%;} #gnb {} #gnb {float:right;} #gnb .gnb_1dli{line-height: 90px; padding:0 30px;text-align: center;min-width:150px;} .gnb_1da{width: 100%; color: #fff; font-weight: 400;font-size:22px;} .gnb_2dul{top:110px; left: 50%; } .gnb_1dli_over .gnb_2dul{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #nav_bar{height: 3px; background: #fff; position: absolute; bottom: 0;} .gnb_2dli{border: none;} .gnb_2da{color: #fff; text-align: center; font-weight: 300;font-size:15px} a.gnb_2da:hover{color: #fff;} #hd.scrollBg a.gnb_2da:hover {color: #fff;} #hd.scrollBg #slidmenu {background-color:#fff;} #hd #slidmenu.over {display:block;} .hd_login { width:20%; overflow: hidden; position:fixed; right:5%; top:35%; z-index:999999;} .hd_login a {float:left; margin:0 5%; color:black; } #tnb{ border-bottom: none; background: none; 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; width: 40px; height: 40px; font-size: 1.0em; border-left: none; z-index: 10;} #tnb li a{width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;} #tnb li .fa{display: none;} #tnb .tnb_admin a{color: #d40424;} #tnb a:hover{background: none; color: #333;} #tnb .tnb_admin a:hover{color: #d40424;} #tnb li.register{background: url(../../img/common/register_icon2.png) center no-repeat; position: absolute; top: 50%; right: 70px; -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_icon1.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_icon1.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:#fff;border: 0;color:#000} .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:0px;right: 0;width: 100%;height: 100%;background: #000;opacity: .7;cursor: pointer; z-index: 1000;} .mb-sub-ul {display: none; background: #f5f5f5;padding:15px 15px 15px 66px} .mb-sub-ul li { list-style: disc;} .mb-sub-ul li a {display: block; font-size:24px; padding: 15px 0;} .mobile_menu{position: absolute; width: 100%; left:0%; top:0px;margin-top:80px;} .mobile_menu ul{width: 100%; overflow: hidden;} .mobile-list {width: 100%;} .mobile-list a {padding: 20px 40px; width:90%; color: #000; text-transform: uppercase;font-size:24px; text-align: left; font-weight: normal;} #mlogo {display: block;padding: 20px 40px;border:1px solid #dedede;} #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: 1px;background: #fff;-webkit-transition: all .4s ease;transition: all .4s ease;} #mb-open-menu .line1 {top: 0px;} #mb-open-menu .line2 {top: 7px;} #mb-open-menu .line3 {bottom: 0;} @media all and (max-width:1370px){ #hd_wrapper{width: 100%;} #slidmenu .inner #gnb_2dul{width:1100px;float:right} .gnb_1da {font-size:24px;} } @media all and (max-width:1199px){ #tnb{width: 100%;} } @media all and (min-width:1250px){ #hd{height: 90px; z-index: 10; position: fixed; top: 0; min-width: none; width: 100%; } #hd_wrapper{background:none; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} #hd #slidmenu {width:100%;height:160px;background-color: rgba(51, 51, 51, 0.7);margin-top:90px;display:none;} #hd.scrollBg #hd_wrapper{background: rgba(255,255,255,1);} #hd.scrollBg #slidmenu{background: rgba(51, 51, 51, 0.7); -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{width:100%;max-width:1370px; height: 90px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #hd.scrollBg .gnb_1da{color: #000;} #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);} .logo_pc{display: block;} .logo_mobile{display: none;margin-left:-40px;} #aside{display: none;} #gnb{display: block;} .close_menu{display: none;} #mb-open-menu{display: none;} #hd.scrollBg #nav_bar{background: #c80e21; bottom: -1px;} } @media all and (max-width:1250px){ #hd{width: 100%; display: block; height: 60px;} #hd_wrapper{width: 100%;} #hd #slidmenu {width:100%;height:200px;margin-top:90px;display:none;} #tnb{width: 100%; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; height: 60px;} #tnb li{width: 35px; height: auto;} #tnb li.login, #tnb li.register{right: inherit; left: 20px;} #tnb li.logout{right: inherit; left: 70px;} #tnb li{height: 40px; line-height: 40px;} #gnb{display: none;} #logo{height: 26px; left:10px;} .logo_mobile{display: block;} .logo_pc{display: none;} #wrapper{margin-top:0px;} #aside{display: block; z-index: 2000;} } @media all and (max-width:980px){ #logo{top:30%; } .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%;} #logo img {width:180px;} #tnb li{width: 28px; height: auto;} #tnb a{padding: 0;} #tnb li.logout{right: inherit; left: 56px;} }