@charset "utf-8";
@font-face {
    font-family: "NEXONLv1Gothic";
    font-style: normal;
    font-weight: normal;
    src: url("../../../Content/fonts/NEXONLv1GothicOTF.eot");
    src: local("☺"), url("../../../Content/fonts/NEXONLv1GothicOTF-1.eot") format("embedded-opentype"), url("../../../Content/fonts/NEXONLv1GothicOTF.woff") format("woff"),
        url("https://ca.nexon.com/Content/fonts/NEXONLv1GothicOTF.ttf") format("truetype");
}
@font-face {
    font-family: "NEXONLv1Gothic";
    font-style: normal;
    font-weight: 700;
    src: url("../../../Content/fonts/NEXONLv1GothicOTFBold.eot");
    src: local("☺"), url("../../../Content/fonts/NEXONLv1GothicOTFBold-1.eot") format("embedded-opentype"), url("../../../Content/fonts/NEXONLv1GothicOTFBold.woff") format("woff"),
        url("https://ca.nexon.com/Content/fonts/NEXONLv1GothicOTFBold.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    src: url("../../../Content/fonts/Roboto.eot");
    src: local("☺"), url("../../../Content/fonts/Roboto-1.eot") format("embedded-opentype"), url("../../../Content/fonts/Roboto.woff") format("woff"), url("../../../Content/fonts/Roboto.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url("../../../Content/fonts/RobotoBold.eot");
    src: local("☺"), url("../../../Content/fonts/RobotoBold-1.eot") format("embedded-opentype"), url("../../../Content/fonts/RobotoBold.woff") format("woff"), url("../../../Content/fonts/RobotoBold.ttf") format("truetype");
}
@font-face {
    font-family: "Do Hyeon";
    font-style: normal;
    font-weight: normal;
    src: url("../../../Content/fonts/DoHyeon-Regular.eot");
    src: local("☺"), url("../../../Content/fonts/DoHyeon-Regular-1.eot") format("embedded-opentype"), url("../../../Content/fonts/DoHyeon-Regular.woff") format("woff"), url("../../../Content/fonts/DoHyeon-Regular.ttf") format("truetype");
}

/* reset */
html,
body,
div,
p,
img,
span,
a,
em,
strong,
pre,
h1,
h2,
h3,
h4,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
tbody,
thead,
tfoot,
tr,
th,
td,
form,
fieldset,
legend,
caption,
input,
textarea,
button,
select,
object,
video,
iframe {
    margin: 0;
    padding: 0;
}
header,
article,
aside,
details,
figcaption,
figure,
footer,
hgroup,
menu,
nav,
section {
    display: block;
    margin: 0;
    padding: 0;
}
html {
    overflow-y: scroll;
}
body {
    position: relative;
    width: 100%;
    font-family: "NEXONLv1Gothic", "맑은 고딕", "Malgun Gothic", "sans-serif";
    color: #3fd7b5;
    line-height: 1;
    word-break: break-all;
    word-wrap: break-word;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 14px;
}
input,
textarea,
button,
select {
    font-family: "NEXONLv1Gothic", "맑은 고딕", "Malgun Gothic", "sans-serif";
    font-size: 14px;
}
textarea {
    overflow-y: auto;
    resize: none;
}
img,
fieldset,
button {
    border: 0;
}
button {
    border: 0;
    background: none;
    cursor: pointer;
    *line-height: 1 !important;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul,
ol {
    list-style: none;
}
address {
    font-style: normal;
}
a {
    text-decoration: none;
    color: #3fd7b5;
    background-color: transparent;
}
a,
a:link {
    text-decoration: none;
}
a,
img {
    vertical-align: top;
}
input[type="text"]::-ms-clear,
hr {
    display: none;
}
input:focus,
textarea:focus {
    outline: 0;
}
caption,
legend {
    text-indent: -9999em;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}
.ir {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
}
.blind,
.hidden {
    overflow: hidden;
    visibility: hidden;
    position: absolute;
    top: -9999em;
    left: 0;
    width: 0;
    height: 0;
}

/* skip */
#skip a {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    top: -9999px;
    text-align: center;
    z-index: 99999999;
    font-size: 12px;
}
#skip a:active,
#skip a:focus {
    position: absolute;
    top: 0;
    font-weight: bold;
    color: #fff;
    background: #000;
    padding: 15px 0;
}

/* layout */
#wrapper {
    position: relative;
    width: 100%;
    min-width: 1280px;
    max-width: 2560px;
    margin: 0 auto;
}
#header h1.logo a,
#common .banner .controls,
#common .btn_list button,
#common .banner .paging .bar,
#common .banner .nav button,
#header .nav li ul li .window,
#header .nav li ul li .new,
.log_info .btn,
.log_info .log_wrap .menu a:before,
.log_info .log_wrap dl,
#footer .footer_quick a,
#footer .related li a,
#footer .footer_logo,
.log_info .log_wrap .btn_nxid::before,
.layer_alert .btn_close,
.layer_login .icon,
.layer_popup .icon,
.layer_notice .icon {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../../../../assets/img/common/sp_common.png") no-repeat;
}
#header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 110px;
    z-index: 50;
    background: url("../../../../assets/img/common/bg_line_hedaer.png") repeat-x left bottom;
}
#header h1.logo {
    position: relative;
    float: left;
    z-index: 5;
}
#header h1.logo a {
    width: 200px;
    height: 100px;
    margin: 0px 0 0 94px;
    background-position: -50px -542px;
}

#header .nav {
    position: relative;
    z-index: 5;
    float: left;
    max-width: 1820px;
    height: 66px;
    padding-top: 44px;
    text-align: center;
}
#header .nav ul {
    position: relative;
    z-index: 5;
}
#header .nav li {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
}
#header .nav li a {
    position: relative;
    display: block;
    font-size: 18px;
    color: #68fffc;
    font-weight: normal;
    letter-spacing: -1px;
    padding: 0 62px;
    line-height: 28px;
}
#header .nav li:hover a.dep1 {
    display: inline-block;
    color: #00d4c3;
}
#header .nav li a.dep1 span {
    display: none;
    position: absolute;
    left: 50%;
    top: 29px;
    width: 100%;
    height: 7px;
    padding: 0 8px;
    border-radius: 4px;
    background: #69f1d6 url("../../../../assets/img/common/bg_nav_line.png") no-repeat right top;
}
#header .nav li:hover a.dep1 span {
    display: block;
}
#header .nav li ul {
    display: none;
    width: 100%;
    padding-top: 82px;
}
#header .nav li ul li {
    display: block;
    margin: 0 0 20px 0;
    height: 24px;
}
#header .nav li ul li a {
    display: inline-block;
    font-size: 16px;
    color: #f9f9f9;
    padding: 0;
}
#header .nav li ul li .window {
    display: inline-block;
    width: 14px;
    height: 13px;
    margin: 1px 0 0 7px;
    vertical-align: top;
    background-position: 0 -150px;
}
#header .nav li ul li .new {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -1px 0 0 7px;
    vertical-align: top;
    background-position: 0 -175px;
    line-height: 18px;
}
#header .nav li ul li:hover a {
    color: #fff229;
}
#header .nav li ul li:hover a::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 4px;
    margin-top: 5px;
    padding-right: 2px;
    background-color: #fff229;
    border-radius: 2px;
    vertical-align: top;
}
#header .nav li ul li:hover .window {
    background-position: -25px -150px;
}

#header .tip {
    display: none;
    position: absolute;
    left: 0;
    top: 110px;
    width: 200px;
    height: 300px;
    padding: 30px 0 0 94px;
    z-index: 5;
}
#header .tip .txt {
    color: #003757;
}
#header .tip .txt span {
    display: inline-block;
    margin-bottom: 8px;
    padding-left: 38px;
}
#header .tip .txt span::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 3px;
    line-height: 4px;
    background-color: #72fde1;
    border-radius: 2px;
}
#header .tip .img {
    display: block;
    width: 200px;
    height: 186px;
    background: url("../../../../assets/img/common/banner_tip.png") no-repeat;
}
#header .bg1 {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 110px;
    background:#0a231ad9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23000000" width="100%" height="100%"/><linearGradient id="a11"><stop offset="0" stop-color="%233FD7B5" stop-opacity="0"></stop><stop offset="1" stop-color="%233FD7B5"></stop></linearGradient><circle fill="none" stroke="url(%23a11)" stroke-width="7" stroke-linecap="round" stroke-dasharray="0 44 0 44 0 44 0 44 0 360" cx="100" cy="100" r="70" transform-origin="center"><animateTransform type="rotate" attributeName="transform" calcMode="discrete" dur="2" values="360;324;288;252;216;180;144;108;72;36" repeatCount="indefinite"></animateTransform></circle></svg>') repeat-x left bottom;
}
#header .bg2 {
    display: none;
    position: absolute;
    left: 0;
    top: 110px;
    z-index: 1;
    width: 100%;
    height: 349px;
    background-color: #000000;
    opacity: 0.94;
}

#wrapper.nav_on .nav li ul,
#wrapper.nav_on .tip,
#wrapper.nav_on .bg1,
#wrapper.nav_on .bg2 {
    display: block;
}
#wrapper.nav_on .tip_off {
    display: none;
}
#wrapper.nav_on #common .banner .item {
    filter: blur(6px);
}

#common {
    height: 378px;
}
#common #game_start {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 51;
}
#common #game_start .btns {
    position: relative;
    z-index: 51;
    width: 360px;
    height: 110px;
    margin-right: 94px;
    overflow: hidden;
    background: url("../../../../assets/img/common/bg_gamestart1.png") no-repeat;
}
#common #game_start button {
    position: relative;
    z-index: 51;
    vertical-align: top;
}
#common #game_start .btns .btn_start {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    background: url("../../../../assets/img/common/btn_gamestart.png") no-repeat 55px 34px;
}
#common #game_start .btns .btn_launcher {
    position: absolute;
    left: 55px;
    top: 70px;
    display: block;
    width: 148px;
    height: 21px;
    line-height: 21px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background-color: #21b1fd;
    border-radius: 11px;
}
#common #game_start .btns .btn_start:hover {
    background-image: url("../../../../assets/img/common/btn_gamestart_over.png");
}
#common #game_start .btns .btn_launcher:hover {
    background-color: #38c4ff;
}
#common #game_start .glow {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: url("../../../../assets/img/common/bg_start_glow.png") no-repeat 10px 2px;
}

#common .banner {
    clear: both;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 378px;
    overflow: hidden;
}
#common .banner .viewer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#common .banner .item {
    display: none;
    position: absolute;
    width: 100%;
    height: 268px;
    padding-top: 110px;
}
#common .banner .item.active {
    display: block;
}
/* #common .banner .item .bg {display: block;position: absolute;left:0;top:0;width:100%;height: 100%;z-index: 1;transform: rotate(0.01deg)} */
#common .banner .item a {
    position: relative;
    z-index: 3;
    display: block;
    width: 1240px;
    height: 230px;
    margin: 0 auto;
    padding-top: 38px;
}
#common .banner .desc {
    display: inline-block;
    width: 846px;
    vertical-align: middle;
}
#common .banner .align {
    display: inline-block;
    width: 1px;
    height: 186px;
    vertical-align: middle;
}
#common .banner .tit {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 58px;
    line-height: 1.15;
    white-space: nowrap;
    word-wrap: break-word;
    letter-spacing: -1px;
}
#common .banner .tit .l1,
#common .banner .tit .l2 {
    display: block;
    overflow: hidden;
    width: 100%;
}
#common .banner .tit span span {
    display: block;
    transform: rotate(0.01deg);
}
#common .banner .txt {
    display: block;
    padding-top: 15px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    word-wrap: break-word;
}
#common .banner .category,
#common .banner .time {
    display: none;
}
#common .banner .controls {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 5;
    margin-left: 452px;
    width: 168px;
    height: 54px;
    background-position: 0 -300px;
    text-indent: 0;
    overflow: visible;
}
#common .banner .paging {
    display: inline-block;
    width: 60px;
    padding: 18px 10px 0 10px;
    font-size: 14px;
    text-align: center;
}
#common .banner .paging em {
    color: #ffe329;
    font-style: normal;
    vertical-align: top;
    margin-top: -5px;
}
#common .banner .paging .total {
    display: inline-block;
    color: #fff;
    opacity: 0.3;
    vertical-align: top;
    margin: 7px 0 0 -7px;
}
#common .banner .paging .bar {
    display: inline-block;
    width: 17px;
    height: 16px;
    background-position: -100px -200px;
    text-indent: -9999px;
    vertical-align: top;
    margin-left: -5px;
}
#common .banner .nav .prev {
    position: absolute;
    top: 5px;
    left: 72px;
    width: 44px;
    height: 44px;
    background-position: 0 -200px;
}
#common .banner .nav .prev:hover {
    background-position: 0 -250px;
}
#common .banner .nav .next {
    position: absolute;
    top: 5px;
    left: 119px;
    width: 44px;
    height: 44px;
    background-position: -50px -200px;
}
#common .banner .nav .next:hover {
    background-position: -50px -250px;
}

.log_info {
    position: absolute;
    top: 110px;
    right: 0;
    z-index: 51;
}
.log_info .log_wrap {
    position: relative;
    width: 360px;
    height: 330px;
    margin-right: 94px;
    background: url("../../../../assets/img/common/bg_loginfo.png") no-repeat left bottom;
}
.log_info .log_wrap.no_id {
    height: 152px;
    background: url("../../../ca/common/gameid/logwrap_no_id_bg.png") no-repeat left bottom;
}
.log_info .btn_area {
    position: absolute;
    right: 0;
    top: -94px;
    padding-right: 30px;
}
.log_info .btn_area button {
    margin-right: 94px;
}
.log_info .btn_login {
    width: 72px;
    height: 72px;
    line-height: 76px;
    margin-right: 30px;
    text-indent: 0;
    color: #005bda;
    font-size: 14px;
    background-position: 0 -400px;
}
.log_info .btn_login:hover {
    background-position: -100px -400px;
}
.log_info .log_wrap .btn_fold {
    position: absolute;
    right: 38px;
    top: -17px;
    width: 57px;
    height: 18px;
    background-position: 0 -500px;
}
.log_info .log_wrap .avatar {
    position: absolute;
    left: 24px;
    top: 17px;
    width: 120px;
    height: 120px;
}
.log_info .log_wrap .avatar img {
    display: block;
}
.log_info .log_wrap .avatar .cover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    background: url("../../../../assets/img/common/cover_avatar.png") no-repeat;
}
.log_info .log_wrap .msg {
    width: 181px;
    padding: 30px 0 10px 152px;
    color: #fff;
    line-height: 20px;
    text-align: center;
}
.log_info .log_wrap .msg span {
    display: block;
}
.log_info .log_wrap .name {
    display: block;
    width: 190px;
    height: 32px;
    padding: 30px 0 0 155px;
    color: #fff;
}
.log_info .log_wrap .name span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin-right: 9px;
    padding: 0 10px 0 9px;
    font-size: 12px;
    color: #fff229;
    background-color: #1570ef;
    border-radius: 12px;
}
.log_info .log_wrap .btn_myinfo {
    display: inline-block;
    width: 180px;
    height: 36px;
    line-height: 38px;
    margin: 0 0 14px 156px;
    color: #005bda;
    text-align: center;
    background-color: #fff229;
    border-radius: 18px;
}
.log_info .log_wrap .btn_myinfo:hover {
    background-color: #ffd200;
}
.log_info .log_wrap .btn_nxid {
    display: inline-block;
    height: 20px;
    margin: 0 0 14px 156px;
    font-size: 12px;
    color: #fff229;
    text-decoration: underline;
}
.log_info .log_wrap .btn_nxid::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -3px 6px 0 0;
    background-position: -100px -225px;
    vertical-align: middle;
}

.log_info .log_wrap.no_id .avatar {
    position: absolute;
    left: 30px;
    top: 25px;
    width: 98px;
    height: 98px;
}
.log_info .log_wrap.no_id .msg {
    display: none;
}
.log_info .log_wrap.no_id .btn_gameid {
    position: absolute;
    left: 142px;
    top: 43px;
    width: 194px;
    height: 64px;
    background: url("../../../ca/common/gameid/content.png") no-repeat;
    background-position: -1143px -92px;
    text-indent: -9999px;
}
.log_info .log_wrap.no_id .btn_gameid:hover {
    background-position: -1143px -168px;
}

.log_info .log_wrap .menu {
    padding-top: 12px;
    text-align: center;
}
.log_info .log_wrap.no_id .menu {
    padding-top: 38px;
}
.log_info .log_wrap .menu a {
    color: #97f6ff;
    display: inline-block;
    margin: 0 20px;
    padding: 10px 3px;
}
.log_info .log_wrap .menu a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 5px;
    margin: 3px 5px 0 0;
    background-position: 0 -375px;
    vertical-align: top;
}
.log_info .log_wrap .menu strong {
    color: #fff229;
    font-weight: normal;
}
.log_info .log_wrap dl {
    height: 24px;
    margin: 0 0 3px 28px;
    padding: 6px 0 0 24px;
    text-indent: 0;
}
.log_info .log_wrap .info1 {
    margin-top: 18px;
    background-position: 0 -550px;
}
.log_info .log_wrap .info2 {
    background-position: 0 -600px;
}
.log_info .log_wrap .info3 {
    margin-bottom: 7px;
    background-position: 0 -650px;
}
.log_info .log_wrap dl dt {
    float: left;
    margin: 0 6px 0 10px;
    color: #97f6ff;
}
.log_info .log_wrap dl dd {
    float: left;
    color: #fff;
    font-family: "Roboto";
}
.log_info .log_wrap.fold {
    height: 82px;
    background: none;
    background-color: #16a5ff;
}
.log_info .log_wrap.fold.no_id {
    height: 42px;
}
.log_info .log_wrap.fold .btn_fold {
    top: 82px;
    background-position: -100px -500px;
}
.log_info .log_wrap.fold.no_id .btn_fold {
    top: 42px;
}
.log_info .log_wrap.fold .btn_fold:active,
.log_info .log_wrap.fold .btn_fold:focus {
    outline: none;
    border: 0;
}
.log_info .log_wrap.fold .avatar,
.log_info .log_wrap.fold .menu a:nth-child(2),
.log_info .log_wrap.fold dl,
.log_info .log_wrap.fold .btn_nxid {
    display: none;
}
.log_info .log_wrap.fold .msg {
    width: 229px;
    padding: 0 0 0 19px;
    line-height: 42px;
    font-size: 12px;
    display: block;
}
.log_info .log_wrap.fold .msg span {
    display: inline-block;
}
.log_info .log_wrap.fold .name {
    width: 227px;
    padding: 0 0 0 26px;
    line-height: 44px;
    font-size: 14px;
    text-align: center;
}
.log_info .log_wrap.fold .name span {
    margin-right: 5px;
    padding: 0;
    background: none;
    font-size: 14px;
}
.log_info .log_wrap.fold .btn_myinfo {
    position: absolute;
    right: 30px;
    top: 6px;
    width: 72px;
    height: 26px;
    line-height: 28px;
    font-size: 12px;
    color: #97f6ff;
    border: 1px solid #97f6ff;
    border-radius: 13px;
    background-color: #16a5ff;
}
.log_info .log_wrap.fold .btn_myinfo:hover {
    background-color: #4cbcff;
    color: #fff;
}
.log_info .log_wrap.fold .btn_gameid {
    position: absolute;
    left: 252px;
    top: 6px;
    width: 90px;
    height: 26px;
    line-height: 28px;
    font-size: 12px;
    color: #97f6ff;
    border: 1px solid #97f6ff;
    border-radius: 13px;
    background: #16a5ff;
    text-indent: 0;
    text-align: center;
}
.log_info .log_wrap.fold .btn_gameid:hover {
    background-color: #4cbcff;
    color: #fff;
}
.log_info .log_wrap.fold .menu a:nth-child(1) {
    position: absolute;
    top: 42px;
    left: 0px;
    width: 310px;
    height: 40px;
    margin: 0 25px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.log_info .log_wrap.fold .menu a:nth-child(1)::after {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    top: 0;
}

.fixed_header #header {
    position: fixed;
    height: 90px;
}
.fixed_header #header h1.logo a {
    margin-top: 24px;
}
.fixed_header #common #game_start {
    position: fixed;
}
.fixed_header .log_info .btn_area {
    position: fixed;
    top: 7px;
}
.fixed_header .log_info .log_wrap {
    display: none;
    position: fixed;
    right: 0;
    top: 110px;
}
.fixed_header #header .bg1 {
    display: block;
    height: 89px;
    border-bottom: 1px solid #e8e8e8;
}
.fixed_header #header .bg2 {
    top: 90px;
}
.fixed_header #header .nav {
    padding-top: 34px;
}
.fixed_header #header .nav li ul {
    padding-top: 62px;
}
.fixed_header #header .tip {
    top: 90px;
}
.fixed_header #common #game_start .btns {
    height: 93px;
    margin-top: -3px;
}
.fixed_header #common #game_start .btns .btn_start {
    background-position: 55px 29px;
}
.fixed_header #common #game_start .btns .btn_launcher {
    top: 65px;
}

.w_m #header h1.logo a {
    width: 64px;
    height: 66px;
    margin: 23px 0 0 20px;
    background-position: 0 -49px;
}
.w_m #common #game_start .btns,
.w_m #common .log_info .log_wrap,
.w_m #common .log_info .btn_area button {
    margin-right: 20px;
}
.w_m .fixed_header #header h1.logo a {
    margin-top: 12px;
}
.w_l .fixed_header #header h1.logo {
    position: absolute;
    left: 50%;
    margin-left: -1280px;
}
.w_l .fixed_header #header .nav {
    padding-left: 294px;
}
.w_l .fixed_header #common #game_start {
    left: 50%;
    margin-left: 920px;
}
.w_l .fixed_header #common .log_info .btn_area {
    left: 50%;
    margin-left: 1180px;
}

#container {
    position: relative;
    clear: both;
    width: 100%;
    padding-bottom: 156px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
#container .btn_top {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 60px;
    width: 60px;
    height: 60px;
    background-position: 0 -1100px;
    z-index: 50;
}
.w_l #container .btn_top {
    left: 50%;
    right: auto;
    margin-left: 1200px;
}
#container .btn_top.fixed {
    position: absolute;
    bottom: -30px;
}

#footer {
    position: relative;
    height: 376px;
    background-color: #343434;
}
#footer .footer_quick {
    width: 1240px;
    height: 106px;
    margin: 0 auto;
    padding-top: 66px;
    text-align: center;
}
#footer .footer_quick li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 0 60px;
}
#footer .footer_quick a {
    height: 60px;
    line-height: 60px;
    padding-left: 70px;
    font-size: 16px;
    color: #a0a0a0;
    text-indent: 0;
}
#footer .footer_quick a:hover {
    text-decoration: underline;
}
#footer .footer_quick .q1 {
    margin-left: 30px;
}
#footer .footer_quick .q1 a {
    background-position: 0 -700px;
}
#footer .footer_quick .q2 a {
    background-position: 0 -800px;
}
#footer .footer_quick .q3 a {
    background-position: 0 -900px;
}
#footer .footer_quick .q4 a {
    background-position: 0 -1000px;
}
#footer .footer_quick .q5 a {
    background-position: 0 -1100px;
}
#footer .line {
    clear: both;
    display: block;
    width: 1280px;
    height: 7px;
    margin: 0 auto 35px;
    background-color: #2f2f2f;
    border-radius: 4px;
}
#footer .related {
    position: absolute;
    left: 50%;
    top: 201px;
    margin-left: 355px;
}
#footer .related li {
    float: left;
    margin-right: 16px;
}
#footer .related li a {
    width: 41px;
    height: 40px;
}
#footer .related li.r1 a {
    background-position: 0 -1200px;
}
#footer .related li.r2 a {
    background-position: -50px -1200px;
}
#footer .related li.r3 a {
    background-position: -100px -1200px;
}
#footer .related li.r4 a {
    background-position: -150px -1200px;
}
#footer .related li.r5 a {
    background-position: -200px -1200px;
}
#footer .related li.r1 a:hover {
    background-position: 0 -1250px;
}
#footer .related li.r2 a:hover {
    background-position: -50px -1250px;
}
#footer .related li.r3 a:hover {
    background-position: -100px -1250px;
}
#footer .related li.r4 a:hover {
    background-position: -150px -1250px;
}
#footer .related li.r5 a:hover {
    background-position: -200px -1250px;
}
#footer .footer_nav {
    width: 1240px;
    margin: 0 auto;
    padding-bottom: 13px;
    overflow: hidden;
}
#footer .footer_nav li {
    float: left;
    margin-right: 12px;
}
#footer .footer_nav li a {
    font-size: 12px;
    color: #848484;
    font-family: "맑은 고딕", "Malgun Gothic";
    letter-spacing: -1px;
}
#footer .footer_nav li a:hover {
    text-decoration: underline;
}
#footer .footer_nav li a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 1px 11px 0 0;
    background-color: #4a4a4a;
    vertical-align: top;
}
#footer .footer_nav li:first-child a::before {
    display: none;
}
#footer address,
#footer .copyright {
    clear: both;
    display: block;
    width: 1240px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 18px;
    color: #767676;
    font-family: "맑은 고딕", "Malgun Gothic";
    letter-spacing: -1px;
    text-align: left;
}
#footer address a {
    color: #767676;
}
#footer address a:hover {
    text-decoration: underline;
}
#footer address .link_license {
    text-decoration: underline;
}
#footer address span {
    margin-right: 5px;
}
#footer .footer_logo {
    position: absolute;
    left: 50%;
    top: 308px;
    width: 70px;
    height: 21px;
    margin-left: -620px;
    background-position: 0 -1300px;
}

/* selectbox */
.selectbox {
    position: relative;
}
.selectbox .btn_select {
    position: relative;
    z-index: 20;
    width: 96px;
    height: 58px;
    line-height: 58px;
    color: #767676;
    text-align: left;
    background: #f4f4f4 url("../../../../assets/img/common/icon_select_dn.png") no-repeat 90% 48%;
    line-height: 20px;
    letter-spacing: -1px;
}
.selectbox .btn_select:active,
.selectbox .btn_select:focus {
    outline: none;
}
.selectbox ul {
    display: none;
    position: absolute;
    width: 97px;
    top: 58px;
    padding: 7px 0;
    z-index: 20;
    border: 1px solid #d4d4d4;
    background-color: #f4f4f4;
}
.selectbox li a {
    display: block;
    color: #767676;
    padding: 7px 6px 7px 16px;
}
.selectbox li a:hover {
    color: #00d4c3;
}
.selectbox.show ul {
    display: block;
    z-index: 49;
}
.selectbox.show .btn_select {
    border: 0;
    background-image: url("../../../../assets/img/common/icon_select_up.png");
}

.selectbox2 {
    position: relative;
    width: 190px;
    height: 58px;
}
.selectbox2 .btn_select {
    width: 190px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}
.selectbox2 .btn_select.disabled {
    color: #969696;
    background-color: #eee;
    cursor: default;
}
.selectbox2.show .btn_select {
    border-radius: 30px 30px 0 0;
    border: 1px solid #d4d4d4;
    border-bottom: 1px solid #eee;
}
.selectbox2 ul {
    position: relative;
    width: 188px;
    top: 0;
    z-index: 5;
    max-height: 163px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.selectbox2 li:hover a {
    color: #555;
    background-color: #e0f1ef;
}
.selectbox2 li a {
    padding: 8px 6px 5px 16px;
}
.selectbox2 .btm {
    display: none;
    position: relative;
    z-index: 5;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}
.selectbox2.show .btm {
    display: block;
}

/* alert */
.layer_alert {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}
.layer_alert .dim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.layer_alert .modal_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    min-height: 283px;
    margin: -140px 0 0 -200px;
    border-radius: 36px;
    background-color: #33d8c6;
    box-shadow: 3px 3px 15px 3px rgba(14, 59, 97, 0.26);
}
.layer_alert .modal_wrap .modal_btn {
    text-align: center;
}
.layer_alert .modal_wrap .btn_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-position: 0 -1325px;
}
.layer_alert .modal_wrap .btn_close:hover {
    background-position: -50px -1325px;
}
.layer_alert .modal_wrap h1 {
    height: 80px;
    line-height: 82px;
    padding: 0 30px;
    background-color: #43e2d1;
    color: #fff;
    font-size: 24px;
    border-radius: 36px 36px 0 0;
    font-weight: normal;
}
.layer_alert .modal_contents {
    padding: 20px 28px 28px;
}
.layer_alert .modal_contents .modal_btn .btn1 {
    display: inline-block;
    width: 84px;
    height: 40px;
    line-height: 42px;
    margin: 0 3px;
    color: #fff;
    background-color: #1bac9c;
    border-radius: 20px;
}
.layer_alert .modal_contents .modal_btn .btn1:hover {
    background-color: #087d70;
}
.layer_alert .txt_wrap {
    width: 396px;
    height: 102px;
    padding-bottom: 15px;
}
.layer_alert .txt_wrap .align {
    display: inline-block;
    width: 1px;
    height: 100%;
    vertical-align: middle;
}
.layer_alert .txt1 {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    vertical-align: middle;
}
.layer_alert .txt1 strong {
    font-style: normal;
    color: #f5f03a;
}
.layer_alert .txt2 {
    display: inline-block;
    margin-top: 8px;
    color: #fff;
    font-size: 12px;
    vertical-align: middle;
}

/* layer popup */
.layer_popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
}
.layer_popup .icon {
    background: url("../../../../assets/img/common/spr_popup.png") no-repeat;
}
.layer_popup .dim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.layer_popup .modal_wrap {
    position: absolute;
    top: 220px;
    left: 50%;
    width: 680px;
    margin-left: -340px;
    overflow: hidden;
    border-radius: 0 0 36px 36px;
    box-shadow: 0 19px 15px -5px rgba(14, 59, 97, 0.1);
}
.layer_popup .modal_header {
    height: 185px;
    padding: 0 48px;
    background: url("../../../../assets/img/common/bg_pop_top.png") no-repeat;
}
.layer_popup .modal_contents {
    padding: 40px 42px 15px;
    background-color: #fff;
}
.layer_popup .btn_close {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-position: 0 -350px;
}
.layer_popup .btn_close:hover {
    background-position: 0 -300px;
}
.layer_popup .modal_header h2 {
    padding: 38px 0 17px;
    font-weight: normal;
    color: #9efff4;
    line-height: 18px;
}
.layer_popup .modal_header h3 {
    color: #fff;
    font-size: 32px;
    font-weight: normal;
    line-height: 42px;
    word-spacing: -2px;
    letter-spacing: -1px;
}
.layer_popup .modal_header h3 span {
    color: #9efff4;
}
.layer_popup .txt1 {
    position: relative;
    font-size: 16px;
    color: #333;
    line-height: 26px;
    padding-left: 15px;
}
.layer_popup .txt1 em {
    font-style: normal;
    color: #00d4c3;
}
.layer_popup .txt1 strong {
    color: #00d4c3;
}
.layer_popup .txt1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 2px;
    background-color: #33d8c6;
}
.layer_popup .primary {
    position: relative;
    margin-top: 25px;
    padding: 30px 0;
    background-color: #f4f4f4;
    text-align: center;
    overflow: hidden;
}

/* login layer */
.layer_login {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
}
.layer_login .dim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.layer_login .modal_wrap {
    position: absolute;
    top: 220px;
    left: 50%;
    width: 680px;
    margin-left: -340px;
    overflow: hidden;
    border-radius: 0 0 36px 36px;
    box-shadow: 0 19px 15px -5px rgba(14, 59, 97, 0.1);
}
.layer_login .modal_header {
    height: 185px;
    padding: 0 48px;
    background: url("../../../../assets/img/common/bg_pop_login_top.png") no-repeat;
}
.layer_login .modal_contents {
    padding: 40px 48px 15px;
    background-color: #fff;
}
.layer_login .btn_close {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-position: 0 -1450px;
}
.layer_login .btn_close:hover {
    background-position: -50px -1450px;
}
.layer_login .modal_header h2 {
    padding: 38px 0 17px;
    font-weight: normal;
    color: #9efff4;
    line-height: 18px;
}
.layer_login .modal_header h2 .icon {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -2px 4px 0 0;
    padding: 0;
    vertical-align: middle;
    border: 0;
    background-position: 0 -1550px;
}
.layer_login .modal_header h2 em {
    display: inline-block;
    color: #fff229;
    font-family: "Roboto";
    font-style: normal;
    border-bottom: 1px solid #fff229;
}
.layer_login .modal_header h2 span {
    display: inline-block;
    padding-left: 11px;
    border-bottom: 1px solid #6ffded;
}
.layer_login .modal_header h3 {
    color: #fff;
    font-size: 32px;
    font-weight: normal;
    line-height: 42px;
    word-spacing: -2px;
    letter-spacing: -1px;
}
.layer_login .modal_header h3 span {
    color: #9efff4;
}
.layer_login .modal_header h3 .arrow {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: -7px 0 0 0;
    vertical-align: middle;
    background-position: -100px -1500px;
}
.layer_login .info li {
    position: relative;
    font-size: 16px;
    color: #333;
    line-height: 26px;
    padding-left: 15px;
}
.layer_login .info li em {
    font-style: normal;
    color: #00d4c3;
}
.layer_login .info li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 2px;
    background-color: #33d8c6;
}
.layer_login .primary {
    margin-top: 25px;
    padding: 30px 0;
    background-color: #f4f4f4;
    text-align: center;
    overflow: hidden;
}
.layer_login .primary h4 {
    font-size: 16px;
    color: #333;
    padding-bottom: 10px;
}
.layer_login .primary .txt1 {
    padding-bottom: 18px;
    color: #767676;
    line-height: 22px;
}
.layer_login .primary .case1 {
    float: left;
    width: 50%;
    border-right: 1px solid #dedede;
    box-sizing: border-box;
}
.layer_login .primary .case2 {
    float: left;
    width: 50%;
}
.layer_login .btn1 {
    display: inline-block;
    width: 200px;
    height: 60px;
    line-height: 62px;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    background-color: #585858;
}
.layer_login .btn1:hover {
    background-color: #333;
}
.layer_login .btn_confirm {
    width: 130px;
}
.layer_login .btn_link {
    position: relative;
    display: inline-block;
    margin-top: 11px;
    color: #f94242;
    text-decoration: underline;
}
.layer_login .today_close {
    position: relative;
    text-align: right;
    margin-top: 15px;
}
.layer_login .today_close::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    display: block;
    width: 413px;
    height: 7px;
    border-radius: 4px;
    background: #e6e6e6 url("../../../../assets/img/common/bg_dot1.png") no-repeat right top;
}
.layer_login .today_close button {
    color: #969696;
    margin-top: -5px;
}
.layer_login .today_close button:hover {
    color: #00d4c3;
}
.layer_login .today_close button .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    background-position: 0 -1500px;
}
.layer_login .today_close button:hover .icon {
    background-position: -50px -1500px;
}
.layer_login .ban_pcbang {
    display: block;
    margin: -11px 0 25px;
}
#layerLogin3 .modal_header h2 {
    padding-top: 64px;
}
#layerLogin6 .modal_header {
    height: 179px;
    background: url("../../../../assets/img/common/bg_pop_login_top2.png") no-repeat;
}
#layerLogin6 .modal_contents {
    padding-bottom: 48px;
}
#layerLogin6 .btn_close {
    background-position: -100px -1450px;
}
#layerLogin6 .btn_close:hover {
    background-position: -150px -1450px;
}
#layerLogin6 .modal_header h2 span {
    color: #ffa3a3;
    border-color: #ffa3a3;
}
#layerLogin6 .desc {
    width: 472px;
    margin: 0 auto;
    padding: 10px 0 20px;
    overflow: hidden;
    text-align: left;
    color: #767676;
}
#layerLogin6 .desc dt {
    float: left;
    width: 52px;
    margin-bottom: 18px;
    color: #333;
    font-weight: 700;
}
#layerLogin6 .desc dd {
    float: left;
    width: 420px;
    margin-bottom: 18px;
}
#layerPCbang .modal_wrap {
    width: 544px;
    height: 544px;
    margin-left: -272px;
    box-shadow: none;
    background: url("../../../../assets/img/common/bg_pop_pcbang.png") no-repeat;
}
#layerPCbang .btn_close {
    right: 32px;
    top: 24px;
}
#layerPCbang .modal_contents {
    padding: 0 58px;
    background-color: transparent;
}
#layerPCbang h2 {
    margin-top: 52px;
    font-size: 36px;
    color: #fff229;
}
#layerPCbang h2 em {
    display: block;
    font-size: 96px;
    font-style: normal;
}
#layerPCbang h2 span {
    font-family: "Roboto";
    font-size: 114px;
}
#layerPCbang .txt1 {
    padding-top: 30px;
    font-size: 16px;
    color: #fff;
    line-height: 26px;
}
#layerPCbang .btn1 {
    margin-top: 52px;
    background-color: #0d9586;
    text-align: center;
}
#layerPCbang .btn1:hover {
    background-color: #333;
}
#layerPCbang .today_close {
    position: absolute;
    left: 58px;
    bottom: 37px;
    width: 424px;
}
#layerPCbang .today_close::before {
    width: 253px;
}

/* notice layer */
.layer_notice {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99990;
}
.layer_notice .dim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.layer_notice .modal_wrap {
    position: absolute;
    top: 197px;
    left: 50%;
    width: 754px;
    height: 634px;
    margin-left: -377px;
    overflow: hidden;
    background: url("../.../../../../assets/img/main/bg_pop_win.png") no-repeat;
}
.layer_notice .btn_close {
    position: absolute;
    top: 48px;
    right: 32px;
    width: 40px;
    height: 40px;
    background-position: -200px -1450px;
    text-indent: -9999px;
    overflow: hidden;
}
.layer_notice .btn_close:hover {
    background-position: -50px -1450px;
}
.layer_notice .modal_contents {
    padding: 68px 60px 0;
    text-align: center;
}
.layer_notice h2 {
    font-size: 46px;
    line-height: 53px;
    color: #fff;
    letter-spacing: -1px;
    word-spacing: -3px;
    text-align: left;
}
.layer_notice .txt1 {
    padding: 5px 0 0 0;
    font-size: 17px;
    color: #fff;
    line-height: 28px;
    text-align: left;
}
.layer_notice .txt1 em {
    color: #fffd43;
    font-style: normal;
}
.layer_notice .txt2 {
    padding: 63px 0 0 0;
    font-size: 19px;
    color: #333;
    line-height: 30px;
}
.layer_notice .btn1 {
    display: inline-block;
    width: 280px;
    height: 60px;
    line-height: 62px;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    margin-top: 22px;
    background-color: #ff88ba;
    border: 1px solid #ff88ba;
    box-sizing: border-box;
}
.layer_notice .btn1:hover {
    background-color: #333333;
    border-color: #333333;
}
.layer_notice .today_close {
    position: absolute;
    right: 60px;
    bottom: 34px;
}
.layer_notice .today_close button {
    color: #969696;
    margin-top: -5px;
}
.layer_notice .today_close button:hover {
    color: #00d4c3;
}
.layer_notice .today_close button .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    background-position: 0 -1500px;
}
.layer_notice .today_close button:hover .icon {
    background-position: -50px -1500px;
}

/* main video layer */
.layer_video {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000;
}
.layer_video .dim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=80);
    opacity: 0.8;
}
.layer_video .modal_wrap {
    position: absolute;
    top: 197px;
    left: 50%;
    width: 1280px;
    height: 837px;
    margin-left: -640px;
    overflow: hidden;
}
.layer_video .btn_close {
    width: 54px;
    height: 54px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../../../ca/ca2019/main/common/main_pop_video.png") no-repeat;
    background-position: -61px 0px;
}
.layer_video .btn_close:hover {
    background-position: 0px 0px;
}
.layer_video .modal_contents {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0;
    background: transparent;
}
.layer_video .modal_contents .video_wrap {
    width: 1280px;
    height: 720px;
    background: black;
}
.layer_video .today_close button {
    display: inline-block;
    width: 161px;
    height: 30px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    background: url("../../../ca/ca2019/main/common/main_pop_video.png") no-repeat;
    background-position: 0px -95px;
    text-indent: -9999px;
}
.layer_video .today_close button:hover {
    background-position: 0px -63px;
}