@charset "UTF-8";

/* /////////////////////// reset ///////////////////////////*/
html {
 font-size: 10px;
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 font-family: 'CustomFont','Noto Sans KR', sans-serif;
 -webkit-text-szie-adjust: none;
 -moz-text-szie-adjust: none;
 -ms-text-szie-adjust: none;
 }

html,
body,
button,
dl,
dt,
dd,
div,
form,
fieldset,
legend,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
textarea,
ul,
ol,
li,
p,
pre,
table,
td,
th,
caption,
a,
button,
address {
 margin: 0;
 padding: 0;
 }

h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: normal;
 font-size: 1.4rem;
 }

body {
 line-height: 1.2;
 color: #2b2b2b;
 min-width: 100%;
 letter-spacing: 0;
 -webkit-overflow-scrolling: touch;
 word-break: break-all;
 word-wrap: break-all;
 }

a,
input,
select,
textarea,
button,
label {
 -webkit-appearance: none;
 -ms-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 0;
 vertical-align: top;
 }

select option { color:#000; }
input {
 font-weight: normal;
 color: #626262;
 outline: none;
 }

a {
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 }

caption {
 visibility: hidden;
 font-size: 0;
 text-indent: -9999px;
 }

input {
 vertical-align: middle;
 }

input,
textarea,
select,
button {
 font-size: 1.4rem;
 font-family: 'CustomFont','Noto Sans KR', sans-serif;
 }

ol,
ul,
li {
 list-style: none;
 }

a {
 text-decoration: none;
 color: #2b2b2b;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 }

img {
 vertical-align: top;
 border: 0;
 }

table {
 border-collapse: collapse;
 border-spacing: 0;
 width: 100%;
 max-width: 100%;
 }

em {
 font-style: normal;
 }

button {
 border: 0;
 background: none;
 outline: none;
 cursor: pointer;
 }

.blind {
 position: absolute;
 overflow: hidden;
 clip: rect(0 0 0 0);
 margin: -1px;
 width: 1px;
 height: 1px;
 }

fieldset {
 width: 100%;
 border: 0;
 }

legend {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 margin: 0;
 padding: 0;
 background: none;
 font-size: 0;
 line-height: 0;
 text-indent: -9999px;
 }

select::-ms-expand {
 display: none;
 opacity: 0;
 }

iframe {
 max-width: 100%;
 }

p {
 line-height: initial;
 }

[data-ephox-mobile-fullscreen-style] header {
 display: none;
 }

 /* font */
@media screen and (min-width: 1025px) {
 html {
 font-size: 16px;
 }
 }

@media screen and (max-width: 1024px) {
 html {
 font-size: 16px;
 }
 }

@media screen and (max-width: 768px) {
 html {
 font-size: 23.98px;
 }
 }

@media screen and (max-width: 750px) {
 html {
 font-size: 23.98px;
 }
 }

@media screen and (max-width: 740px) {
 html {
 font-size: 23.66px;
 }
 }

@media screen and (max-width: 730px) {
 html {
 font-size: 23.33px;
 }
 }

@media screen and (max-width: 720px) {
 html {
 font-size: 23.01px;
 }
 }

@media screen and (max-width: 710px) {
 html {
 font-size: 22.69px;
 }
 }

@media screen and (max-width: 700px) {
 html {
 font-size: 22.36px;
 }
 }

@media screen and (max-width: 690px) {
 html {
 font-size: 22.04px;
 }
 }

@media screen and (max-width: 680px) {
 html {
 font-size: 21.72px;
 }
 }

@media screen and (max-width: 670px) {
 html {
 font-size: 21.39px;
 }
 }

@media screen and (max-width: 660px) {
 html {
 font-size: 21.07px;
 }
 }

@media screen and (max-width: 650px) {
 html {
 font-size: 20.75px;
 }
 }

@media screen and (max-width: 640px) {
 html {
 font-size: 20.42px;
 }
 }

@media screen and (max-width: 630px) {
 html {
 font-size: 20.1px;
 }
 }

@media screen and (max-width: 620px) {
 html {
 font-size: 19.77px;
 }
 }

@media screen and (max-width: 610px) {
 html {
 font-size: 19.45px;
 }
 }

@media screen and (max-width: 600px) {
 html {
 font-size: 19.13px;
 }
 }

@media screen and (max-width: 590px) {
 html {
 font-size: 18.8px;
 }
 }

@media screen and (max-width: 580px) {
 html {
 font-size: 18.48px;
 }
 }

@media screen and (max-width: 570px) {
 html {
 font-size: 18.17px;
 }
 }

@media screen and (max-width: 560px) {
 html {
 font-size: 17.84px;
 }
 }

@media screen and (max-width: 550px) {
 html {
 font-size: 17.53px;
 }
 }

@media screen and (max-width: 540px) {
 html {
 font-size: 17.21px;
 }
 }

@media screen and (max-width: 530px) {
 html {
 font-size: 16.89px;
 }
 }

@media screen and (max-width: 520px) {
 html {
 font-size: 16.57px;
 }
 }

@media screen and (max-width: 510px) {
 html {
 font-size: 16.25px;
 }
 }

@media screen and (max-width: 500px) {
 html {
 font-size: 15.93px;
 }
 }

@media screen and (max-width: 490px) {
 html {
 font-size: 15.62px;
 }
 }

@media screen and (max-width: 480px) {
 html {
 font-size: 15.29px;
 }
 }

@media screen and (max-width: 470px) {
 html {
 font-size: 14.98px;
 }
 }

@media screen and (max-width: 460px) {
 html {
 font-size: 14.66px;
 }
 }

@media screen and (max-width: 450px) {
 html {
 font-size: 14.34px;
 }
 }

@media screen and (max-width: 440px) {
 html {
 font-size: 14.02px;
 }
 }

@media screen and (max-width: 430px) {
 html {
 font-size: 13.71px;
 }
 }

@media screen and (max-width: 420px) {
 html {
 font-size: 13.38px;
 }
 }

@media screen and (max-width: 410px) {
 html {
 font-size: 13.07px;
 }
 }

@media screen and (max-width: 400px) {
 html {
 font-size: 12.75px;
 }
 }

@media screen and (max-width: 390px) {
 html {
 font-size: 12.43px;
 }
 }

@media screen and (max-width: 380px) {
 html {
 font-size: 12.11px;
 }
 }

@media screen and (max-width: 370px) {
 html {
 font-size: 11.79px;
 }
 }

@media screen and (max-width: 360px) {
 html {
 font-size: 11.47px;
 }
 }

@media screen and (max-width: 350px) {
 html {
 font-size: 11.16px;
 }
 }

@media screen and (max-width: 340px) {
 html {
 font-size: 10.83px;
 }
 }

@media screen and (max-width: 330px) {
 html {
 font-size: 10.52px;
 }
 }

@media screen and (max-width: 320px) {
 html {
 font-size: 10.2px;
 }
 }

@media only screen and (max-height: 415px) and (min-width: 415px) and (orientation: landscape) {
 html {
 font-size: 12px;
 }
 }

/* /////////////////////// common class variables ///////////////////////////*/

 /* margin&padding */
.r_mp {
 margin: 0;
 padding: 0;
 }

.r_li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }

/* size */
.full {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 }

.fullWidth {
 width: 100%;
 }

 /* float */
.clear {
 display: block;
 content: '';
 height: 0;
 font-size: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 clear: both;
 }

 /* align */
.center {
 text-align: center;
 }

.flex {
 display: box;
 display: -webkit-box;
 display: -moz-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: -moz-flex;
 display: -o-flex;
 display: flex;
 -webkit-align-items: center;
 -ms-align-items: center;
 -moz-align-items: center;
 -o-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 -ms-justify-content: center;
 -moz-justify-content: center;
 -o-justify-content: center;
 justify-content: center;
 -ms-flex-align: center;
 }

.bold { font-weight: bold; }

/* display */
.block {
 display: block;
 }

.i_block {
 display: inline-block;
 vertical-align: middle;
 }

/* overflow hidden */
.hidden {
 overflow: hidden;
 }

 /* popup */
.popup.moviePop {
 position: fixed;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .6);
 top: 0;
 left: 0;
 z-index: 999;
 display: none;
 }

.popup.moviePop .content {
 width: auto;
 min-width: 540px;
 height: auto;
 min-height: 240px;
 display: inline-block;
 top: 52%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 position: relative;
 background: #3a3552;
 max-width: 100%;
 overflow: hidden;
 color: white;
 font-size: 24px;
 padding: 4%;
 }

.popup.moviePop .content:after {
 background-size: contain;
 top: -130px;
 right: -160px;
 opacity: 0.15;
 width: 607px;
 min-height: 560px;
 }

.popup.moviePop .btnClose {
 height: 100%;
 display: inline-block;
 position: absolute;
 width: 68px;
 top: 12px;
 right: 12px;
 opacity: .5;
 text-align: center;
 height: 68px;
 }

.popup.moviePop .btnClose:after,
.popup.moviePop .btnClose:before {
 content: '';
 position: absolute;
 left: -5px;
 height: 2px;
 background-color: #fff;
 width: 80px;
 right: 0;
 -webkit-transition: all .3s ease-in;
 transition: all .3s ease-in;
 }

.popup.moviePop .btnClose:before {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 50%;
 }

.popup.moviePop .btnClose:after {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 bottom: 50%;
 }

.popup.moviePop .btnClose span {
 display: inline-block;
 line-height: 65px;
 color: #fff;
 opacity: 0;
 font-size: 22.4px;
 font-size: 1.4rem;
 margin-left: -10px;
 width: 100%;
 }

.popup.moviePop .btnClose:hover {
 opacity: .8;
 }

.popup.moviePop .btnClose:hover span {
 opacity: 1;
 }

.popup.moviePop .btnClose:hover:before {
 top: 0;
 -webkit-transform: rotate(0);
 transform: rotate(0);
 width: 68px;
 }

.popup.moviePop .btnClose:hover:after {
 bottom: 0;
 -webkit-transform: rotate(0);
 transform: rotate(0);
 width: 68px;
 }

.popup.moviePop .container {
 display: inline-block;
 }

.popup.moviePop .container .title {
 font-size: 24px;
 color: white;
 font-weight: normal;
 }

.popup.moviePop .container ul {
 font-size: 16px;
 color: #d8d8ea;
 margin-top: 30px;
 }

.popup.moviePop .container ul li {
 padding-left: 10px;
 position: relative;
 white-space: nowrap;
 }

.popup.moviePop .container ul li:before {
 content: '-';
 position: absolute;
 left: 0;
 top: 0;
 }

#Movie .content {
 overflow: inherit;
 border: 1px solid #555;
 background: black;
 padding: 0;
 }

#Movie .content:after {
 display: none;
 }

#Movie .content .btnClose {
 width: 68px;
 height: 68px;
 display: inline-block;
 position: absolute;
 top: -88px;
 right: 0;
 }

#Movie .content .container {
 width: 100%;
 height: 100%;
 }

#Movie .content .container iframe {
 width: 100%;
 height: 100%;
 }

@media screen and (max-width: 640px) {
 .popup.moviePop .content {
 min-width: 100vw;
 min-height: 56.25vw;
 }
 }

 /* top bar */
.img_spr { background: url(../img/spr_common_topbar.png) top 0px left 0px no-repeat; background-size: 800px 800px; }
.top_bar_wrap { position: absolute; top: 0; width: 100%; height: 50px; overflow: hidden; z-index: 35; transition: 0.3s; }
.top_bar_wrap.active { height: 100vh; }
#top_bar { position: absolute; width: 100%; height: 50px; background: linear-gradient(to bottom, #1f1e23, #222127); color: #FFF; box-sizing: border-box; z-index: 60; }
#top_bar .inwrap.head { position: relative; display: flex; justify-content: space-between; align-items: center; height: 50px; overflow: hidden; }
#top_bar .inwrap { max-width: 1900px; margin: 0 auto 0 auto; padding: 0 2.5rem 0 2.5rem; }
#top_bar .top_logo { display: inline-block; width: 137px; height: 27px; background-position: -661px -339px; }
#top_bar .site_list { position: relative; float: right; display: inline-block; }
#top_bar .site_list .title_link { position: relative; display: inline-block; border: solid 2px rgba(255, 255, 255, 0.3); border-radius: 16px; padding: 0px 30px 0px 16px; line-height: 20px; font-size: 12px; color: #FFF; font-weight: bold; }
#top_bar .site_list .title_link:after { position: absolute; right: 12px; top:8px; content: ''; display: block; width: 8px; height: 6px; background: url(../img/spr_common_topbar.png) top 0px left -351px no-repeat;  }
#top_bar .site_list .title_link.active:after { transform: rotate(180deg); }
#top_bar .top_site_menu { position: absolute; display: flex; justify-content: flex-start; align-items: center; top: 50px; left: 0; width: 100%; height: 320px; background: linear-gradient(to bottom, rgba(43, 43, 51, 0.95), rgba(36, 39, 48, 0.95)); z-index: 10; color: #FFF; display: none; }
#top_bar .menu_wrap { display: flex; width: 100%; padding: 0 48px; max-width: 1600px; }
#top_bar .menu_wrap article + article { border-left: solid 1px rgba(255, 255, 255, 0.1); padding-left: 5%; }
#top_bar .menu_wrap ul { display: block; margin-top: 2rem; }
#top_bar .menu_wrap li { float: left; display: inline-flex; width: 50%; align-items: center; margin-bottom: 0.8rem; }
#top_bar .menu_wrap li a { display: block; width: 100%; font-size: 0.88rem; line-height: 1.2rem; color: rgba(255, 255, 255, 0.6); transition: 0.3s; }

#top_bar .menu_wrap .site_online { flex: 1 1 640px; }
#top_bar .menu_wrap .site_online li { width: 33%; }
#top_bar .menu_wrap .site_mobile { flex: 1 1 340px; }
#top_bar .menu_wrap .site_gstar { flex: 1 1 450px; }
#top_bar .menu_wrap .site_gstar li { width: 100%; }
#top_bar .menu_wrap .site_gstar li a { display: inline-block; width: 210px; height: 26px; color: #FFF; }

#top_bar .menu_wrap .site_gstar li span.new,
#top_bar .menu_wrap .site_gstar li span.come { display: inline-flex; justify-content: center; align-items: center; height: 26px; border: solid 2px #da0011; color: #da0011; padding: 0 0.5rem; box-sizing: border-box; border-radius: 13px; font-size: 0.6rem; }
#top_bar .menu_wrap .site_gstar li span.come { border: solid 2px #c1a800; color: #c1a800; }
#top_bar .menu_wrap .site_title { font-size: 1rem; line-height: 1.2rem; margin-bottom: 1.88rem; }



 /* pc, mo */
.pc { display:block !important; }
.mo { display:none !important; }
.hide { opacity:0; }
.on { opacity:1; transition:opacity .8s; }

@media screen and (max-width: 1024px) {
 /* pc, mo */
 .pc { display:none !important; }
 .mo { display:block !important; }

    /* top bar - mobile */
    .top_bar_wrap.active { overflow-x: hidden; overflow-y: auto; }
    .fixed .page_wrap { position: fixed; overflow: hidden; width: 100%; height: 100%; overflow: visible; }
    #top_bar .menu_wrap { flex-direction: column; padding: 0 2rem 2rem 2rem; }
    #top_bar {padding: 0; height: auto; }
    #top_bar .inwrap.head { position: relative; text-align: left; padding: 0.4rem 0; min-height: 35px; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; }
    #top_bar .site_list { position: relative; display: flex; align-items: center; }
    #top_bar .site_list .title_link { display: inline-flex; height: 22px; padding-left: 1rem; padding-right: 2rem; font-size: 10px; line-height: 22px; border-radius: 2rem; }
    #top_bar .site_list .title_link:after { top: 50%; right: 0.8rem; transform: translateY(-2px) }
    #top_bar .site_list .title_link.active:after { transform: rotate(180deg) translateY(3px); }
    #top_bar .top_site_menu { position: relative; left: 3%; width: 94%; height: auto; top: 0; z-index: 41; }
    #top_bar .menu_wrap article + article { border-bottom: solid 1px rgba(255, 255, 255, 0.1); border-left: none; padding-left: 0; margin-top: 1rem; }
    #top_bar .menu_wrap .site_online, #top_bar .menu_wrap .site_mobile, #top_bar .menu_wrap .site_gstar { flex: auto; padding-top: 1rem; padding-bottom: 1rem; }
    #top_bar .menu_wrap .site_online { order: 3; }
    #top_bar .menu_wrap .site_online li { width: 50%; }
    #top_bar .menu_wrap .site_mobile { order: 2; }
    #top_bar .menu_wrap .site_gstar { order: 1; margin-top: 0; }
    #top_bar .menu_wrap .site_gstar li a { width: 60%; }

 }