@import url('../font/pretendard/pretendard.css');
@import url('../font/play/play.css');


/*-----------------------------------------
            reset
-------------------------------------------*/
* { margin:0; padding:0;  font-family: Pretendard; }
ul, li { list-style:none; }
img { border:0; vertical-align:top; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
textarea { resize:none; }
button { cursor:pointer; }
html { min-height:100%; }
body { line-height:1.4; min-width:1192px; min-height:100%; }
.hide_obj { display:block; width:1px; height:1px; overflow:hidden; text-indent:10px; }
.move {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.no_scroll { overflow:hidden; }
.no_scroll body { overflow:hidden; }
.selectbox {  -moz-appearance: none; -webkit-appearance: none; appearance: none; }

input,
textarea, 
button { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}

:root {
    --color-background: #222529;
    --color-background-input: #33363a;
    --color-background-input-focus: #17181c;
    --color-background-input-disabled: #393b3f;
    --color-white: #fff;
    --color-black: #000;
    --color-primary: #fe3531;
    --color-success: #00be78;
    --color-secondary: #393b3f;
    --color-font-gray1: #76787a;
    --color-font-gray2: #e8e8e8;
    --color-font-gray3: #c6c7c8;
    --color-font-gray4: #868889;
    --color-font-red1: #f83314;
    --color-font-yellow1: #fb0;
}

/*-----------------------------------------
            common
-------------------------------------------*/
html {  background:var(--color-background); }
body .wrap { min-height: 100vh; background:var(--color-background);}
body .wrap:after { clear:both; display:block; content:'';}

.header { position:fixed; left:0; top:0; width:100%; z-index:999; }
.header.fixed { background:var(--color-background); }
.header.fixed:before { position:fixed; left:0; top:0; width:100%; height:100px; display: block; content:''; background:var(--color-background);}
.header .inner { position:relative; width:1192px; height:100px; margin:0 auto;}
.header .logo { position:absolute; left:0; top:37px; width:132px; height:26px; display:block; overflow:hidden; text-indent: -99px; font-size:0; background:url('../img/common/RED_BI@3x.png') no-repeat; background-size:132px auto; }
.header .btn-menu-close,
.header .btn-menu { display:none; }
.header .user,
.header .category { display:inline; }
.header .gnb-inner {float:right; display:flex;  margin-top:33px; }
.header .gnb ul { display:flex; }
.header .gnb li {  position:relative; line-height:32px; margin-right:40px; }
.header .gnb a { font-size: 16px; font-weight: bold; color: var(--color-white); }
.header .gnb .user a { display:inline-block; height:30px; line-height:30px; padding:0 16px; margin-left:8px; font-size: 13px; font-weight: bold; color: #c6c7c8; border-radius: 6px;  border: solid 1px var(--color-font-gray1); }
.header .gnb li.active:after { position:absolute; left:50%; top:-8px; margin-left:-3.5px; content:''; display:block; width:7px; height:7px; border-radius: 7px; background-color: var(--color-primary); }
.header .gnb li.active a { color: var(--color-primary) }

.contents {  width:100%;  min-height:calc(100vh - 172px); }
.contents:after {content:''; clear:both; display:block; }

.footer { clear:both; width:100%; height:172px;  border-top:1px solid var(--color-secondary); }
.footer .inner { overflow:hidden;  width:1192px; margin:0 auto; padding:32px 0 59px 0; text-align:center; }
.footer .logo h2 a { display:inline-block; width:82px; height:16px; font-size:0px; text-indent: -100px; overflow:hidden; background: url('../img/common/RED_BI@2x.png') no-repeat; background-size: 82px auto;  }

.footer address { display:inline-block;  font-style: normal; line-height:15px;}
.footer address span:after { content:'. ';}
.footer address:after { display: inline-block; content:''; width: 1px; height: 15px; margin: 0 12px; opacity: 0.12;  vertical-align: middle; background-color: var(--color-white);}
.footer .copyright { padding-top:20px; font-size: 13px;  font-weight: 500; font-stretch: normal;  line-height:15px; letter-spacing: -0.13px; text-align: center;  color: var(--color-font-gray4); }
.footer .customer-center { display: inline-block; }
.footer .copyright h2 { margin:32px 0 25px 0; font-size: 24px; line-height:1; font-weight: bold; color: var(--color-font-gray2); }
.footer .copyright p { margin-top: 14px; font-size: 12px; color: var(--color-font-gray3); line-height:1; font-weight: normal;  }

.product .thumb { width:376px; height:212px; display: block;  overflow:hidden; object-fit: contain; margin-bottom:16px; border-radius: 6px; overflow:hidden; }
.product .thumb img { width:376px; height:212px; transition: all 0.2s ease-in-out; }
.product .thumb:hover img {  transform: scale(1.1);  }
.product dt { margin-bottom:4px;  font-size: 13px; font-weight: 500; line-height: 1.54; letter-spacing: -0.13px; color: var(--color-font-gray3); }
.product dd { font-size: 18px; font-weight: bold; line-height: 1.44; letter-spacing: -0.18px; color: var(--color-white); }

/* selectbox */
.selectbox {  height: 52px; line-height:52px; padding:0 36px 0 16px;  font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: var(--color-white); outline:none; box-sizing: border-box;  border-radius: 6px; border-color:var(--color-background-input);  background: var(--color-background-input) url('../img/common/ico_arrow_selectbox.png') no-repeat; background-size: 14px 12px; background-position: right 12px center }
.select-layer { position:relative; width:100%; height: 52px;}
.select-layer .active { width:100%; height: 52px; line-height:52px; padding:0 20px 0 16px; text-align:left;  font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: var(--color-white); outline:none; border:0; box-sizing: border-box;  border-radius: 6px; border:1px solid var(--color-background-input);  background: var(--color-background-input) url('../img/common/ico_arrow_selectbox.png') no-repeat; background-size: 14px 12px; background-position: right 12px center }
.select-layer .active:hover { border-color: var(--color-success); }
.select-layer .active:focus { border-color: var(--color-success);  }
.select-layer .list { position:absolute; left:0; top:0; width:100%; margin-top:58px; display:none;  }
.select-layer .list ul { width:100%; padding: 24px 18px 12px 16px; border-radius: 6px; box-sizing: border-box; box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.16); border: solid 1px #474a50; background-color:var(--color-background-input); }
.select-layer .list li { position:relative; overflow:hidden; margin-bottom:12px; }
.select-layer .list input { position:absolute; left:-50px; top:0;  visibility: hidden;}
.select-layer .list label { cursor: pointer; font-size: 16px; line-height: 1.25; color:var(--color-font-gray3) }
.select-layer .list label:hover { color:var(--color-success) }
.select-layer.open .active { border-color:var(--color-success); background-color: var(--color-background-input-focus); background-image: url('../img/common/ico_arrow_selectbox_clsoe.png');}
.select-layer.open .list { display:block; }

/* input */
.input-txt {  height: 50px; line-height:50px; text-indent: 16px; color:var(--color-white);  outline: none;  font-weight:bold;  font-size:16px; border-radius: 6px; background-color: var(--color-background-input); border:1px solid var(--color-background-input); }
.input-txt + .msg { display: none; padding-top:8px; font-size: 12px; line-height:1.2; letter-spacing: -0.12px; color:var(--color-success); }
.input-txt::placeholder { color:var(--color-font-gray1);  font-weight:normal; }
.input-txt:hover { border-color: var(--color-success);}
.input-txt:focus { background-color: var(--color-background-input-focus);}
.input-txt:disabled { color:var( --color-font-gray4); border-color:var(--color-background-input-disabled); background-color: var(--color-background); }
.input-txt.error { border-color: var(--color-primary);}
.input-txt.success + .msg { display: block; color:var(--color-success);}
.input-txt.error + .msg { display: block; color:var(--color-primary);}

.input-txtarea { padding:16px; box-sizing: border-box; color:var(--color-white); resize: none; outline: none;  font-weight:bold;  font-size:16px; border-radius: 6px; background-color: var(--color-background-input); border:1px solid var(--color-background-input); }
.input-txtarea::placeholder { color:var(--color-font-gray1);  font-weight:normal; }
.input-txtarea:hover { border-color: var(--color-success);}
.input-txtarea:focus { background-color: var(--color-background-input-focus);}


/* button */
.btn-success,
.btn-primary, 
.btn-secondary { height: 60px; line-height:60px; font-size: 18px; font-weight: bold; letter-spacing: -0.18px; color: var(--color-white); text-align:center; border:0; border-radius: 6px;  }
.btn-outline-default { height: 60px; line-height:60px; font-size: 18px; font-weight: bold; letter-spacing: -0.18px; color: var(--color-font-gray3); text-align:center; border:0; border-radius: 6px; border:1px solid var(--color-font-gray1); background:none;  }
.btn-outline-bold { height: 60px; line-height:56px; font-size: 18px; font-weight: bold; letter-spacing: -0.18px; color: var(--color-font-gray3); text-align:center; border:0; border-radius: 6px; border:2px solid var(--color-font-gray1); background:none;  }

.btn-primary:disabled, 
.btn-secondary:disabled { color: rgba(255,255,255, 0.3); background:var(--color-secondary) }

.btn-primary { background-color:var(--color-primary); }
.btn-success { background-color:var(--color-success);  }
/*.btn-secondary {  }
.btn-danger { }
.btn-warning { }
.btn-info { }
.btn-light { }
.btn-dark { } */

.btn-size-md { height:52px; line-height:52px; font-size:13px; font-weight:500; }
.btn-type-round { border-radius: 30px;  }

/* checkbox */
.input-checkbox { vertical-align: middle; }
.input-checkbox input[type='checkbox'] + label { display: inline-block; width: 16px;  height: 16px; vertical-align: top; border-radius: 2px; border: solid 1px #57595c;  cursor: pointer; }
.input-checkbox input[type='checkbox']:checked + label { border-color: var(--color-primary);  background:var(--color-primary) url('../img/common/ico_checkbox_16x16.png') center no-repeat; background-size: 16px 16px; }
.input-checkbox input[type='checkbox'] { display: none; }
.input-checkbox-big input[type='checkbox'] + label { width: 20px;  height: 20px; }
.input-checkbox-big input[type='checkbox']:checked + label {  background-image:url('../img/common/ico_checkbox_20x20.png'); background-size: 20px 20px;  }

/* coupon */
.coupon .inner { position:relative; width:376px; height:150px; display: block; padding:0 108px 0 28px; box-sizing: border-box; box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.16); background-repeat: no-repeat; background-size:100% auto;  }
.coupon .img-game { position:absolute; left:28px; top:-24px; overflow: hidden; width:48px; height:48px; border-radius: 24px; ;}
.coupon .img-game img { width:100%; height:100%; }
.coupon .brand { position:absolute; right:-15px; font-family: 'Play'; bottom:53px; opacity: 0.4; font-size: 10px; line-height:1; color:var(--color-white); transform: rotate( -90deg ); }
.coupon .info { display:flex; align-content: center; width:100%; height:100%; flex-wrap: wrap; }
.coupon .info span { display:block; width:240px; align-self: center; color: var(--color-white);  }
.coupon .info .price { margin-bottom:8px; line-height: 1; font-size: 16px; letter-spacing: -0.16px; }
.coupon .info .price strong { font-size: 28px; letter-spacing: -0.28px;  }
.coupon .info .game { line-height:22px; overflow: hidden; max-height:44px; font-size: 16px; font-weight: 500; letter-spacing: -0.16px;  color: var(--color-white);  }
.coupon .status { padding:16px 0 48px 0;   }
.coupon .status dl { position:relative; padding:10px 0 0 0; }
.coupon .status dt { display: inline-block; font-size: 16px; letter-spacing: -0.16px; color: var(--color-font-gray4); }
.coupon .status dd { display: inline-block; font-size: 16px; letter-spacing: -0.16px; font-weight:500; color: var(--color-font-gray3); padding-right:110px; margin-left:2px; }
.coupon .status .btn { position:absolute; right:0; top:0; display: block;  width: 104px; height: 38px; text-align:center; line-height:38px;  font-size: 16px; font-weight: bold; color:var(--color-font-yellow1); border-radius: 19px; border: solid 1px var(--color-font-yellow1);  }
.coupon .status .btn:hover { width:102px; height:36px; line-height:36px; border: solid 2px #ffe700; color:#ffe700; }
.coupon a:hover .info span { text-decoration: underline;}
.coupon.coupon-completed .status dd { color: var(--color-font-gray4); padding-right:0; }
.coupon.coupon-completed .info .price { opacity: 0.5; }
.coupon.coupon-completed .info .game { opacity: 0.45; }
.coupon.coupon-completed .inner:before { position:absolute; left:201px; top:-24px; content:'사용완료'; display:block; width:88px; height:72px; overflow:hidden; font-size:0; text-indent: -100px;  background: url('../img/coupon/ico_used.png') no-repeat; background-size: 88px 72px; }

.coupon-type1 .inner {  background-image:url('../img/coupon/coupon_bg1@2x.png'); }
.coupon-type2 .inner {  background-image:url('../img/coupon/coupon_bg2@2x.png'); }
.coupon-type3 .inner {  background-image:url('../img/coupon/coupon_bg3@2x.png'); }
.coupon-type4 .inner {  background-image:url('../img/coupon/coupon_bg4@2x.png'); }
.coupon-type5 .inner {  background-image:url('../img/coupon/coupon_bg5@2x.png'); }
.coupon-type6 .inner {  background-image:url('../img/coupon/coupon_bg6@2x.png'); }
.coupon-type7 .inner {  background-image:url('../img/coupon/coupon_bg7@2x.png'); }
.coupon-type8 .inner {  background-image:url('../img/coupon/coupon_bg8@2x.png'); }
.coupon-type9 .inner {  background-image:url('../img/coupon/coupon_bg9@2x.png'); }
.coupon-type10 .inner {  background-image:url('../img/coupon/coupon_bg10@2x.png'); }



/*-----------------------------------------
            mobile
-------------------------------------------*/


@media all and (max-width:1023px){
    body  { min-width:360px; }
    body .wrap { min-width:360px; }

    .header .inner { width:100%; height:60px;  min-width:360px;  }
    .header .logo {  left:20px; top:20px; background-image: url('../img/common/RED_BI_m@2x.png'); background-size: 103px 20px; }
    
    .header .btn-menu { position:absolute; right:16px; top:14px; width:32px; height:32px; display: block; border:0; background:url('../img/common/btn_menu_open.png') no-repeat; background-size: 32px auto; }
    .header .btn-menu span { display: none;}
    .header.layer-open .btn-menu-close { position:fixed; right:16px; top:14px; width:32px; height:32px; display: block; border:0; background:url('../img/common/btn_menu_close.png') center no-repeat; background-size: 32px auto; }
    .header.layer-open .btn-menu-close span { display: none;}
    .header .gnb { position:fixed; left:0; top:0; width:100%; height:100%; display:none; overflow-y:auto; overflow-x: hidden; background:#1c1e22; z-index:1; }
    .header.layer-open .gnb-inner{
        min-height:100%;
        display: grid;
        float:none;
        margin-top:0;
    }
    .header.layer-open .gnb { display: block;}
    .header .gnb .category { grid-row-start:0; grid-row-end:1; padding-top:64px;  }
    .header .gnb .user { grid-row-start:1; grid-row-end:2; align-self: end; padding:32px 20px; }
    .header .gnb .user .login ,
    .header .gnb .user .join { margin:0; float:left; width:calc(50% - 5px);  height: 48px; line-height:48px; text-align:center; font-size: 16px; font-weight: bold; line-height: 2.63; letter-spacing: -0.16px;  color: var(--color-font-gray3); border-radius: 6px; border: solid 1px var(--color-font-gray1); box-sizing: border-box;}
    .header .gnb .user .join { float:right; }
    .header .gnb .user .logout { margin:0; width:100%;  height: 48px; line-height:48px; text-align:center; font-size: 16px; font-weight: bold; line-height: 2.63; letter-spacing: -0.16px;  color: var(--color-font-gray3); border-radius: 6px; border: solid 1px var(--color-font-gray1); box-sizing: border-box;}
    .header .gnb ul { float:none; display:block; padding:0 20px; margin:0; }
    .header .gnb li {  position:relative; line-height:1; padding:0; margin:28px 0 0 0;  }
    .header .gnb li.mypage {padding:32px 0; margin-top:40px; border-top:1px solid var(--color-secondary); border-bottom:1px solid var(--color-secondary);  }
    .header .gnb a {  font-size: 22px; font-weight: bold;  line-height: 1.91; letter-spacing: -0.22px; color: var(--color-white);}
    .header .gnb li.active:after { display: none;} 
    .header.fixed:before { display: none;}

    .contents { overflow:initial; min-height:calc(100vh - 120px)}

    .footer { height:auto;  border-top:1px solid var(--color-secondary); }
    .footer .inner { overflow:hidden;  width:100%; padding:34px 14px 50px 20px; box-sizing: border-box; text-align:left; }
    .footer .logo h2 { height:16px; padding:0; line-height:1;}
    .footer .logo h2 a { width:80px; height:16px; font-size:0px; vertical-align: top; text-indent: -100px; overflow:hidden; background: url('../img/common/RED_BI_footer_m@2x.png') no-repeat; background-size: 80px auto;  }
    
    .footer address { display:block; line-height: 1.67; }
    .footer address span { display: block;}
    .footer address span:after { display: none;}
    .footer address:after { display: none;}
    .footer .copyright { padding-top:16px; font-size: 12px; font-stretch: normal; text-align:left;line-height: 1.67;; }
    .footer .customer-center { display: block; color:var(--color-font-gray3);; }
    .footer .copyright h2 { margin:32px 0 25px 0; font-size: 24px; line-height:1; font-weight: bold; color: var(--color-font-gray2); }
    .footer .copyright p { margin-top: 16px; font-size: 12px; color: var(--color-font-gray4);  }

    .footer-type2 { padding-bottom:60px; }

    .product { position:relative; padding-left:116px;  min-height:100px; }
    .product .thumb { position:absolute; left:0; top:0; width:100px; height:100px; margin-bottom:0; border-radius: 16px;  }
    .product .thumb img { width:100px; height:100px }
    .product dt { padding-top:4px; margin-bottom:6px;  }

    .product-thumb-big { padding-left:0; }
    .product-thumb-big .thumb { position:relative; left:initial; top:initial; width:100%; height:auto; margin-bottom:12px; border-radius: 6px;  }
    .product-thumb-big .thumb img { width:100%; height:auto; }
    .product-thumb-big dt { padding-top:0; margin-bottom:4px; line-height:1; }


    .select-layer { height: 48px;}
    .select-layer .active { height: 48px; line-height:48px;}
    .select-layer .list {  margin-top:54px;  }
    .select-layer .list ul { padding: 24px 18px 12px 16px; box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.16); }

    .input-txt {  height: 46px; line-height:46px; }
    .btn-primary,
    .btn-success { height: 52px; line-height:52px; font-size: 16px; letter-spacing: -0.16px;  }

    .btn-outline-bold { height: 52px; line-height:48px; font-size: 16px; letter-spacing: -0.16px; }

    .btn-size-md { height:48px; line-height:48px; }


    .coupon .inner { position:relative; width:100%; height:37.55vw; padding:0 108px 0 28px; box-sizing: border-box; }
    .coupon .img-game { left:24px; top:-20px; width:40px; height:40px; }

    .coupon .brand { right:-4.5vw; bottom:14.3vw; font-size: 9px; }
    .coupon .info span { display:block; width:100%;  }
    .coupon .info .price { margin-bottom:8px; line-height: 1; font-size: 16px; letter-spacing: -0.16px; }
    .coupon .info .price strong { font-size: 28px; letter-spacing: -0.28px;  }
    .coupon .info .game { line-height:20px; max-height:40px; font-size: 14px; letter-spacing: -0.14px; }

    .coupon .status { padding:6px 0 60px 0;  }
    .coupon .status dl { padding:8px 0 0px 0; line-height:1;}
    .coupon .status dt { font-size: 14px; letter-spacing: -0.14px;  }
    .coupon .status dd { font-size: 14px; letter-spacing: -0.14px;  padding-right:100px; margin-left:0; }
    .coupon .status .btn {  width: 90px; height: 32px; line-height:32px;  font-size: 14px;  letter-spacing: -0.14px;  }
    .coupon .status .btn:hover { width:88px; height:30px; line-height:30px; }
    .coupon .status .btn-use { line-height:32px; padding:0; }
    .coupon .status dl.coupon-use { line-height:32px; padding:0; margin-top:6px;  }
    .coupon.coupon-completed .inner:before { left:50.06vw; top:-20px; width:80px; height:64px; background: url('../img/coupon/ico_used_m.png') no-repeat; background-size: 80px 64px; }


    .coupon-type1 .inner {  background-image:url('../img/coupon/coupon_bg1_m@2x.png'); }
    .coupon-type2 .inner {  background-image:url('../img/coupon/coupon_bg2_m@2x.png'); }
    .coupon-type3 .inner {  background-image:url('../img/coupon/coupon_bg3_m@2x.png'); }
    .coupon-type4 .inner {  background-image:url('../img/coupon/coupon_bg4_m@2x.png'); }
    .coupon-type5 .inner {  background-image:url('../img/coupon/coupon_bg5_m@2x.png'); }
    .coupon-type6 .inner {  background-image:url('../img/coupon/coupon_bg6_m@2x.png'); }
    .coupon-type7 .inner {  background-image:url('../img/coupon/coupon_bg7_m@2x.png'); }
    .coupon-type8 .inner {  background-image:url('../img/coupon/coupon_bg8_m@2x.png'); }
    .coupon-type9 .inner {  background-image:url('../img/coupon/coupon_bg9_m@2x.png'); }
    .coupon-type10 .inner {  background-image:url('../img/coupon/coupon_bg10_m@2x.png'); }


}

@media not all and (min-width:376px) {
    .coupon .inner {height:37vw; }
    .coupon .brand {bottom:14.8vw; right:-5.6vw; }
    .coupon.coupon-completed .inner:before { left:47.06vw;}
}