@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");

/* Visual - common */
#visual { position: relative; background: var(--black); }
#visual::after { content: ''; position: absolute; left: 50%; bottom: 100px; width: 90%; max-width: 1560px; height: 1px; background: linear-gradient(to right, var(--white) 0, var(--white) 100px, rgba(255, 255, 255, 0.1) 100px, rgba(255, 255, 255, 0.1) 100%); transform-origin: left; transform: translateX(-50%) scaleX(0); transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s; }
#visual .v_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
#visual .v_bg .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.15); filter: sepia(100%) blur(20px); opacity: 0; transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), filter 1.5s ease, opacity 1.2s ease; }
#visual .v_bg::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); pointer-events: none; opacity: 0; transition: opacity 1.5s ease 0.2s; }
#visual .visual_in { position: relative; z-index: 2; height: 100%; padding: 0 0 100px; box-sizing: border-box; }
#visual .v_txt { position: relative; }
#visual .v_txt .fs80 { color: var(--white); }
#visual .v_txt h2 { transform: translateY(40px); opacity: 0; transition: transform 1s ease 0.4s, opacity 1s ease 0.4s; }
#visual .visual_lnb { position: relative; z-index: 5; }
#visual .visual_lnb dl { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 100px; transform: translateY(40px); opacity: 0; transition: transform 1s ease 0.6s, opacity 1s ease 0.6s; }
#visual .visual_lnb dl dt { display: none; }
#visual .visual_lnb dl dd { position: relative; }
#visual .visual_lnb dl dd .txt { display: block; position: relative; width: 300px; height: 60px; line-height: 60px; padding: 0 54px 0 30px; box-sizing: border-box; border-radius: 100px; font-family: var(--eng); font-size: 0.889rem; font-weight: 500; letter-spacing: 0; color: var(--white); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#visual .visual_lnb dl dd .txt span { pointer-events: none; }
#visual .visual_lnb dl dd .txt svg { position: absolute; right: 30px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%) rotate(0); transition: transform 0.3s ease; }
#visual .visual_lnb dl dd .txt.on svg { transform: translateY(-50%) rotate(180deg); }
#visual .visual_lnb dl dd:first-of-type .txt { background: var(--main); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#visual .visual_lnb dl dd .dlst { display: none; position: absolute; left: 0; top: calc(100% + 10px); z-index: 10; width: 100%; min-width: 180px; padding: 18px 24px; box-sizing: border-box; background: var(--white); border-radius: var(--borderR20); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
#visual .visual_lnb dl dd .dlst ul li { padding: 5px 0; text-align: left; }
#visual .visual_lnb dl dd .dlst ul li a { display: block; font-family: var(--eng); font-size: 0.889rem; font-weight: 400; line-height: 160%; letter-spacing: 0; color: var(--basic); transition: color 0.3s ease, font-weight 0.3s ease; }
#visual .visual_lnb dl dd .dlst ul li a:hover, #visual .visual_lnb dl dd .dlst ul li a.on { color: var(--main); font-weight: 600; }

/* Visual - animation active */
#visual.is-animated .v_bg .bg { transform: scale(1); filter: sepia(0) blur(0); opacity: 1; }
#visual.is-animated .v_bg::after { opacity: 1; }
#visual.is-animated .v_txt h2 { transform: translateY(0); opacity: 1; }
#visual.is-animated .visual_lnb dl { transform: translateY(0); opacity: 1; }
#visual.is-animated::after { transform: translateX(-50%) scaleX(1); }

/* Visual - short */
#visual.short { height: 640px; }
#visual.short .visual_in { display: flex; align-items: flex-end; justify-content: space-between; }
#visual.short .v_txt, #visual.short .visual_lnb { margin-bottom: 55px; }

/* Visual - long */
#visual.long { height: var(--vh); }
#visual.long .visual_in { display: flex; align-items: flex-end; justify-content: flex-end; }
#visual.long .v_txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }
#visual.long .v_txt h2 { transform: translateY(40px); }
#visual.long.is-animated .v_txt h2 { transform: translateY(0); }
#visual.long .visual_lnb { margin-bottom: 35px; }

/* Common CSS */
#contents { padding: 150px 0; }
.basic_cont {}
#subtitle { padding: 0 0 50px; text-align: center; }
#subtitle h3 { color: var(--black); font-size: 3.333333333333333rem; font-weight: 600; line-height: 116.667%; }

/* Common - tit_wrap */
.tit_wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 60px; text-align: center; }
.tit_wrap .fsE12 { color: var(--black); letter-spacing: 0; text-transform: uppercase; font-weight: 600; line-height: 1.667; transition: letter-spacing 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.tit_wrap .fsE12.aos-animate { opacity: 0.3 !important; letter-spacing: 3.6px; }
.tit_wrap .tit { color: var(--black); }
.tit_wrap .tit span { color: var(--main); line-height: inherit; letter-spacing: inherit; }
.tit_wrap .fs18 { color: var(--basic); line-height: 1.667; margin-top: 18px; }




/* 이용약관, 개인정보취급방침 */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:var(--letter-spacing-default); font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:var(--letter-spacing-default);}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;  letter-spacing:var(--letter-spacing-default); line-height:1.7;}

.privacy_list {width:100%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 




/* @media 1710px */
@media all and (max-width:1710px){
}

/* @media 1500px */
@media all and (max-width:1500px){
#visual .visual_lnb dl dd .txt { width: 260px; }
}

/* @media 1300px */
@media all and (max-width:1300px){
#visual .visual_lnb dl dd .txt { width: 220px; padding: 0 44px 0 20px; }
#visual .visual_lnb dl dd .txt svg { right: 20px; }
#contents { padding: 120px 0; }
#subtitle { padding: 0 0 40px; }
#subtitle h3 { font-size: 2.8rem; }
}

/* @media 980px */
@media all and (max-width:980px){
#visual.short { height: 500px; }
#visual::after { bottom: 50px; }
#visual .visual_in { display: block !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; width: 100%; padding: 0; text-align: center; }
#visual.long .v_txt { position: relative; left: auto; top: auto; transform: none; }
#visual .v_txt { margin-bottom: 30px; width: 100%; }
#visual .visual_lnb { display: inline-flex; margin: 0 auto !important; }
#visual .visual_lnb dl dd .txt { width: 240px; }
#contents { padding: 90px 0; }
#subtitle { padding: 0 0 35px; }
#subtitle h3 { font-size: 2.4rem; }
.tit_wrap { gap: 10px; padding-bottom: 40px; }
.tit_wrap .fs18 { margin-top: 10px; }


/* 이용약관, 개인정보취급방침 */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }


}

/* @media 680px */
@media all and (max-width:680px){
#visual.short .v_txt, #visual.short .visual_lnb {margin-bottom:0;}
#visual.short { height: 360px; }
#visual::after { bottom: 30px; }
#visual .v_txt { margin: 0 auto 20px !important; width: 90%; }
#visual .visual_lnb { width: 90%; display: flex; }
#visual .visual_lnb dl { width: 100%; justify-content: space-between; }
#visual .visual_lnb dl dd { flex: 1; min-width: 0; }
#visual .visual_lnb dl dd .txt { width: 100%; height: 50px; line-height: 50px; padding: 0 40px 0 15px; font-size: 1rem; }
#visual .visual_lnb dl dd .txt svg { right: 15px; }
#visual .visual_lnb dl dd .dlst { min-width: 100%; padding: 10px 15px; }
#contents { padding: 80px 0; }
#subtitle { padding: 0 0 30px; }
.tit_wrap { gap: 8px; padding-bottom: 30px; }
.tit_wrap .fs18 { margin-top: 8px; }
}