@charset "UTF-8";
@import url(https://fonts.bunny.net/css?family=noto-sans:400,700|noto-sans-jp:400,700|noto-sans-kr:400,70);
@import url('https://fonts.cdnfonts.com/css/muli');

/* reset */
* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
p {display: inline-block;}
ol, ul {margin: 0; padding: 0; list-style: none;}
a {color: white; text-decoration: none;}
button {cursor: pointer; line-height: 1.5; text-indent: -9999px;}
button, select {-webkit-appearance: none; background: none; border: none; outline: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
address {font-style: normal;}

html {overflow-x: hidden; font-size: 16px; color: white; line-height: 1.6; letter-spacing: -0.25px; background: black; scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body.en {font-family: 'Muli', sans-serif;}
body.kr {font-family: 'Muli', 'Noto Sans KR', sans-serif;}
body.jp {font-family: 'Muli', 'Noto Sans JP', sans-serif;}


/**** board page head common****/
.board-container {color: #0d0f13;}
.notice .top {background: #0d0f13 url(../img/sub-bg.png) no-repeat 50% 50%; background-size: cover;}
.notice.guide .top {background: #0d0f13;}
.coupon .top {background: #0d0f13 url(../img/sub-bg.png) no-repeat 50% 50%; background-size: cover;}

.sub .top {position: relative; height: 216px;}
.top .top-inner {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 1300px; width: 100%; height: 88px; margin: 0 auto; padding: 0 25px; text-align: center;}
.top .top-inner a {display: flex; margin-right: 55px;}
/* .top .branding-site {position: absolute; left: 0; bottom: -50%; transform: translate(50%);} */
.top .branding-site img {height: 40px;}
.top .page-title {display: block; text-align: center; color: #fff; line-height: 1; font-weight: 900; font-size: 50px;}

/* language */
.lang-wrap {position: relative; border-radius: 10px; background: #d92e5b;}

.lang-wrap .select_lng_txt {position: relative; width: 105px; height: 40px; font-size: 15px; line-height: 40px; cursor: pointer; color: #050608; font-weight: bold;}
.lang-wrap .select_lng_txt:before {position: absolute; content: ''; width: 19px; height: 19px; right: 10px; top: 50%; transform: translateY(-50%); transition: all 0.3s; background: url(../img/header-ico-lang-down.png) no-repeat 50% 50%;}
.lang-wrap .select_lng_txt.active:before {transform: translateY(-50%) rotateZ(180deg);}
.lang-wrap .select_lng_img {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 17px;}
/* .lang-wrap .select_lng_txt p {position: relative; left: 50%; transform: translateX(-50%);} */

.lang-wrap .lang-list {display: none; position: absolute; left: 0; right: 0; top: 48px; padding: 15px 0; text-align: center; border-radius: 10px; background-color: #373739;}
.lang-wrap .lang-list li {cursor: pointer; padding: 5px 10px; color: #fff; line-height: 1.15;}
.lang-wrap .lang-list.active {display: block;}


/***** notice *****/
.sub-tab {border-bottom: 2px solid rgba(112, 112, 112, 0.2);}
.sub-tab ul {display: flex; align-items: center; justify-content: center; }
.sub-tab ul li {font-size: 18px; padding: 16px 5px; position: relative; cursor: pointer; margin:0 65px 0 65px; color:#000000;}
.sub-tab ul li:before {opacity: 0; position: absolute; content: ''; right: -1px; left: -1px; bottom: -3px; height: 4px; border-radius: 5px; background: #d92e5a; transition: all 0.3s;}
.sub-tab ul li.active {font-weight: bold;}
.sub-tab ul li.active:before {opacity: 1;}

.sub-tab ul li:hover:before {opacity: 1;}
.guide .sub-tab ul li {margin: 0;min-width: 100px;}

.notice .inner {width: 100%;max-width: 1200px;margin: 0 auto;padding: 40px 0 60px;}
.notice .inner .inner-tit {display: flex; align-items: center; justify-content: space-between;}
.notice .inner .inner-tit h4 {font-size: 30px; font-weight: bold;}

.notice .inner .inner-tit .search-wrap {position: relative; overflow:hidden;}
.notice .inner .inner-tit .serach-area,
.notice .inner .inner-tit .set-search{position:relative;float:left;width: 310px;height:40px;padding:8px 10px;border:1px solid #000000;border-radius: 8px;background: #ffffff;font-size:16px;/* display: flex; *//* align-items: center; *//* justify-content: center; */}
/* .notice .inner .inner-tit .serach-area{width:320px;} */
/* .notice .inner .inner-tit .set-search {width:135px;margin-right:20px; background:url('../img/new-ico-arrow.png') 90% center no-repeat; color:#000000;} */
.notice .inner .inner-tit .noti-search {width: 225px; font-size: 14px; float: left; height: 100%; line-height: 1.5; border: none;}
.jp .notice .inner .inner-tit .noti-search {width: 235px;}
.notice .inner .inner-tit input::placeholder {color: #aeaeb3;}
.notice .inner .inner-tit .btn-search {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;background:url('../img/new-ico-search.png')center no-repeat;}
.notice .inner .inner-tit .search_del {display:none;position: absolute;top: 9px;right: 40px;width: 18px;height:18px;text-align:center;line-height:17px;border-radius:50%;transform:rotate(45deg);font-size: 13px;font-weight:bold;color:#ffffff;background:#adadad;cursor: pointer;z-index: 99;}
.notice .inner .inner-tit .search-danger{display:none; font-size:14px; color:#c50b0b; font-weight:600;}
.notice .inner .inner-tit .search-danger.show{display:block;}

.notice .inner .board {margin-top: 35px; border-top: 2px solid #707070;}
.notice .inner .board .row {width:100%; border-bottom: 2px solid rgba(112, 112, 112, 0.2);}
.notice .inner .board .row .left {display: flex; width: 100%; align-items: center; position: relative;}
.notice .inner .board .row .left .cate {width: 10%; text-align: center; font-size: 15px; color: #aeaeb3; font-weight: 400; cursor: default;}
.notice.guide .inner .board .row .left .cate{width:15%;}
.notice .inner .board .row .left .title {display: block; min-height:54px;padding: 15px 5px;font-size: 16px;font-weight: 400;color: #000;overflow: hidden;width: 75%;text-overflow: ellipsis;white-space: nowrap; margin-right:5%;}
.notice .inner .board .row .date {position: absolute; right: 50px; font-size: 16px; color: #aeaeb3; cursor: default;}
.notice .inner .board .row .left .title:not(.no-list):hover {text-decoration: underline;}
.notice .inner .board .row .left .title.no-list{width: 100%; max-width: 100%; padding: 230px 0; text-align: center;}

.notice .inner .page {display: flex; align-items: center; justify-content: center;  margin-top: 52px;}/*gap: 25px;*/
.notice .inner .page button {width: 12px; height: 18px;}
.notice .inner .page .prev {background: url(../img/new-btn-left-active.png) no-repeat 50% 50%; margin-right: 25px;}
.notice .inner .page .next {background: url(../img/new-btn-right-active.png) no-repeat 50% 50%; margin-left: 25px;}

.notice .inner .page .number a {display: inline-block; width: 32px; height: 32px; line-height: 30px; text-align: center; vertical-align: middle; color: #aeaeb3; font-size: 16px;}
.notice .inner .page .number a.active {color: #fff; background: #000; border-radius: 100px;}

.noti-view {display:none;}
.noti-view .inner .board {border-top: none;}
.noti-view .inner .board .row {padding-bottom: 35px; border-bottom: 2px solid #000;}
.noti-view .inner .board .row .left .title {max-width:800px;font-size: 22px;font-weight: 500;text-overflow: clip;white-space: break-spaces; word-break: break-all;}

.noti-view .inner .board .row .left .title:hover {text-decoration: none;}

.noti-view .inner .board .contents {padding: 40px 115px; line-height: 1.81; border-bottom: 2px solid rgba(112, 112, 112, 0.2);}
.noti-view .inner .board .contents a {color: rgb(66, 133, 244);}
.noti-view .inner .board .contents p{word-break: keep-all;}
.jp .noti-view .inner .board .contents p {word-break: break-word;}
.noti-view .inner .board .contents img{width:100%;}
.noti-view .inner .board .contents p{display:block;}

.noti-view .btn-list {display: block; margin: 25px auto 0; width: 180px; height: 50px; line-height: 50px; color: #fff; text-align: center; border-radius: 25px; background: #000; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.27);}

/***** coupon *****/
.coupon .inner {max-width: 1010px; width: 100%; margin: 80px auto 100px; text-align: center;}

.coupon h4 {display: block; margin-bottom: 20px; font-size: 22px; color:#000000;}

.coupon .input-wrap {display: inline-block; text-align: left; margin-bottom: 50px;}
.coupon .input-wrap input {width: 560px; height: 60px; padding: 0 30px; color: #aeaeb3; line-height: 60px; text-align: center; border-radius: 6px; border: 1px solid #cbcbcb;}
.coupon .input-wrap input::placeholder {color: #aeaeb3;}
.coupon .input-wrap input:focus {border: 3px solid black;}
.coupon .input-wrap input:focus-visible {outline: none;}

.coupon .noti {margin: 45px 0 90px; line-height: 1.6; color:#000000;}

.coupon .btn-reg {display: block; width:195px; height:62px; background:#000000; border-radius: 100px; margin: 0 auto; color:#ffffff; font-size:19px; text-indent: 0;}
.coupon .btn-reg img {height: 70px;}

.coupon .pid-check {width: 585px; margin: 0 auto 20px; text-align: left;}
.coupon .pid-check img {width: 100%;}


.alert {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}
.alert.on {display: block;}
.alert .alert-box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 585px; width: 100%; padding: 70px 35px 40px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #fff; border-radius: 20px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.35);}
.alert .alert-box h4 {display: none; font-size: 22px;}
.alert .alert-box button {display: block; width:195px; height:62px; background:#000000; border-radius:8px; margin:35px auto 0; color:#ffffff; line-height:62px;font-size:19px;  text-indent: 0;}
.alert .alert-box button img {max-width: 178px; width: 100%;}


/* footer */
#footer {width: 100%; padding: 40px 12px 75px; background: url(../img/footer-bg.png) repeat-x center top;}

#footer .store-wrap {display: none;}

#footer .ft-inner {max-width: 1300px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center;}
#footer .ft-inner .sns-list {display: flex;}
#footer .ft-inner .sns-list a {display: flex; transition: all 0.2s;}

#footer .line {max-width: 415px; width: 100%; height: 1px; background: #232325;}

#footer .ft-menu {display: flex;}
#footer .ft-menu li {margin: 0 10px; font-size: 12px; font-weight: 700;}
#footer .ft-menu li a {display: flex; padding: 14px 0; transition: all 0.2s;}
#footer .ft-menu li img {display: none;}

#footer .copy {margin: 20px 0 30px; font-size: 11px; line-height: 1.5; color: #5b5b5b; text-align: center;}
#footer .br {display: none;}

#footer .logo-wrap {display: flex; align-items: center;}
#footer .logo-wrap a {display: flex; margin: 0 20px;}
#footer .logo-wrap a:first-child img {height: 20px;}
#footer .logo-wrap a:last-child img {height: 29px;}


/* mobile */
@media screen and (max-width: 767px) {

  .sub .top {height: 195px;}
  .top .top-inner {height: 81px; padding: 0 14px;}
  .top .top-inner a {margin-right: 20px;}

  /* .notice .top {background: url('../img/mb/m-new-banner-bg.png') no-repeat center #000000; background-size:cover;}
  .notice.guide .top {background: url('../img/mb/m-guide-banner-bg.png') no-repeat center #000000;  background-size:cover;}
  .coupon .top {background: url('../img/mb/m-coupon-banner-bg.png') no-repeat center #000000;  background-size:cover;} */

  .top .page-title {margin-top: 3px; font-size: 35px;}

  .sub-tab ul li {font-size: 15px; margin:0 14.5px 0 14.5px}
  .sub-tab ul li:before {right: -10px; left: -10px;}
  
  .notice .inner {width: 100%; padding: 35px 0;}
  .notice .inner .inner-tit {flex-direction: column;}
  .notice .inner .inner-tit .noti-search {width: 225px;}
  .notice .inner .inner-tit h4 {font-size: 18px;}
  .notice .bi-img{width:142px;}
  /* .notice .board_title_img {width:80px;height:23px; margin-top:15px; background: url(../images/sub/m-new-text.png) no-repeat center #000000; background-size: contain;} */
  /* .notice.guide .board_title_img { background: url(../images/sub/m-guide-text.png) no-repeat center #000000; background-size: contain;} */
  
  .notice .inner .inner-tit .search-wrap {margin-top: 25px;}
  .notice .inner .inner-tit .set-search{display:none;}
  .notice .inner .inner-tit .noti-search{font-size:13px;}
  
  .notice .inner .board .row {padding: 15px 25px; align-items: flex-start;}
  .notice .inner .board .row .left {flex-direction: column; align-items: flex-start; width:100%}
  .notice.guide .inner .board .row .left .cate,
  .notice .inner .board .row .left .cate {width: auto;}  
  .notice .inner .board .row .left .title {display: block; width: auto; max-width:90%; min-height:auto; padding: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .notice .inner .board .row .date {right: 0px; margin-right: 0; font-size: 15px;}
  
  .noti-view .inner .board {margin-top: 0;}
  .noti-view .inner .board .row .left .title {margin: 0; max-width: none; font-size: 16px; white-space: break-spaces;}
  .noti-view .inner .board .contents {padding: 22px 25px; font-size:14px;}
  .noti-view .btn-list {width: 138px; height: 40px; line-height: 40px; font-size: 16px;}
  
  /* .coupon .top {padding: 60px 0;} */
  .coupon .inner {margin: 30px auto;}
  .coupon h4 {font-size: 16px;}
  .coupon .input-wrap {margin-bottom: 25px;}
  .coupon .input-wrap h4 {margin-bottom: 5px;}
  .coupon .input-wrap input {min-width: 340px; width: 100%; height: 46px; padding: 0 12px; font-size: 15px; line-height: 46px; border: 1px solid #707070;}

  .coupon .btn-reg {width: 140px; height: 40px; font-size: 16px; line-height: 37px; align-content: center;}
  .coupon .btn-reg img {height: 40px;}

  .coupon .noti {margin: 15px 0 40px; font-size: 12px;}

  .coupon .pid-check {width: 100%; padding: 0 15px;}
  .coupon .lang-wrap.mobile {display: block; margin-top: 20px;}

  .coupon .footer .lang-wrap {display: none;}

  .alert .alert-box {width: 85%; padding: 35px;}
  .alert .alert-box h4 {font-size: 17px;}
  .alert .alert-box button {margin-top: 15px; width: 160px; height: 50px; line-height: 50px; font-size: 16px;}
  .alert .alert-box button img {max-width: 130px;}


  #footer {border-top: 2px solid #38383b; padding: 92px 22px 138px; background: url(../img/m-footer-bg.png) repeat-x center 95%;}

  #footer .line {max-width: none; height: 2px; background: #232325;}

  #footer .sns-list {margin: 20px 0 26px;}
  #footer .sns-list li {margin: 0 8px;}
  #footer .sns-list li img {width: 74px;}

  #footer .ft-menu li {margin: 21px 16px;}
  #footer .ft-menu li a {padding: 2px 0; color: #a1a1a1; font-size: 16px;}

  #footer .copy {padding: 0 8px; font-size: 13px;}

}