@charset "utf-8";

/*========================================================
Main
========================================================*/
/*----------------------------------------
Common
----------------------------------------*/
.section { position: relative; min-height: 100vh; padding: var(--section-pd)}
h1.mtitle { font-size: 70px; font-weight: 800; line-height: 1.3; text-align: center; margin-bottom: 40px}
h1.mtitle strong { font-weight: 800; color: var(--color-font)}
h1.mtitle .eng { font-size: 74px; font-weight: 700}
h1.mtitle .pst { font-size: 34px}
p.mtitle-sub { font-size: 24px;}
/*h1.mtitle + .mtitle-sub { margin-top: -30px}*/
p.mtitle-sub-round { text-align: center; margin-bottom: 15px}
p.mtitle-sub-round span { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 50px; font-size: 24px; font-weight: 500; border: 2px solid #333; border-radius: 30px}

@media (max-width: 991px){
	h1.mtitle { font-size: 60px; margin-bottom: 10px}
	p.mtitle-sub { font-size: 20px; text-align: center}
}
@media (max-width: 575px){
	h1.mtitle { font-size: 40px;}
	p.mtitle-sub { font-size: 16px; line-height: 1.4}
}

/* table style1 */
.tbl-style1 { border-bottom: 1px solid #eee}
.tbl-style1 table { border-collapse: separate; border-spacing: 2px;}
.tbl-style1 th, .tbl-style1 td { font-size: 18px; font-weight: 600; text-align: center; padding: 10px 0}
.tbl-style1 th { color: #fff; background: #666}
.tbl-style1 tr:nth-child(2n) { background: #F4F4F4}

/* leveltest */
.leveltest-detail .tbl-style1 th:nth-of-type(2) { background: var(--color-base)}
.leveltest-detail .tbl-style1 th:nth-of-type(3) { background: #129759}

.leveltest-detail .tbl-style1 td:first-of-type { text-align: left; padding-left: 40px}
.leveltest-detail .tbl-style1 td:nth-of-type(2) { color: var(--color-base)}
.leveltest-detail .tbl-style1 td:nth-of-type(3) { color: #129759}

/* roadmap */
.roadmap-con .tbl-style1 th:nth-of-type(1) { background: var(--color-base);}
.roadmap-con .tbl-style1 th:nth-of-type(2) { background: var(--color-base); opacity: 0.8}
.roadmap-con .tbl-style1 th:nth-of-type(3) { background: #1d77d1}
.roadmap-con .tbl-style1 th:nth-of-type(4) { background: #1d77d1; opacity: 0.8}

.roadmap-con .tbl-style1 td:nth-of-type(1) { color: var(--color-base); background: rgb(121, 48, 179, 0.08)}
.roadmap-con .tbl-style1 td:nth-of-type(3) { color: #1d77d1; background: rgb(29, 119, 209, 0.08)}

/* scroll */
.scroll-box { height: 50vh; background: #f5f5f5; overflow-y: auto}
.scroll-box .scroll-in { padding: 20px}


/*----------------------------------------
Visual
----------------------------------------*/
/*.visual { height: 100vh; background: #000;}*/
.visual { position: relative; height: 100vh}
.section.visual { padding: 0}
.main-visual { position: relative; height: 100%}

/*--- slide ---*/
.main-visual .swiper-slide.vs1 { background: #010822}
.main-visual .swiper-slide.vs2 { background: #01030e; z-index: 0}
.main-visual .swiper-slide.vs2::after { content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: #001d3f; z-index: -1}
.main-visual .swiper-slide.vs3 { background: url("/assets2/img/main/main_visual_03.jpg") center 0 /cover no-repeat}
.main-visual .swiper-slide.vs3::after { content: none}
.main-visual .swiper-slide-active .imgbox img { transform: scale(1, 1) rotate(0.005deg);}
.main-visual .swiper-slide .conbox-max { height: 100%}

/* imgbox */
.main-visual .imgbox { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%)}
.main-visual .imgbox img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1, 1.1); transition: transform 6s ease-in-out }
.main-visual .swiper-slide.vs3 .imgbox.pc { display: block}
.main-visual .swiper-slide.vs3 .imgbox.mb { display: none}

/*.main-visual .swiper-slide.vs3 .imgbox { left: auto; width: auto; height: auto; right: 100px; transform: translateY(-50%)}
.main-visual .swiper-slide.vs3 .imgbox img { transform: scale(1, 1); transform-origin: right}
.main-visual .swiper-slide.vs3.swiper-slide-active .imgbox img { transform: scale(0.9, 0.9) rotate(0.005deg);}*/

@media (max-width: 575px){
	.main-visual .swiper-slide .conbox-max { padding: 50px 20px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0));
	}
	.main-visual .swiper-slide.vs1 .conbox-max { background: linear-gradient(0deg, rgba(0, 10, 35, 0) 0%, rgba(0, 10, 35, 0.1) 10%, rgba(0, 10, 35, 0.3) 50%, rgba(0, 10, 35, 0.1) 90%, rgba(0, 10, 35, 0))}
	.main-visual .swiper-slide.vs1 .imgbox { width: 200%; transform: translate(-65%, -50%)}
	
	.main-visual .swiper-slide.vs3 .imgbox.pc { display: none}
	.main-visual .swiper-slide.vs3 .imgbox.mb { display: block;}
	.main-visual .swiper-slide.vs3 .imgbox.mb::after { content: ""; position: absolute; top: 50%; left: 0; width: 1410px; height: 530px; background: url(/assets2/img/main/main_visual_03_note.png) 0 0 no-repeat; transform: translateY(-50%)}
}

/* textbox */
.main-visual .textbox { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); white-space: nowrap;}
.main-visual .textbox h1 { font-family: "Poppins"; font-size: 120px; font-weight: 800; color: var(--color-font); line-height: 1.1; margin-bottom: 20px}
/*.main-visual .textbox h1 strong { display: flex; align-items: center; font-weight: 800; color: transparent; -webkit-text-stroke: 4px var(--color-font)}*/
.main-visual .textbox h1 strong { display: flex; align-items: center; font-weight: 800; color: var(--color-init);}
.main-visual .textbox h1 strong span { display: block; flex-shrink: 0}
.main-visual .textbox h1 strong .imgicon { margin-left: 30px}
.main-visual .textbox h1 strong .imgicon img { width: 90px}

.main-visual .textbox h2 { font-size: 34px; color: #fff; font-weight: 400; line-height: 1.3;}
.main-visual .swiper-slide-active .textbox h2 {	animation: text-active-animation 1.5s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; opacity: 0}

@keyframes text-active-animation {
	from { opacity: 0; transform: translateY(5rem);}
	to { opacity: 1; transform: translateY(0);}
}

.main-visual .textbox h3 { font-family: 'EsaManru'; font-size: 60px; font-weight: 500; color: #fff; line-height: 1; margin-bottom: 20px}
.main-visual .textbox h3 .eng { font-family: "Pretendard"; font-weight: 700}

.main-visual .textbox p { font-size: 30px; font-weight: 500; line-height: 1.4}

@media (max-width: 1320px){
	.main-visual .textbox h3 { font-size: 50px}
	.main-visual .textbox h2 { font-size: 30px;}
}
@media (max-width: 991px){
	.main-visual .textbox h2 { font-size: 24px;}	
}
@media (max-width: 575px){
	.main-visual .textbox { margin-top: -50px}
	.main-visual .textbox h3 { font-size: 40px; line-height: 1.2}
	.main-visual .textbox h2 { font-size: 22px;}
	.main-visual .swiper-slide.vs1 .textbox h3 em { display: block; font-size: 30px}
}


/*--- controlbox ---*/
.main-visual .controlbox { position: absolute; left: 0; bottom: 50px; width: 100%; height: 50px; z-index: 10}
.main-visual .controlbox .conbox-max { display: flex; align-items: center; height: 100%}

@media (max-width: 991px){
	.main-visual .controlbox { height: auto;}
	.main-visual .controlbox .conbox-max { flex-direction: column; gap: 50px;}
}
@media (max-width: 991px){
	.main-visual .controlbox { bottom: 30px;}
	.main-visual .controlbox .conbox-max { gap: 30px;}
}
/*.main-visual .controlbox .progress-box { position: relative; display: flex; align-items: center; width: 170px; height: 100%}
.main-visual .swiper-pagination { positi
on: relative; top: 0; left: 0; bottom: auto; display: flex; justify-content: space-between}
.main-visual .autoplay-progress { position: absolute; left: 30px; top: 50%; width: 100px; height: 3px; background-color: rgba(0, 0, 0, 0.1); margin-top: -2px}
.main-visual .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 4px; stroke: #000; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100}*/

.main-visual .controlbox .left-con { display: flex; align-items: center}
.main-visual .controlbox .progress-box { position: relative; display: flex; align-items: center; width: 170px; height: 100%}
.main-visual .swiper-pagination { position: relative; top: 0; left: 0; bottom: auto; display: flex; align-items: flex-end; gap: 5px; letter-spacing: 0; color: #fff}
.main-visual .swiper-pagination .current { font-size: 18px; font-weight: 600;}
.main-visual .swiper-pagination .bar { font-size: 14px; color: rgba(255, 255, 255, 0.7)}
.main-visual .swiper-pagination .total { font-size: 14px; font-weight: 500}
.main-visual .autoplay-progress { position: relative; flex-shrink: 0; width: 100px; height: 3px; background-color: rgba(255, 255, 255, 0.2); margin-left: auto}
.main-visual .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 5px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100}
/* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
   stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
 */

.main-visual .arrow-box { position: relative; display: flex; align-items: center; justify-content: space-between; width: 80px; height: 100%; padding-left: 15px}
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev { position: relative; left: 0; right: auto; top: 0; bottom: auto; width: 30px; height: 30px; margin-top: 0; background: url("/assets2/img/main/btn_arr_visual.svg") no-repeat center}
.main-visual .swiper-button-next { transform: scaleX(-1)}
.main-visual .swiper-button-next::after,
.main-visual .swiper-button-prev::after { font-size: 0}

@media (max-width: 991px){
	.main-visual .controlbox .left-con { }
}

.main-visual .controlbox .right-con { margin-left: auto}
.scroll-down { display: flex; flex-direction: column; align-items: center; gap: 3px;}
.scroll-down img { width: 20px}
.scroll-down .scroll-txt { display: flex; gap: 1px; font-size: 11px; color: #fff; font-weight: 600}
.scroll-down .scroll-txt span { display: block; animation: scroll-down-ani 2.5s ease-in-out 0s infinite}
.scroll-txt span:nth-child(1) { animation-delay: 1s;}
.scroll-txt span:nth-child(2) { animation-delay: 1.04s;}
.scroll-txt span:nth-child(3) { animation-delay: 1.08s;}
.scroll-txt span:nth-child(4) { animation-delay: 1.12s;}
.scroll-txt span:nth-child(5) { animation-delay: 1.16s;}
.scroll-txt span:nth-child(6) { animation-delay: 1.2s;}
.scroll-txt span:nth-child(7) { animation-delay: 1.24s;}
.scroll-txt span:nth-child(8) { animation-delay: 1.28s;}
.scroll-txt span:nth-child(9) { animation-delay: 1.32s;}
.scroll-txt span:nth-child(10) { animation-delay: 1.36s;}
.scroll-txt span:nth-child(11) { animation-delay: 1.4s;}

@keyframes scroll-down-ani {
    0% { opacity: 0; transform: translateY(-50%) rotateX(90deg)}
    20%, 80% { opacity: 1; transform: translateY(0) rotateX(0)}
    100% { opacity: 0; transform: translateY(50%) rotateX(-90deg)}
}

@media (max-width: 991px){
	.main-visual .controlbox .right-con { margin-left: 0}
}


/* splitting */
.main-visual h3 .char {
    opacity: 0;
    transform: translateX(100px);
    /*transition: transform 0.5s cubic-bezier(.3,0,.3,1), opacity 0.5s linear;
    transition-delay: calc(20ms + (30ms * var(--char-index)));*/
}
.main-visual .swiper-slide-active h3 .char {
	/*opacity: 1; transform: translateX(0);*/
	animation: visualh2 0.5s ease-in-out forwards;
	animation-delay: calc(20ms + (30ms * var(--char-index))); 
}
.main-visual .textbox p { opacity: 0; transform: translateY(50px)}
.main-visual .swiper-slide-active .textbox p { animation: visualp 0.8s 0.5s ease-in-out forwards;}


@keyframes visualh2 {
    0% { opacity: 0; transform: translateX(100px)}
    100% { opacity: 1; transform: translateX(0);}
}

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


/*----------------------------------------
Success
----------------------------------------*/
.section-success { position: relative; display: flex; align-items: center; width: 100%; height: 100vh; padding: 0; z-index: 10}
.section-success .conbox {}
/*.section-success .move_txt{ position: relative; display: block; font-size: 170px; font-weight: 900; font-family: var(--engFont); line-height: 100%; font-style: italic; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; white-space: nowrap; opacity: 0.7; color: #F8D899; transition: transform .5s linear;}*/
.section-success .move_txt { position: relative; display: block; font-family: 'EsaManru'; font-size: 110px; font-weight: 700; line-height: 1; font-style: italic; letter-spacing: 1px; white-space: nowrap; color: #111; transition: transform .5s linear;}
.section-success .move_txt + .move_txt { margin-top: 20px}
.section-success .inner_text_wrap .move_text_01 { transform: translate3d(2000px, 0, 0);}
.section-success .inner_text_wrap .move_text_02 { transform: translate3d(-2000px, 0, 0);}
.section-success .inner_text_wrap .move_text_03 { transform: translate3d(2000px, 0, 0);} 

@media (max-width: 1320px){
	.section-success .move_txt { font-size: 90px}
}
@media (max-width: 991px){
	.section-success { min-height: auto; height: auto; background: #F8D899; padding: var(--section-pd)}
	.section-success .inner_text_wrap { text-align: center}
	
	.section-success .move_txt + .move_txt { margin-top: 0}
	.section-success .move_txt { font-size: 36px; line-height: 1.3}	
	.section-success .inner_text_wrap .move_text_01 { display: inline-block; transform: translate3d(0, 0, 0) !important;}
	.section-success .inner_text_wrap .move_text_02 { display: inline-block; transform: translate3d(0, 0, 0) !important; margin-left: 8px}
	.section-success .inner_text_wrap .move_text_03 { transform: translate3d(0, 0, 0) !important;} 
}
@media (max-width: 575px){
	.section-success .move_txt { font-size: 24px;}
	.section-success .inner_text_wrap .move_text_02 { margin-left: 5px}
}


/*----------------------------------------
Business
----------------------------------------*/
.section-business { width: 100%; height: 100%; padding: 0;}
.section-business .inner { display: flex; flex-wrap: nowrap; height: 100vh;}
.section-business .in { flex-shrink: 0; position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
/*.section-business .in.left-con { background: var(--color-font)}*/

.section-business .in.left-con { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff}
/*.section-business .in.left-con h1.mtitle { font-size: 100px; text-align: left;}*/
.section-business .in.left-con h1.mtitle { font-size: 90px; text-align: left;}
.section-business .in.left-con p { font-size: 30px;}

/*.section-business .in.left-con h1.mtitle { font-size: 70px; text-align: left; transition: transform .3s linear; opacity: 0}
.section-business .in.left-con p { font-size: 30px; transition: transform .3s .3s linear; opacity: 0}

.section-business.on .in.left-con h1.mtitle { transform: translateY(200px); opacity: 1}
.section-business.on .in.left-con p { transform: translateY(200px); opacity: 1}*/

.section-business .in.right-con { background: #fff}
.section-business .in.right-con ul { display: flex; gap: 50px}
.section-business .in.right-con ul li { display: flex; flex-direction: column; align-items: center}
.section-business .in.right-con ul li .img-con { width: 300px;}
.section-business .in.right-con ul li .img-con img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0px 10px 30px rgba(0,0,0,0.3)}
/*
.section-business .in.right-con ul li .text-con { display: flex; flex-direction: column; align-items: center; margin-top: -40px}
.section-business .in.right-con ul li .text-con span { display: block; text-align: center}
.section-business .in.right-con ul li .text-con .title { max-width: 250px; font-size: 32px; font-weight: 700; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px 10px 0 0; padding: 10px 40px; margin-bottom: 20px}
.section-business .in.right-con ul li .text-con .text { font-size: 18px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0}*/
.section-business .in.right-con ul li .text-con { display: flex; flex-direction: column; align-items: center; margin-top: 30px}
.section-business .in.right-con ul li .text-con span { display: block;}
.section-business .in.right-con ul li .text-con .title { font-size: 40px; font-weight: 800; margin-bottom: 10px}
.section-business .in.right-con ul li .text-con .text { position: relative; font-size: 18px; line-height: 1.3; letter-spacing: 0; padding-left: 20px}
.section-business .in.right-con ul li .text-con .text::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; background: var(--color-base); border-radius: 50%}

@media (max-width: 1320px){
	.section-business .in.right-con ul { gap: 40px}
	.section-business .in.right-con ul li .img-con { width: 260px;}
}
@media (max-width: 991px){
	.section-business { min-height: auto; height: auto; background: #6637cb; padding: var(--section-pd)}
	.section-business .inner { flex-direction: column; height: auto}
	.section-business .in { height: auto;}
		
	.section-business .in.left-con { margin-bottom: 50px}
	.section-business .in.left-con h1.mtitle { font-size: 60px; text-align: center; margin-bottom: 10px}
	.section-business .in.left-con p { font-size: 20px; text-align: center}
	
	.section-business .in.right-con { background: #6637cb;}
	.section-business .in.right-con ul { gap: 30px}
	.section-business .in.right-con ul li .img-con { width: 190px}
	.section-business .in.right-con ul li .text-con { margin-top: 20px}
	.section-business .in.right-con ul li .text-con .title { font-size: 24px; color: #fff; margin-bottom: 0}
	.section-business .in.right-con ul li .text-con .text { font-size: 16px; color: #fff; text-align: center; padding-left: 0}
	.section-business .in.right-con ul li .text-con .text::before { content: none}		
}
@media (max-width: 767px){
	.section-business .in.right-con ul li .img-con { width: 150px}
	.section-business .in.right-con ul li .text-con .br { display: block}
}
@media (max-width: 575px){
	.section-business .in.left-con h1.mtitle { font-size: 40px; letter-spacing: 0;}
	.section-business .in.left-con p { font-size: 16px; line-height: 1.4}
	
	.section-business .in.right-con ul { flex-direction: column; gap: 50px}
	.section-business .in.right-con ul li .img-con { width: 200px}
	.section-business .in.right-con ul li .text-con { margin-top: 10px}
	.section-business .in.right-con ul li .text-con .br { display: inline-block}
	.section-business .in.right-con ul li .text-con br { display: none}
}


/*----------------------------------------
Solution
----------------------------------------*/
/*.section-solution { background: url("/assets2/img/main/main_solution_bg.jpg") center bottom no-repeat #061631; padding: 0}*/
.section-solution { background: url("/assets2/img/main/main_solution_bg.jpg") center bottom no-repeat #050d31; padding: 0; z-index: 1}
/*.section-solution::before { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; background: url("/assets2/img/main/main_solution_bgimg.jpg") center bottom repeat-x; z-index: -1}*/
/*.section-solution { background: url("/assets2/img/main/main_solution_bgimg.jpg") center bottom /cover no-repeat #050d31; padding: 0}
.section-solution::before { content: ""; position: absolute; left: 50%; bottom: 0; display: block; width: 2000px; height: 1878px; background: url("/assets2/img/main/main_solution_bd.png") center no-repeat; transform: translateX(-50%); z-index: 1}*/
/*.section-solution { background: url("/assets2/img/main/main_solution_bg.jpg") center bottom no-repeat; padding: 0}*/
.section-solution .conbox { display: flex; align-items: flex-start; color: #fff;}
.section-solution .conbox > div { width: 50%; padding: 0 10px}
.section-solution .solution-left { display: flex; justify-content: center}
.section-solution .solution-left .inner { display: flex; flex-direction: column; letter-spacing: 0; padding: 150px 0}
.section-solution .solution-left h1.mtitle { text-align: left}

.section-solution .solution-right { display: flex; justify-content: center}
.section-solution .solution-right ul { padding: 150px 0}
.section-solution .solution-right ul li { }
.section-solution .solution-right ul li + li { margin-top: 150px}

.section-solution .solution-right ul li .libox { position: relative; display: flex; gap: 30px}
.section-solution .solution-right ul li .libox img { max-width: 450px;}
.section-solution .solution-right ul li .textBox { display: flex; flex-direction: column; gap: 10px; color: #81be41; margin-top: 100px}
.section-solution .solution-right ul li .textBox .title { font-size: 30px; font-weight: 700}
.section-solution .solution-right ul li .textBox .text { font-size: 22px; font-weight: 400; line-height: 1.3}

@media (max-width: 1400px){
	.section-solution .conbox > .solution-left { width: 40%;}
	.section-solution .conbox > .solution-right { width: 60%;}
	.section-solution .solution-right ul li + li { margin-top: 100px}
	.section-solution .solution-right ul li .libox img { max-width: 350px;}
}
@media (max-width: 991px){
	.section-solution { min-height: auto; height: auto; padding: var(--section-pd)}
	.section-solution .conbox { flex-direction: column}
	
	.section-solution .conbox > .solution-left { width: 100%; margin-bottom: 50px}
	.section-solution .solution-left .inner { padding: 0}
	
	.section-solution .conbox > .solution-right { width: 100%;}	
	.section-solution .solution-right ul { padding: 0}
	.section-solution .solution-right ul li + li { margin-top: 50px}
	.section-solution .solution-right ul li .libox img { max-width: 300px; margin-left: -45px}
}
@media (max-width: 575px){
	.section-solution .solution-right ul li .libox { flex-direction: column; gap: 10px}
	.section-solution .solution-right ul li .libox img { max-width: 250px;}
	.section-solution .solution-right ul li .textBox { align-items: center; gap: 0; margin-top: 0}
	.section-solution .solution-right ul li .textBox .title { font-size: 24px}
	.section-solution .solution-right ul li .textBox .text { font-size: 18px}
	.section-solution .solution-right ul li .textBox .text br { display: none}
}


/*----------------------------------------
Pageview
----------------------------------------*/
/*.section-pageview { display: flex; align-items: center; justify-content: center; background: #F3F6FB}*/
.section-pageview { display: flex; align-items: center; justify-content: center; background: #fff}
.section-pageview .inner { }

.section-pageview h1.mtitle { margin-bottom: 30px}
.section-pageview .conbox { max-width: 1020px}
.section-pageview .conbox::before { content: ""; position: absolute; left: 0; top: 0; width: 115%; height: 115%; background: url("/assets2/img/main/pageview_shadow.png") 0 0 /contain no-repeat}

/* slide1 */
.pageview-slide1 { width: 900px; height: 599px; margin-left: 0}
.pageview-slide1::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/assets2/img/main/pageview_tablet.png") 0 0 /contain no-repeat; z-index: 2}
.pageview-slide1 .imgbox { position: absolute; left: 36px; top: 0; height: 100%; background: #fff;}
/*.pageview-slide1 .m1 .imgbox { background: linear-gradient(#fff, #f2f5da)}*/

/* slide2 */
.pageview-slide2 { position: absolute; right: 0; top: 125px; width: 264px; height: 510px; border-radius: 30px 46px 46px 30px; overflow: hidden}
.pageview-slide2::before { content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url("/assets2/img/main/pageview_phone.svg") center 0 /contain no-repeat; z-index: 2}
.pageview-slide2 .imgbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff;}

/* slide text */
.pageview-text .textbox { margin: 30px 0 0 40px}
.pageview-text .textbox strong { font-size: 30px; color: var(--color-font); font-weight: 700; margin-bottom: 10px}
.pageview-text .textbox p { font-size: 18px; font-weight: 500}


/* control */
.swiper-pagination.pageview-pagination { left: -100px; right: auto}

.pageview-pagination.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { width: 14px; height: 14px; background: transparent; border: 2px solid #111; opacity: 1; margin: 10px 0}
.pageview-pagination.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #111}


@media (max-width: 1320px){
	.section-pageview h1.mtitle { font-size: 60px;}
	.section-pageview .conbox { max-width: 800px; padding: 0;}
	.section-pageview .conbox::before { left: 20px; width: 104%; height: 104%;}

	.pageview-slide1 { width: 800px; height: 532px;}
	.pageview-slide1 .swiper-slide { border-radius: 30px;}
	/*.pageview-slide1 .imgbox { left: 50%; top: 5px; width: calc(100% - 30px); transform: translateX(-50%);}*/
	.pageview-slide1 .imgbox { left: 50%; top: 0; width: calc(100% - 30px); transform: translateX(-50%);}
	
	.pageview-slide2 { top: 110px; right: -100px;; width: 234px; height: 452px;}
	
	.swiper-pagination.pageview-pagination { left: -40px; margin-top: -50px;}
}
@media (max-width: 1200px){
	.pageview-text .textbox strong { font-size: 22px;}
	.pageview-text .textbox p { font-size: 16px;}
}
@media (max-width: 1100px){
	.section-pageview .conbox { max-width: 750px;}
	.pageview-slide1 { width: 750px; height: 498px;}
	.pageview-slide2 { right: -50px; width: 220px; height: 424px;}
	.pageview-slide2 .imgbox { left: 1px;}
}
@media (max-width: 991px){
	.section-pageview { min-height: auto; height: auto; padding: var(--section-pd)}
	.section-pageview h1.mtitle { font-size: 50px; margin-bottom: 20px;}

	.section-pageview .conbox { max-width: 500px; padding: 0 15px;}
	.section-pageview .conbox::before { content: none;}

	.pageview-slide1 { width: 500px; height: 332px;}
	.pageview-slide1 .swiper-slide { border-radius: 20px;}
	.pageview-slide1 .imgbox { width: calc(100% - 20px);}

	.pageview-slide2 { display: none;}

	.pageview-text .textbox { text-align: center; margin: 20px 0 0 20px;}
}
@media (max-width: 700px){
	.section-pageview .conbox { max-width: 400px;}
	.pageview-slide1 { width: 400px; height: 265px;}
}
@media (max-width: 575px){
	.section-pageview h1.mtitle { font-size: 40px; margin-bottom: 15px;}

	.pageview-slide1 { width: 300px; height: 199px; margin: 0 auto;}

	.pageview-text .textbox { margin: 50px 0 0 0}
	.pageview-text .textbox strong { text-align: center;}
	.pageview-text .textbox p br { display: none;}

	.swiper-pagination.pageview-pagination { left: 50%; top: 220px; display: flex; transform: translateX(-50%); margin-top: 0;}
	.pageview-pagination.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px;}
}



/*----------------------------------------
Preview
----------------------------------------*/
/* gsap */
/*.section-preview .titlebox { position: relative; display: flex; align-items: center; gap: 50px; margin-bottom: 50px; z-index: 3}
.section-preview h1.mtitle { margin: 0}
.section-preview p.mtitle-sub { margin: 0}
.section-preview .conbox { max-width: 1200px}
.section-preview .inner { position: relative; display: flex; gap: 40px;}*/

/* slide */
/*.section-preview .layoutbox { position: relative}
.preview-swiper { flex: 1; border-radius: 40px; margin: 0}
.preview-swiper .swiper-slide { position: absolute; height: 584px; border-radius: 40px; overflow: hidden;}

.preview-swiper .swiper-slide:nth-of-type(1) { position: relative; z-index: 1;}
.preview-swiper .swiper-slide:nth-of-type(2) { z-index: 2;}
.preview-swiper .swiper-slide:nth-of-type(3) { z-index: 3;}
.preview-swiper .swiper-slide:nth-of-type(4) { z-index: 4;}

.preview-swiper .swiper-slide img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover}*/

/* textbox */
/*.section-preview .textbox { width: 380px; background: #fff; border: 1px solid var(--color-base); border-radius: 40px; padding: 50px}
.section-preview .textbox h1 { font-size: 30px; font-weight: 700; color: var(--color-font); letter-spacing: -1px; margin-bottom: 30px}
.section-preview .textbox p { font-size: 18px; font-weight: 500}*/

/*.section-preview .overlay { height: 1500px}*/ /*--- 584*2 : 이미지 높이 * 개수 ---*/
/* gsap end */

.section-preview .conbox { max-width: 1200px}
.section-preview .slidebox { position: relative; display: flex; gap: 40px; height: 584px;}

/* Slide */
.preview-swiper { flex: 1}
.preview-swiper .swiper-slide { border-radius: 40px; overflow: hidden}
.preview-swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover}

/* Thumb */
.preview-swiper-thumb { width: 380px; background: #fff; border: 1px solid var(--color-base); border-radius: 40px; padding: 50px}
.preview-swiper-thumb .swiper-slide { background: #fff}
.preview-swiper-thumb h1 { font-size: 30px; font-weight: 700; color: var(--color-font); letter-spacing: -1px; margin-bottom: 20px; opacity: 0; transform: translateY(50px); transition: 1s}
.preview-swiper-thumb p { font-size: 20px; font-weight: 500; opacity: 0; transform: translateY(100px); transition: 1s}

.preview-swiper-thumb .swiper-slide-active h1 { opacity: 1; transform: translateY(0)}
.preview-swiper-thumb .swiper-slide-active p { opacity: 1; transform: translateY(0)}


/* Util */
.section-preview .controlbox { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; width: 380px; padding: 0 50px 50px 50px; z-index: 5}

.section-preview .swiper-button-next,
.section-preview .swiper-button-prev { position: relative; left: 0; right: auto; top: 0; bottom: auto; width: 30px; height: 30px; margin-top: 0; background: url("/assets2/img/main/btn_arr_preview.svg") no-repeat center}
.section-preview .swiper-button-next { transform: scaleX(-1)}
.section-preview .swiper-button-next::after,
.section-preview .swiper-button-prev::after { font-size: 0}

.section-preview  .swiper-pagination { position: relative; top: 0; width: auto}

.section-preview .controlbox button { display: none; width: 30px; height: 30px}
.section-preview .controlbox button.on { display: block}
.section-preview .controlbox button span { display: block; text-indent: -9999px}
.btn-stop { background: url("/assets2/img/main/icon_pause.svg") center /20px  no-repeat}
.btn-play { background: url("/assets2/img/main/icon_play.svg") center /16px  no-repeat; margin-left: 4px}

.section-preview .swiper-pagination { font-size: 12px}
.swiper-pagination-current { font-size: 16px; font-weight: 600}
.swiper-pagination-total { font-size: 14px}


/*----------------------------------------
Inquiry
----------------------------------------*/
.section-inquiry { display: flex; align-items: center; justify-content: center; background: var(--color-base); padding-bottom: 150px}
.section-inquiry .conbox { width: 100%;}
.section-inquiry .outter { display: flex; align-items: center; justify-content: space-between; gap: 50px;}

.section-inquiry .left-con { color: #fff; margin-top: -100px}
.section-inquiry .left-con h1.mtitle { text-align: left}

.section-inquiry .right-con { width: 100%; max-width: 750px}
.section-inquiry .right-con > .form-group { margin-bottom: 30px}
.section-inquiry .right-con .form-flex { gap: 20px}
.section-inquiry .right-con .form-item { z-index: 0}
.section-inquiry .right-con .form-item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 5px; z-index: -1}
.section-inquiry .right-con .form-item .latit { position: absolute; left: 15px; top: 14px; color: #fff; pointer-events: none; z-index: 5}
label.latit.star::after { content: "*"; display: inline-block; color: #ffc107; font-weight: 400; line-height: 1; vertical-align: middle; margin-left: 5px; font-size: 20px;}

.section-inquiry .right-con .form-basic { color: #fff; background: transparent; border: 0; outline: 1px solid transparent; transition: all 0.4s ease-in-out}
.section-inquiry .right-con .form-basic:focus { outline-color: #fff}
.section-inquiry .right-con .form-basic:focus + .latit,
.section-inquiry .right-con .form-basic.exist + .latit { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.section-inquiry .right-con select.form-basic { background: url("/assets2/img/common/select_arr.svg") right 10px center /22px no-repeat transparent; padding: 0 50px 0 15px; cursor: pointer}
.section-inquiry .right-con select.form-basic option { color: var(--color-init)}

.section-inquiry .right-con .form-flex > * { flex: 1}

.section-inquiry .right-con textarea.form-basic { height: 150px}

.section-inquiry .agree-box { display: flex; justify-content: space-between;}
.section-inquiry .agree-box .form-group { line-height: 1}
.section-inquiry .agree-box label span { display: block; color: #fff}
.section-inquiry .agree-box label a { position: relative; display: inline-block; color: #fff;}
.section-inquiry .agree-box label a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #fff}
.section-inquiry .agree-box input.checkradio + label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236637cb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); opacity: 0.3; transition: 0.3s}
.section-inquiry .agree-box input.checkradio:checked + label::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236637cb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-color: #ffc107; border-color: #ffc107; opacity: 1}

.btn.btn-inquiry { width: auto; color: #fff; font-weight: 700; border: 2px solid #fff;}
.btn.btn-inquiry:hover, .btn.btn-inquiry:focus { color: #ffc107; border-color: #ffc107}

/* modal */
.scroll-box.md-terms { max-width: 700px; max-height: 400px; font-size: 14px; color: #444}
.scroll-box.md-terms strong { font-weight: 700}

@media (max-width: 1200px){
	.section-inquiry .right-con { max-width: 600px}
}
@media (max-width: 1100px){
	.section-inquiry .right-con { max-width: 500px}
}
@media (max-width: 991px){
	.section-inquiry { min-height: auto; height: auto; padding: var(--section-pd)}
	.section-inquiry .outter { flex-direction: column; gap: 40px}
	
	.section-inquiry .left-con { margin-top: 0}	
	.section-inquiry .left-con h1.mtitle { text-align: center}
	
	.section-inquiry .right-con .form-flex { flex-direction: column; align-items: stretch}
}
@media (max-width: 574px){
	.section-inquiry .outter { gap: 30px}	
}




/*----------------------------------------
Up
----------------------------------------*/
.section.section-up { display: flex; align-items: center; justify-content: center; background: #fff; padding-bottom: 150px}
.section-up .outter { position: relative;}
.section-up .inner { position: relative;}

/* Mask */
.section-up .mask-text { position: relative; width: 100%; height: 210px; font-size: 0; border-radius: 20px; overflow: hidden;}
.section-up .mask-text::before { content: "EDUTEST"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 190px; font-weight: 900; color: transparent; white-space: nowrap; background: url("/assets2/img/main/up_bg.png") center /cover no-repeat; -webkit-background-clip: text;}
.zoom-circle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/assets2/img/main/up_bg.png") center /cover no-repeat; clip-path: circle(0%); transition: clip-path 1s 0.8s ease-out}

.section-up.on .zoom-circle { clip-path: circle(100%)}

/* Num */
.section-up .textbox { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; transform: translate(-50%, -50%); margin-top: -10px}
.section-up .textbox .up-num { display: block; font-size: 80px; font-weight: 600; opacity: 0; transition: all 0.5s 1.2s ease-out}
.section-up .textbox .up-num em { font-size: 50px}
.section-up .textbox p { font-size: 30px; font-weight: 500; margin-top: -20px; opacity: 0; transform: translateY(100px); transition: all 0.7s 1.3s ease-out}

.section-up.on .textbox .up-num { opacity: 1}
.section-up.on .textbox p { opacity: 1; transform: translateY(0);}

/* 참고 */
.section-up p.small { position: absolute; left: 20px; bottom: 15px; font-size: 13px; color: rgba(255, 255, 255, 0.7); opacity: 0; transition: all 0.5s 1.2s ease-out}

.section-up.on p.small { opacity: 1}

/* arrow */
.section-up .imgbox { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: -22px; clip-path: inset(100% 0 0 0); transition: all 0.5s 1.3s ease-out}
.section-up.on .imgbox { clip-path: inset(0)}


/*----------------------------------------
Product
----------------------------------------*/
/*.section-product { background: var(--color-font)}

.section-product .product-top { display: flex; align-items: flex-end; gap: 40px; color: #fff; padding-top: 10px; margin-bottom: 40px}
.section-product h1.mtitle { font-size: 55px; font-weight: 700; text-align: left; margin-bottom: 0}
.section-product .product-top p { font-size: 24px; font-weight: 400; margin-bottom: 10px}

.section-product .inner { position: relative; z-index: 0}
*/


/*.section-product .inner ul::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 500px; background: url("/assets2/img/main/main_product_bg.svg") 0 0 no-repeat; z-index: -1}*/

.section-product { height: 100vh; padding: 0}
.section-product .inner { position: relative; height: 100%; z-index: 0}

/*.section-product .inner ul { display: flex; flex-wrap: nowrap; height: 100%; background: url("/assets2/img/main/main_product_bg.svg") left 0 bottom -150px no-repeat #fff; padding: 0 25px 0 0; overflow: hidden}*/
.section-product .inner ul { display: flex; flex-wrap: nowrap; height: 100%; background: url("/assets2/img/main/main_product_bg.svg") center bottom -150px /90% no-repeat #fff; padding: 0 25px 0 0; overflow: hidden}
.section-product .inner ul li { position: relative; flex-shrink: 0;  display: flex; align-items: center; justify-content: center; width: 41vw; max-width: 785px; padding: 50px 30px; margin-left: -1px}

.section-product .inner ul li.title { flex-direction: column; background: var(--color-font); color: #fff; text-align: center}
.section-product .inner ul li.title h1.mtitle { font-size: 90px; font-weight: 800; letter-spacing: 0; text-align: left; margin-bottom: 20px}
.section-product .inner ul li.title p { font-size: 28px; font-weight: 400; margin-bottom: 10px}

.section-product .inner ul li .libox { position: relative; display: flex; gap: 30px}
.section-product .inner ul li .libox img { max-width: 500px;}
.section-product .inner ul li .textBox { display: flex; flex-direction: column; gap: 10px; margin-top: 100px}
.section-product .inner ul li .textBox .title { font-size: 30px; font-weight: 700}
.section-product .inner ul li .textBox .text { font-size: 18px; font-weight: 500}