@charset "utf-8";

.main_pc {display: block;}

/************** Main **************/
.main_wrap {width: 100%;height: calc(var(--vh, 1vh) * 100);position: relative;overflow: hidden;color: #fff;}
.main_logo {position: absolute;top: 5%;left: 5%;}

.main_wrap .lang_btn {top: 5%;z-index: 9;}
.main_wrap .lang_btn h3 {color: #fff;}
.main_wrap .lang_btn h3::before {background: url('../img/lang_btn_w.png') no-repeat;}
.main_wrap .lang_btn h3::after {background: url('../img/icon_arrow_w.png') no-repeat;}
.main_wrap .select_language {z-index: 9;}


.main_center {position: absolute;top: 15%;left: 50%;transform: translateX(-50%);width: 100%;font-family: 'joly';text-align: center;z-index: 5;}
.main_center h1 {font-size: 6.4rem;line-height: 8rem;letter-spacing: 0.3rem;}
.main_center p {font-size: 2.2rem;line-height: 4.8rem;letter-spacing: 0.1rem;}

.main_list {width: 100%;height: 100vh;position: absolute;top: 0;left: 0;right: 0;}
.main_list ul {width: 100%;height: 100%;display: flex;}
.main_list li {width: 33.3%;outline: 1px solid rgba(255, 255, 255, 0.2);position: relative;}
.main_list li::before {content: '';position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;background-size: cover;opacity: 0;transition: opacity 0.5s ease;z-index: 0;}
.main_list li .text_box {position: absolute;bottom: 5.7rem;left: 7vw;}
.main_list li .text_box > a {color: #fff;}
.main_list li .text_box h2 {font-size: 4.6rem;line-height: 5.8rem;letter-spacing: 0.3rem;font-family: 'joly';}
.main_list li .text_box p {font-size: 1.8rem;line-height: 3.4rem;letter-spacing: 0.1rem;margin: 1rem 0 5.5rem 0;font-weight: 300;}
.main_list li .text_box span {position: relative;}
.main_list li .text_box span i {font-size: 1.2rem;line-height: 2rem;letter-spacing: 0.3rem;display: block;font-weight: 500;}
.main_list li .text_box span::after {content: '';display: inline-block;background: url('../img/icon_main_move.png') no-repeat;width: 38px;height: 9px;position: absolute;top: 50%;left: 10.5rem;transform: translateY(-50%);}

/* hover시, 배경이미지 */
.main_list li:nth-child(1)::before {background: url('../img/main_hover01.png');}
.main_list li:nth-child(2)::before {background: url('../img/main_hover02.png');}
.main_list li:nth-child(3)::before {background: url('../img/main_hover03.png');}
.main_list li:hover::before {opacity: 1;}

.main_list li .text_box > a:hover span::after {animation: arrowStyle 1.2s infinite ease-out;}
@keyframes arrowStyle{
    0%  {left: 10.5rem}
    50% {left: 11.5rem}
    100%{left: 10.5rem}
}



@media only screen and (max-width:1020px){
    .main_pc {display: none;}


    .main_logo {top: 2rem;left: 2rem;}
    .main_logo img {height: 2.5rem;}

    .main_wrap .lang_btn {top: 3.5rem;right: 1rem;}

    .main_center {top: 11rem;}
    .main_center h1 {font-size: 3.4rem;line-height: 4.7rem;margin-bottom: 1rem;}
    .main_center p {font-size: 1.2rem;line-height: 2.4rem;}

    .main_list {position: static;width: auto;height: auto;}
    .main_list ul {display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: auto;}
    .main_list li {outline: none;width: 100%;border-top: 1px solid rgba(255, 255, 255, 0.2);}

    .main_list li::before {background: none;}
    .main_list li:hover::before {opacity: 0;}
    .main_list li .text_box {position: static;}
    .main_list li .text_box > a {display: inline-block;width: auto;height: 100%;padding: 2.8rem 0;margin: 0 3rem;box-sizing: border-box;z-index: 9;position: relative;}
    .main_list li .text_box h2 {font-size: 2.1rem;line-height: 2.7rem;letter-spacing: 0.1rem;}
    .main_list li .text_box p {font-size: 1.2rem;line-height: 1.7rem;letter-spacing: 0.1rem;margin: 0.5rem 0 1.6rem 0;}
    .main_list li .text_box span i {display: none;}
    .main_list li .text_box span::after {left: 0;}
    .main_list li .text_box > a:hover span::after {animation: none;}

}

/* 모바일 */
@media only screen and (max-width:768px){




}