@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

 #main .wrap {height: var(--height-full);}

 /* intro */
#intro {overflow: hidden; height: var(--height-full); text-align: center; background: url(../images/main/intro-bg.jpg) no-repeat center / cover;}
#intro .wrap,
.intro-inr {overflow: hidden; height: 100%; }
.intro-inr {margin-top: -45rem;}
.intro-img {overflow: hidden; position: absolute; left:0; top: 0; width: 100%; height: 100%;}
.intro-img img {opacity: 0; position: absolute;}
.intro-img__character {left: 30rem; bottom: -50rem; width: 450rem; animation: text_hidden_motion 1.6s ease forwards;}
.intro-img__tree {right: -455rem; bottom: -322rem; width: 925rem;animation: text_hidden_motion 1.6s ease forwards;}
.intro-img__leave {right: 226rem; bottom: -100rem; width: 240rem;animation: text_hidden_motion 1.6s ease .5s forwards;}

.into-logo img {display: inline-block; width: 400rem;}
.intro-login {min-width: 650rem; margin: 40rem auto 0; padding: 10rem; border-radius: 60rem; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.intro-login input {display: block; width: 100%; height:100rem; text-align: center; font-size: 30rem; color: var(--g-01); border-radius: 80rem; background: #fafafa; box-shadow: inset 3rem 3rem 8rem rgba(0, 0, 0, .1);}
.intro-login input:disabled {border: none; background: #fafafa;}
.intro-login a {display: block; height: 100rem; margin-top: 10rem; line-height: 107rem; color: #fff; font-size: 35rem; border-radius: 50rem; background: var(--gr-yellow); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}

.menu-wrap {height: 100%; align-content: center; padding-top: 135px;}

/* main-list */
.main-menu {box-sizing: border-box; justify-items: center;}
.main-list {width: 100%; height: 378px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));  margin-bottom: 3rem; margin-left: 1.5rem; margin-right: 1.5rem;}
.main-list li {position: relative; overflow: hidden; border-top-left-radius: 90rem; border-top-right-radius: 30rem; border-bottom-left-radius: 30rem; border-bottom-right-radius: 90rem; text-align: left;}
.main-list li a {position: relative; display: flex; height: 100%; font-size: 35rem; color: #fff; padding: 24px 0px;}
.main-list li a i {position: absolute; width: 200px; right: 0px; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center;}
.main-list li a i img {display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle;}
.main-list .title-box {display: flex; flex-direction: column; margin-top: 10px; margin-left: 30px;}
.main-list .subtitle {font-size: 18px;}
.main-list .title {font-size: 25px;}
#mainLayer ul {gap: 15rem;}
#mainLayer li {min-width: 360rem; box-sizing: border-box;}
#mainLayer li a {position: relative; display: flex; align-items: center; height: 170rem; padding: 30rem 30rem 20rem; padding-right: 150rem; line-height: 1.5; text-align: left; font-size: 25rem; color: var(--g-01); border-radius: 30rem; background: var(--gr-gray2); box-shadow: inset 4rem 4rem 6rem rgba(255, 255, 255, .8), inset -2rem -3rem 6rem rgba(0, 0, 0, .3), inset 1rem 1rem 3rem rgba(0, 0, 0, .2);}
#mainLayer li a img {position: absolute; right: 30rem; max-width: 150rem; max-height: 100%;}

/* sub-list */
.sub-menu {width: 100%; justify-items: center;}
.sub-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: fit-content; gap: 30rem; color: #5F5F5F; padding: 8px 0px; font-size: 24px;}
.sub-list li {justify-items: center;}

/* main-step */
#main {overflow: hidden; height: var(--height-full); text-align: center; background: url(../images/main/main-bg.png) no-repeat center / cover;}
#main:has(.main-step-wrap)::before {opacity: .1; position: absolute; left:0; top:0; content:''; width:100%; height: 100%; background: url(../images/main/step-bg.png) no-repeat center / cover; mix-blend-mode: screen;}
.main-step-wrap {height: 100%;}
.main-step {position: relative; width: 100%; gap: 10rem; margin-top: -80rem;}
.main-step::before {position: absolute; left: 50%; bottom: 0; content:''; width: calc(100% - 26rem); height: 50rem; background: url(../images/main/step-dot.svg) no-repeat center / 100%; transform: translateX(-50%);}
.main-step__item {position: relative; padding-bottom: 75rem;}
.main-step__item a {position: relative; display: block; height: 610rem; background-image: url(../images/main/step-bg-white.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.main-step__item svg {width: 100%; height: 100%;}
.main-step__txt {position: absolute; left:0; top:50%; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 90%; margin-top: -20rem; padding: 0 50rem; text-align: center; color: #fff; transform: translateY(-50%); box-sizing: border-box;}
.main-step__img {display: flex; justify-content: center; align-items: center; width: 215rem; height: 215rem; margin-bottom: 30rem; border-radius: 100%; background-color: #C8F0FD;}
.main-step__img img {max-height: 160rem;}
.main-step__txt dt {margin-bottom: 10rem; font-size: 35rem; color: var(--b-01);}
.main-step__txt dd {font-family: var(--font-basic); font-size: 17px; font-weight: 500; color: #888;}
.main-step__dot {position: absolute; left: 50%; bottom: 0; display: block; width: 50rem; height: 50rem; border-radius: 100%; transform: translateX(-50%);}
.main-step__dot::after {position: absolute; left:50%; top: 50%; content:''; display: block; width: 18rem; height: 18rem; border-radius: 100%; background: var(--gr-yellow); transform: translate(-50%, -50%); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.main-step__item.locked a {background-image: url(../images/main/step-bg-gray.svg);}
.main-step__item.locked a::after {position: absolute; left:50%; top: 50%; content:''; width: 110rem; height: 110rem; margin-top: -20rem; border-radius: 100%; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom), 0 0 30rem rgba(0, 0, 0, .2); background: #fff url(../images/layout/ic-locked.svg) no-repeat center / 50%; transform: translate(-50%, -50%);} 
.main-step__item.locked .main-step__txt dt,
.main-step__item.locked .main-step__txt dd {color: rgba(34, 34, 34, .3);}
.main-step__item.locked .main-step__img {filter: grayscale(1); background-color: #ccc;}
.main-step__item.locked .main-step__img img {opacity: .5;}
.main-step__item.locked .main-step__dot::after {background: var(--gr-gray);}

@media screen and (max-width: 1068px){
    .main-list .subtitle {font-size: 14px;}
    .main-list .title {font-size: 19px;}
}

@media screen and (max-width: 862px){
    .main-list .subtitle {font-size: 10px;}
    .main-list .title {font-size: 15px;}
}