<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

/* header */
header {height: 105px;}
#header.fixed {position: fixed; transform: translateY(-100%); transition: 0.3s;}
#header.fixed.up {transform: translateY(0); }


/* footer */
footer {margin-top: 100px;}

.container {padding-bottom: 100px; min-height: 800px;}

article {margin: 160px 0;}
article h4 {font-size: var(--subtit_s); margin-bottom: 16px; font-weight: bold; white-space: pre-wrap;}
article h4 + .list {margin-top: 0;}

.sub-tit { margin-bottom: 60px;}
.sub-tit h3 {font-size: var(--subtit_b); font-weight: bold; text-align: center; white-space: pre-wrap;}
.sub-tit p {margin-top: 30px; font-size: var(--sub03); color: #616161; text-align: center; white-space: pre-wrap;}


.sub-nav {width: 100%; background: #F6F6F6; height: 45px;}
.sub-nav .inner div {display: inline-block; position: relative; padding-right: 33px;}
.sub-nav .inner div a {font-size: var(--fz);  line-height: 45px; font-weight: 500; opacity: 0.4; color: #616161;}
.sub-nav .inner div::before {content:""; width: 1px; height: 9px; position: absolute; background: #616161; right: 16px; top: 50%; transform: translateY(-50%); }
.sub-nav .inner div:last-child a {opacity: 1;}
.sub-nav .inner div:last-child::before {display: none;}

.snb.top {margin-bottom: 32px;}
.snb.top ul {width: 100%; /*height: 160px;*/ display: flex; justify-content: center; align-items: center; gap: 40px; padding-top: 65px; padding-bottom: 6px;}
.snb.top ul a {font-size: var(--fz00); font-weight: 500; position: relative; }
.snb ul a::before {content:""; width: 100%; height: 2px; background: #002C8A; position: absolute; left: 0; bottom: -6px; opacity: 0; transition: opacity 0.3s; z-index: 1;}
.snb ul .on &gt; a {color: #002C8A;}
.snb ul .on &gt; a::before {opacity: 1;}
.snb.top dl {display: none;}

.snb.side {position: sticky; left: 0; top: 120px;}
.snb.side ul li + li {margin-top: 24px;}
.snb.side ul a {font-size: var(--fz); position: relative; font-weight: 500; line-height: 1.4; transition: color 0.3s;}
.snb.side dd {margin-top: 24px;}
.snb.side dd a {font-size: var(--sub03); font-weight: 500; color: #616161; padding-bottom: 6px;}
.snb.side dd a::before {width: calc(100% - 0.6em); left: 0.6em; bottom: 0;}
.snb.side dd.on a {color: #002C8A;}
.snb.side dd.on a::before {opacity: 1;}

/* 240604 */
.sub-text {font-size: 18px; text-align: center; margin-top: -1em; margin-bottom: 2em; padding: 0 8%;}
@media screen and (max-width:780px) {
  .sub-text {text-align: left; padding: 0 20px;  font-size: 16px;}
}

/* tab */
.tab-area {position: relative;}
.tab-area::before, .tab-area::after {content:""; width: 60px; height: 44px; position: absolute; top: -1px; z-index: 1; opacity: 0; transition: opacity 0.3s;}
.tab-area::before {left: -2.5vw; background: url(/images/user/icon_arrow_prev01.png) -10px center no-repeat, linear-gradient(to right, #fff 20px, transparent); }
.tab-area::after {right: -2.5vw; background: url(/images/user/icon_arrow_next01.png) right -10px center no-repeat, linear-gradient(to left, #fff 20px, transparent); }
.tab-area.left::before {opacity: 1;}
.tab-area.right::after {opacity: 1;}
.tab {margin-bottom: 100px; position: relative;}
.tab ul {display: flex; justify-content: center; gap: 16px; align-items: center; flex-wrap: wrap;}
.tab ul a {display: block; width: fit-content; padding: 12px 24px; border: 1px solid #C1C1C1; border-radius: 31px; background: #fff; font-size: var(--fz02); font-weight: 400; color: #313131; white-space: nowrap; }
.tab ul .on a {color: #fff; background: #002C8A; border-color: #002C8A;}


/* list */
.list {margin-top: 100px;}
.list-top {width: 100%; display: flex; justify-content: space-between; align-items: end; padding-bottom: 16px; }
.list-top .info {font-size: var(--sub03); }
.list-top .info b {color: #002C8A; font-weight: 400;}
.list-top .info .bar {width: 1px; height: 11px; vertical-align: middle; background: #C1C1C1; display: inline-block; margin: 0 8px;}
.list-top .right {font-size: 0;}
.list-top .select-box {width: 130px; height: 50px; position: relative; display: inline-block; margin-right: 16px;}
.list-top .select-box select { appearance: none; width: 100%; height: 100%; border: 1px solid #D1D1D1; border-radius: 0; font-size: var(--sub03); background-color: #fff; background-image: url(/images/user/arr_down_bk.png); background-repeat: no-repeat; background-position: calc(100% - 18px) center; padding-left: 18px;}
.list-top .search-box {width: 460px; height: 50px; border: 1px solid #D1D1D1; display: inline-flex; align-items: center;}
.list-top .search-box button {width: 48px; height: 100%; background: url(/images/user/icon_search.png) center no-repeat; }
.list-top .search-box input {width: calc(100% - 48px); padding: 0 15px; height: 100%; font-size: var(--sub03); border: none;}
.list-top .search-box input::placeholder {color: #919191;}

.list .list01 {border-top: 2px solid #C1C1C1;}
.list .list01 ul {padding-top: 48px; display: flex; flex-wrap: wrap; gap: 48px 60px; }
.list .list01 li { border: 1px solid #E1E1E1; border-radius: 16px; overflow: hidden; transition: 0.3s; outline: 2px solid transparent;}
.list .list01 .col4 li {width: calc((100% - 180px)/4);}
.list .list01 .col2 li {width: calc((100% - 60px)/2);}
.list .list01 .col2 .btn-box {flex-direction: column; gap: 17px; align-items: center; justify-content: center;}
.list .list01 li &gt; a {padding: 20px; display: block;}
.list .list01 li .dsf {display: flex; gap: 46px; }
.list .list01 .img-box {border-radius: 16px; overflow: hidden; position: relative; width: 100%; background: #fff; margin-bottom: 20px;}
.list .list01 .img-box &gt; span {width: 100%; padding-top: 100%; position: relative; display: block;}
.list .list01 .col2 .img-box &gt; span {padding-top: 41.5%;}
.list .list01 .img-box img {max-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.list .list01 .tag-box {position: absolute; top: 4px; right: 4px; }
.list .list01 .tag-box span {display: block; color: #fff; width: 60px; height: 27px; line-height: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--fz); border-radius: 17px;}
.list .list01 .tag-box span + span {margin-top: 4px;}
.list .list01 .tag-box span.new {background: #002C8A;}
.list .list01 .tag-box span.best {background: #E60000;}
.list .list01 .text-box {padding-top: 20px; text-align: center; border-top: 1px solid #E1E1E1;}
.list .list01 .text-box .brand {font-size: var(--sub03); font-weight: bold; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.list .list01 .text-box .comp {font-size: var(--fz); margin-top: 8px; color: #616161; white-space: pre-wrap;}

.list .list01 li:hover {outline: 2px solid #002C8A; box-shadow: 0 3px 6px rgba(0,44,138,0.16); background: #FAFAFA;}

.list .list02 {border-top: 2px solid #C1C1C1; padding: 48px 0; border-bottom: 2px solid #C1C1C1;}
.list .list02 ul {display: flex; gap: 60px;  flex-wrap: wrap;}
.list .list02 li {width: calc((100% - 120px)/3);}
.list .list02 li .img-box {width: 100%;}
.list .list02 li .img-box span {display: block; width: 100%; padding-top: 100%; position: relative; }
.list .list02 li .img-box img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.list .list02 li .text {padding-top: 24px;}
.list .list02 li .text .info {display: flex; justify-content: space-between; font-size: var(--fz); color: #616161;}
.list .list02 li .text .info b {}
.list .list02 li .text .tit {font-size: var(--fz00); margin-top: 6px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.list .list02 li .text.end {opacity: 0.8;}
.list .list02 li .text.end .tit {color: #dcdcdc;}
.list .list02 li .text.end .info * {color: #dcdcdc;}

.list .list03 {border-top: 2px solid #C1C1C1; border-bottom: 2px solid #C1C1C1;}
.list .list03 li {padding: 28px 0; display: flex; align-items: center; font-size: var(--fz02); color: #313131; gap: 16px; border-bottom: 1px solid #C1C1C1;}
.list .list03 li:last-child {border-bottom: none;}
.list .list03 li .num {width: 50px; flex-shrink: 0;}
.list .list03 li .con {width: calc(100% - 262px); display: flex; align-items: center;}
.list .list03 li .con a {font-size: inherit; display: block; max-width: 100%; overflow: hidden; white-space: pre-wrap;}
.list .list03 li .con span {padding-right: 25px; flex-shrink: 0; min-width: 100px;}
.list .list03 li .con b {padding-right: 7px; color: #002C8A;}
.list .list03 li .info {font-size: var(--sub03); color: #616161; width: 180px; flex-shrink: 0;}
.list .list03 li .info span {font-size: inherit; color: inherit;}
.list .list03 li .info span.end {font-weight: 600; color: #002C8A;}
.list .list03 li .info span + span {margin-left: 16px;}
.list .list03 li.admin {padding-left: 90px; background: url(/images/user/reply_arr.png) no-repeat; background-position: 16px center;}
.list .list03 li.admin .num {display: none;}


.paging {margin-top: 80px; display: flex; justify-content: center; align-items: center; gap: 4px;}
.paging button {width: 40px; height: 40px; font-size: 0; background-position: center; background-repeat: no-repeat;}
.paging button img {vertical-align: middle; width: 100%;}
.paging .page-num {}
.paging .page-num ul {display: flex; justify-content: center; align-items: center; gap: 4px;}
.paging .page-num a {display: block; width: 40px; line-height: 40px; font-size: var(--fz); font-weight: bold; color: #666; background: #FAFAFA; text-align: center;}
.paging .page-num .on a {background: #EEF6FF; color: #175CC4;}
.btn-box + .paging {margin-top: 30px;}
.paging .btn-prev2 {background-image: url(/images/user/icon_arrow_prev02.png);}
.paging .btn-prev {background-image: url(/images/user/icon_arrow_prev01.png);}
.paging .btn-next2 {background-image: url(/images/user/icon_arrow_next02.png);}
.paging .btn-next {background-image: url(/images/user/icon_arrow_next01.png);}


/* form */
.form {}
.form-top {text-align: right;}
.form-top em {font-size: var(--sub03); color: #1E6DC9;}

.form .form-body ul {padding: 8px 0;}
.form .form-body ul + ul {border-top: 1px solid #D1D1D1;}
.form .form-body li {display: flex; margin: 8px 0;} 
.form .form-body .lb {width: 140px; flex-shrink: 0; padding-top: 15px; font-size: var(--fz02);}
.form .form-body .lb b {color: #1E6DC9; vertical-align: middle;}
.form .form-body .con {width: calc(100% - 140px);}
.form .form-body input ,.form .form-body textarea {padding: 15px; border: 1px solid #D1D1D1; font-size: var(--sub03); width: 100%; }
.form .form-body textarea { resize: none; height: 300px; vertical-align: top;}

.form .agree {display: flex; align-items: center; position: relative; color: #616161; font-size: var(--sub03); }
.form .agree input[type="checkbox"] {appearance: none; width: 1px; height: 1px; opacity: 0; position: absolute; left: 0; top: 0;}
.form .agree .check-box {width: 24px; height: 24px; background-color: #fff; border: 1px solid #D1D1D1; vertical-align: middle; margin-right: 16px; background-repeat: no-repeat; background-position: center; display: block; } 
.form .agree input[type="checkbox"]:checked + .check-box {background-image: url(/images/user/icon_check.png);}


/* product */

  /* view */
  .view-top {background: #F3F4F6; }
  .view-top .dsf {display: flex; align-items: center; padding: 60px 0; justify-content: space-around;}
  .view-top .dsf .iframe {position: relative; width: 250px; height: 520px; border-radius: 10px; border: none; border-radius: 40px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); padding: 10px;}
  .view-top .dsf .iframe .iframeImg {width: 100%; position: absolute; top: 0; left: 0;}
  .view-top .dsf .iframe iframe {width: 100%; height: 100%; border-radius: 30px; box-sizing: border-box; position: relative; z-index: 100; border: none;}
  .view-top .dsf .text {max-width: 500px;}
  .view-top .logo-img {width: 245px; flex-shrink: 0; background: #fff; border-radius: 16px; overflow: hidden;}
  .view-top .logo-img span {display: block; width: 100%; padding-top: 100%; position: relative;}
  .view-top .logo-img img {position: absolute; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}
  .view-top h3 {font-size: var(--subtit_s); font-weight: bold; }
  .view-top .comp {font-size: var(--fz00); color: #313131; margin-top: 16px; margin-bottom: 24px;}
  .view-top .txt {font-size: var(--sub03); color: #313131; width: 100%; margin-top: 24px; /*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical;*/ line-height: 1.5;}

  .product-view {margin: 80px 0;}
  .product-view h4 {margin-bottom: 32px;}
  .product-view p {color: #616161; font-size: var(--sub03); line-height: 1.5;}
  .product-view img {max-width:100%;}

  /* game */
  .game-banner {display: flex; gap: 30px; }
  .game-banner:has(span) {margin-top: 100px;}
  .game-banner span {width: calc(50% - 15px); }
  .game-banner a {width: 100%; position: relative; display: block; padding-top: 36%; }
  .game-banner img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

  @supports not (selector(:has(*))){
    .game-banner span {margin-top: 50px;}
  }


/* event */
  /* view */
  .view-tit {margin-bottom: 32px; }
  .view-tit h3 {font-size: var(--subtit_s); margin-bottom: 16px; font-weight: bold; text-align: center; white-space: pre-wrap;}
  .view-tit .info {display: flex; justify-content: center; align-items: center; gap: 32px;}
  .view-tit .info li {font-size: var(--fz); color: #616161; position: relative;}
  .view-tit .info li::after {width: 1px; height: 10px; background: #C1C1C1; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);}
  .view-tit .info li:last-child:after {display: none;}

  .view-cont {border-top: 2px solid #C1C1C1; padding: 48px 0;}
  .view-cont * {white-space: pre-wrap;}
  .view-cont img {max-width: 100%; height: auto; }
  .view-cont p {font-size: var(--sub03); color: #616161; line-height: 1.5;}
  .view-cont .image {text-align: center;}
  
  .reply-area {}

  .reply {display: flex; gap: 16px; align-items: start; padding: 32px 16px; background: #FBFBFB; border-top: 1px solid #C1C1C1;}
  .reply .icon {width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-image: url(/images/user/reply_icon.png); background-size: cover;}
  /* .reply .icon img {width: 100%; height: 100%; object-fit: cover;} */
  .reply .input-area {width: 100%; }
  .reply .input-area &gt; div {display: flex; gap: 16px; }
  .reply .input-area &gt; div &gt; div {flex-shrink: 0; }
  .reply .input-area .top {justify-content: space-between; align-items: center; margin-bottom: 7px;}
  .reply .input-area .top span {font-size: var(--fz02); font-weight: bold;}
  .reply .input-area .btm span {font-size: var(--sub03); line-height: 1.4; padding-top: 4px; word-break: normal; width: 100%;}
  .reply .input-area .btm span textarea {vertical-align: top;}
  .reply .input-area .time {font-size: var(--sub03); color: #919191;}
  .reply .btn-box {gap: 12px;}
  .reply .btn-box input {width: 100px; font-size: var(--sub03); height: 28px; line-height: 1; border: 1px solid #d1d1d1; padding-left: 5px; font-size: 14px;}

  .reply.reply-lock {align-items: center;}
  .reply.reply-lock .icon {background-image: url(/images/user/reply_lock.png);}

  .reply-num {padding: 16px 0; color: #616161; font-size: var(--sub03);}

  .reply.admin {background-color: #F1F1F1; padding-left: 72px; background-image: url(/images/user/reply_arr.png); background-position: 16px center; background-repeat: no-repeat;}
  .reply.admin .icon {background-image: url(/images/user/reply_admin.png);}

  .reply-input {border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; padding: 24px 16px; }
  .reply-input .input-area &gt; div + div {margin-top: 16px;}
  .reply-input .input-area input {max-width: 215px; width: 100%; font-size: var(--sub03); padding: 12px; line-height: 1; border: 1px solid #d1d1d1;}
  /* .reply.reply-input .input-area &gt; div {align-items: flex-start; } */
  .reply-input .input-area &gt; div span {width: 100%;}
  .reply-input .input-area &gt; div.btm span {padding-top: 0;}
  .reply-input .input-area textarea {width: 100%; font-size: var(--sub03); border: 1px solid #d1d1d1; padding: 12px; resize: none; height: 76px;}

  .reply-input.update {border-bottom: none;}

  .view2 .pagination {border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; padding: 24px 0; display: flex; justify-content: space-between; align-items: center;}
  .view2 .pagination &gt; div {width: 50%;}
  .view2 .pagination a {font-size: var(--sub03); color: #313131; display: flex; align-items: center;}
  .view2 .pagination .prev a {padding-left: 22px; background: url(/images/user/arr_left_g.png) left center no-repeat; }
  .view2 .pagination a .bar { width: 2px; height: 14px; background-color: #D1D1D1; margin: 0 16px; vertical-align: middle; display: inline-block;}
  .view2 .pagination a .tit {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .view2 .pagination .next a {justify-content: end; padding-right: 22px; background: url(/images/user/arr_right_g.png) right center no-repeat;}

  .view2 .pagination .disable {pointer-events: none; opacity: 0.6;}
  .view2 .pagination .disable span {display: none;}

  /* notice */

/* cs center */
  /* faq */
  .faq .list .list03 li .con {width: 100%;}
  .faq .list .list03 li .con a::before {content:"Q"; color: #002C8A; font-weight: bold; padding-right: 7px; display: inline-block;}

  .faq-search {margin-top: 100px; margin-bottom: 60px; display: flex; gap: 32px; align-items: center; justify-content: center;}
  .faq-search h3 {font-size: var(--subtit_s); color: #313131; font-weight: bold;}
  .faq-search .search-box {width: 470px; max-width: 100%; height: 50px; border: 2px solid #A1A1A1; display: flex;}
  .faq-search .search-box input {border: none; width: calc(100% - 48px); height: 100%; padding: 10px 16px; font-size: var(--sub03);}
  .faq-search .search-box button {width: 48px; height: 100%; background: url(/images/user/icon_search.png) center no-repeat;}

  .faq .search-result {font-size: var(--subtit_s); font-weight: 600; color: #313131; margin-bottom: 80px; text-align: center;}
  .faq .search-result b {font-size: 1.0625em; font-weight: bold; color: #002C8A;}

  /* inquiry */
  .inquiry .list .list03 li .info {width: 260px;}
  /* .inquiry .list .list03 li .con a {white-space: wrap; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; } */
  .inquiry .form .select-box {width: 200px; height: 50px; position: relative; display: inline-block; margin-right: 16px;}
  .inquiry .form .select-box select { appearance: none; width: 100%; height: 100%; border: 1px solid #D1D1D1; border-radius: 0; font-size: var(--sub03); background-color: #fff; background-image: url(/images/user/arr_down_bk.png); background-repeat: no-repeat; background-position: calc(100% - 18px) center; padding-left: 18px;}

  .pw-pop .pop-wrap {background: #fff; width: 80%; max-width: 480px;}
  .pw-pop .pw-area {padding: 60px; }
  .pw-pop .pw-area .tit {font-weight: bold; font-size: var(--fz00); margin-bottom: 40px; text-align: center;}
  .pw-pop .pw-area .input {width: 100%; height: 50px; border: 1px solid #c1c1c1; margin-bottom: 24px;}
  .pw-pop .pw-area input {padding: 10px 15px; font-size: var(--sub03); border: none; width: 100%; height: 100%;}
  .pw-pop .pw-close {height: 60px; text-align: center; color: #fff; background: #000; width: 100%; font-size: var(--sub03);}


/* com */
  /* contact */
  .contact {display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 120px; gap: 0 20px;}
  .contact .left {font-size: var(--subtit_s); color: #616161; line-height: 1.8; padding-top: 2%;}
  .contact .right {max-width: 940px; width: calc(100% - 240px);}
  .contact .btn-box {width: 100%;}

  .cont.com h4 {font-size: var(--fz00); margin-bottom: 32px; color: #616161; font-weight: 600;}
  .cont.com h5 {font-size: var(--fz02); color: #616161; margin-bottom: 16px; margin-top: 32px; font-weight: 600;}
  .cont.com p, .cont.com li {font-size: var(--sub03); color: #616161; line-height: 1.7;}
  .cont.com ul ul {padding: 3px 0; padding-left: 1em; }


/* company */
.cont-wrap {display: flex; margin-top: 120px;}
.cont-wrap .snb-area {width: 250px; flex-shrink: 0; padding-right: 40px;}
.cont-wrap .cont-area {width: calc(100% - 250px); }
.cont-wrap img {max-width: 100%;}

.cont-wrap .cont-area .anicont {transform: translateY(50px); opacity: 0; transition: transform 0.4s, opacity 0.3s;}
.cont-wrap .cont-area .anicont.ani {transform: translateY(0); opacity: 1;}

.substyle1 p {font-size: var(--sub03); color: #616161; line-height: 1.7; white-space: pre-wrap;}



.thepay .cont-area article {margin-top: 0; margin-bottom: 200px;}
.thepay .cont-area .sub-tit {margin-bottom: 120px;}
.thepay ul.sp4 {display: flex; justify-content: space-between; gap: 60px 0; flex-wrap:wrap; margin-bottom: 100px;}
.thepay ul.sp4 li {width: calc(50% - 45px); }
.thepay ul.sp4 li h4 {margin-bottom: 32px;}

.brand .vod-slide {width: 100%; background: #ccc; border-radius: 16px; overflow: hidden; position: relative; margin-bottom: 120px;}
.brand .vod-slide .swiper-slide span {width: 100%; padding-top: 56%; display: block; position: relative;}
.brand .vod-slide video {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.brand .vod-slide video[poster] {width: 100%; height: 100%; object-fit: cover;}
.brand .vod-slide .swiper-btn button {width: 64px; height: 64px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255,255,255,0.23); z-index: 5; background-repeat: no-repeat; background-position: center;}
.brand .vod-slide .swiper-btn button.swiper-button-disabled {display: none;}
.brand .vod-slide .swiper-btn .prev {left: 16px; background-image: url(/images/user/arr_left_w.png);}
.brand .vod-slide .swiper-btn .next {right: 16px; background-image: url(/images/user/arr_right_w.png);}

.brand .vod-slide .ctrl {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center;}
.brand .vod-slide .ctrl .controll {width: 80px; height: 80px; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 3px 6px rgba(0,0,0,0.3); border-radius: 50%; opacity: 0.8; transition: opacity 0.3s;}

.brand .vod-slide .ctrl .controll[value="play"] {background-image: url(/images/user/button_play.png);}
.brand .vod-slide .ctrl .controll[value="stop"] {background-image: url(/images/user/button_stop.png); opacity: 0;}


.history .his-wrap {display: flex; justify-content: space-between;}
.history .moving-img {width: calc(50% - 45px);}
.history .moving-img .img-sam {position: sticky; left: 0; top: 150px; width: 100%; border-radius: 16px; overflow: hidden; }
.history .moving-img .img-sam img {vertical-align: top;}
.history .his-area {width: calc(50% - 45px); position: relative;}
.history .his-area::before {content:""; width: 2px; height: calc(100% - 190px); background: #E1E1E1; position: absolute; left: 7px; top: 15px;}
.history .his-area ul li {padding-left: 35px; margin-bottom: 120px; position: relative;}
.history .his-area ul li::before {content:""; width: 16px; height: 16px; background-image: url(/images/user/icon_history.png); position: absolute; left: 0;top: 10px;}
.history .his-area ul li:nth-child(1)::before {background-image: url(/images/user/icon_history_on.png);}
.history .his-area ul .years {font-size: calc(var(--subtit_s)*0.875); font-weight: bold; margin-bottom: 10px;}


.work .go-service {text-align: center; font-size: var(--fz02); color: #002C8A;}
.work .go-service a {font-size: inherit; font-weight: bold; color: inherit; text-decoration: underline; text-underline-position: under; }
.work .go-service::after {content:""; width: 18px; height: 18px; display: inline-block; background-image: url(/images/user/arr_right_b.png); background-repeat: no-repeat; vertical-align: middle;}


/* service */
.service .cont-area {display: flex; gap: 9%;}
.service .cont-area .text-area {width: 46%; }
.service .cont-area .vod-area {width: 45%;}
.service .cont-area .vod-area .vod-box {width: 100%; position: sticky; right: 0; top: 150px;}
.service .cont-area .vod-area .vod-box video {width: 100%;}

.service .sub-tit {margin-bottom: 80px;}
.service .sub-tit h3 {text-align: left;}
.service .sub-tit p {text-align: left;}
.service article {margin: 0;}
.service article + article {margin-top: 400px;}
.service article:last-child {margin-bottom: 250px;}
.service article h4 {margin-bottom: 32px; font-size: calc(var(--subtit_s)*0.8);}

.service article ul li + li {margin-top: 120px;}
.service article .btn-box {margin-top: 80px;}
.service article .btn-box .btn {font-size: var(--fz03); white-space: pre-wrap;}

.service .mo-vod {display: none; text-align: center; margin-bottom: 40px;}
.service .mo-vod video {width: 100%; max-width: 400px;}

@media (hover: hover) {
  .brand .vod-slide .ctrl .controll:hover {opacity: 1;}
  .brand .vod-slide .ctrl:hover .controll[value="stop"] {opacity: 0.8;}
  .brand .vod-slide .ctrl .controll[value="stop"]:hover {opacity: 1;}
}


@media screen and (max-width:1480px){
  
}

@media screen and (max-width:1260px){

  /*  */
  article {margin: 100px 0;}

  /* list */
  .list .list01 .col4 li {width: calc((100% - 120px)/3);}

  .list .list02 ul {gap: 60px 40px;}
  .list .list02 li {width: calc((100% - 80px)/3);}

  /* game */
  .game-banner {gap: 20px;}
  .game-banner span {width: calc(50% - 10px);}
  
}


@media screen and (max-width:1024px){
  .wrap {overflow-x: hidden;}

  /* header */
  header {height: 81px;}

  /* snb */
  .snb.top {margin-bottom: 30px;}

  /* list */
  .list {margin-top: 60px;}
  .list-top .select-box {height: 40px; width: 120px; margin-right: 12px; margin-bottom: 8px;}
  .list-top .select-box select {padding-left: 12px;}
  .list-top .search-box {width: 100%; height: 40px;}
  .list-top {flex-direction: column; align-items: start; gap: 8px;}
  .list-top .right {width: 100%;}

  .list .list01 ul {gap: 24px; }
  .list .list01 li {border-radius: 12px;}
  .list .list01 .col4 li {width: calc((100% - 48px)/3);}

  .list .list01 li .dsf {flex-direction: column; gap: 0;}
  .list .list01 .col2 li {width: calc((100% - 24px)/2);}
  .list .list01 .col2 .btn-box {flex-direction: row; }
  .list .list01 .col2 .text-box {margin-top: 20px;}

  .list .list02 {padding: 36px 0;}
  .list .list02 ul {gap: 60px 20px;}
  .list .list02 li {width: calc((100% - 40px)/3);}

  .list .list03 li {padding: 22px 0;}

  /* pd */
  .view-top .logo-img {width: 180px;}

  /* reply */

  .reply .btn-box {gap: 8px;}

  /* paging */
  .paging .page-num a {width: 36px; line-height: 36px;}
  .paging button {width: 36px; height: 36px;}

  /* inquiry */
  .list .list03 li.admin {padding-left: 60px; background-position: -5px center;}
  .inquiry .list .list03 li .info {width: 240px;}


  /* com */
  /* contact */
  .contact {flex-direction: column; padding-top: 80px; }
  .contact .left {line-height: 1.5; padding-top: 0; padding-bottom: 20px;}
  .contact .right {width: 100%;}

  /*  */
  .cont-wrap {flex-wrap: wrap; margin-top: 0;}
  .cont-wrap .snb-area {/*display: none;*/ width: 100%; padding-right: 0;}
  .cont-wrap .cont-area {width: 100%;}

  .thepay .cont-area .sub-tit {margin-bottom: 100px;}
  .thepay .cont-area article {margin-bottom: 160px;}
  .thepay ul.sp4 li {width: calc(50% - 25px);}
  .brand .vod-slide {margin-bottom: 100px;}
  /* .history .his-wrap {flex-direction: column; gap: 20px;} */
  .history .moving-img {/*width: calc(50% - 30px);*/ display: none;}
  .history .his-area {/*width: calc(50% - 20px);*/ width: 100%;}

  .service .cont-area .text-area {width: 100%;}
  .service .cont-area .vod-area {display: none;}
  .service .cont-area .vod-area .vod-box {/*width: 41.4%; position: fixed; right: 5%; top: 160px;*/  display: none;}
  .service .mo-vod {display: block;}

  .service article + article {margin-top: 250px;}
  .service article:last-child {margin-bottom: 40px;}

  .service article ul li + li {margin-top: 100px;}
  .service article .btn-box {margin-top: 60px;}
  
  .game-banner:has(span) {margin-top: 60px;}
}


@media screen and (max-width:780px){

  /*  */
  article {margin: 80px 0 40px;}

  .sub-nav {display: none;}

  /* snb */
  .snb.top {width:100%; overflow: auto; margin: auto; margin-bottom: 12px; -ms-overflow-style: none; scrollbar-width: none; position: relative;}
  .snb.top::-webkit-scrollbar {display: none;}
  .snb.top .line {position: absolute; height: 1px; left: 20px; bottom: 14px; background: #D1D1D1;}
  .snb.top ul {padding: 40px 20px 20px; width: fit-content; gap: 20px 25px; justify-content: start;}
  .snb.top ul li {white-space: nowrap;}

  /* tab */
  .tab {width: 100%; overflow: auto; padding-bottom: 20px; margin-bottom: 50px;}
  .tab ul { flex-wrap: nowrap; padding: 0 20px; justify-content: start; width: fit-content;}

  /* list */
  .list {margin-top: 40px;}
  .list .list01 ul {gap: 18px; padding-top: 28px;}
  .list .list01 .col4 li {width: calc(50% - 9px);}
  .list .list01 .col2 li {width: 100%;}

  .list .list02 li {width: calc(50% - 10px);}
  .list .list02 li .text {padding-top: 16px;}
  .list .list02 li .text .info {flex-direction: column; gap: 5px;}

  .list .list03 li {padding: 18px 0; font-size: var(--fz01); gap: 8px; flex-wrap: wrap;}
  .list .list03 li .con {width: calc(100% - 48px); padding-right: 5px;}
  .list .list03 li .info {font-size: var(--fz02); width: 100%; text-align: right; padding-right: 5px;}
  .list .list03 li .num {font-size: var(--fz02); width: 40px;}

  /* paging */
  .paging .page-num ul {flex-wrap: wrap; width: 180px;}
  .paging .page-num a {width: 32px; line-height: 32px;}
  .paging button {width: 32px; height: 32px;}

  /* view */
  .view-cont {padding: 36px 0;}
  .view-cont figure.image {margin: 0; width: 100%;}

  .view-top .dsf {gap: 26px; flex-direction: column;}
  .view-top .logo-img {width: 160px;}
  

  .view2 .pagination {/*flex-direction: column;*/ padding: 14px;}
  /* .view2 .pagination &gt; div {width: 100%;} */
  .view2 .pagination span, .view2 .pagination a .bar {display: none;}

  /* reply */
  .reply {padding: 18px 12px;}
  .reply .icon {width: 40px; height: 40px;}
  .reply .input-area &gt; div {gap: 10px;}
  .reply .input-area .top span {font-size: var(--fz01);}
  .reply .input-area .btm {flex-direction: column;}
  .reply-input .input-area &gt; div + div {margin-top: 10px;}
  .reply.admin {padding-left: 56px; background-position: -4px center;}


  /* game */
  .game-banner {flex-wrap: wrap; gap: 12px; }
  .game-banner:has(span) {margin-top: 40px;}
  .game-banner span {width: 100%;}

  /* faq */
  .faq-search {flex-direction: column; gap: 16px;}
  .faq-search .search-box {height: 45px; border-width: 1px;}

  /* inquiry */
  .inquiry .list .list03 li .info {width: 100%;}
  .inquiry .form .select-box {height: 40px;}
  .list .list03 li .con span {min-width: 60px; padding-right: 15px;}

  /* write */
  .form .form-body .lb {width: 110px; padding-top: 10px; font-size: var(--sub03);}
  .form .form-body .con {width: calc(100% - 110px);}
  .form .form-body input, .form .form-body textarea {padding: 10px 15px;}

  /* com */
  .cont.com h5 {font-size: var(--fz01);}

  /* thepay */
  .thepay .cont-area article {margin-bottom: 100px;}
  .thepay ul.sp4 li {width: 100%;}

  .brand .vod-slide .ctrl .controll {width: 50px; height: 50px;}
  .brand .vod-slide .swiper-btn button {width: 35px; height: 35px; background-size: 30%;}

  /* .history .moving-img {display: none;}
  .history .his-area {width: 100%;} */
  .history .his-area::before {height: calc(100% - 120px);}
  .history .his-area ul li {margin-bottom: 60px;}

  /* service */
  .service .cont-area .text-area {width: 100%;}
  .service .cont-area .vod-area {display: none;}

  .service article + article {margin-top: 160px;}
  .service article .btn-box {justify-content: center;}

  /* .service .mo-vod {display: block;} */
}

@media screen and (max-width:480px){

  /* */
  header {height: 61px;}
  footer {margin-top: 60px;}
  .container {padding-bottom: 60px; min-height: 500px;}

  /* .sub-nav {height: 38px;}
  .sub-nav .inner div {  padding-right: 26px;}
  .sub-nav .inner div a {line-height: 38px; font-size: var(--fz03);}
  .sub-nav .inner div::before {right: 12px;} */

  .snb.top ul {gap: 20px 16px;}
  .snb.top ul a {font-size: var(--fz01);}

  /* tab */
  .tab-area::before, .tab-area::after {height: 36px;}
  .tab ul {gap: 12px;}
  .tab ul a {padding: 8px 18px;}


  /* list */
  .list .list01 ul {gap: 8px;}
  .list .list01 li &gt; a {padding: 12px;}
  .list .list01 .col4 li {width: calc(50% - 4px);}
  .list .list01 .img-box {margin-bottom: 12px; border-radius: 10px;}
  .list .list01 .text-box {padding-top: 12px;}

  .list .list01 .col2 li {padding: 16px;}
  .list .list01 .col2 .text-box {margin-top: 16px;}

  .list .list01 .tag-box span {width: 50px; height: 22px;}

  .list .list02 ul {gap: 20px 8px;}
  .list .list02 li {width: calc(50% - 4px);}
  .list .list02 li .text .tit {font-size: var(--fz01);}
  .list .list02 li .text .info {font-size: var(--fz03);}

  /* view */
  .view2 .pagination a {font-size: var(--fz);}


  /* reply */
  .reply {gap: 10px;}
  .reply .icon {width: 36px; height: 36px;}
  .reply-input .input-area input, .reply-input .input-area textarea {padding: 8px 10px; font-size: var(--fz);}
  .reply .input-area .time {font-size: var(--fz03);}
  .reply .input-area .btm span {font-size: var(--fz);}


  /* paging */
  .paging {margin-top: 40px;}
  

  /* inquiry */
  .inquiry .list .list03 li .con {flex-wrap: wrap; gap: 5px;}
  .inquiry .form .select-box {width: 100%;}
  .list .list03 li.admin {background-size: 35px; padding-left: 45px;}

  .pw-pop .pw-area {padding: 30px;}
  .pw-pop .pw-area .tit {margin-bottom: 20px;}
  .pw-pop .pw-close {height: 45px;}


  /* write */
  .form .form-body li {flex-direction: column; gap: 10px;}
  .form .form-body .con {width: 100%;}

  /* com */
  /* contact */
  .contact {padding-top: 60px;}

  /*  */
  /* .cont-wrap {margin-top: 80px;} */

  /* thepay */
  .thepay .cont-area .sub-tit {margin-bottom: 60px;}
  .thepay ul.sp4 {margin-bottom: 80px;}
  .thepay ul.sp4 li h4 {margin-bottom: 12px;}
  .brand .vod-slide {border-radius: 8px; margin-bottom: 60px;}
  .history .his-area::before {height: calc(100% - 100px);}
  .history .his-area ul li {margin-bottom: 40px;}

  /* service */
  .service .sub-tit {margin-bottom: 40px;}
  .service article + article {margin-top: 100px;}
  .service article ul li + li {margin-top: 60px;}

  .service .mo-vod {margin-bottom: 10px;}
}



  
.view-cont ol, .view-cont ul { padding-left : 1em; }</pre></body></html>