section { display:flex; justify-content:center; padding:100px 0; }

section > .container { width:100%; max-width:1280px; }
#section2 .content { margin-top:130px; display:flex; align-items:center; }
#section1 { position:relative; width:100%; height:100vh; display:flex; justify-content:center; align-items:center; }
#section1 > .container { display:flex; align-items:center; }

#section1 h1{ font-size:2.67rem; font-weight:bold; }
body[slide-index='4'] #section1 h1{ color:#fff; }

#section1 p{ width:100%; max-width:520px; font-size:12px; }
body[slide-index='4'] #section1 p{ color:#ccc; }

.status { position:fixed; top:0; right:0; height:100vh; mix-blend-mode:screen; --color:rgba(170, 170, 170, 1); z-index: 10; }
body[slide-index='2'] .status { mix-blend-mode:normal; --color:#444; }
body[section-index='section3'] .status { mix-blend-mode:normal; --color:rgba(0, 0, 0, 0.5); background:rgba(255, 255, 255, .8); }
body[section-index='section4'] .status { mix-blend-mode:normal; --color:rgba(0, 0, 0, 0.5); }
body[section-index='section5'] .status { --color:rgba(170, 170, 170, 1); }
body[section-index='section6'] .status { --color:rgba(170, 170, 170, 1); }
.status > .wrap { position:relative; width:60px; height:100%; border-left: 1px solid var(--color); }
.status > .wrap > ul { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(90deg); display:flex; justify-content:center; align-items:center; gap:10px; }
.status > .wrap > ul > li { position:relative; white-space:nowrap; padding:0 20px; height:25px; color:var(--color); letter-spacing:2px; border-radius:13px; display:flex; justify-content:center; align-items:center; cursor:pointer; user-select: none; }
.status > .wrap > ul > li.on { border: 1px solid var(--color); }
/*.status > .wrap > ul > li.on::after { content:""; position:absolute; width:8px; height:8px; bottom:-23px; left:50%; transform:translateX(-50%); background:var(--color); border-radius:50%; }*/
.status > .wrap > ul > li:hover{ background:var(--sunbursi-orange); color:#fff; border: 1px solid var(--sunbursi-orange); }


.jw-mainscrollbar { right:55px; opacity:.1; mix-blend-mode:screen; --color:rgba(170, 170, 170, 1); z-index: 10; }
body[slide-index='2'] .jw-mainscrollbar { mix-blend-mode:normal; --color:#444; }
body[section-index='section3'] .jw-mainscrollbar { mix-blend-mode:normal; --color:rgba(0, 0, 0, 0.5); }
body[section-index='section4'] .jw-mainscrollbar { mix-blend-mode:normal; --color:rgba(0, 0, 0, 0.5); }
body[section-index='section5'] .jw-mainscrollbar { --color:rgba(170, 170, 170, 1); }
body[section-index='section6'] .jw-mainscrollbar { --color:rgba(170, 170, 170, 1); }
.jw-mainscrollbar .scrollbar { background:var(--color); }

#section1 .bg_controll{ position:relative; margin-top:40px; display:flex; }
#section1 .bg_controll > ul { display:flex; }
#section1 .bg_controll > ul > .ball{ width:18px; height:18px; border-radius:9px; background:#939393; transition: all 0.3s ease-in-out; cursor:pointer; }
#section1 .bg_controll > ul > .ball:not(:first-child){ margin-left:10px; }
#section1 .bg_controll > ul > .ball.show{ width:45px; background:#fe8130; }
#section1 .mainicon01{ position:absolute; width:8rem; height:8rem; background:rgba(254, 129, 48, 0.2); border-radius:1.39rem; left:0; top:calc(50% - 12rem); transform:rotate(0deg); transition:transform 0.8s linear; cursor:pointer; z-index:5; }
#section1 .mainicon02{ position:absolute; width:2.50rem; height:2.50rem; background:rgba(254, 129, 48, 0.2); border-radius:0.50rem; left:20rem; top:0; cursor:pointer; z-index:5; }

#section1 .mainimage01{ display:flex; width:19.44rem; }

#section1 .play{ width:18px; height:18px; margin-left:15px; cursor:pointer; position:relative; }
#section1 .play > i{ position:absolute;	top:0; background:#939393; transition: 0.3s ease-in-out; }
#section1 .play > i:first-child{ width:4px;	height:12px; margin-top:-2px; border-radius:5px; transform:rotate(-45deg); }
#section1 .play > i:last-child{	width:4px;	height:12px; margin-top:6px; border-radius:5px; transform:rotate(45deg); }
#section1 .play.show{	flex-direction:row; }
#section1 .play.show > i:first-child{ width:3px; height:16px; transform:rotate(0deg); border-radius:1.5px; margin-top:0px; margin-left:-3px; }
#section1 .play.show > i:last-child{ width:3px; height:16px; transform:rotate(0deg); border-radius:1.5px; margin-top:0px; margin-left:3px; }
#section1 .contents-a { max-width:600px; position:relative; }

#section1 .contents-b { flex:1; position:relative; display:flex; justify-content:flex-end; align-items:center; }
#section1 #mainscreen{ position:absolute; width:3500px; height:2000px; background:rgba(255,255,255,0.5); transform: rotate( -40deg ); left:-3500px; top:-1000px; }

#section1 .slide { position:absolute; width:100%; height:100%; overflow:hidden; z-index:-1; opacity:0; transition: opacity 1s ease-in-out; }
#section1 .slide.show { opacity:1; }
#section1 .video_layer_2{ position:relative; width:100%; height:100%; }
#section1 .video_layer_2 .img1{ position:absolute; left:calc(50% + 200px); bottom:200px; }
#section1 .video_layer_2 .img2{ position:absolute; right:0; bottom:0; }
#section1  #canvas3 { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
#video_0 { position:absolute; width:100%; height:100%; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.headerbox { position:relative; }
.headerbox h1 { font-size:30px; font-weight:medium; }
.headerbox i { position:absolute; width:80px; height:80px; background:rgba(0, 0, 0, 0.1); border-radius:10px; left:-50px; top:-20px; transform:rotate(15deg); }


#section2 { min-height:900px; }
#section2 .content { margin-top:130px; display:flex; align-items:center; }
#section2 .content > div { flex:1; position:relative; display:flex; justify-content:center; align-items:center; }
#section2 .content > div:nth-child(1) img { width:360px; }
#section2 .content > div:nth-child(1) span { position:absolute; bottom:-20px; width:475px; height:198px; background:#F4F4F4; border-radius:10px; z-index:-1; }
#section2 .content > div:nth-child(2) dl {  }
#section2 .content > div:nth-child(2) dt { font-size:18px; font-weight:bold; margin-bottom:5px; }
#section2 .content > div:nth-child(2) dt:not(:first-child) { margin-top:25px; }
#section2 .content > div:nth-child(2) dd { font-size:16px; }

#section3 { min-height:900px; }
#section3 .content { margin-top:60px; }
#section3 .swiper-wrapper { display:flex; gap:35px; }
#section3 .swiper-slide { width:550px; height:310px; border-radius:10px; background:#f4f4f4; padding:20px; display:flex; gap:10px; -webkit-user-select: none; user-select: none; }
#section3 .swiper-slide > div:nth-child(1) { display:flex; flex-direction:column; gap:10px; }
#section3 .swiper-slide .category { margin-top:20px; }
#section3 .swiper-slide .title { margin-top:10px; font-size:20px; font-weight:bold; }
#section3 .swiper-slide img { width:260px; }
#section3 .swiper-slide > div:nth-child(2) { display:flex; justify-content:center; align-items:center; }
#section3 .marquee-wrap { position:absolute; left:0; width:100%; margin-top:60px; }
#section3 .marquee-text { position:relative; font-size:180px; white-space: nowrap; letter-spacing: 5px; color: transparent; -webkit-text-stroke:1px #ccc; }
#section3 .marquee-item { position:absolute; animation: scroll-left 30s linear infinite; padding:0 40px; }
#section3 .marquee-item:nth-child(2) { animation-delay: -15s; }
@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

#section4 { min-height:900px; }
#section4 .process1 { margin-top:120px; display: grid; grid-template-columns: 2fr 2fr 1fr; gap:4px; }
#section4 .process1 .arrow-label { position:relative; display:flex; justify-content:center; align-items:center; }
#section4 .process1 .arrow-label span { background:#fff; padding:0 10px; }
#section4 .process1 .arrow-label::after { content:""; position: absolute; top: 50%; width: 100%; height: 1px;  background:#999; z-index: -1; }
#section4 .process1 .arrow-label > i:nth-child(1) { position:absolute; left:0; top:50%; width:6px; height:6px; transform:translateY(-50%) rotate(45deg); border:1px solid transparent; border-color: transparent transparent #999 #999; }
#section4 .process1 .arrow-label > i:nth-child(2) { position:absolute; right:0; top:50%; width:6px; height:6px; transform:translateY(-50%) rotate(45deg); border:1px solid transparent; border-color:#999 #999 transparent transparent; }

#section4 .process2 { margin-top:60px; display:flex; }
#section4 .process2 > .item { flex:1; }
#section4 .process2 > .item > div { position:relative; }
#section4 .process2 > .item > div:first-child { height:300px; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:24px; font-weight:medium; gap:20px; }
#section4 .process2 > .item:nth-child(1) { --circlecolor:#E4F1FF; }
#section4 .process2 > .item:nth-child(2) { --circlecolor:#4876EE; }
#section4 .process2 > .item:nth-child(3) { --circlecolor:#E4F1FF; }
#section4 .process2 > .item:nth-child(4) { --circlecolor:#78A8FF; }
#section4 .process2 > .item:nth-child(5) { --circlecolor:#244DDB; }
#section4 .process2 > .item > div:first-child::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:300px; height:300px; background:var(--circlecolor); border-radius:50%; z-index:-1;  }
#section4 .process2 > .item > div:last-child { place-self:center; max-width:200px; margin-top:50px; font-size:16px; }
#section4 .process2 > .item:nth-child(2) > div:first-child { color:#fff; }
#section4 .process2 > .item:nth-child(4) > div:first-child { color:#fff; }
#section4 .process2 > .item:nth-child(5) > div:first-child { color:#fff; }

#section5 { min-height:900px; }
#section5 .content { margin-top:100px; place-self:center; width:100%; max-width:1100px; display: grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
#section5 .card { display:flex; flex-direction:column; gap:10px; min-width:0; }
#section5 .card > .image { position:relative; width:100%; height:200px; overflow:hidden; cursor:pointer; }
#section5 .card > .subject { width: 100%; display: block; }
#section5 .card > .subject  span { display: block; width: 100%; font-size:16px; font-weight:bold; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;  word-break: break-all; }
#section5 .card > .summery { color:#888; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
#section5 .card > .card-stats { display:flex; align-items:center; justify-content:space-between; color:#666; }
  
#section6 .container > .content { display:flex; justify-content:center; align-items:center; flex-direction:column; }
#section6 .container > .content > h1 { position:relative; width:100%; font-size:20px; display:flex; justify-content:center; align-items:center; }
#section6 .container > .content > h1::after { content:""; position: absolute; top: 50%; width: 100%; height: 1px;  background:#ccc; z-index: -1; }
#section6 .container > .content > h1 span { background:#fff; padding:0 20px; }

#section6 .container > .content > p { margin-top:40px; }
#section6 .container > .content > button { margin-top:40px; color:#444; height:50px; border-radius:25px; font-size:18px; display:flex; align-items:center; gap:10px; fill:#444; border: 1px solid #444; padding:0 60px; }

	
@media screen  and  (max-width : 1280px) {
	.status { display:none; }
	.jw-mainscrollbar { right:0; }
	section { padding-left: 20px; padding-right: 20px; }
}

@media screen  and  (max-width : 1060px) {
	#section2 .content { flex-direction:column; gap:40px;  }
}

@media screen  and  (max-width : 1025px) {
	#section4 .process1 { display:none; }
	#section4 .process2 { flex-wrap:wrap; justify-content:center; gap:10px; }
	#section4 .process2 > .item { flex:none; width:250px; }
}

@media screen  and  (max-width : 600px) {
	#section1 { padding-top:140px; }
	#section1 > .container { flex-direction:column; gap:40px; }
	#section1 .contents-b img { max-height:260px; }
	#section3 .swiper-wrapper { gap:0; }
	#section3 .swiper-slide { width:100%; }
	#section3 .swiper-slide > div:nth-child(2)  { width:120px; overflow:hidden; display:flex; justify-content:flex-start; }
	
	#section5 .content { grid-template-columns:repeat(2, 1fr); gap:10px; }
}

@media screen  and  (max-width : 400px) {
	#section5 .content { grid-template-columns:1fr; gap:30px; }
	#section6 .container > .content > button { padding:0 30px; }
}