@import url("common.css");

/* Intro */
body.main_intro_active {overflow: hidden;}
#main_intro.main_intro {position: fixed; left: 0; top: 0; z-index: 9999999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: var(--white); opacity: 1; visibility: visible; transition: opacity 0.8s ease, visibility 0.8s ease;}
#main_intro.main_intro.is_hide {opacity: 0; visibility: hidden; pointer-events: none;}
#main_intro .main_intro_in {display: flex; flex-direction: column; align-items: center; gap: 40px;}
#main_intro .main_intro_in img {width: 200px; height: auto;}
#main_intro .main_intro_spinner {width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--main); border-radius: 50%; animation: main_intro_spin 0.75s linear infinite;}
@keyframes main_intro_spin {to {transform: rotate(360deg);}}

/* Fullpage */
.section.fp-height-auto {height:auto !important; overflow:visible !important}
.section.fp-height-auto .fp-overflow {max-height: unset !important; height:auto !important; overflow:visible !important; position:static;}

@media all and (min-width:981px){
body::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0; visibility: hidden; transition: var(--transition); content: '';}
#contact {transition: var(--transition); transition-delay: 0.05s;}

body.fp-viewing-page4::before {opacity: 1; visibility: visible;}
body.fp-viewing-page4 #contact {opacity: 0.5;}
}


#fp-nav {margin-left: 0; right: 50px !important; margin-top: 0; left: auto; width: auto; transform: translateY(-50%); transition: var(--transition);}
#fp-nav::before {content: ''; left: 50%; top: 12px; height: calc(100% - 30px); border-left: 1px solid rgba(255, 255, 255, 0.4); position: absolute;}
#fp-nav ul li {padding: 0;}
#fp-nav ul li + li {margin-top: 15px;}
#fp-nav ul li a {width: 22px; height: 22px;}

#fp-nav ul li a span {width: 7px; height: 7px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#fp-nav ul li a::before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: var(--white); border-radius: 50%; opacity: 0; transition: var(--transition);}
#fp-nav ul li a.active::before {opacity: 0.2;}
#fp-nav ul li a span::after {display: none !important;}

body.fp-viewing-page4 #fp-nav {opacity: 0.5;}
body.fp-viewing-page4 #fp-nav ul li a.active::before {opacity: 0;}
body.fp-viewing-page4 #fp-nav ul li:nth-last-child(2) a::before {opacity: 0.2;}

/* 디졸브 */
.ani_effect {transform:translateY(60px); opacity: 0; transition:all .6s linear; }
.ani_effect.delay1 {transition-delay:0.6s;}
.ani_effect.delay2 {transition-delay:0.9s;}
.ani_effect.delay3{transition-delay:1.2s;}
.ani_effect.delay4{transition-delay:1.5s;}
.ani_effect.delay5{transition-delay:1.8s;}
.ani_effect.delay6{transition-delay:2s;}

.section.action .ani_effect{transform:translateY(0); opacity: 1;}

/* Visual */
#visual .visual_in {height: 100%; width: 100%;}
#visual .visual_in .v_bg {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#visual .visual_in .v_bg::after {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.3);}
#visual .visual_in .v_bg .jarallax {width: 100%; height: 100%;}
#visual .visual_in .v_txt {position: absolute; left: 50%; top: 0; height: 100%; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateX(-50%); z-index: 1000;}
#visual .visual_in .v_txt p {display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 30px; transform: translateY(100px); opacity: 0; animation: v_txt 1s 0.3s both; width: 100%;}
#visual .visual_in .v_txt p::before,
#visual .visual_in .v_txt p::after {content: ''; border-bottom: 1px solid rgba(255, 255, 255, 0.5); flex: 1; max-width: 60px;}
#visual .visual_in .v_txt h3 {transform: translateY(100px); opacity: 0; animation: v_txt 1s 0.6s both;}

@keyframes v_txt {
	0% {transform: translateY(100px); opacity: 0;}
	100% {transform: translateY(0); opacity: 1;}
}

/* About */
#about {position: relative;}

#about .about_in {width: 100%; height: 100%;}
#about .about_bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#about .about_bg .bg {background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; transition: var(--transition);}
#about .about_bg .bg:nth-child(1) {opacity: 1; visibility: visible;}
#about .about_grid {width: 100%; height: 100%; position: relative; z-index: 10;}
#about .about_grid li {height: 100%; border-right: 1px solid var(--white_20);}
#about .about_grid li:last-child {border-right: 0;}
#about .about_grid li > a {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 50px; transition: var(--transition);}
#about .about_grid li > a::before {content: ''; width: 34px; aspect-ratio: 34 / 36; background: url('/img/main_symbol.svg') center / cover no-repeat; margin-bottom: 60px;}
#about .about_grid li a > * {transition: var(--transition);}
#about .about_grid li h3 {margin-bottom: 20px;}
#about .about_grid li .txt_box {display: grid; grid-template-rows: 1fr; position: relative; transition: var(--transition);}
#about .about_grid li p.fs18 {color: var(--white_70); overflow: hidden; transition: var(--transition);}

#about .about_grid li .before_icon {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 30px; opacity: 0; transition: var(--transition);}
#about .about_grid li .before_icon.add2::before {content: '\f3dd'; font-size: 40px;}

/* 호버 효과는 680px 이하에서 사용하지 않음 (하단 @media 680px 참고) */
@media all and (min-width:681px){
#about .about_grid li:hover p.fs18 {color: var(--white);}
#about .about_grid li:hover .before_icon {opacity: 1;}

#about .about_grid:hover li:not(:hover) > a {opacity: 0.5;}
#about .about_grid:hover li:not(:hover) h3 {margin-bottom: 0;}
#about .about_grid:hover li:not(:hover) .txt_box {grid-template-rows: 0fr;}

#about .about_in:has(.about_grid li:nth-child(1):hover) .about_bg .bg:nth-child(2),
#about .about_in:has(.about_grid li:nth-child(2):hover) .about_bg .bg:nth-child(3),
#about .about_in:has(.about_grid li:nth-child(3):hover) .about_bg .bg:nth-child(4) {opacity: 1; visibility: visible;}
}


/* Contact */
#contact {background: url('/img/contact_bg.jpg') no-repeat center center / cover;}

#contact .contact_in {display: flex; align-items: center; gap: 165px; height: 100%;}
#contact .contact_in .contact_left {width: 35%; max-width: 510px; flex-shrink: 0;}
#contact .contact_in .contact_left h2 {display: flex; align-items: flex-start; margin-bottom: 15px;}
#contact .contact_in .contact_left h2::after {content: ''; width: 21px; aspect-ratio: 21 / 15; background: url('/img/main_symbol_contact.svg') center / cover no-repeat; }
#contact .contact_in .contact_left h3 {margin-bottom: 30px;}
#contact .contact_in .contact_left .contact_dl {margin-top: 50px;}
#contact .contact_in .contact_left .contact_dl dl {display: flex; align-items: center; gap: 8px;} 
#contact .contact_in .contact_left .contact_dl dl + dl {margin-top: 5px;}
#contact .contact_in .contact_left .contact_dl dt {width: 30px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--white_20); display: flex; align-items: center; justify-content: center;}
#contact .contact_in .contact_left .contact_dl dt::before {font-size: 18px;}
#contact .contact_in .contact_left .contact_dl dl:nth-child(1) dt::before {content: '\e0b0';}
#contact .contact_in .contact_left .contact_dl dl:nth-child(2) dt::before {content: '\e158';}

#contact .contact_in .contact_left .contact_dl dd a:hover {text-decoration: underline;}

#contact .contact_in .contact_left .contact_sns {margin-top: 40px; display: flex; gap: 5px 15px; flex-wrap: wrap;}
#contact .contact_in .contact_left .contact_sns a {display: flex; width: 28px; aspect-ratio: 1/1;}
#contact .contact_in .contact_left .contact_sns a img {width: 100%; height: 100%; object-fit: contain;}
#contact .contact_in .contact_left .contact_sns a:hover {opacity: 0.3;}

#contact .contact_in .contact_form {flex: 1;}


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

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* About */
#about br {display: none;}

}

/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* About */
#about .about_grid li > a::before {margin-bottom: 30px;}
#about .about_grid li h3 {margin-bottom: 10px;}

/* Contact */
#contact {display: flex; align-items: center;}
#contact .contact_in {gap: 100px; align-items: flex-start; height: auto;}
#contact .contact_in .contact_left h3 {margin-bottom: 20px;}
}

/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* Visual */
#main #visual {width: 100%; height: var(--vh) !important;}
#visual br {display: none;}
#visual .visual_in .v_txt p {margin-bottom: 15px; gap: 15px;}
#visual .visual_in .v_txt p::before,
#visual .visual_in .v_txt p::after {max-width: 40px;}

/* About */
#main #about {height: var(--vh) !important}

#about .about_grid li > a {padding: 0 30px;}
#about .about_grid li > a::before {width: 28px; margin-bottom: 20px;}

#about .about_grid li .before_icon {margin-top: 20px;}
#about .about_grid li .before_icon.add2::before {font-size: 30px;}

/* Contact */
#contact {padding: var(--compad) 0 }
#contact .contact_in {gap: 50px;}
#contact .contact_in .contact_left h2 {margin-bottom: 10px;}
#contact .contact_in .contact_left h2::after {width: 15px;}
#contact .contact_in .contact_left h3 {margin-bottom: 15px;}
#contact .contact_in .contact_left .contact_dl {margin-top: 30px;}
#contact .contact_in .contact_left .contact_dl dt {width: 25px;}
#contact .contact_in .contact_left .contact_dl dt::before {font-size: 15px;}

#contact .contact_in .contact_left .contact_sns {margin-top: 25px; gap: 5px 10px;}
#contact .contact_in .contact_left .contact_sns a {width: 24px;}
}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* Contact */
#contact .contact_in {flex-direction: column;}
#contact .contact_in .contact_left {width: 100%; max-width: 100%;}
#contact .contact_in .contact_form {width: 100%; flex:auto;}

}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* About */
#main #about {height: auto !important;}

#about .about_bg {display: none;}

#about .about_grid {grid-template-columns: 1fr;}
#about .about_grid li {border-right: 0;}
#about .about_grid li > a {padding: var(--compad) 5%; background-position: center; background-size: cover; background-repeat: no-repeat;}
#about .about_grid li:nth-child(1) > a {background-image: url('/img/about_1.jpg');}
#about .about_grid li:nth-child(2) > a {background-image: url('/img/about_2.jpg');}
#about .about_grid li:nth-child(3) > a {background-image: url('/img/about_3.jpg');}

/* 플러스 아이콘 기본 노출 (흐름에 포함시켜 가운데 정렬 유지) */
#about .about_grid li .before_icon {position: static; transform: none; opacity: 1;}


/* Contact */
#contact .contact_in {gap: 30px;}

#contact .contact_in .contact_left h2 {margin-bottom: 5px;}
#contact .contact_in .contact_left h2::after {width: 12px;}
#contact .contact_in .contact_left h3 {margin-bottom: 10px;}

#contact .contact_in .contact_left .contact_dl dt::before {font-size: 14px;}

#contact .contact_in .contact_left .contact_sns a {width: 22px;}
}