@charset "utf-8";
/* CSS Document */

#content												{ margin-top:7em; padding-bottom:7em;  }
.footer													{ background:#030303 }

@media all and (max-width:1568px) {
    #content											{ margin-top:6em; padding-bottom:6em;  }
}
@media all and (max-width:1268px) {
    #content											{ margin-top:5em; padding-bottom:5em;  }
}
@media all and (max-width:968px) {
    #content											{ margin-top:4em; padding-bottom:4em;  }
}
@media all and (max-width:668px) {
    #content											{ margin-top:3em; padding-bottom:3em;  }
}
/**********************************************************************

 								비주얼 

**********************************************************************/
.visual													{ position:relative; width:100%; height:28em; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
.visual::before											{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.6); content:''; z-index:1; }
.visual													{ background-image:url(/resource/images/main/img_visual02.jpg); }
.visual .con_inner										{ position:absolute; height:100%; top:0; left:50%;  transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; z-index:2; padding-top:3em}
.visual .text_wrap										{ display:flex; width:100%; justify-content:space-between; align-items:center }
.visual .text_wrap .visual_title						{ position:relative; line-height:1.6; font-size:3em; color:var(--color-white); font-family:var(--font-jalnan); font-weight:normal }
.visual .text_wrap .visual_title .text br				{ display:none; }
.visual .text_wrap .visual_txt,
.visual .text_wrap .visual_title span					{ background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.visual .text_wrap .visual_title .txt					{ position:relative; }
.visual .text_wrap .visual_title .txt::before			{ position:absolute; left:0; bottom:-5px; content:''; height:1px; background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%); animation:lineAni 0.8s forwards; animation-delay: 0.8s; }
@keyframes lineAni{
    0%{ width:0; }
    100%{ width:100%; }
}

/* 경로 */
.visual .location_wrap											{ position:absolute; right:0; bottom:calc(var(--sizeHig) / 2); --sizeHig:50px }
.visual .location_wrap .loc										{ display:flex; gap:10px; height:var(--sizeHig); }
.visual .location_wrap .loc>li									{ position:relative; }
.visual .location_wrap .loc>li a								{ display:flex; align-items:center; text-align:left; border-radius:25px; height:var(--sizeHig); padding:0 1.88em; background:var(--color-point); color:var(--color-white);
    font-weight:500; line-height:1.1}
.visual .location_wrap [data-location="home"] a					{ font-size:0px;}
.visual .location_wrap [data-location="home"] a::before			{ content:''; display:block; width:var(--sizeHig); height:var(--sizeHig); background:var(--color-point) url(/resource/images/sub/icon_home.svg) no-repeat 50% 45%; background-size:auto 15px;
    opacity:1; border-radius:100%;}

@media all and (max-width:1568px) {
    .visual .text_wrap .visual_title							{ font-size:2.8em; }
}
@media all and (max-width:1368px) {
    .visual .text_wrap .visual_title							{ font-size:2.6em; }
}
@media all and (max-width:1268px) {
    .visual														{ height:25em; }
    .visual .text_wrap .visual_title							{ font-size:2.5em; }

    /* 경로 */
    .visual .location_wrap										{ --sizeHig:45px  }
}
@media all and (max-width:968px) {
    .visual														{ height:23em; }
    .visual .text_wrap .visual_title							{ font-size:2.3em; }

    /* 경로 */
    .visual .location_wrap										{ --sizeHig:40px  }
    .visual .location_wrap .loc									{ gap:5px; font-size:.85rem}
    .visual .location_wrap .loc>li a							{ padding:0 1.5em;  }

}
@media all and (max-width:668px) {
    .visual														{ height:22em; }
    .visual .text_wrap .visual_title							{ font-size:2.1em; }
    .visual .text_wrap .visual_title .txt::before				{ bottom:-3px; }
    /* 경로 */
    .visual .location_wrap .loc									{ gap:3px; }
    .visual .location_wrap .loc>li a							{ padding:0 1em; }
}
@media all and (max-width:568px) {
    .visual .con_inner											{ padding-top:0; }
    .visual .text_wrap .visual_title							{ font-size:2em; }
}
@media all and (max-width:468px) {
    .visual .text_wrap .visual_title							{ font-size:1.75em; }

    /* 경로 */
    .visual .location_wrap .loc>li a							{ padding:0 .75em; }
}
@media all and (max-width:368px) {
    .visual														{ height:20em; }
    .visual .text_wrap .visual_title							{ font-size:1.5em; }
}
@media all and (max-width:320px) {
    .visual														{ height:18em; }
    .visual .text_wrap .visual_title							{ font-size:1.3em; }
}
/**********************************************************************

 								내용 

**********************************************************************/

/* 타이틀 */
h4.title														{ font-size:2.8em; line-height:1.2; margin-bottom:20px; font-family:var(--font-jalnan); font-weight:normal }
@media all and (max-width:1568px) {
    h4.title													{ font-size:2.6em; }
}
@media all and (max-width:1268px) {
    h4.title													{ font-size:2.3em; }
}
@media all and (max-width:768px) {
    h4.title													{ font-size:2em;  }
}
@media all and (max-width:468px) {
    h4.title													{ font-size:1.8em; }
}


.info_text,
.Membership .loginBox 												{ max-width:900px; }
.Membership .join_agree .titst2										{ margin-top:0; margin-bottom:.75rem; }


/* 입회비 안내문구 */
.info_text												{ display:flex; flex-flow:column; width:80%; margin:0 auto 2em auto; box-sizing:border-box; border-radius:20px; background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%);
    color:var(--color-white); padding:2em; gap:10px;}
.info_text>li											{ position:relative; padding-left:25px; font-size:1.067em; font-weight:400; line-height:1.36 }
.info_text>li::before									{ position:absolute; width:20px; height:20px; background:url(/resource/images/sub/icon_badge.svg) no-repeat 50% 50% / 15px; content:''; left:0; top:1px; }



/* 회원 유형 선택 */
[data-subarea="type"] .banner_list									{ display:flex; flex-wrap:wrap; gap:1em;  }
[data-subarea="type"] .banner_list>li								{ width:calc((100% - 1em) / 2);   }
[data-subarea="type"] .banner_list>li>a								{ display:flex; flex-flow:row wrap; width:100%; border:1px solid rgba(0,0,0,.2); border-radius:10px; background:#fff; align-items:center; justify-content:center; padding:4rem 2em;
    transition:var(--trans-ani); gap:1em 3em }
[data-subarea="type"] .banner_list>li>a:hover						{ border-color:var(--color-point); background:var(--color-point); color:#fff; }
[data-subarea="type"] .banner_list>li>a dl							{ display:flex; flex-flow:column; }
[data-subarea="type"] .banner_list>li>a dl>dt						{ font-size:2em; font-family:var(--font-jalnan); font-weight:normal }
[data-subarea="type"] .banner_list>li>a dl>dd						{ font-size:1.267em; }
[data-subarea="type"] .banner_list>li>a .img						{ position:relative; display:flex; width:150px; height:150px; border-radius:100%; background-color:#f2f2f2 }
[data-subarea="type"] .banner_list>li>a .img::before				{ position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-size:contain; background-position:center; background-repeat:no-repeat; }
[data-subarea="type"] .banner_list>li:nth-child(1)>a .img::before	{ background-image:url(/resource/images/sub/img_banner02.svg); }
[data-subarea="type"] .banner_list>li:nth-child(2)>a .img::before	{ background-image:url(/resource/images/sub/img_banner01.svg); }


/* 회원가입 보드추가 */
.Membership .loginBox strong,
.Membership .join_agree .titst2							{ position:relative; font-size:1.3rem; padding-left:20px; line-height:1 ; text-align:left }
.Membership .loginBox strong::before,
.Membership .join_agree .titst2::before					{ position:absolute; width:15px; height:15px; border:4px solid #005bac; border-radius:100%; content:''; top:2px; left:0; }
.Membership .loginBasic									{ margin-top:1.5em; }
.Membership .join_agree .termsBox						{ text-align:left; font-weight:300; font-size:.98em; line-height:1.4; color:rgba(0,0,0,.74); height:300px; }
.Membership .join_agree .termsBox strong				{ font-weight:700; display:block; color:#005bac;}
.Membership .join_agree .termsBox b						{ display:block; font-weight:400; color:#222; }

/* 가입완료 */
[data-subarea="comp"]									{ box-sizing:border-box; border-radius:20px; border:1px solid rgba(0, 117, 255, 0.60); padding:3em; display:flex; flex-flow:column; align-items:center;}
[data-subarea="comp"] .sub_txt							{ font-size:1.37em; font-family:var(--font-jalnan); font-weight:normal; text-align:center; background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
[data-subarea="comp"] .img								{ margin:1.25em 0; }
[data-subarea="comp"] .btn								{ margin-top:2em; }
[data-subarea="comp"] .btn a							{ line-height:1; padding:15px 35px; font-size:1.067em; background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%);  color:var(--color-white); border-radius:25px; }




@media all and (max-width:1568px){
    /* 회원 유형 선택 */
    [data-subarea="type"] .banner_list>li>a								{ padding:4rem 2em; gap:1em 3em }
    [data-subarea="type"] .banner_list>li>a dl>dt						{ font-size:1.9em;  }
    [data-subarea="type"] .banner_list>li>a dl>dd						{ font-size:1.2em; }
    [data-subarea="type"] .banner_list>li>a .img						{ width:140px; height:140px; }
}
@media all and (max-width:1468px){
    /* 회원 유형 선택 */
    [data-subarea="type"] .banner_list>li>a								{ padding:3.5rem 2em;  gap:1em 2.5em}
    [data-subarea="type"] .banner_list>li>a dl>dt						{ font-size:1.8em;  }
    [data-subarea="type"] .banner_list>li>a dl>dd						{ font-size:1.167em; }
    [data-subarea="type"] .banner_list>li>a .img						{ width:130px; height:130px; }
}
@media all and (max-width:1268px) {
    .Membership .join_agree .termsBox									{ height:250px; }
}
@media all and (max-width:968px) {
    .Membership .join_agree .termsBox									{ height:230px; }
}
@media all and (max-height:868px){
    /* 입회비 안내문구 */
    .info_text															{ width:100%; padding:1.5em }
}
@media all and (max-width:768px){
    /* 회원 유형 선택 */
    [data-subarea="type"] .banner_list>li>a								{ flex-flow:column; }
    [data-subarea="type"] .banner_list>li>a dl>dt						{ font-size:1.7em;  }
    [data-subarea="type"] .banner_list>li>a dl							{ align-items: center; }
    #boardWrap .btn.big													{ height:50px; font-size:1.067rem; }

}
@media all and (max-width:668px){
    #boardWrap .write_list>li>.tit							{ text-align:left; }
    #boardWrap .write_list>li>.flex *						{ flex:auto; max-width:100%; text-align:left;  }
    #boardWrap fieldset,
    #boardWrap form											{ width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; min-inline-size:-webkit-fill-available; }
    #boardWrap .write_list>li								{ padding:.75rem 0; }

    /* 가입완료 */
    [data-subarea="comp"]									{ padding:2em 2em 3em; }
    [data-subarea="comp"] .sub_txt							{ line-height:1.3; }
}
@media all and (max-width:468px){
    [data-subarea="type"]>h3											{ font-size:1.7em; line-height:1.3 }
    [data-subarea="type"] .sub_txt										{ font-size:1.2em;  }
    [data-subarea="type"] .sub_txt.sm									{ margin-bottom:1em; line-height:1.3; margin-top:.5em }

    [data-subarea="type"] .banner_list									{  gap:1em; margin-top:1.5em }
    [data-subarea="type"] .banner_list>li								{ width:100%;   }
    [data-subarea="type"] .banner_list>li>a								{ padding:1.5em;  }
    [data-subarea="type"] .banner_list>li>a dl							{ margin-top:1em }
    [data-subarea="type"] .banner_list>li>a dl>dt						{ font-size:1.3em;  }
    [data-subarea="type"] .banner_list>li>a dl>dd						{ font-size:1.1em; }
    [data-subarea="type"] .banner_list>li>a .img						{ width:120px; height:120px;  }

    /* 회원가입 보드추가 */
    .Membership .join_agree .termsBox									{ height:200px; }
    .Membership .loginBox strong,
    .Membership .join_agree .titst2										{ font-size:1.167rem;  }
    .Membership .loginBox strong::before,
    .Membership .join_agree .titst2::before								{ width:13px; height:13px; border:3px solid #005bac;  }
    .Membership .loginBasic												{ margin-top:1em; }
    .Membership .join_agree .termsCheck									{ margin-top:.5em; margin-bottom:1em; }


    /* 입회비 안내문구 */
    .info_text															{ padding:1.5em 1em }
}

@keyframes wave {
    0% {
        background-position:0% 70%;
    }
    100% {
        background-position:100% 70%;
    }
}