@import url("common.css");

/* common */
.eyebrow{text-transform: uppercase; font-weight: 700; color:var(--white); letter-spacing: 0;}
.title_area{display: flex; flex-direction: column; gap:15px; padding: 0 70px 50px; box-sizing:border-box; text-align:center; color:var(--white); width: 100%; position: relative;}

.swiper-arrow-button{display: block; border:0; padding:0; background:none; overflow: hidden; position: absolute; top:50%; margin-top: -25px; cursor:pointer; width: 50px; height: 50px;}
.swiper-arrow-button.swiper-button-lock{display: none;}
.swiper-arrow-button::after{content:'\e2ea'; display: block; width: 100%; height: 100%; line-height: 50px; font-size:50px; color:var(--white); opacity: 0.5; position: absolute; left:0; top:0; transition:all .3s ease; font-family:var(--icon); text-align:center; z-index: 2;}
.swiper-arrow-button.swiper-arrow-button-next::after{content:'\e5e1';}
.swiper-arrow-button:hover::after{opacity: 1;}

.swiper-arrow-button.swiper-arrow-button-prev{left: 0;}
.swiper-arrow-button.swiper-arrow-button-next{right: 0;}

.btn_area{display: flex; justify-content: center; padding: 50px 0 0;}

.date{font-size: 0.889rem; font-weight: 300; letter-spacing: 0; color:var(--white); opacity: 0.6;}
.date::before{content:'\ebcc'; display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; font-size:20px; font-weight: 400; font-family:var(--icon); color:inherit;}



/* fullpage */
#fullpage{position: relative; z-index: 9; margin-top: -100vh; z-index: 0;}

.section{display: block; width: 100%; height: 100vh !important; overflow: hidden !important; position: relative; z-index: 2;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}

.footer_section.section{height: auto !important;}
.footer_section.section .fp-overflow{height: auto !important;}


.scroll_down{padding: 0; display: flex; gap:3px; border:0; font-size:0; background:none; position: absolute; right: 50%; margin-right: -795px; bottom: 50px; z-index: 10; cursor:pointer;}
.scroll_down i{display: block; width: 22px; height: 35px; overflow: hidden; font-style: normal; position: relative;}
.scroll_down i::before{content:'\ead0'; display: block; width: 22px; height: 22px; line-height: 22px; font-size:22px; font-family: var(--icon); position: absolute; left: 0; top:0; font-weight: 200; color:var(--white); animation: scroll_down 1.5s ease-in-out infinite;}
.scroll_down img{width: 20px; height: auto;}


@keyframes scroll_down {
	0% { transform:translateY(-32px); opacity: 0; }
	50% { transform:translateY(0); opacity: 1;}
	100% { transform:translateY(32px); opacity: 0;}
}

/* visual */
@keyframes visualPagBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes visualBgZoomIn { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes visualTxtFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
#visual{width: 100%; min-height: 100vh; height: var(--vh); position: relative; overflow: hidden;}
#visual2{position: relative; width: 100%; height: 100%;}
.main_bg{position:sticky; top:0; width: 100%; min-height: 100vh; height: var(--vh); background:#000000; z-index: 0;}

.visual_swiper{position: relative; width: 100%; height: 100%;}
.visual_swiper .swiper-slide{position: relative; width: 100%; height: 100%; overflow: hidden;}
.visual_swiper .swiper-slide .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center; background-size:cover;  transform-origin: center center;}
.visual_swiper .swiper-slide .v_bg::after{content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; background: linear-gradient(125deg, #161F3C 5.27%, rgba(22, 31, 60, 0.00) 78.92%);}
.visual_swiper .swiper-slide .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); text-align:left; z-index: 10; display: flex; flex-direction: column; gap:20px;}
.visual_swiper .swiper-slide .v_txt h4{display: block; font-weight: 400; color:var(--white); }
.visual_swiper .swiper-slide .v_txt h2{font-size:4.167rem; font-family: var(--eng); font-weight: 700; letter-spacing: 0; line-height: 120%; color:var(--white);}
.visual_swiper .swiper-slide .v_txt p{font-weight: 400; color:var(--white);}
.visual_swiper .swiper-slide .v_txt p br{display: block;}
.visual_swiper .swiper-slide:not(.swiper-slide-active) .v_bg{animation: none; transform: scale(1);}
.fp-viewing-page1 .visual_swiper .swiper-slide.swiper-slide-active .v_bg{transform: scale(1); animation: visualBgZoomIn 7s ease-out forwards;}
.fp-viewing-page1 .visual_swiper .swiper-slide.swiper-slide-active .v_txt h4{opacity: 0; transform: translateY(30px);animation: visualTxtFadeUp 0.75s ease forwards; animation-delay: 0.12s;}
.fp-viewing-page1 .visual_swiper .swiper-slide.swiper-slide-active .v_txt h2{opacity: 0; transform: translateY(30px);animation: visualTxtFadeUp 0.85s ease forwards; animation-delay: 0.24s;}
.fp-viewing-page1 .visual_swiper .swiper-slide.swiper-slide-active .v_txt p{opacity: 0; transform: translateY(30px);animation: visualTxtFadeUp 0.9s ease forwards; animation-delay: 0.4s;}

.visual_pagination_wrap{position: fixed; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 10; box-sizing: border-box; display: flex; align-items: center; gap:30px;}
.visual_pagination_wrap .visual_pagination{display: flex; flex-direction: row; align-items: center; gap: 0; position: static !important; width: auto !important;}
.visual_pagination_wrap .visual_pagination .swiper-pagination-bullet{width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; opacity: 1; background: transparent;}
.visual_pagination_wrap .visual_pagination .visual_pag_btn{display: flex; flex-direction: row; align-items: center; gap: 0; margin: 0; padding: 0 20px 0 0; border: 0; background: transparent; cursor: pointer; font-family: var(--eng); color: rgba(255,255,255,0.45); line-height: 100%; transition: color 0.35s ease;}
.visual_pagination_wrap .visual_pagination .visual_pag_btn:last-child{ padding-right: 0; }
.visual_pagination_wrap .visual_pagination .visual_pag_num{font-size: 0.778rem; font-weight: 600; letter-spacing: 0; text-align: left;}
.visual_pagination_wrap .visual_pagination .visual_pag_bar{display: none; width: 100px; height: 2px; margin: 0 0 0 20px; background: rgba(255,255,255,0.25); overflow: hidden; border-radius: 1px;}
.visual_pagination_wrap .visual_pagination .visual_pag_bar_in{display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--white);}
.visual_pagination_wrap .visual_pagination .swiper-pagination-bullet-active{color: var(--white);}
.visual_pagination_wrap .visual_pagination .swiper-pagination-bullet-active .visual_pag_bar{display: block;}
.visual_pagination_wrap .visual_pagination .swiper-pagination-bullet-active .visual_pag_num{font-weight: 600;}

.visual_pagination_wrap .swiper-arrows{display: flex; gap:10px;}
.visual_pagination_wrap .swiper-arrow-button{position: relative; left: auto; top:auto; right: auto; margin: 0; width: 32px; height: 32px;}
.visual_pagination_wrap .swiper-arrow-button::after{line-height: 32px; font-size:32px; font-weight: 200;}
.visual_pagination_wrap .scroll_down{right: 0; margin-right: 0; bottom: 0;}

.visual_pagination_wrap{opacity: 0; visibility: hidden; transition: all .3s linear;}
.fp-viewing-page1 .visual_pagination_wrap{opacity: 1; visibility: visible;}


.visual_swiper .swiper-slide .v_txt{opacity: 0; visibility: hidden; transition: all .3s linear;}
.fp-viewing-page1 .visual_swiper .swiper-slide .v_txt{opacity: 1; visibility: visible;}






/* Corporate Support Program */
@keyframes supportFadeUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
#support { position: relative; overflow: hidden; box-sizing: border-box;}
#support::after{content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; background:url('/img/main_bg.png') no-repeat center/cover;}
#support .support_in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
#support .support_list{padding: 50px 0; display: flex; width: 100%; max-width:1020px; margin:0 auto;}
#support .support_list li{text-align:center; width: 50%; box-sizing:border-box; padding: 0 20px;}
#support .support_list li a{display: block;}
#support .support_list li img{margin: 0 auto 40px; width: auto; height: 100px;}
#support .support_list li h3{font-weight: 600; color:var(--white);}
#support .support_list li p{color:rgba(255,255,255,.7); padding-top: 10px;}
#support .title_area .eyebrow, #support .title_area h2, #support .support_list li{opacity: 0; transform: translateY(100px); animation: none;}
#support.action .title_area .eyebrow{animation: supportFadeUp 0.75s ease forwards; animation-delay: 0.5s;}
#support.action .title_area h2{animation: supportFadeUp 0.75s ease forwards; animation-delay: 0.8s;}
#support.action .support_list li:nth-child(1){animation: supportFadeUp 0.75s ease forwards; animation-delay: 0.9s;}
#support.action .support_list li:nth-child(2){animation: supportFadeUp 0.75s ease forwards; animation-delay: 1s;}
#support.action .support_list li:nth-child(3){animation: supportFadeUp 0.75s ease forwards; animation-delay: 1.1s;}
#support.action .support_list li:nth-child(4){animation: supportFadeUp 0.75s ease forwards; animation-delay: 1.2s;}
@media (prefers-reduced-motion: reduce) { #support .title_area .eyebrow, #support .title_area h2, #support .support_list li { opacity: 1; transform: none; animation: none !important; } }





/* NOTICE */
@keyframes noticeFadeUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
#notice::after{content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; background:url('/img/main_bg.png') no-repeat center/cover;}
#notice .notice_in{position: relative; z-index: 2;}
#notice .notice_swiper{}
#notice .notice_swiper .swiper-slide a{display: block; padding: 50px 40px; box-sizing:border-box; background: rgba(255, 255, 255, 0.10); transition: all .3s linear; position: relative; pointer-events: none; opacity: 0;}
#notice .notice_swiper .swiper-slide.is-visible a{pointer-events: auto; opacity: 1;}
#notice .notice_swiper .swiper-slide a::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border: 1px solid rgba(255, 255, 255, 0.15); transition: all .3s linear; position: absolute; left: 0; top:0;}
#notice .notice_swiper .swiper-slide a:hover{background:rgba(255,255,255,.2); }
#notice .notice_swiper .swiper-slide a:hover::before{border-color: rgba(255,255,255,.3);}
#notice .notice_swiper .swiper-slide a .badge{display: inline-block; margin: 0 0 20px; font-size:13px; line-height: 30px; font-weight: 700; color:var(--white); padding: 0 16px; box-sizing:border-box; background:var(--sub2); border-radius:30px; text-transform: uppercase; text-align:center;}
#notice .notice_swiper .swiper-slide a h3{font-weight: 600; line-height: 120%; color:var(--white); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#notice .notice_swiper .swiper-slide a .text_box{margin-top: 8px; color:rgba(255,255,255,.7); font-weight: 400; line-height: 1.6em; height: 3.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#notice .notice_swiper .swiper-slide a .date{margin-top: 20px;}
#notice .title_area .eyebrow, #notice .title_area h2, #notice .title_area .swiper-arrow-button, #notice .notice_wrap{opacity: 0; transform: translateY(100px); animation: none;}
#notice.action .title_area .eyebrow{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.5s;}
#notice.action .title_area h2{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.8s;}
#notice.action .title_area .swiper-arrow-button-prev{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.85s;}
#notice.action .title_area .swiper-arrow-button-next{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.9s;}
#notice.action .notice_wrap{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.95s;}
@media (prefers-reduced-motion: reduce) { #notice .title_area .eyebrow, #notice .title_area h2, #notice .title_area .swiper-arrow-button, #notice .notice_wrap { opacity: 1; transform: none; animation: none !important; } }


/* NEWSLETTER */
#news::after{content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; background:url('/img/main_bg.png') no-repeat center/cover;}
#news .news_in{position: relative; z-index: 2;}
#news .news_swiper .swiper-slide a{display: block; position: relative; box-sizing: border-box;}
#news .news_swiper .swiper-slide a::before{content:''; display: block; width: 100%; height: 99%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.10); position: absolute; left: 0; top:0; box-sizing: border-box; transition: all .3s linear;}
#news .news_swiper .swiper-slide a{pointer-events: none; opacity: 0;}
#news .news_swiper .swiper-slide.is-visible a{pointer-events: auto; opacity: 1;}
#news .news_swiper .swiper-slide a:hover::before{background:rgba(255,255,255,.2); border-color: rgba(255,255,255,.3);}
#news .news_swiper .swiper-slide a .thumb{aspect-ratio:3/1.6; overflow: hidden; position: relative; z-index: 5;}
#news .news_swiper .swiper-slide a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover; transition: all .3s linear;}
#news .news_swiper .swiper-slide a:hover .thumb img{transform: scale(1.05);}
#news .news_swiper .swiper-slide a .desc{padding: 30px; box-sizing:border-box; position: relative; z-index: 5;}
#news .news_swiper .swiper-slide a .desc h3{font-weight: 400; color:var(--white); font-weight: 400; line-height: 1.6em; height: 3.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#news .news_swiper .swiper-slide a .desc .date{margin-top: 16px;}
#news .title_area .eyebrow, #news .title_area h2, #news .title_area .swiper-arrow-button, #news .news_wrap{opacity: 0; transform: translateY(100px); animation: none;}
#news.action .title_area .eyebrow{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.5s;}
#news.action .title_area h2{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.8s;}
#news.action .title_area .swiper-arrow-button-prev{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.85s;}
#news.action .title_area .swiper-arrow-button-next{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.9s;}
#news.action .news_wrap{animation: noticeFadeUp 0.75s ease forwards; animation-delay: 0.95s;}
@media (prefers-reduced-motion: reduce) { #news .title_area .eyebrow, #news .title_area h2, #news .title_area .swiper-arrow-button, #news .news_wrap { opacity: 1; transform: none; animation: none !important; } }



#fp-nav {margin: 0 !important; position:fixed; left:50px; top:50%; transform:translateY(-50%); z-index: 99; transition:all .4s;}
#fp-nav ul{display: flex; flex-direction: column; gap:20px;}
#fp-nav ul li{position:relative; line-height: 1;} 
#fp-nav ul li:last-of-type{display: none;}
#fp-nav ul li a{display: block; box-sizing:border-box; line-height: 1; padding-left: 22px; position: relative; box-sizing: border-box;}
#fp-nav ul li a::before{content:''; display: block; width: 15px; height: 15px; border-radius: 50%; background:none; position: absolute; left: 0; top:3px; background:transparent; transition: all .3s linear;}
#fp-nav ul li a::after{content:''; display: block; width: 7px; height: 7px; border-radius: 50%; background:none; position: absolute; left: 4px; top:7px; background:rgba(255,255,255,0.5); transition: all .3s linear;}
#fp-nav ul li a .fp-sr-only{font-size:14px;  line-height: 1; letter-spacing: 0; font-weight: 600; color:var(--white); opacity: 0;}
#fp-nav ul li a.active .fp-sr-only{opacity: 1;}

#fp-nav ul li a.active::before{background:rgba(255,255,255,.3);}
#fp-nav ul li a.active::after{background:rgba(255,255,255,.5);}

#fp-nav ul li .fp-tooltip{display: none;}
.fp-viewing-page5 #fp-nav {display: none;}



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


.scroll_down{right: 5%; margin-right: 0;}

#fp-nav {left:3%; }

    

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


    #fp-nav {display: none;}


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



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* common */
.title_area{gap:10px; padding: 0 60px 30px;}

.swiper-arrow-button{margin-top: -20px; width: 40px; height: 40px;}
.swiper-arrow-button::after{line-height: 40px; font-size:40px;}

.btn_area{padding: 30px 0 0;}

.scroll_down{bottom: 30px;}
 



.visual_swiper .swiper-slide .v_txt{gap:15px;}
.visual_swiper .swiper-slide .v_txt h2{font-size:3.611rem;}

.visual_pagination_wrap{bottom: 30px;}





/* Corporate Support Program */
#support .support_list{padding: 30px 0;}
#support .support_list li{padding: 0 10px;}
#support .support_list li img{margin: 0 auto 30px; width: auto; height: 80px;}


/* NOTICE */
#notice .notice_swiper .swiper-slide a{padding: 30px;}
#notice .notice_swiper .swiper-slide a .badge{margin: 0 0 15px;}
#notice .notice_swiper .swiper-slide a .text_box{margin-top: 5px;}
#notice .notice_swiper .swiper-slide a .date{margin-top: 15px;}



/* NEWSLETTER */
#news .news_swiper .swiper-slide a .desc{padding: 20px;}
#news .news_swiper .swiper-slide a .desc .date{margin-top: 10px;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* common */
.title_area{gap:6px; padding: 0 50px 20px;}

.swiper-arrow-button{margin-top: -15px; width: 30px; height: 30px;}
.swiper-arrow-button::after{line-height: 30px; font-size:30px;}

.btn_area{padding: 20px 0 0;}
.date::before{font-size:16px;}


.scroll_down{bottom: 20px;}
.scroll_down i{width: 17px; height: 30px;}
.scroll_down i::before{width: 17px; height: 17px; line-height: 17px; font-size:17px;}
.scroll_down img{width: 17px; height: auto;}


.visual_swiper .swiper-slide .v_txt{gap:10px;}
.visual_swiper .swiper-slide .v_txt h2{font-size:2.778rem;}
.visual_swiper .swiper-slide .v_txt p {text-wrap: balance;}
.visual_swiper .swiper-slide .v_txt p br{display: none;}

.visual_pagination_wrap{bottom: 20px; gap:20px;}
.visual_pagination_wrap .visual_pagination .visual_pag_btn{padding: 0 10px 0 0;}
.visual_pagination_wrap .visual_pagination .visual_pag_bar{margin: 0 0 0 10px; width: 50px;}
.visual_pagination_wrap .swiper-arrow-button{width: 24px; height: 24px;}
.visual_pagination_wrap .swiper-arrow-button::after{line-height: 24px; font-size:24px;}




/* Corporate Support Program */
#support .support_list{padding:0; flex-wrap: wrap; gap:15px 0;}
#support .support_list li{width: 50%; padding: 0 10px;}
#support .support_list li img{margin: 0 auto 10px; width: auto; height: 50px;}
#support .support_list li p{padding-top: 6px;}



/* NOTICE */
#notice .notice_swiper .swiper-slide a{padding:25px 20px;}
#notice .notice_swiper .swiper-slide a .badge{font-size:12px; line-height: 25px; padding: 0 12px;}
#notice .notice_swiper .swiper-slide a .date{margin-top: 10px;}

}