﻿@charset "utf-8";

.main,
.main section { overflow:hidden; }

#visual { position:relative; width:100vw; height:100%; }
#visual .swiper-container { position:relative; width:100%; height:100vh; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; opacity:0 !important; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide .mvisualImage { opacity:1; position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide.slide1 .mvisualImage { background-image:url(/img/main/visual_img01.jpg); }
#visual .swiper-container .swiper-slide.slide2 .mvisualImage { background-image:url(/img/main/visual_img02.jpg); }
#visual .swiper-container .swiper-slide.slide3 .mvisualImage { background-image:url(/img/main/visual_img03.jpg); }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; bottom:100px; left:0; width:100%; padding:0 100px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txtCont {  }
#visual .swiper-container .swiper-slide .txtbox .txt { position:relative; overflow:hidden; font-family:var(--engFont1); font-size:64px; font-weight:300; }
#visual .swiper-container .swiper-slide .txtbox .txt > span { opacity:0; font-family:var(--engFont1); font-size:64px; font-weight:300; color:#fff; line-height:1.4; display:inline-block; position:relative; }
#visual .swiper-container .swiper-slide .txtbox .txt > span.stxt { font-weight:700 }
#visual .swiper-container .swiper-slide .txtbox .txt_3 { overflow:hidden; margin-top:30px; font-family:var(--engFont1); font-size:18px; font-weight:300; color:rgba(255, 255, 255, 0.90); line-height:1.6; }
#visual .swiper-container .swiper-slide .txtbox .txt_3 > span { display:block; opacity:0; font-family:var(--engFont1); font-weight:300; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { opacity:1; animation:bgs1-2 3s 0.1s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt { animation:ani_5 2s 0.7s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt .t1 { animation:ani_2 1.2s 1.0s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt .t2 { animation:ani_1 1.2s 1.4s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt .t3 { animation:ani_2 1.2s 1.8s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_3 > span { animation:ani_3 1.5s 1.5s; animation-fill-mode:both; }
#visual .btn_pn { display:none }

.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

#visual .swiper-container .control_box { position:absolute; left:100px; padding:0; bottom:380px; z-index:5; display:flex; align-items:center; justify-content:center; gap:0 5px; }
#visual .swiper-container .control_box .swiper-btn { display:none; }
#visual .swiper-pagination { position:relative; bottom:0; top:0; }
#visual .swiper-pagination .swiper-pagination-bullet { display:block; position:relative; width:50px; height:50px; text-align:center; opacity:1; background-color:transparent; display:inline-block; margin-right:5px !important; }
#visual .swiper-pagination .swiper-pagination-bullet em { transition:all 0.3s; text-transform:uppercase; position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-style:normal; font-size:15px; color:rgba(255, 255, 255, 0.40); font-weight:500; line-height:1.6; }
#visual .swiper-pagination .swiper-pagination-bullet span { position:relative; display:block; }
#visual .swiper-pagination .swiper-pagination-bullet-active em { color:#fff; }
#visual .playstop { position:relative; display:inline-block; vertical-align:top; z-index:3; margin-left:-3px; } 
#visual .playstop .stop a { position:relative; display:block; width:50px; height:50px; }
#visual .playstop .stop a:after {content:""; display:block; width:100%; height:100%; background:url(/img/main/stop.png) no-repeat center; position:absolute; left:0; top:0;}
#visual .playstop .stop.play a:after {background:url(/img/main/play.png) no-repeat center; }

#visual .circular-chart { width:50px; height:auto; position:absolute; left:0; top:0; z-index:8; padding:0; margin:0; }
#visual .circle { opacity:1; stroke:rgba(255,255,255,1); fill:none; stroke-width:0.7; stroke-dasharray:100; stroke-dashoffset:100; padding:0; margin:0; }
#visual .swiper-pagination .swiper-pagination-bullet-active .circle { stroke-dashoffset:100; }

#visual .scrollDown { position:absolute; left:50%; bottom:80px; transform:translateX(-50%) rotate(90deg); z-index:11; font-family:var(--mainFont); font-size:14px; font-weight:300; color:rgba(255, 255, 255, 0.20); line-height:1.3; letter-spacing:-0.01em; }
#visual .scrollDown > span > span { font-family:var(--engFont1); font-weight:300; animation: scrollDown 0.8s 1.8s forwards infinite; animation-fill-mode:both; animation-direction:alternate; }
@media screen and (max-width:1560px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:60px; padding:0 60px; }
	#visual .swiper-container .swiper-slide .txtbox .txt,
	#visual .swiper-container .swiper-slide .txtbox .txt > span { font-size:50px; }
	#visual .swiper-container .swiper-slide .txtbox .txt_3 { margin-top:30px; font-size:18px; }
	#visual .swiper-container .control_box { left:60px; bottom:320px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:46px; height:46px; }
	#visual .swiper-pagination .swiper-pagination-bullet em { font-size:15px; }
	#visual .playstop { margin-left:-3px; } 
	#visual .playstop .stop a { width:46px; height:46px; }
	#visual .circular-chart { width:46px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt,
	#visual .swiper-container .swiper-slide .txtbox .txt > span { font-size:38px; }
	#visual .swiper-container .swiper-slide .txtbox .txt_3 { margin-top:20px; font-size:17px; }
	#visual .swiper-container .control_box { left:20px; bottom:260px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:42px; height:42px; }
	#visual .swiper-pagination .swiper-pagination-bullet em { font-size:13px; }
	#visual .playstop { margin-left:-4px; } 
	#visual .playstop .stop a { width:42px; height:42px; }
	#visual .circular-chart { width:42px; }
}
@media screen and (max-width:760px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:180px; }
	#visual .swiper-container .swiper-slide .txtbox .txt,
	#visual .swiper-container .swiper-slide .txtbox .txt > span { font-size:26px; }
	#visual .swiper-container .swiper-slide .txtbox .txt_3 { margin-top:15px; font-size:16px; }
	#visual .swiper-container .swiper-slide .txtbox .txt_3 br { display:none }
	#visual .swiper-container .swiper-slide .txtbox .txt_3 .m_br { display:block }
	#visual .swiper-container .control_box { bottom:80px; left:0; transform:translateX(0); text-align:center; width:100%; display:flex; justify-content:center; }
	#visual .swiper-pagination { width:auto; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:42px; height:42px; }
	#visual .swiper-pagination .swiper-pagination-bullet em { font-size:13px; }
	#visual .playstop { margin-left:-4px; } 
	#visual .playstop .stop a { width:42px; height:42px; }
	#visual .circular-chart { width:42px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide.slide3 .mvisualImage { background-image:url(/img/main/visual_img03_m.jpg); }
}

@keyframes scrollDown {
	0% { color:rgba(255, 255, 255, 0.20);  }
	100% { color:#fff;  }
}


.btn-view a { position:relative; display:flex; height:98px; width:125px; margin-top:10px; padding-top:10px; }
.btn-view a span { opacity:0; font-family:var(--engFont1); color:var(--subColor); font-size:20px; font-weight:400; line-height:1.3; transition:all 0.4s; }
.btn-view a .svg { position:absolute; left:0; top:10px; transition:all 0.3s; }
.btn-view a:hover span { opacity:1; }
.btn-view a:hover .svg { left:calc(100% - 20px); }
.btn-view a:hover .svg path { transition:all 0.3s; }
.btn-view a:hover .svg path { stroke:var(--subColor); }
@media screen and (max-width:1560px){
	.btn-view a { height:68px; width:120px; }
}
@media screen and (max-width:1280px){
	.btn-view a { height:40px; width:105px; margin-top:2px; }
	.btn-view a span { font-size:18px; }
	.btn-view a .svg { width:16px; }
	.btn-view a:hover .svg { left:calc(100% - 18px); }
}
@media screen and (max-width:1024px){
	.btn-view a { height:30px; width:95px; margin-top:0; }
	.btn-view a span { font-size:16px; }
	.btn-view a .svg { width:12px; }
	.btn-view a:hover .svg { left:calc(100% - 16px); }
}
@media screen and (max-width:640px){
	.btn-view a span { opacity:1; }
	.btn-view a .svg { left:calc(100% - 16px); }
}

.case-studies { position:relative; margin-top:200px; }
.case-studies .cs-box { position:relative; padding:294px 0 236px; transition:all 0.5s; }
.case-studies .bg { position:absolute; left:50%; top:0; transform:translateX(-50%); transition:all 2s 0.3s; width:1400px; height:500px; background:url(/img/main/studies_bg.jpg) center bottom no-repeat; background-size:cover; }
.case-studies .bg:before { content:""; display:block; opacity:0; transition:all 2.0s 0.5s; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(0deg, rgba(255, 255, 255, 0.00) -12.97%, #FFF 92.68%); }
.case-studies .title-box { position:absolute; left:50%; top:370px; z-index:5; transform:translateX(-50%); text-align:center; transition:all 1.8s 0.3s; }
.case-studies .title-box .title { position:relative; }
.case-studies .title-box .title h3 span { font-family:var(--engFont1); color:var(--mainColor); font-size:150px; font-weight:300; line-height:1.3; transition:all 1.8s 0.3s; }
.case-studies .title-box .title h3 strong { font-family:var(--engFont1); font-weight:700; }
.case-studies .title-box .btn-view { position:absolute; right:-45px; top:0; opacity:0; transition:all 0.8s 1.5s; z-index:-1; }
.case-studies .title-box .btn-view a { margin-top:20px; margin-left:20px; }
.case-studies .title-box .txt { margin-top:10px; font-family:var(--engFont1); color:#666; font-size:18px; font-weight:300; line-height:1.5; }
.case-studies .swiper-container { position:relative; z-index:3; opacity:0; height:420px; transition:all 1.5s 1.0s; padding-left:100px; }
.case-studies .swiper-container .swiper-pagination-cs,
.case-studies .swiper-container .btn { display:none }
.case-studies .swiper-container .swiper-slide { position:relative; width:620px; height:390px; transition:all 0.5s; }
.case-studies .swiper-container .swiper-slide:before { content:""; display:block; position:absolute; right:1px; top:10px; width:21px; height:2px; background:var(--subColor); opacity:0; transition:all 0.3s; }
.case-studies .swiper-container .swiper-slide:after { content:""; display:block; position:absolute; right:10px; top:1px; width:2px; height:21px; background:var(--subColor); opacity:0; transition:all 0.3s; }
.case-studies .swiper-container .swiper-slide .box { position:relative; width:100%; height:100%; background:#fff; padding:60px; clip-path:polygon(85% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 0%); }
.case-studies .swiper-container .swiper-slide .txtbox { transition:all 0.6s; }
.case-studies .swiper-container .swiper-slide .txtbox .type { color:var(--subColor); font-size:20px; font-weight:500; line-height:1.3; }
.case-studies .swiper-container .swiper-slide .txtbox .tit { position:relative; margin-top:20px; padding-bottom:40px; }
.case-studies .swiper-container .swiper-slide .txtbox .tit:before { content:""; display:block; position:absolute; left:0; bottom:0; z-index:2; width:40px; height:1px; background:var(--subColor); }
.case-studies .swiper-container .swiper-slide .txtbox .tit > span { color:#333; font-size:24px; font-weight:600; line-height:1.5; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.case-studies .swiper-container .swiper-slide .txtbox .txt { position:absolute; left:60px; bottom:60px; z-index:2; color:#999; font-size:18px; font-weight:300; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.case-studies .swiper-container .swiper-slide .over { opacity:0; transition:all 0.2s; position:absolute; left:0; top:0; padding:60px; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.case-studies .swiper-container .swiper-slide .over dl:not(last-child) { margin-bottom:30px; }
.case-studies .swiper-container .swiper-slide .over dt { color:#333; font-size:20px; font-weight:600; line-height:1.3; }
.case-studies .swiper-container .swiper-slide .over dd { margin-top:15px; color:#666; font-size:16px; font-weight:300; line-height:1.5; min-height:72px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.case-studies .swiper-container .swiper-slide:hover { margin-top:-30px; }
.case-studies .swiper-container .swiper-slide:hover .txtbox { opacity:0; transition:all 0.2s; }
.case-studies .swiper-container .swiper-slide:hover .over { opacity:1; transition:all 0.6s; }
.case-studies .swiper-container .swiper-slide:hover:before,
.case-studies .swiper-container .swiper-slide:hover:after { opacity:1; }
.case-studies .swiper-container * { cursor:none }
@media screen and (max-width:1560px){
	.case-studies { margin-top:150px; }
	.case-studies .cs-box { padding:250px 0 200px; }
	.case-studies .bg { width:1000px; height:400px; }
	.case-studies .title-box { top:305px; }
	.case-studies .title-box .title h3 span { font-size:110px; }
	.case-studies .title-box .btn-view { right:0; }
	.case-studies .title-box .btn-view a { margin-top:10px; margin-left:0; }
	.case-studies .title-box .txt { margin-top:10px; font-size:17px; }
	.case-studies .swiper-container { height:360px; padding-left:60px; }
	.case-studies .swiper-container .swiper-slide { width:540px; height:340px; }
	.case-studies .swiper-container .swiper-slide .box { padding:40px; }
	.case-studies .swiper-container .swiper-slide .txtbox .type { font-size:19px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit { margin-top:15px; padding-bottom:30px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit > span { font-size:22px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit:before { width:35px; }
	.case-studies .swiper-container .swiper-slide .txtbox .txt { left:40px; bottom:40px; font-size:17px; }
	.case-studies .swiper-container .swiper-slide:hover { margin-top:-20px; }
	.case-studies .swiper-container .swiper-slide .over { padding:40px; }
	.case-studies .swiper-container .swiper-slide .over dl:not(last-child) { margin-bottom:25px; }
}
@media screen and (max-width:1280px){
	.case-studies { margin-top:100px; }
	.case-studies .cs-box { padding:220px 0 170px; }
	.case-studies .bg { width:800px; height:320px; }
	.case-studies .title-box { top:250px; width:100%; max-width:640px; }
	.case-studies .title-box .title h3 span { font-size:80px; }
	.case-studies .title-box .btn-view { right:85px; }
	.case-studies .title-box .btn-view a { margin-top:0; }
	.case-studies .swiper-container { height:320px; padding-left:40px; }
	.case-studies .swiper-container .swiper-slide { width:460px; height:300px; }
	.case-studies .swiper-container .swiper-slide .box { padding:30px; }
	.case-studies .swiper-container .swiper-slide .txtbox .type { font-size:18px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit { margin-top:15px; padding-bottom:25px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit > span { font-size:20px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit:before { width:35px; }
	.case-studies .swiper-container .swiper-slide .txtbox .txt { left:30px; bottom:30px; font-size:16px; }
	.case-studies .swiper-container .swiper-slide .over { padding:30px; }
	.case-studies .swiper-container .swiper-slide .over dl:not(last-child) { margin-bottom:18px; }
	.case-studies .swiper-container .swiper-slide .over dt { font-size:19px; }
	.case-studies .swiper-container .swiper-slide .over dd { margin-top:15px; font-size:15px; min-height:50px; }
}
@media screen and (max-width:1024px){
	.case-studies .swiper-container * { cursor:auto }
	.case-studies { margin-top:60px; }
	.case-studies .cs-box { padding:200px 0 150px; }
	.case-studies .bg { width:580px; height:280px; }
	.case-studies .title-box { top:224px; max-width:360px; }
	.case-studies .title-box .title h3 span { font-size:64px; }
	.case-studies .title-box .btn-view { right:-8px; }
	.case-studies .title-box .btn-view a { margin-top:-3px; }
	.case-studies .title-box .txt { margin-top:8px; font-size:16px; }
	.case-studies .swiper-container { height:260px; padding:0 40px; }
	.case-studies .swiper-container .swiper-slide { width:100%; height:260px; }
	.case-studies .swiper-container .swiper-slide .txtbox .type { font-size:17px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit { margin-top:12px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit > span { font-size:19px; }
	.case-studies .swiper-container .swiper-slide .txtbox .tit:before { width:30px; }
	.case-studies .swiper-container .swiper-slide .txtbox .txt { font-size:15px; }
	.case-studies .swiper-container .swiper-slide .over { display:none }
	.case-studies .swiper-container .swiper-slide:hover { margin-top:0; }
	.case-studies .swiper-container .swiper-slide:hover .txtbox,
	.case-studies .swiper-container .swiper-slide:before,
	.case-studies .swiper-container .swiper-slide:after { opacity:1; }
}
@media screen and (max-width:640px){
	.case-studies .title-box .btn-view { position:relative; text-align:center; left:unset; right:unset; margin:-5px auto 10px; display:inline-block; }
	.case-studies .swiper-container .swiper-slide .box { clip-path:polygon(75% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 0%); }
	.case-studies .swiper-container .btn { display:block; position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; background:rgba(16, 62, 102, 0.5); z-index:5; overflow:hidden; text-indent:-9999em; clip-path:polygon(75% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 0%);}
	.case-studies .swiper-container .btn:before { content:"\e93b"; font-family:'xeicon'; color:#fff; font-size:16px; font-weight:300; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-indent:0; }
	.case-studies .swiper-container .swiper-button-prev-cs { left:20px; clip-path:polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%); }
	.case-studies .swiper-container .swiper-button-next-cs { right:20px; }
	.case-studies .swiper-container .swiper-button-next-cs:before { transform:translate(-50%, -50%) rotate(180deg); }
}

/* animation */
.case-studies.subOn .bg { width:100%; height:100%; }
.case-studies.subOn .bg:before { opacity:1; }
.case-studies.subOn .title-box { top:52px; }
.case-studies.subOn .title-box .title h3 span { font-size:84px; }
.case-studies.subOn .title-box .btn-view { opacity:1; z-index:1 }
.case-studies.subOn .swiper-container { opacity:1; }
@media screen and (max-width:1560px){
	.case-studies.subOn .title-box .title h3 span { font-size:64px; }
}
@media screen and (max-width:1280px){
	.case-studies.subOn .title-box .title h3 span { font-size:46px; }
}
@media screen and (max-width:1024px){
	.case-studies.subOn .title-box .title h3 span { font-size:34px; }
}
@media screen and (max-width:640px){
	.case-studies.subOn .title-box { top:42px; }
}

.immigration .box { padding:200px 100px; display:flex; flex-wrap:wrap; background:#f2f4f8 url(/img/main/immigration_bg.png) center bottom no-repeat; background-size:cover; }
.immigration .box .title-box { width:540px; }
.immigration .box .listbox { width:calc(100% - 540px); }
.immigration .box .title-box h3 { font-family:var(--engFont1); color:var(--mainColor); font-size:84px; font-weight:700; line-height:1.3; }
.immigration .box .title-box h3 span { font-family:var(--engFont1); font-weight:700; }
.immigration .box .title-box .stit { display:flex; }
.immigration .box .title-box .stit span.st { font-family:var(--engFont1); color:var(--mainColor); font-size:84px; font-weight:300; line-height:1.3; }
.immigration .box .title-box .btn-view { margin-left:35px; }
.immigration .box .title-box .txt { margin-top:20px; font-family:var(--engFont1); color:#666; font-size:18px; font-weight:300; line-height:1.5; }
.immigration .box .listbox { padding-top:185px; }
.immigration .box .listbox li a { padding:0 85px 0 50px; height:160px; display:flex; align-items:center; transition:all 0.3s; }
.immigration .box .listbox li a:hover { background:#e5edf4; } 
.immigration .box .listbox li .date { position:relative; width:165px; padding-left:24px; color:var(--mainColor); font-size:18px; font-weight:300; line-height:1.3; }
.immigration .box .listbox li .date:before { content:""; display:block; width:10px; height:10px; background:var(--subColor); position:absolute; left:0; top:8px; }
.immigration .box .listbox li .txt { width:calc(100% - 165px); } 
.immigration .box .listbox li .txt h4 { /* text-transform:capitalize;*/ color:var(--mainColor); font-size:24px; font-weight:500; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.immigration .box .listbox li .txt .stxt { margin-top:14px; color:rgba(33, 33, 33, 0.70); font-size:20px; font-weight:300; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
@media screen and (max-width:1560px){
	.immigration .box { padding:150px 60px; }
	.immigration .box .title-box { width:460px; }
	.immigration .box .listbox { width:calc(100% - 460px); }
	.immigration .box .title-box h3,
	.immigration .box .title-box .stit span.st { font-size:64px; }
	.immigration .box .title-box .txt { margin-top:20px; font-size:17px; }
	.immigration .box .listbox { padding-top:155px; }
	.immigration .box .listbox li a { padding:0 40px; height:140px; }
	.immigration .box .listbox li .date { width:155px; padding-left:22px; font-size:17px; }
	.immigration .box .listbox li .date:before { width:8px; height:8px; top:8px; }
	.immigration .box .listbox li .txt { width:calc(100% - 155px); } 
	.immigration .box .listbox li .txt h4 { font-size:22px; }
	.immigration .box .listbox li .txt .stxt { margin-top:12px; font-size:19px; }
}
@media screen and (max-width:1280px){
	.immigration .box { padding:120px 40px; }
	.immigration .box .title-box { width:420px; }
	.immigration .box .listbox { width:calc(100% - 420px); }
	.immigration .box .title-box h3,
	.immigration .box .title-box .stit span.st { font-size:46px; }
	.immigration .box .title-box .txt { margin-top:10px; font-size:16px; }
	.immigration .box .title-box .btn-view { margin-left:20px; }
	.immigration .box .listbox { padding-top:120px; }
	.immigration .box .listbox li a { padding:0 30px; height:120px; }
	.immigration .box .listbox li .date { font-size:16px; }
	.immigration .box .listbox li .txt h4 { font-size:22px; }
	.immigration .box .listbox li .txt .stxt { margin-top:10px; font-size:18px; }
}
@media screen and (max-width:1200px){
	.immigration .box { padding:90px 20px; }
}
@media screen and (max-width:1024px){
	.immigration .box { padding:60px 20px; }
	.immigration .box .title-box,
	.immigration .box .listbox { width:100%; padding-top:10px; }
	.immigration .box .title-box h3,
	.immigration .box .title-box .stit span.st { font-size:34px; }
	.immigration .box .title-box h3 { margin-right:10px; }
	.immigration .box .title-box .title > div { display:flex; flex-wrap:wrap; }
	.immigration .box .title-box .txt { margin-top:10px; font-size:16px; }
	.immigration .box .title-box .txt br { display:none }
	.immigration .box .title-box .btn-view { margin-left:18px; }
	.immigration .box .listbox { margin-top:20px; }
	.immigration .box .listbox li a { padding:0 20px; height:100px; }
	.immigration .box .listbox li .date { width:120px; padding-left:18px; font-size:15px; }
	.immigration .box .listbox li .date:before { width:6px; height:6px; top:8px; }
	.immigration .box .listbox li .txt { width:calc(100% - 120px); } 
	.immigration .box .listbox li .txt h4 { font-size:20px; }
	.immigration .box .listbox li .txt .stxt { margin-top:8px; font-size:16px; }
}
@media screen and (max-width:640px){
	.immigration .box .title-box .btn-view { margin-left:12px; }
	.immigration .box .listbox li a { flex-wrap:wrap; padding:15px 0; height:auto }
	.immigration .box .listbox li a:hover { background:none }
	.immigration .box .listbox li .date { width:100%; padding-left:12px; font-size:14px; }
	.immigration .box .listbox li .date:before { width:4px; height:4px; }
	.immigration .box .listbox li .txt { width:100%; margin-top:10px; } 
	.immigration .box .listbox li .txt h4 { font-size:18px; }
	.immigration .box .listbox li .txt .stxt { margin-top:5px; font-size:15px; }
}

/* animation */
.immigration .box .title-box h3 { overflow:hidden }
.immigration .box .title-box h3 span { display:block; opacity:0; }
.immigration .box .title-box.subOn h3 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.immigration .box .title-box .stit,
.immigration .box .title-box .txt { opacity:0; }
.immigration .box .title-box.subOn .stit { animation:ani_5 1.0s 0.8s; animation-fill-mode:both; }
.immigration .box .title-box.subOn .txt { animation:ani_5 1.0s 1.2s; animation-fill-mode:both; }
.immigration .box .listbox li { opacity:0; }
.immigration .box .listbox.subOn li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.immigration .box .listbox.subOn li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
.immigration .box .listbox.subOn li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
.immigration .box .listbox.subOn li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }
.immigration .box .listbox.subOn li:nth-child(5) { animation:ani_4 0.8s 1.3s; animation-fill-mode:both; }
.immigration .box .listbox.subOn li:nth-child(6) { animation:ani_4 0.8s 1.5s; animation-fill-mode:both; }

/* Cursor */
.cursor { opacity:0; position:fixed; left:-100px;top:-100px; pointer-events:none !important; z-index:999999 !important; animation:cursor_bs_off 0.5s; animation-fill-mode:both; position:absolute; width:100px; height:100px; border-radius:50%; transform:translate(-50%, -50%); border-radius:100px; background:rgba(16, 62, 102, 0.50); border:1px solid rgba(255, 255, 255, 0.30); backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; text-transform:capitalize; color:#fff; font-size:17px; font-weight:500; line-height:1.3; }
.cursor:before{ content:"◀"; font-family:'xeicon'; color:#fff; position:absolute; top:50%; left:10%; margin-top:1px; transform:translateY(-50%) scale(0.75); font-size:12px; font-weight:300 }
.cursor:after{ content:"▶"; font-family:'xeicon'; color:#fff; position:absolute; top:50%; right:10%; margin-top:1px; transform:translateY(-50%) scale(0.75); font-size:12px; font-weight:300 }
.cursor.more { display:flex; animation:cursor_bs 0.5s 0.2s; animation-fill-mode:both; }
.cursor.off { display:flex; }
@media screen and (max-width:1024px){
    .cursor,
	.cursor.more,
	.cursor.off { display:none }
}