/* 서브페이지 제목 */
._s{ background-color: #fcf0d6; color: #000; width: 100%; overflow: hidden; word-break: keep-all; }
._s .subtitle{ text-align: center; font-size: 40px; letter-spacing: -0.025em; font-weight: 600; line-height: 1.3; }

@media screen and (max-width: 1280px){
    ._s .subtitle{ font-size: 35px; }
}

@media screen and (max-width: 820px){
    ._s .subtitle{ font-size: 28px; }
}

@media screen and (max-width: 500px){
    ._s .subtitle{ font-size: 24px; }
}


/* 멤버십 색상 */
.membercolor1{ color: #a19a8c; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em; }
.membercolor2{ color: #555555; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em; }
.membercolor3{ color: #000000; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em; }
.membercolor4{ color: #c63527; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em; }
.membercolor5{ color: transparent; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em; 
    background: linear-gradient(0deg,rgba(71, 71, 71, 1) 0%, #d1d1d1 32%, rgba(71, 71, 71, 1) 100%); 
    /* background: linear-gradient(307deg,rgba(106, 106, 106, 1) 0%, #b2b2b2 54%, rgba(106, 106, 106, 1) 100%);  */
    background-clip: text; -webkit-background-clip: text;  
}
.membercolor5._1{ color: transparent; font-family: 'Gestura Display'; font-weight: 900; letter-spacing: -0.01em;  background: linear-gradient(307deg,rgba(106, 106, 106, 1) 0%, #b2b2b2 54%, rgba(106, 106, 106, 1) 100%); background-clip: text; -webkit-background-clip: text; }

.memberbg1{ background-color: #a19a8c; }
.memberbg2{ background-color: #555555; }
.memberbg3{ background-color: #000000; }
.memberbg4{ background-color: #c63527; }
.memberbg5{ background: linear-gradient(307deg,rgba(106, 106, 106, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(106, 106, 106, 1) 48%, rgba(106, 106, 106, 1) 63%, rgba(255, 255, 255, 1) 87%, rgba(106, 106, 106, 1) 100%); }
.memberbg5._1{ background: linear-gradient(307deg,rgba(106, 106, 106, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(106, 106, 106, 1) 33%, rgba(106, 106, 106, 1) 48%, rgba(255, 255, 255, 1) 72%, rgba(106, 106, 106, 1) 80%); }
.memberbg5._2{ background: linear-gradient(307deg,rgba(106, 106, 106, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(106, 106, 106, 1) 68%, rgba(106, 106, 106, 1) 75%, rgba(255, 255, 255, 1) 88%, rgba(106, 106, 106, 1) 100%); }



/* form 초기화 */
input{ border: none; background: none; }
input::placeholder{ color: rgba(0,0,0,0.3); }
button{ border: none; background: none; }



/* 입력폼(기본 - 로그인) */
._s .form{ position: relative; }
._s .form > ul{ width: 100%; }
._s .form > ul li{ width: 100%; position: relative; display: flex; margin-bottom: 10px; }
._s .form > ul li:last-of-type{ margin-bottom: 0; }
._s .form > ul li .wbx{ width: 100%; background-color: #fffcf5; height: 44px; }
._s .form > ul li .wbx input{ display: block; width: 100%; height: 100%; padding: 0 25px; box-sizing: border-box; font-size: 16px; }
._s .form > ul li .checkbx{ display: flex; align-items: center; gap: 7px; position: relative; color: #3a3a3a; padding-top: 10px; }
._s .form > ul li .checkbx input{ position: absolute; top: 0; left: 0; visibility: hidden; }
._s .form > ul li .checkbx i{ font-size: 18px; margin-right: 6px; }
._s .form > ul li .checkbx input:checked ~ label i::before{ content: ''; }
._s .form > ul li .checkbx input:checked ~ i::before{ content: ''; }
._s .form > ul li .checkbx label{ display: flex; align-items: center; font-size: 16px; cursor: pointer; }
._s .form > ul li .checkbx.bold label{ font-weight: 600; }

._s .form > ul li .checkbx label em{ font-size: 14px; color: #c63527; }
._s .form > ul li .checkbx .privlayer{ font-size: 14px; text-decoration: underline; text-underline-position: under; cursor: pointer; }


._s .form > ul li > label{ width: 190px; display: flex; flex-shrink: 0; padding: 0 10px; box-sizing: border-box; height: 44px; align-items: center; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; gap: 6px; }
._s .form > ul li > label em{ font-size: 22px; font-weight: 700; color: #c63527; }

._s .form > ul li .rbx{ width: 100%; display: flex; flex-direction: column; gap: 10px; }
._s .form > ul li .rbx input:read-only{ height: 100%; width: 100%; font-size: 17px; color: #404042; font-weight: 600; padding: 0 30px; box-sizing: border-box; }

._s .form > ul li .flx{ display: flex; gap: 10px; }
._s .form > ul li .flx .formbtn{ width: 121px; flex-shrink: 0; }
._s .form > ul li .flx .formbtn button{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #c63527; color: #fff; font-size: 16px; cursor: pointer; }
._s .form > ul li .note{ font-size: 14px; letter-spacing: -0.025em; color: #c63527; }

._s .form .withdrawal{ position: absolute; top: 20px; right: 0; width: 121px; height: 44px; z-index: 3; }
._s .form .withdrawal button{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 300; background-color: #908b80; color: #fff; cursor: pointer;  }


/* 입력폼(스타일) */
._s .ess{ display: flex; justify-content: flex-end; margin-bottom: 10px; }
._s .ess p{ font-size: 16px; color: #3a3a3a; line-height: 1.3; }
._s .ess p span{ color: #c63527; font-size: 22px; font-weight: 700; margin-right: 6px; display: inline-block; }

._s .form.bordertop{ border-top: 1px solid #000; box-sizing: border-box; padding-top: 30px; box-sizing: border-box; }
._s .form.liborder > ul li{ padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 0; } 
._s .form.liborder > ul li:last-of-type{ border-bottom: 0; }


@media screen and (max-width: 820px){
    ._s .ess{ margin-bottom: 5px; }
    ._s .ess p{ font-size: 14px; }
    ._s .ess p span{ font-size: 18px; }

    ._s .form > ul li .wbx input{ font-size: 14px; padding: 0 15px; }
    ._s .form > ul li .checkbx label{ font-size: 14px; }
    ._s .form > ul li > label{ font-size: 16px; width: 140px; }
    ._s .form > ul li .flx .formbtn button{ font-size: 14px; }
    ._s .form > ul li .rbx input:read-only{ font-size: 14px; padding: 0 15px; }
    ._s .form .withdrawal button{ font-size: 14px; }
    
    ._s .form.bordertop{ padding-top: 20px; }
    ._s .form.liborder > ul li{ padding: 15px 0; }
}

@media screen and (max-width: 500px){
    ._s .form > ul li > label{ padding: 0; width: 100%; }
    ._s .form > ul li .flx .formbtn{ width: 80px; }
    ._s .form > ul li .wbx input{ padding: 0 10px; }
    ._s .form > ul li .rbx input:read-only{ padding: 0; height: 44px; }
    ._s .form.liborder > ul li{ flex-direction: column; }
    ._s .form .withdrawal{ width: 80px; top: 10px; }
}




._s .subbtnWrap{ display: flex; justify-content: center; gap: 10px; }
._s .subbtnWrap > a{ width: 150px; height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; transition-duration: 0.2s; box-sizing: border-box; }
._s .subbtnWrap > a._1{ background-color: #000; border: 1px solid #000; color: #fff; }
._s .subbtnWrap > a._2{ background-color: rgba(255,255,255,0); border: 1px solid #000; color: #000; }
._s .subbtnWrap > a.deact{ background-color: #555; border: 1px solid #555; }


@media screen and (min-width: 821px){
    ._s .subbtnWrap > a._1:hover{ background-color: #c63527; border-color: #c63527; }
    ._s .subbtnWrap > a._2:hover{ border-color: #c63527; color: #c63527; }
    ._s .subbtnWrap > a.deact:hover{ background-color: #555; border-color: #555; }
}

@media screen and (max-width: 820px){
    ._s .subbtnWrap > a{ font-size: 14px; }
}




._s .links{ margin-top: 20px; }
._s .links > ul{ display: flex; align-items: center; }
._s .links > ul > li{ width: 33.33%; position: relative; font-size: 16px; color: #3a3a3a; font-weight: 500; transition-duration: 0.2s; text-align: center; }
._s .links > ul > li::after{ content: ''; display: block; width: 1px; height: 1em; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); background-color: #e2d8c0; }
._s .links > ul > li:last-of-type::after{ display: none; }
._s .links > ul > li > a{ display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; }

@media screen and (min-width: 821px){
    ._s .links > ul > li:hover{ color: #c63527; }
}

@media screen and (max-width: 820px){
    ._s .links > ul > li > a{ font-size: 14px; line-height: 1.3; }
}


._s .snslogin{ margin-top: 35px; }
._s .snslogin .txtline{ display: flex; align-items: center; gap: 12px }
._s .snslogin .txtline em{ display: block; width: 100%; height: 1px; background-color: rgba(0,0,0,0.1); }
._s .snslogin .txtline span{ font-size: 16px; font-weight: 500; color: #3a3a3a; flex-shrink: 0; display: block; }
._s .snslogin .snsbtn{ margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 20px; }
._s .snslogin .snsbtn > li{ width: 50px; height: 50px; }
._s .snslogin .snsbtn > li > a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; border: 1px solid #fff; box-sizing: border-box; transition-duration: 0.2s; }
._s .snslogin .snsbtn > li > a > img{ transition-duration: 0.2s; }

@media screen and (min-width: 821px){
    ._s .snslogin .snsbtn > li > a:hover{ border-color: #000; }
    ._s .snslogin .snsbtn > li > a:hover > img{ filter: brightness(0); }
}


@media screen and (max-width: 820px){
    ._s .snslogin .txtline span{ font-size: 14px; }
    ._s .snslogin .snsbtn{ gap: 15px; }
}


._s .whitebx{ width: 100%; height: 160px; display: flex; flex-direction: column;  justify-content: center; align-items: center; box-sizing: border-box; background-color: #fff; color: #c63527;  text-align: center; }
._s .whitebx b{ font-size: 24px; letter-spacing: -0.025em; font-weight: 700; }
._s .whitebx p{ font-size: 18px; letter-spacing: -0.025em; font-weight: 500; line-height: calc(28 / 18); }

@media screen and (max-width: 820px){
    ._s .whitebx b{ font-size: 20px; }
    ._s .whitebx p{ font-size: 16px; }
}

@media screen and (max-width: 500px){
    ._s .whitebx{ height: 120px; }
    ._s .whitebx b{ font-size: 16px; }
    ._s .whitebx p{ font-size: 14px; }
}



/* 페이징 */
.pagination{ display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.pagination .btn{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: #000; cursor: pointer; }
.pagination .number{ margin: 0 35px; display: flex; align-items: center; justify-content: center; }
.pagination .number li > a{ padding: 7px; color: #d4c9b1; font-size: 16px; letter-spacing: -0.025em; }
.pagination .number li.on > a{ color: #c63527; }




/* 서브비주얼 */
._s .subVisual{ width: 100%; height: var(--vh100); position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 60px; box-sizing: border-box; overflow: hidden; }
._s .subVisual .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;  }

._s .subVisual .vidbx{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,0.5); background-image: url(/asset/img/main/se01_vidbg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }
._s .subVisual .vidbx iframe{ width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

._s .subVisual .bg img{ width: 100%; height: 100%; object-fit: cover; }
._s .subVisual .visTitle{ color: #fff; position: relative; z-index: 2; }
._s .subVisual .visTitle dl dt{ font-size: 92px; letter-spacing: -0.03em; font-weight: 600; font-family: 'Gestura Display'; line-height: calc(150/92); }
._s .subVisual .visTitle dl dd{ font-size: 18px; letter-spacing: -0.03em; font-family: 'Cerapro'; margin-top: 25px; }
._s .subVisual .visTitle dl dd i{ font-size: 14px; margin: 0 13px; }

@media screen and (max-width: 1280px){
    ._s .subVisual .visTitle dl dt{ font-size: 60px; }
    ._s .subVisual .visTitle dl dd{ font-size: 16px; margin-top: 20px; }
}

@media screen and (max-width: 820px){
    ._s .subVisual .visTitle dl dt{ font-size: 35px; }
    ._s .subVisual .visTitle dl dd{ font-size: 14px; margin-top: 15px; }
    ._s .subVisual .visTitle dl dd i{ margin: 0 5px; }
}



/* 검색창 */
.search{ width: 100%; max-width: 330px; display: flex; height: 44px; background-color: rgba(212, 201, 177, 0.3); }
.search input{ display: block; width: 100%; padding-left: 25px; box-sizing: border-box; font-size: 16px; letter-spacing: -0.025em; }
.search input::placeholder{ color: rgba(0,0,0,0.3); }
.search .icon{ width: 55px; display: flex; align-items: center; justify-content: center; align-items: center; color: #000; font-size: 18px; }

@media screen and (max-width: 820px){
    .search input{ font-size: 14px; }
}



/* 하단 길드가입 */
.guildgo{ border-top: 1px solid rgba(0,0,0,0.2); padding: 80px 0; box-sizing: border-box; text-align: center; }
.guildgo .logo{  }
.guildgo dl{ margin-top: 40px; }
.guildgo dl dt{ font-size: 40px; font-weight: 700; font-family: 'Gestura Display'; letter-spacing: -0.03em; }
.guildgo dl dd{ font-size: 18px; letter-spacing: -0.03em; line-height: 1.3; margin-top: 15px; }
.guildgo dl dd b{ font-weight: 700; }

.guildgo .moreBtn{ margin-top: 45px; }

@media screen and (max-width: 1280px){
    .guildgo dl dt{ font-size: 32px; }
    .guildgo dl dd{ font-size: 16px; margin-top: 10px; }
}

@media screen and (max-width: 820px){
    .guildgo{ padding: 50px 0; }
    .guildgo dl{ margin-top: 30px; }
    .guildgo dl dt{ font-size: 24px; }
    .guildgo dl dd{ font-size: 14px; margin-top: 10px; }
    .guildgo .moreBtn{ margin-top: 30px; }
}