::-webkit-scrollbar {background:rgba(75, 186, 228, 0.2);width:5px;} ::-webkit-scrollbar-button {background:rgba(75, 186, 228, 0.5);} ::-webkit-scrollbar-thumb {background:rgba(75, 186, 228, 1);} ::selection {background:rgba(75, 186, 228, 0.5);} .wrap {max-width:1200px;margin:0 auto;} header {padding:25px 0;user-select:none;z-index:1000;overflow:visible;background:#fff;position:absolute;width:100%;} header .wrap {width:100%;max-width:96%;} header .logo {float:left;width:10%;animation:headerAnimation 1s forwards;opacity:0;transform:translateX(-40px); height:80px; margin-top:-5px; } .pages a {color:#4bbae4 !important;} .pages a::after {content:'';background:url(/images/content/icon_cursor.gif);width:25px;height:20px;transform:translateY(8px);margin-left:2px;display:inline-block;} #tnb {float:left;width:73%;margin-left:5%;text-align:center;padding-bottom:10px;} #site-map .site-menu {width:73%;margin:0 5% 0 15%;} #tnb > ul > li {position:relative;transform:translateY(-40px);opacity:0;animation:headerAnimation 1s forwards;top:10px;z-index:1000;} #tnb > ul > li:hover {} #tnb > ul > li div {transition:all 1s;display: inline-block;} #tnb > ul > li div.scale:hover {transform:scale(1.05);} #tnb > ul > li a {position:relative;z-index:10;color:#000;font-size:18px;line-height:1;} #tnb > ul > li a:hover {color:#000;} #tnb > ul > li:nth-child(1) {} #tnb > ul > li:nth-child(2) {animation-delay:0.1s;} #tnb > ul > li:nth-child(3) {animation-delay:0.2s;} #tnb > ul > li:nth-child(4) {animation-delay:0.3s;} #tnb > ul > li:nth-child(5) {animation-delay:0.4s;} #tnb > ul > li:nth-child(6) {animation-delay:0.5s;} #tnb > ul > li:nth-child(7) {animation-delay:0.6s;} #tnb > ul > li:nth-child(8) {animation-delay:0.7s;} #tnb > ul > li:nth-child(9) {animation-delay:0.8s;} #tnb > ul > li:nth-child(10) {animation-delay:0.9s;} #tnb > ul > li:nth-child(11) {animation-delay:1s;} #stnb .site-menu li:nth-child(1) a.active span span, #stnb .site-menu li:nth-child(1) a:hover span span, #tnb > ul > li:nth-child(1) div:after, #tnb > ul > li:nth-child(1) div:before, #tnb > ul > li:nth-child(1) .sub-menu li.active a span span, #tnb > ul > li:nth-child(1) .sub-menu a:hover span span {background:#e74a05;} #stnb .site-menu li:nth-child(2) a.active span span, #stnb .site-menu li:nth-child(2) a:hover span span, #tnb > ul > li:nth-child(2) div:after, #tnb > ul > li:nth-child(2) div:before, #tnb > ul > li:nth-child(2) .sub-menu li.active a span span, #tnb > ul > li:nth-child(2) .sub-menu a:hover span span {background:#ffc512;} #stnb .site-menu li:nth-child(3) a.active span span, #stnb .site-menu li:nth-child(3) a:hover span span, #tnb > ul > li:nth-child(3) div:after, #tnb > ul > li:nth-child(3) div:before, #tnb > ul > li:nth-child(3) .sub-menu li.active a span span, #tnb > ul > li:nth-child(3) .sub-menu a:hover span span {background:#c6de00;} #stnb .site-menu li:nth-child(4) a.active span span, #stnb .site-menu li:nth-child(4) a:hover span span, #tnb > ul > li:nth-child(4) div:after, #tnb > ul > li:nth-child(4) div:before, #tnb > ul > li:nth-child(4) .sub-menu li.active a span span, #tnb > ul > li:nth-child(4) .sub-menu a:hover span span {background:#1e8d36;} #stnb .site-menu li:nth-child(5) a.active span span, #stnb .site-menu li:nth-child(5) a:hover span span, #tnb > ul > li:nth-child(5) div:after, #tnb > ul > li:nth-child(5) div:before, #tnb > ul > li:nth-child(5) .sub-menu li.active a span span, #tnb > ul > li:nth-child(5) .sub-menu a:hover span span {background:#4bbae4;} #stnb .site-menu li:nth-child(6) a.active span span, #stnb .site-menu li:nth-child(6) a:hover span span, #tnb > ul > li:nth-child(6) div:after, #tnb > ul > li:nth-child(6) div:before, #tnb > ul > li:nth-child(6) .sub-menu li.active a span span, #tnb > ul > li:nth-child(6) .sub-menu a:hover span span {background:#0b48f7;} #stnb .site-menu li:nth-child(7) a.active span span, #stnb .site-menu li:nth-child(7) a:hover span span, #tnb > ul > li:nth-child(7) div:after, #tnb > ul > li:nth-child(7) div:before, #tnb > ul > li:nth-child(7) .sub-menu li.active a span span, #tnb > ul > li:nth-child(7) .sub-menu a:hover span span {background:#8917aa;} #stnb .site-menu li:nth-child(8) a.active span span, #stnb .site-menu li:nth-child(8) a:hover span span, #tnb > ul > li:nth-child(8) div:after, #tnb > ul > li:nth-child(8) div:before, #tnb > ul > li:nth-child(8) .sub-menu a:hover span span, #tnb > ul > li:nth-child(8) .sub-menu li.active a span span, #tnb > ul > li:nth-child(8) .sub-menu li.active a span span {background:#ef47ae;} #stnb .site-menu li:nth-child(9) a.active span span, #stnb .site-menu li:nth-child(9) a:hover span span, #tnb > ul > li:nth-child(9) div:after, #tnb > ul > li:nth-child(9) div:before, #tnb > ul > li:nth-child(9) .sub-menu a:hover span span, #tnb > ul > li:nth-child(9) .sub-menu li.active a span span, #tnb > ul > li:nth-child(9) .sub-menu li.active a span span {background:#010101 !important;} #stnb .site-menu li:nth-child(9) a.active span span, #stnb .site-menu li:nth-child(9) a:hover span span, #tnb > ul > li:nth-child(10) div:after, #tnb > ul > li:nth-child(10) div:before, #tnb > ul > li:nth-child(10) .sub-menu a:hover span span, #tnb > ul > li:nth-child(10) .sub-menu li.active a span span, #tnb > ul > li:nth-child(10) .sub-menu li.active a span span {background:#ff9e1c;} #tnb > ul > li:nth-child(11) div:after, #tnb > ul > li:nth-child(11) div:before, #tnb > ul > li:nth-child(11) .sub-menu a:hover span span, #tnb > ul > li:nth-child(11) .sub-menu li.active a span span, #tnb > ul > li:nth-child(11) .sub-menu li.active a span span {background:#00a29e;} #stnb .site-menu li:nth-child(1) a.active, #stnb .site-menu li:nth-child(1) a:hover, #tnb > ul > li:nth-child(1) .sub-menu li.active a, #tnb > ul > li:nth-child(1) .sub-menu a:hover {color:#e74a05;} #stnb .site-menu li:nth-child(2) a.active, #stnb .site-menu li:nth-child(2) a:hover, #tnb > ul > li:nth-child(2) .sub-menu li.active a, #tnb > ul > li:nth-child(2) .sub-menu a:hover {color:#ffc512;} #stnb .site-menu li:nth-child(3) a.active, #stnb .site-menu li:nth-child(3) a:hover, #tnb > ul > li:nth-child(3) .sub-menu li.active a, #tnb > ul > li:nth-child(3) .sub-menu a:hover {color:#c6de00;} #stnb .site-menu li:nth-child(4) a.active, #stnb .site-menu li:nth-child(4) a:hover, #tnb > ul > li:nth-child(4) .sub-menu li.active a, #tnb > ul > li:nth-child(4) .sub-menu a:hover {color:#1e8d36;} #stnb .site-menu li:nth-child(5) a.active, #stnb .site-menu li:nth-child(5) a:hover, #tnb > ul > li:nth-child(5) .sub-menu li.active a, #tnb > ul > li:nth-child(5) .sub-menu a:hover {color:#4bbae4;} #stnb .site-menu li:nth-child(6) a.active, #stnb .site-menu li:nth-child(6) a:hover, #tnb > ul > li:nth-child(6) .sub-menu li.active a, #tnb > ul > li:nth-child(6) .sub-menu a:hover {color:#0b48f7;} #stnb .site-menu li:nth-child(7) a.active, #stnb .site-menu li:nth-child(7) a:hover, #tnb > ul > li:nth-child(7) .sub-menu li.active a, #tnb > ul > li:nth-child(7) .sub-menu a:hover {color:#8917aa;} #stnb .site-menu li:nth-child(8) a.active, #stnb .site-menu li:nth-child(8) a:hover, #tnb > ul > li:nth-child(8) .sub-menu li.active a, #tnb > ul > li:nth-child(8) .sub-menu a:hover {color:#ef47ae;} #stnb .site-menu li:nth-child(9) a.active, #stnb .site-menu li:nth-child(9) a:hover, #tnb > ul > li:nth-child(9) .sub-menu li.active a, #tnb > ul > li:nth-child(9) .sub-menu a:hover {color:#010101 !important;} #stnb .site-menu li:nth-child(10) a.active, #stnb .site-menu li:nth-child(10) a:hover, #tnb > ul > li:nth-child(10) .sub-menu li.active a, #tnb > ul > li:nth-child(10) .sub-menu a:hover {color:#ff9e1c;} #stnb .site-menu li:nth-child(11) a.active, #stnb .site-menu li:nth-child(11) a:hover, #tnb > ul > li:nth-child(11) .sub-menu li.active a, #tnb > ul > li:nth-child(11) .sub-menu a:hover {color:#00a29e;} #tnb .sub-menu {position:absolute;left:0;top:90px;width:100%;background:rgba(255,255,255,0.9);padding:0;} #tnb .sub-menu ul {width:100%;display:none;padding-top:20px;} #tnb .sub-menu ul li {width:100%;padding:6px 0;} #tnb .sub-menu ul li:last-child {padding-bottom:20px;} #tnb .sub-menu ul li a {transition:all 0.5s;position:relative;display:block;overflow:hidden;padding:2px 0 0 0;font-size:17px;} #tnb .sub-menu ul li a span {display:inline-block;text-align:center;max-width:90%;} /*#tnb .sub-menu ul li a span > span {transition:all 0.5s;width:0;height:2px;background:#fff;border:0;margin:0 auto;left:50%;display:inline;position:absolute;bottom:0;}*/ #tnb .sub-menu ul li a span > span {background:#fff;height:2px;width:0;position:relative;left:50%;display:block;transition:all 0.5s;margin-top:5px;} #tnb .sub-menu ul li.active span span, #tnb .sub-menu ul li a:hover span span {width:100%;max-width:100%;left:0;} #rtnb {float:right;width:5%;text-align:right;transform:translateY(-50px);opacity:0;animation:headerAnimation 1s forwards;animation-delay:0.8s;} #rtnb div {position:relative;top:25px;cursor:pointer;width:35px;height:23px;float:right;transition:all 0.5s;} #rtnb div span {display:block;position:relative;height:3px;background:#000;width:29px;margin-bottom:7px;transition:0.5s;} #rtnb div span:nth-child(1) {margin-left:1px;} #rtnb div span:nth-child(2) {margin-left:6px;} #rtnb div span:nth-child(3) {margin-bottom:0;} #rtnb.active div {} #rtnb.active div span {margin-left:6px;} #rtnb.active div span:nth-child(1) {} #rtnb.active div span:nth-child(2) {} #rtnb.active div span:nth-child(3) {} #site-map {position:absolute;top:127px;left:0;width:100%;height:auto;z-index:1000;background:rgba(255,255,255,0.95);display:none;} #site-map .wrap {padding:55px 0;height:auto;width:100%;} #site-map .site-menu {} #site-map .site-menu li {min-height:1px;} #site-map .site-menu div {width:100%;display:block;text-align:center;} #site-map .site-menu a {display:block;padding:5px 0;font-size:17px;} #site-map .site-menu a.active span > span, #site-map .site-menu a:hover span > span {width:100%;left:0;} #site-map .site-menu span {display:inline-block;text-align:center;} #site-map .site-menu span > span {background:#fff;height:2px;width:0;position:relative;left:50%;display:block;transition:all 0.5s;} #site-map .leaverou li div.sitemap-title {text-align:left;width:100%;display:block;float:none;font-size:20px;color:#000;} #stnb {position:fixed;top:0;left:0;z-index:9999;width:100%;} /**/ #sub-header .sh-title {color:#fff;text-align:center;font-size:47px;position:absolute;width:100%;top:28%;text-shadow: 0 0 5px rgba(0,0,0,0.2); } #sh-title-1 {position: relative;} #sub-header .sub_txt{font-size:20px;font-weight:200;margin-top:20px;font-family: 'Noto Sans Korean', sans-serif;text-shadow: 0 0 3px rgba(0,0,0,0.2); } #sub-header.blank {height:0 !important;} #sub-header.blank .rect {background:none;} .double-circle {} .double-circle:before, .double-circle:after {background:#dd6395;content:'';font-size:0;position:absolute;z-index:0;border-radius:100%;} .double-circle:before {padding:4px;opacity:1;transform:translateX(-13px) translateY(-4px);} .double-circle:after {padding:15px;opacity:0.1;transform:translateX(-13px) translateY(10px);} footer {background:#424242;text-align:center;color:#c7c7c7;user-select:none;margin:100px 0 0 0;position:relative;} footer .copyright {padding:30px 0;} footer p {font-size:13px;} footer .counter {color:#fff;height:121px;padding:0;width:250px;background:#3b3b3b;} footer .counter .rect {font-size:13px;position:relative;top:26px;} footer .counter .rect span {min-width:104px;display:inline-block;text-align:right;font-size:18px;} footer .counter .rect span:first-child {color:#fff;font-size:13px;} footer .counter .rect span:last-child {color:#4ab9e3;} footer .counter .rect div {line-height:20px;} #top-btn {position:absolute;right:30px;top:30%;transform:translateY(0);} /*#red {border-top:1px solid red;width:100%;position:fixed;bottom:47px;}*/ #sub-header {height:430px;margin-top:127px;position:relative;background:url(/images/content/sub_visual_01.jpg) no-repeat center top;} #sub-header.sub-header-1 {background-image:url(/images/content/sub_visual_01.jpg);} #sub-header.sub-header-2 {background-image:url(/images/content/sub_visual_02.jpg);} #sub-header.sub-header-3 {background-image:url(/images/content/sub_visual_03.jpg);} #sub-header.sub-header-4 {background-image:url(/images/content/sub_visual_04.jpg);} #sub-header.sub-header-5 {background-image:url(/images/content/sub_visual_05.jpg);} #sub-header.sub-header-6 {background-image:url(/images/content/sub_visual_06.jpg);} #sub-header.sub-header-7 {background-image:url(/images/content/sub_visual_07.jpg);} #sub-header.sub-header-8 {background-image:url(/images/content/sub_visual_08.jpg);} #sub-header.sub-header-9 {background-image:url(/images/content/sub_visual_09.jpg);} #sub-header.sub-header-10 {background-image:url(/images/content/sub_visual_10.jpg);} #sub-header.sub-header-11 {background-image:url(/images/content/sub_visual_11.jpg);} #sub-header .sh-menu {position:absolute;bottom:0;width:100%;} #sub-header .rect {background:rgba(75,186,228,0.9);margin-top:5px;} #sub-header .wrap {} #sub-header .leaverou {} #sub-header .leaverou li {text-align:center;} #sub-header .leaverou li a {display:block;border:0;color:#f8f8f8;} #sub-header .leaverou li:last-child a {} #sub-header .leaverou li a div {padding:18px 0;} #sub-header .leaverou li.active {position:relative;} #sub-header .leaverou li.active:before {content:'';left:0;top:-5px;position:absolute;font-size:0;height:5px;width:100%;z-index:10;background:#4bbae4;} #sub-header .leaverou li.active a {position:relative;display:block;} #sub-header .leaverou li.active a div {background:#f8f8f8;color:#4bbae4;} #sub-header .leaverou li.active .star {font-size:11px;animation:starAnimation 0.5s infinite alternate ease;display:inline-block;padding:4px;border-radius:100%;background:#4bbae4;} #sh-page-title {font-size:35px;color:#000;text-align:center;margin:80px auto 40px auto;padding-bottom:0;display:none;} #sh-page-title .location {font-size:12px;color:#888;} /* contextmenu custom */ #contextmenu {border:1px solid rgb(75, 186, 228);position:fixed;top:0;left:0;width:200px;height:auto;z-index:1200;display:none;background:#fff;border-top:7px solid rgb(75, 186, 228);border-radius:0;} #contextmenu .rect {padding:10px 15px;} #contextmenu .rect li {} #contextmenu .rect li a {display:block;border-bottom:1px dashed #ccc;padding:5px;font-size:13px;} #contextmenu .rect li a.active, #contextmenu .rect li:hover a {background:#eee;} #contextmenu .rect li:first-child a {} #contextmenu .rect li:last-child a {border:0;} /* PC */ @media (min-width:1200px) { #sub-header {} #sub-container .wrap.pt-5 {padding-top:80px !important;} } @media (max-width:1800px) { /*#site-map .wrap,*/ /*header .wrap {width:92%;}*/ .wrap {width:92% !important;} /*#site-map .site-menu {margin-left:13%;}*/ /*#site-map .site-menu,*/ /*#tnb {width:75%;}*/ } @media (max-width:1400px) { footer {padding-bottom:0;} footer .wrap {width:100% !important;} footer p {text-align:center;} footer p.mt-1 {margin-top:0.5rem !important;} footer .copyright {margin:0 auto;float:none !important;} footer .counter {height:70px;padding:14px 0 16px 0;width:100%;text-align:right; bottom:0;left:0;} footer .counter .rect {top:0;width:92%;margin:0 auto;} #top-btn {left:5%;width:44px;height:45px;bottom:12px;top:unset;} #sh-page-title{margin:160px auto 35px auto;} } @media (max-width:1200px) { .mobile {display:block;} header {padding:20px 0 20px 0;position:fixed;border-bottom: 1px solid #eee;} header .logo {width:auto;} #tnb {display:none;} #rtnb {animation-delay: 0s;} #site-map {height:88.5vh;overflow:auto;display:none;top:90px;} #site-map .site-menu {margin:0 auto;width:100%;} #site-map .leaverou {} #site-map .leaverou li {width:100%;border-bottom:1px dashed #ccc;margin-bottom:20px;padding-bottom:10px;} #site-map .leaverou li div {float:left;width:auto;margin-right:20px;} #site-map .site-menu span {text-align:left;} #sub-header {display:none;} #sh-page-title {display:block;} #sub-header .sub_txt{display: none;} } @media (max-width:767px) { header .logo a{display: block;padding-top:5px;} header .logo a img {max-width:85%;} body.show-site-map {overflow:hidden;} #sub-container {margin-top:90px;} #sh-page-title {margin-top:150px;margin-bottom:35px;font-size:30px;} #top-btn{bottom:2px;} #top-btn img{width:70%;} } /* */ @keyframes headerAnimation { 0% {} 100% {opacity:1;transform: translateY(0) translateX(0) scale(1);} } /* */ @keyframes starAnimation { 0% {transform:translateY(2px) rotate3d(111, 1, 1, 50deg);} 100% {transform:translateY(-8px);} }