html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;line-height:175%;letter-spacing:normal} /* delete vertical-align,font:inherit; */
body,html{width:100%;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0;}
table caption {overflow:hidden; font-size:0; line-height:0; }
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/

select { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select::-ms-expand {display:none}
input[type=text]::-ms-clear {display: none;}
input::-webkit-input-placeholder {color:#ababab; }
input:-ms-input-placeholder {color:#ababab; }
input::placeholder {color:#ababab; }

span, b, strong{line-height:inherit; font-family:inherit;}

body { min-width: 1300px; background-color: #000;}
.wrap { display:none; opacity: 1;}

/* header */

#header, #header a{font-family: "Poppins",Helvetica,Arial,sans-serif;}
#header {width:calc(100% - 30px); min-width:1270px; height:72px; display:flex; position:fixed; z-index:9999; top:15px; left:50%; transform: translateX(-50%); backdrop-filter: blur(20px); background:rgba(36, 37, 38, 0.8); border-radius: 8px;}
#header .left-section {width:144px; height:100%; background-color: rgba(0,0,0,0.3);}
#header .left-section h1 {width:100%; height:100%; display:flex; justify-content:center; align-items: center;}
#header .left-section h1 a {display:block;}
#header .left-section h1 a:hover {filter: brightness(1.3);}
#header .left-section h1 img {width:80px;}

#header .center-section {display: flex; height:100%;  align-items: center;}
#header .center-section h2 {padding-left:16px; justify-content: center; display: flex; width:58px;}
#header .center-section h2 a:hover {filter: brightness(1.6);}
#header .center-section nav > ul {display: flex; position:relative; top:13px}
#header .center-section nav > ul > li > a {display:block; padding:8px 16px; color:#fff; font-size:18px; font-family: "Poppins",Helvetica,Arial,sans-serif; font-weight:600; border-radius: 8px;}
#header .center-section nav > ul > li > a:hover {background:rgba(255,255,255,0.05)}
#header .center-section nav > ul > li.menu-more > a {width:48px; height:48px; box-sizing:border-box; padding:0; text-align:center; line-height:48px; margin-left:15px; background:rgba(255,255,255,0.05);}
#header .center-section nav > ul > li.menu-more > a:hover {background: rgba(255,255,255,0.1);}
#header .center-section nav .inner-nav {position:relative; padding-top:25px; opacity: 0; visibility: hidden; transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
#header .center-section nav > ul > li.menu-more:hover .inner-nav {opacity: 1; visibility: visible;}
#header .center-section nav .inner-nav-list {background:#18191B; position:absolute; left:50%; top:15px; transform: translateX(-50%); margin-left:5px; width:300px; border-radius: 8px; padding:12px;}
#header .center-section nav .inner-nav-list::before { content:''; display:block; background:#18191B; border-color: transparent; border-radius: 4px; border-style: solid; border-width: 0px;
    height: 16px;
    left: 50%;
    position: absolute;
    top: -2px;
    transform: rotate(45deg) translate(-50%);
    transform-origin: center center;
    transition: opacity 0.1s ease;
    width: 16px;
    z-index: 1;}

#header .center-section nav .inner-nav-list li {width:100%; border-radius: 4px;}
#header .center-section nav .inner-nav-list li a {display: block; padding:8px 12px; color:#fff; font-size:18px; border-radius:4px; }
#header .center-section nav .inner-nav-list li a:hover {background:rgba(255,255,255,0.05);}
#header .center-section nav .inner-nav-list li a i {
    font-size:0;
    width:12px;
    height:12px;
    display: inline-block;
    background-image: url('../asset/img/link-over.svg');
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center center;
    position: relative;
    top:-12px;

}

#header .customer > a {
    font-size:16px;
    display: block;
    padding: 10px 16px 10px 46px;
    color: #fff;
    font-family: "Poppins",Helvetica,Arial,sans-serif;
    font-weight: 600;
    border-radius: 8px;
    box-sizing: border-box;
    width:112px;
    background-image: url(../asset/img/header-mem.svg), url(../asset/img/header-arrow.svg);
    background-position: 13px center, right 15px center;
    background-size: 24px, 14px;
    background-repeat: no-repeat;
    transition: all 0.1s ease;
}

#header .customer > a:hover {
    background-color: rgba(255,255,255,0.05);
}

#header .customer .inner-nav {position:relative; padding-top:25px; opacity: 0; visibility: hidden; transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
#header .customer:hover .inner-nav {opacity: 1; visibility: visible;}
#header .customer .inner-nav-wrap {background:#18191b; position:absolute; overflow:hidden; left:50%; top:15px; transform: translateX(-50%); margin-left:5px; width:300px; border-radius: 8px;}
#header .customer .inner-nav::before { content:''; display:block; background:#18191B; border-color: transparent; border-radius: 4px; border-style: solid; border-width: 0px;
    height: 16px;
    left: 50%;
    position: absolute;
    top: 13px;
    transform: rotate(45deg) translate(-50%);
    transform-origin: center center;
    transition: opacity 0.1s ease;
    width: 16px;
    z-index: 1;}

#header .customer .inner-nav-wrap .nav-top{
    width:100%;
    padding:12px;
    box-sizing: border-box;
}

#header .customer .inner-nav-wrap .nav-top > a{
    display: block;
    width: calc(100% - 30px);
    box-sizing: border-box;
    font-size:16px;
    text-align: center;
    border-radius: 8px;
    transition: all 0.1s ease;
    color: #fff;
    background-color: #0074e0;
    height:48px;
    line-height: 48px;
    background-image: url(../asset/img/header_battel.svg);
    background-repeat: no-repeat;
    background-position: 37.5% center;
    background-size: 24px;
    text-indent: 20px;
    margin:15px auto;


}

#header .customer .inner-nav-wrap .nav-top > a:hover {
    background-color: #009dff;
}

#header .customer .inner-nav-wrap .nav-top ul li:nth-child(1){
    background-image: url(../asset/img/header-icon.svg);
}
#header .customer .inner-nav-wrap .nav-top ul li:nth-child(2){
    background-image: url(../asset/img/header-icon2.svg);
}

#header .customer .inner-nav-wrap .nav-bottom{
    width:100%;
    padding:12px;
    background-color:#111113 ;
    box-sizing: border-box;
}

#header .customer .inner-nav-wrap .nav-bottom li:nth-child(1){
    background-image: url(../asset/img/header-icon3.svg);
}
#header .customer .inner-nav-wrap .nav-bottom li:nth-child(2){
    background-image: url(../asset/img/header-icon4.svg);
}
#header .customer .inner-nav-wrap .nav-bottom li:nth-child(3){
    background-image: url(../asset/img/header-icon5.svg);
}

#header .customer .inner-nav-wrap > div li {
    width:100%;
    box-sizing:border-box;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: 15px center;
}

#header .customer .inner-nav-wrap > div li a {
    display: block; padding:8px 12px 8px 50px; color:#fff; font-size:18px; border-radius:4px; 
}

#header .customer .inner-nav-wrap > div li a:hover {background:rgba(255,255,255,0.05);}

#header .right-section {display: flex; margin-top: 12px; gap: 15px; position: absolute; right:10px}
.right-section button.header-buy{
    width:112px; height:48px; line-height:48px;
    font-size:16px; text-align: center; border: 0;
    background-color: #850000;
    color:#fff;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.1s ease;
    cursor: pointer;
}
.right-section button.header-buy:hover {
    background-color: #B60000;
}

#modal button.red_button {
    padding:0 32px;
    height: 85px;
    font-size:22.5px;
    filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.66));
    color: #fff;
    font-family: "Kenris";
}

#modal > div {
    position: fixed;
    z-index: 99999;
    width:100%;
    height:100vh;
    top:0; 
    left:0;
    display: none;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.8);
}
#modal >div .content{
    width:800px;
    height: auto;
    text-align: center;
    background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 24.58%, rgba(0, 0, 0, 0) 49.58%, rgba(0, 0, 0, 0) 76.15%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)), url(../asset/img/leather-texture_800.webp);
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.24), inset 0px 2px 0px rgba(255, 255, 255, 0.06), inset 0px -1px 0px rgba(0, 0, 0, 0.24), inset 0px -2px 0px rgba(255, 255, 255, 0.06);
    background-repeat: repeat;
    padding-bottom:88px;
}

#modal > div .modal-text{
    margin-top:10px;
}
#modal > div h3.title {
    font-family: "Kenris";
    font-size:32px;
}

#modal > div p.white-text {
    color:#fff;
    font-family: "Kenris";
    font-size: 22px;

}

#modal > div .top-bar {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 8px;
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
}

#modal > div .top-bar button {
    width: 40px;
    height:40px;
    background-color: hsla(0,0%,100%,.05);
    border:0;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#modal > div .top-bar button:hover{
    background-color: hsla(0,0%,100%,.1);
}
#modal > div .top-bar button svg {
    width:24px;
    height:24px;
    color:hsla(0,0%,100%,.7);
}

#modal > div .inner-content {
    padding:20px;
}
#modal > div form  {
    column-gap: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    justify-items: center;
    margin: 0px auto;
    max-width: 480px;
}
#modal > div form select{
    font-family: "Montserrat", sans-serif;
    background: #484645;
    box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.66);
    --color-content-600: rgba(255, 255, 255, 0.5);
    --color-content-900: rgba(255, 255, 255, 0.5);
    margin-top: 48px;
    text-transform: capitalize;
    width: 100%;
    height: 56px;
    padding: 0 calc(4px + 24px + 8px) 0 16px;
    border: 2px solid transparent;
    color:rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    font-size:18px;

}

#modal > div form select option{
    background-color: #3a465f;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Yoon Myungjo", sans-serif;
    font-weight:500;
    font-size:19px;
}

#modal > div form .submit-box {
    grid-column: span 3 / auto;
    justify-self: center;
    margin-top: 48px;
    max-width: 320px;
    width: 100%;

}

#footer {
    padding:30px 0 140px 0;
}

#footer .langcont {text-align: center;}
#footer .langcont #selector-toggler {
    color: hsla(0,0%,100%,.7);
    cursor: pointer;
    display: inline-block;
    font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei";
    font-weight: 400;
    height: 24px;
    line-height: 24px;
    margin: 0px auto;
    transition: color 200ms,background-color 200ms;
    vertical-align: middle;
    background-image:url(../asset/img/lang-bg.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: right 12px;
    padding-right: 15px;
}

#footer .langcont #selector-toggler svg {width:24px; height:24px; color:#009dff; fill: currentColor; position: relative; top:7px;}

#footer .langcont #selector-toggler:hover {
    filter: brightness(1.4);
    color:#fff;
    transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);
}

#footer .langcont #dropdown {display: none;}

#footer .blizzard-logo {text-align: center; margin:30px 0;}
#footer .blizzard-logo a:hover {filter: brightness(1.3);}

#footer .footer-link {text-align: center;}
#footer .footer-link a{ 
    font-size:16px;
    font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei";
    font-style: normal;
    line-height: 1.4;
    transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease;
    color: hsla(0,0%,100%,.7);
}

#footer .footer-link a:after {
    width:1px; height:9px;
    background-color: rgba(255, 255, 255, 0.3);
    content: "";
    display: inline-block;
    margin: 0 5px 0 10px;
    position: relative;
}

#footer .footer-link a:last-child::after{
    display: none;
}

#footer .footer-link a:hover {
    color:#fff
}

#footer .battlenet {
    font-size:16px;
    font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei";
    font-style: normal;
    line-height: 1.4;
    color: hsla(0,0%,100%,.7);
    text-align: center;
    margin:40px 0;
}

#footer .battlenet a {
    color:#009dff;
    text-decoration:underline;
    transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease;
    padding-left:18px;
    background-image: url(../asset/img/bnet-logo-01.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: left center;
    display:inline-block;
}

#footer .battlenet a:hover {
    color:#33b1ff;
}


#footer .inc {
    text-align: center;
}

#footer .inc p {
    font-size:12px;
    color: hsla(0,0%,100%,.5);
    line-height: 1.2;
}

#footer .inc span a{
    font-size: 12px;
    color: hsla(0,0%,100%,.7);
    transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease;
}

#footer .inc span a:hover {
    color:#fff;
}

#footer .inc span a::after {
    width:1px; height:10px;
    background-color: rgba(255, 255, 255, 0.3);
    content: "";
    display: inline-block;
    margin: 0 5px 0 10px;
    position: relative;
}

#footer .inc span a:last-child:after {
    display: none;
}

#footer .inc span a:first-child {
    font-weight: 600;
}

#footer .company {
    margin: 25px 0;
}
#footer .company, #footer .company a {
    text-align: center;
    font-size:10px;
    line-height: 1.4;
    color: hsla(0,0%,100%,.7);
}
#footer .company a {
    font-weight: 600;
    transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease;
}
#footer .company a:hover {
    color:#fff;
}

#footer .foot-img {
    text-align: center;
}