@charset "utf-8";

.mainbody { overflow:hidden; }
@media screen and (max-width:1024px){
	.mainbody { overflow:initial; }
}

.body_intro { overflow:hidden; }
.main_intro { z-index:-1; opacity:0; visibility:hidden; animation-fill-mode:both; position:fixed; top:50%; left:50%; transform:translateZ(0) translate(-50%, -50%); width:100%; height:100%; }
.main_intro.introBox {z-index:999; opacity:1; visibility:visible; }
.introBox:before { overflow:hidden; content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; top:0; left:0; animation:intro_off 1.2s 7.0s; animation-fill-mode:both; }
.main_intro .loading { position:absolute; top:50%; left:50%; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)); animation:intro_off 0.1s 2.3s; animation-fill-mode:both; } 
.main_intro .loading span { position:absolute; top:50%; left:50%; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)); }
.main_intro .loading span.c1 { animation:rotate1 2.5s; animation-fill-mode:both; }
.main_intro .loading span.c2 { animation:rotate2 2.5s; animation-fill-mode:both; }
.main_intro .logo_box { overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)); text-align:center; animation:intro_off 1.2s 6.5s; animation-fill-mode:both; }
.main_intro .logo_box ul { display:flex; justify-content:center; }
.main_intro .logo_box li { opacity:0; }
.main_intro .logo_box li:nth-child(2) { margin:0 -1px 0 -2px; }
.main_intro .logo_box li:nth-child(1) { animation:intro_on 1.8s 2.8s; animation-fill-mode:both; }
.main_intro .logo_box li:nth-child(2) { animation:intro_on 1.8s 3.5s; animation-fill-mode:both; }
.main_intro .logo_box li:nth-child(3) { animation:intro_on 1.8s 4.3s; animation-fill-mode:both; }
.main_intro .logo_box .txt { opacity:0; font-family:Kodchasan; margin-top:10px; color:#111; font-size:19px; font-weight:400; line-height:1.3; animation:ani_3 1.2s 4.6s; animation-fill-mode:both; }

/* animation */
@keyframes rotate1 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    10% { transform: translate(-50%, -50%) rotate(0deg); }
    90% { transform: translate(-50%, -50%) rotate(180deg); }
    100% { transform: translate(-50%, -50%) rotate(180deg); }
}
@keyframes rotate2 {
    0% { transform: translate(-50%, -50%) rotate(180deg); }
    10% { transform: translate(-50%, -50%) rotate(180deg); }
    90% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes intro_off {
	0% {opacity:1;}
	100% {opacity:0;}
}
@keyframes intro_on {
	0% {opacity:0; }
	100% {opacity:1; }
}

.body_intro .main { opacity:0; }

.main { opacity:1; animation:none; }
.main.first { animation:ani_5 0.8s 0.5s both; }
.main,
.main .section { overflow:hidden; }
@media screen and (max-width: 1024px) {
    .fp-section {
        pointer-events:auto !important;
        overflow: visible !important;
        height: auto !important;
    }
    html, body {
        overflow: auto !important;
    }
    .section { height:auto !important; }
	.section .fp-tableCell,
	.section .fp-scrollable { height:auto !important; }
	
	.fp-section, .fp-tableCell{height:auto !important;}
	.iScrollIndicator,
	.fp-scrollable { height:auto !important; }
	.iScrollVerticalScrollbar { display:none !important; } 

    #fullpage { overflow:hidden; height:auto !important; }
	.section { padding:80px 0; }
	.main1, .main2, .main-footer { padding:0; }
}
@media screen and (max-height:700px){
	.main2 .aniBox, .main4, .main5 { padding:50px 0; }
}

/* #fp-nav { display:block !important; } */
#menu { opacity:1; position:fixed; left:50px !important; top:50% !important; transform:translateY(-50%); margin-top:0 !important; z-index:10 }
.fp-viewing-MAIN #menu,
.fp-viewing-ABOUT.over #menu,
.fp-viewing-LAST #menu { opacity:0; z-index:-1; }
#menu li { }
#menu li a { position:relative; padding-left:17px; }
#menu li a:before { content:""; display:block; width:5px; height:5px; position:absolute; left:0; top:60%; transform:translateY(-50%); border:1px solid #fff; border-radius:7px; }
#menu li a span { transition:all 0.3s; font-family:var(--mainFont); color:#fff; font-size:14px; font-weight:500; line-height:1.3; display:none; }
#menu li:not(:last-child) { margin-bottom:20px; }
#menu li.active a:before { background:#fff; }
#menu li.active a span { display:inline-block; }
@media screen and (max-width:1600px){
    #menu { left:20px !important; }
}
@media screen and (max-width:1024px){
    #menu { display:none }
}


.main1 { position:relative; overflow:hidden; }


#visual { position:relative; width:100vw; height:100vh; overflow:hidden; background:#000 }
#visual h1 { position:absolute; z-index:4; padding:30px 0 0 60px; }
#visual h1 a { display:block; }
#visual h1 a svg { width:104px; height:auto }

#visual .top-menu { display:block }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; display:flex; z-index:1 }
/*#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 { transform:scale(1.10); position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;}
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; bottom:180px; left:50px; width:100%; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { opacity:0; font-size:64px; font-weight:700; font-family:var(--mainFont); color:rgba(255,255,255,1); line-height:1.3; letter-spacing:-0.07em; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; z-index:2 }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_3 1.5s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:bgs6 4.0s 0.1s; animation-fill-mode:both; }
.visual .control_box { position:absolute; bottom:75px; left:50px; width:100%; z-index:20; display:flex; align-items:center; }
.visual .control_box .swiper-btn { display:flex; align-items:center; height:60px; }
.visual .control_box .swiper-btn > div { opacity:0.3; position:relative; left:unset; right:unset; top:unset; margin:0; height:100%; border:2px solid rgba(255, 255, 255, 1); border-radius:60px; transition:all 0.3s; }
.visual .control_box .swiper-btn .swiper-button-prev { width:60px; background:url(/img/main/swiper-btn.svg) center center no-repeat; }
.visual .control_box .swiper-btn .swiper-button-next { width:120px; transform:rotate(180deg); background:url(/img/main/swiper-btn.svg) center center no-repeat; }
.visual .control_box .swiper-btn > div:hover { opacity:1; }
.visual .control_box .box { position:relative; display:flex; align-items:center; gap:0 10px; margin-left:35px; }
.visual .control_box .box .txt,
.visual .control_box .box .txt * { color:#fff; font-size:16px; font-weight:500; line-height:1.3; margin-bottom:3px; }
.visual .swiper-pagination { display:flex; position:relative; margin:0; padding:0; left:0; top:0; right:0; bottom:0; width:60px; height:5px; background-color:rgba(255,255,255,0.2); transition:all 0.3s; border-radius:5px; overflow:hidden; }
.visual .swiper-pagination-bullet { display:flex; align-items:center; justify-content:center; text-align:left; border-radius:0; opacity:1; background-color:transparent; margin:0; width:0; height:5px; border-radius:5px; overflow:hidden; }
.visual .swiper-pagination-bullet .line { position:absolute; top:0; left:0; z-index:2; height:5px; background:#fff; border-radius:5px; }
.body_intro #visual .swiper-container .swiper-slide .txtbox .txt-1 > span { opacity:0; }
.body_intro #visual .swiper-container .swiper-slide .mvisualImage { transform:scale(1.10); }

.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

#visual .scrolldown { position:absolute; right:4px; bottom:132px; z-index:30; text-align:center; display:flex; align-items:center; transform:rotate(90deg); }
#visual .scrolldown .txt { font-family:var(--mainFont); color:#fff; font-size:15px; font-weight:400; line-height:1.3; display:block }
#visual .scrolldown .line { position:relative; display:flex; margin:4px 0 0 15px; gap:3px; }
#visual .scrolldown .line span { width:7px; height:13px; display:flex; background:url(/img/main/scrolldown_arr.svg) center center no-repeat; opacity:0.2; }
#visual .scrolldown .line span:nth-child(1) { animation:scrollDown1 1.25s 0.3s infinite; }
#visual .scrolldown .line span:nth-child(2) { animation:scrollDown2 1.25s 0.3s infinite; }
#visual .scrolldown .line span:nth-child(3) { animation:scrollDown3 1.25s 0.3s infinite; }
@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:160px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:50px; }
	.visual .control_box .swiper-btn { height:50px; }
	.visual .control_box .swiper-btn .swiper-button-prev { width:50px; }
	.visual .control_box .swiper-btn .swiper-button-next { width:100px; }
	.visual .control_box .box { margin-left:30px; }
	.visual .control_box .box .txt,
	.visual .control_box .box .txt * { margin-bottom:1px; }
	.visual .swiper-pagination { width:60px; height:5px; }
	.visual .swiper-pagination-bullet,
	.visual .swiper-pagination-bullet .line { height:5px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:140px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:40px; }
	.visual .control_box .swiper-btn { height:40px; }
	.visual .control_box .swiper-btn .swiper-button-prev { width:40px; }
	.visual .control_box .swiper-btn .swiper-button-next { width:80px; }
	.visual .control_box .box {  margin-left:20px; }
	.visual .control_box .box .txt,
	.visual .control_box .box .txt * { font-size:15px; margin-bottom:-3px; }
	.visual .swiper-pagination { width:50px; height:4px; }
	.visual .swiper-pagination-bullet,
	.visual .swiper-pagination-bullet .line { height:4px; }
	#visual .scrolldown { right:-20px; bottom:120px; }
}
@media screen and (max-width:960px){
	#visual h1 { padding:20px 0 0 20px; }
	#visual .swiper-container .swiper-slide .txtbox { left:20px; }
	.visual .control_box { bottom:75px; left:20px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:100px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:30px; }
	.visual .control_box { bottom:50px; }
	.visual .control_box .swiper-btn { height:35px; }
	.visual .control_box .swiper-btn > div { border-width:1px; }
	.visual .control_box .swiper-btn .swiper-button-prev { width:35px; }
	.visual .control_box .swiper-btn .swiper-button-next { width:70px; }
	.visual .control_box .box {  margin-left:15px; }
	.visual .control_box .box .txt,
	.visual .control_box .box .txt * { font-size:14px; margin-bottom:0; }
	.visual .swiper-pagination { height:3px; }
	.visual .swiper-pagination-bullet,
	.visual .swiper-pagination-bullet .line { height:3px; }
	#visual .scrolldown { right:-40px; bottom:100px; }
}

@keyframes scrollDown1 {
    0% { opacity:0.2; }
    30% { opacity:1; }
    50% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown2 {
    0% { opacity:0.2; }
    20% { opacity:0.2; }
    50% { opacity:1; }
    70% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown3 {
    0% { opacity:0.2; }
    40% { opacity:0.2; }
    70% { opacity:1; }
    90% { opacity:0.2; }
    100% { opacity:0.2; }
}


.title-box { text-align:center; }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; font-size:70px; font-weight:700; line-height:1.3 }
.title-box h3 span strong { font-weight:700; }
.title-box .tit { font-family:var(--mainFont); color:rgba(255, 255, 255, 0.5); font-size:20px; font-weight:700; line-height:1.3; margin-bottom:15px; }
.title-box .txt { color:rgba(255, 255, 255, 0.5); font-size:20px; font-weight:400; line-height:1.7; margin-top:40px; }
@media screen and (max-width:1640px){
	.title-box h3 span { font-size:60px;}
	.title-box .tit { font-size:19px; margin-bottom:15px; }
	.title-box .txt { font-size:19px; margin-top:40px; }
}
@media screen and (max-width:1440px){
	.title-box h3 span { font-size:50px;}
	.title-box .tit { font-size:18px; margin-bottom:12px; }
	.title-box .txt { font-size:18px; margin-top:35px; }
}
@media screen and (max-width:1280px){
	.title-box h3 span { font-size:40px;}
	.title-box .tit { font-size:17px; margin-bottom:10px; }
	.title-box .txt { font-size:17px; margin-top:30px; }
}
@media screen and (max-width:1024px){
	.title-box h3 span { font-size:30px;}
	.title-box .tit { font-size:16px; margin-bottom:8px; }
	.title-box .txt { font-size:16px; margin-top:25px; }
}
@media screen and (max-width:640px){
	.title-box h3 span { font-size:22px;}
	.title-box .tit { font-size:15px; margin-bottom:5px; }
	.title-box .txt { font-size:15px; margin-top:10px; }
}

.main2 { position:relative; background:#090909; } 
.main2 .circle { position:absolute; top:0; left:50%; transform:translateX(-50%); border:1px solid #777; border-radius:100%; opacity:0.2; }
.main2 .circle:before { content:""; display:block; width:100%; height:100%; position:absolute; left:calc(-100% - 3px); top:0; border:1px solid rgba(3, 110, 184, 1); border-radius:100%; }
.main2 .circle:after { content:""; display:block; width:100%; height:100%; position:absolute; left:calc(100% + 1px); top:0; border:1px solid rgba(243, 152, 0, 1); border-radius:100%; }
.project-box .title-box { position:relative; z-index:2; } 
.project-box .title-box h3 span { color:#fff; }
.project-box .title-box h3 span strong { color:var(--mainColor); }
.project-box .listbox { position:relative; z-index:2; margin-top:75px; } 
.project-box .listbox ul { display:flex; justify-content:center; position:relative; z-index:2; } 
.project-box .listbox li { width:300px; }
.project-box .listbox li .box { position:relative; width:100%; height:412px; text-align:center; opacity:0.2; transition:all 0.4s; }
.project-box .listbox li .box:before { z-index:2; content:""; display:block; width:15px; height:15px; position:absolute; left:50%; top:calc(249px - 7px); background:#666; transform:translateX(-50%); border-radius:15px; transition:all 0.3s; }
.project-box .listbox li .box a { border-radius:20px; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:all 0.4s; }
.project-box .listbox li .box svg path { stroke:#fff; transition:all 0.4s; }
.project-box .listbox li .box .txt { margin-top:118px; font-family:var(--mainFont); color:#fff; font-size:22px; font-weight:500; line-height:1.3; transition:all 0.4s; display:flex; align-items:center; }
.project-box .listbox li .box .txt img { opacity:0; margin-left:-8px; transition:all 0.4s; vertical-align:middle }
.project-box .listbox li .box.on { opacity:1 }
.project-box .listbox li .box.on:before { background:#fff; filter:drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.70)); }
.project-box .listbox li:hover .box.on a { background:#161616; }
.project-box .listbox li:hover .box.on svg path { stroke:#ffb25b; }
.project-box .listbox li:hover .box.on .txt { color:#ffb25b; }
.project-box .listbox li:hover .box.on:before { background:#ffb25b; filter: drop-shadow(0px 0px 15px rgba(255, 178, 91, 0.70)); }
.project-box .listbox li:hover .box.on .txt img { opacity:1; margin-left:13px }
.project-box .listbox .linebox { width:100%; height:1px; background:rgba(187, 187, 187, 0.2); position:absolute; top:249px; left:0; }
.project-box .listbox .linebox > span { position:absolute; top:0; left:0; height:1px; background:rgba(255, 255, 255, 1); display:block; }
@media screen and (max-width:1640px){
	.project-box .listbox { margin-top:60px; } 
	.project-box .listbox li { width:280px; }
	.project-box .listbox li .box { height:350px; }
	.project-box .listbox li .box:before { top:calc(220px - 7px); }
	.project-box .listbox .linebox { top:220px; }
}
@media screen and (max-width:1440px){
	.project-box .listbox { margin-top:50px; } 
	.project-box .listbox li { width:250px; }
	.project-box .listbox li .box { height:320px; }
	.project-box .listbox li .box:before { top:calc(200px - 7px); }
	.project-box .listbox .linebox { top:200px; }
	.project-box .listbox li .box .txt { font-size:20px; }
}
@media screen and (max-width:1280px){
	.project-box .listbox { margin-top:40px; } 
	.project-box .listbox li { width:205px; }
	.project-box .listbox li .box { height:280px; }
	.project-box .listbox li .box:before { top:calc(180px - 7px); }
	.project-box .listbox .linebox { top:180px; }
	.project-box .listbox li .box .txt { margin-top:80px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.project-box { padding:80px 0; }
	.project-box .title-box { padding:0 20px; }
	.project-box .listbox { margin-top:40px; } 
	.project-box .listbox ul { flex-wrap:wrap; gap:10px; margin:0 auto; max-width:640px; }
	.project-box .listbox li { width:180px; }
	.project-box .listbox li .box { height:180px; }
	.project-box .listbox li .box a { border-radius:10px; }
	.project-box .listbox li .box .txt { margin-top:40px; font-size:16px; }
	.project-box .listbox li .box:before { top:100px; width:10px; height:10px; }
	.project-box .listbox .linebox { display:none }
	.project-box .listbox li .box.on a { background:#161616; }
	.project-box .listbox li .box .icon svg { height:50px; }
	.project-box .listbox li:hover .box.on .txt img { margin-left:10px }
}
@media screen and (max-width:640px){
	.project-box .listbox { margin-top:30px; } 
	.project-box .listbox ul { gap:5px; }
	.project-box .listbox li { width:170px; }
	.project-box .listbox li .box { height:150px; }
	.project-box .listbox li .box .txt { margin-top:35px; font-size:15px; }
	.project-box .listbox li .box:before { top:80px; }
	.project-box .listbox li .box .icon svg { height:40px; }
	.project-box .listbox li .box .txt img { width:6px; }
	.project-box .listbox li:hover .box.on .txt img { margin-left:7px }
}

/* animation */
.project-box .title-box h3 span { opacity:0; }
.aniBox.on .project-box .title-box h3 span { animation:ani_3 0.8s 0.01s; animation-fill-mode:both; }


.main3 { position:relative;  } 
.main3 .title-box { position:absolute; left:0; top:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; background:url(/img/main/about_bg.jpg) no-repeat center / cover; }
.main3 .title-box h3 { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;  }
.main3 .title-box h3 span { width:fit-content; color:rgba(255,255,255,0.2); background-size:200% 100%; -webkit-background-clip:text; background-position:100%;   }
.main3.active .title-box h3 span { background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 50%); -webkit-text-fill-color: transparent; }
.main3.active .title-box h3 span.stxt1 { animation:gradientShift 1.3s 0.5s cubic-bezier(0.42, 0, 1, 1); animation-fill-mode:both; }
.main3.active .title-box h3 span.stxt2 { animation:gradientShift 1.3s 1.8s cubic-bezier(0.42, 0, 1, 1); animation-fill-mode:both; }
.main3 .listbox { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; opacity:0; }
.main3.active .listbox.active { z-index:5; opacity:1; }
.main3 .listbox > ul { display:flex; height:100%; opacity:0; transition:all 0.8s; }
.main3 .listbox.active > ul { opacity:1; }
.main3 .listbox > ul > li { position:relative; width:calc(100% / 3); height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.main3 .listbox > ul > li .txtbox { transition:all 0.4s; position:relative; z-index:2; margin-top:80px; }
.main3 .listbox > ul > li dl { transition:all 0.4s; opacity:0.5; }
.main3 .listbox > ul > li dt { color:rgba(255,255,255,1); font-size:48px; font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.main3 .listbox > ul > li dd { color:rgba(255,255,255,1); font-size:18px; font-weight:400; line-height:1.6; margin-top:30px; }
.main3 .listbox > ul > li .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.main3 .listbox > ul > li .bg:before { transition:all 0.4s; opacity:0; content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(3, 110, 184, 0.4); }
.main3 .listbox > ul > li .bg1 { background-image:url(/img/main/about_over_bg1.jpg); }
.main3 .listbox > ul > li .bg2 { background-image:url(/img/main/about_over_bg2.jpg); }
.main3 .listbox > ul > li .bg3 { background-image:url(/img/main/about_over_bg3.jpg); }
.main3 .listbox > ul > li .btn { margin-top:50px; }
.main3 .listbox > ul > li .btn a { transition:all 0.4s; opacity:0; color:#fff; font-size:17px; font-weight:300; line-height:1.3; width:170px; height:50px; border-radius:99px; border:2px solid #fff; display:flex; justify-content:center; align-items:center; gap:0 15px; }
.main3 .listbox > ul.active > li:hover .txtbox { margin-top:-20px }
.main3 .listbox > ul.active > li:hover .bg:before { opacity:1; }
.main3 .listbox > ul.active > li:hover dl { opacity:1; }
.main3 .listbox > ul.active > li:hover .btn a { opacity:1; }
@media screen and (max-width:1440px){
	.main3 .listbox > ul > li dt { font-size:40px; }
	.main3 .listbox > ul > li dd { font-size:17px; margin-top:25px; }
	.main3 .listbox > ul > li .btn { margin-top:45px; }
	.main3 .listbox > ul > li .btn a { font-size:17px; width:170px; height:50px; }
}
@media screen and (max-width:1280px){
	.main3 .listbox > ul > li dt { font-size:30px; }
	.main3 .listbox > ul > li dd { font-size:16px; margin-top:20px; }
	.main3 .listbox > ul > li .btn { margin-top:40px; }
	.main3 .listbox > ul > li .btn a { font-size:16px; width:150px; height:45px; }
}
@media screen and (max-width:1024px){
	.main3 { padding:0; }
	.main3 .title-box { position:relative; height:200px; }
	.main3 .listbox { position:relative; z-index:5; opacity:1; }
	.main3 .listbox > ul { opacity:1; }
	.main3 .listbox > ul > li { height:300px; }
	.main3 .listbox > ul > li dt { font-size:26px; }
	.main3 .listbox > ul > li dd { font-size:15px; margin-top:10px; }
	.main3 .listbox > ul > li .btn { margin-top:20px; }
	.main3 .listbox > ul > li .btn a { font-size:15px; width:120px; height:40px; border-width:1px; opacity:1; }
	.main3 .listbox > ul > li .txtbox,
	.main3 .listbox > ul.active > li:hover .txtbox { margin-top:0; }
	.main3 .listbox > ul > li:hover .bg:before { opacity:1; }
	.main3 .aniBox.on .title-box h3 span { background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 50%); -webkit-text-fill-color: transparent; }
	.main3.active .title-box h3 span.stxt1 { animation:none; }
	.main3.active .title-box h3 span.stxt2 { animation:none; }
	.main3 .aniBox.on .title-box h3 span.stxt1 { animation:gradientShift 3s 0.7s; animation-fill-mode:both; }
	.main3 .aniBox.on .title-box h3 span.stxt2 { animation:gradientShift 3s 3.1s; animation-fill-mode:both; }
}
@media screen and (max-width:860px){
	.main3 .listbox > ul { flex-wrap:wrap; }
	.main3 .listbox > ul > li { width:100%; height:250px; }
}
@media screen and (max-width:640px){
	.main3 .title-box { height:180px; }
	.main3 .listbox > ul > li { height:200px; }
	.main3 .listbox > ul > li dt { font-size:22px; }
	.main3 .listbox > ul > li dd { font-size:15px; margin-top:5px; }
	.main3 .listbox > ul > li .btn { margin-top:15px; }
}

@keyframes gradientShift {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}


.main4 { background:#090909 url(/img/main/new_bg.svg) no-repeat right bottom; }
.main4 .new-box .title-box { position:absolute; left:0; top:0; z-index:2; text-align:left; }
.main4 .new-box .title-box h3 span { color:#fff }
.main4 .new-box .listbox > ul { display:flex; gap:25px; flex-wrap:wrap; }
.main4 .new-box .listbox > ul > li { width:calc((100% - 75px) / 4); }
.main4 .new-box .listbox > ul > li:nth-child(1) { margin-left:calc(25% + 5px) }
.main4 .new-box .listbox > ul > li:nth-child(2) { margin-right:25% }
.main4 .new-box .listbox > ul > li:nth-child(4) { margin-left:calc(25% + 5px) }
.main4 .new-box .listbox > ul > li .box { position:relative; width:100%; height:100%; overflow:hidden; border-radius:20px; }
.main4 .new-box .listbox > ul > li .box:before{ content:""; display:block; padding-bottom:85.2%; }
.main4 .new-box .listbox > ul > li .box img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; } 
.main4 .new-box .listbox > ul > li .box .over { position:absolute; left:0; top:0; width:100%; height:100%; z-index:3 }
.main4 .new-box .listbox > ul > li .box .over:before { transition:all 0.4s; opacity:0; content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(255, 106, 19, 0.5); }
.main4 .new-box .listbox > ul > li .box .over .txt { transition:all 0.4s; opacity:0;position:absolute; left:0; bottom:0; width:100%; padding:35px; }
.main4 .new-box .listbox > ul > li .box .over .txt h5 { font-family:var(--subFont); color:#fff; font-size:24px; font-weight:600; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.main4 .new-box .listbox > ul > li .box .over .txt .date { margin-top:15px; color:#fff; font-size:16px; font-weight:300; line-height:1.3; }
.main4 .new-box .listbox > ul > li .box:hover .over .txt { opacity:1; }
.main4 .new-box .listbox > ul > li .box:hover .over:before { opacity:1; }
.main4 .new-box .listbox .btn_more { position:absolute; right:0; top:0; width:calc((100% - 75px) / 4); }
.main4 .new-box .listbox .btn_more:before{ content:""; display:block; padding-bottom:85.2%; }
.main4 .new-box .listbox .btn_more a { transition:all 0.4s; font-family:var(--mainFont); color:rgba(255, 255, 255, 0.5); font-size:17px; font-weight:500; line-height:1.3; position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; gap:13px; border:1px solid rgba(255, 255, 255, 0.1); border-radius:20px; }
.main4 .new-box .listbox .btn_more a:hover { border-color:var(--mainColor); color:var(--mainColor); }
.main4 .new-box .listbox .btn_more a svg path { transition:all 0.4s; opacity:0.5; }
.main4 .new-box .listbox .btn_more a:hover svg path { fill:var(--mainColor); opacity:1; }
@media screen and (max-width:1540px){
	.main4 .new-box .title-box { left:20px; }
	.main4 .new-box .listbox .btn_more { right:20px; width:calc((100% - 75px - 40px) / 4); }
}
@media screen and (max-width:1440px){
	.main4 { background-size:440px auto; }
	.main4 .new-box .listbox > ul { gap:15px; }
	.main4 .new-box .listbox > ul > li { width:calc((100% - 45px) / 4); }
	.main4 .new-box .listbox > ul > li:nth-child(1) { margin-left:calc(25% + 3px) }
	.main4 .new-box .listbox > ul > li:nth-child(2) { margin-right:25% }
	.main4 .new-box .listbox > ul > li:nth-child(4) { margin-left:calc(25% + 3px) }
	.main4 .new-box .listbox > ul > li .box .over .txt { padding:25px; }
	.main4 .new-box .listbox > ul > li .box .over .txt h5 { font-size:22px; }
	.main4 .new-box .listbox > ul > li .box .over .txt .date { margin-top:10px; font-size:15px; }
	.main4 .new-box .listbox .btn_more { width:calc((100% - 45px - 40px) / 4); }
	.main4 .new-box .listbox .btn_more a { font-size:16px; }
}
@media screen and (max-width:1280px){
	.main4 .new-box .listbox > ul > li .box .over .txt { padding:20px; }
	.main4 .new-box .listbox > ul > li .box .over .txt h5 { font-size:21px; }
}
@media screen and (max-width:1024px){
	.main4 { background-size:350px auto; }
	.main4 .aniBox { padding:50px 0 }
	.main4 .new-box .listbox > ul { gap:10px; }
	.main4 .new-box .listbox > ul > li { width:calc((100% - 20px) / 3); }
	.main4 .new-box .listbox > ul > li:nth-child(1) { margin-left:calc(33.333% + 3px); margin-right:calc(33.333% + 3px);}
	.main4 .new-box .listbox > ul > li:nth-child(2) { margin-right:0; }
	.main4 .new-box .listbox > ul > li:nth-child(4) { margin-left:0; }
	.main4 .new-box .listbox > ul > li:nth-child(5) { margin-left:calc(33.333% + 3px) }
	.main4 .new-box .listbox > ul > li .box { border-radius:10px; }
	.main4 .new-box .listbox > ul > li .box .over .txt { padding:12px; }
	.main4 .new-box .listbox > ul > li .box .over .txt h5 { font-size:20px; }
	.main4 .new-box .listbox > ul > li .box .over .txt .date { margin-top:5px; font-size:14px; }
	.main4 .new-box .listbox .btn_more { width:calc((100% - 20px - 40px) / 3); }
	.main4 .new-box .listbox .btn_more a { font-size:15px; border-radius:10px; }
}
@media screen and (max-width:760px){
	.main4 .new-box .title-box { position:relative; left:0; min-height:120px; }
	.main4 .new-box .title-box .txt br { display:none }
	.main4 .new-box .listbox { margin-top:20px; }
	.main4 .new-box .listbox > ul > li { width:calc((100% - 10px) / 2); }
	.main4 .new-box .listbox > ul > li:nth-child(1) { margin-left:0; margin-right:calc(50% + 3px);}
	.main4 .new-box .listbox > ul > li:nth-child(5) { margin-left:0 }
	.main4 .new-box .listbox .btn_more { width:calc((100% - 10px - 40px) / 2); top:calc(120px + 20px); }
}
@media screen and (max-width:640px){
	.main4 { background-size:250px auto; }
	.main4 .aniBox { padding:0 }
	.main4 .new-box .title-box { min-height:100px; }
	.main4 .new-box .listbox > ul { gap:5px; }
	.main4 .new-box .listbox > ul > li { width:calc((100% - 5px) / 2); }
	.main4 .new-box .listbox > ul > li .box .over .txt { padding:10px; }
	.main4 .new-box .listbox > ul > li .box .over .txt h5 { font-size:18px; }
	.main4 .new-box .listbox > ul > li .box .over .txt .date { margin-top:3px; font-size:13px; }
	.main4 .new-box .listbox .btn_more { width:calc((100% - 5px - 40px) / 2); top:calc(100px + 20px); }
	.main4 .new-box .listbox .btn_more a { font-size:14px; }
}


/* animation */
.main4 .title-box h3 span { opacity:0; }
.main4 .aniBox.on .new-box .title-box h3 span { animation:ani_3 0.8s 0.01s; animation-fill-mode:both; }
.main4 .new-box .listbox > ul > li,
.main4 .new-box .listbox .btn_more { opacity:0; }
.main4 .aniBox.on .new-box .listbox > ul > li:nth-child(1) { animation:ani_2 0.8s 0.1s; animation-fill-mode:both; }
.main4 .aniBox.on .new-box .listbox > ul > li:nth-child(2) { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.main4 .aniBox.on .new-box .listbox > ul > li:nth-child(3) { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
.main4 .aniBox.on .new-box .listbox > ul > li:nth-child(4) { animation:ani_1 0.8s 0.7s; animation-fill-mode:both; }
.main4 .aniBox.on .new-box .listbox > ul > li:nth-child(5) { animation:ani_1 0.8s 0.9s; animation-fill-mode:both; }
.main4 .aniBox.on .new-box .listbox .btn_more { animation:ani_5 0.8s 1.3s; animation-fill-mode:both; }



.main5 { position:relative; background:url(/img/main/contact_bg.jpg) no-repeat center / cover; } 
.main5 .contact-box .title-box h3 span { color:#fff }
.main5 .contact-box .ip-box { margin-top:70px; display:flex; flex-wrap:wrap; gap:20px; }
.main5 .contact-box .ip-box > div { width:calc(50% - 10px); }
.main5 .contact-box .ip-box .l-box li:not(:last-child) { margin-bottom:17px; }
.main5 .contact-box .ip-box .l-box li { height:102px; display:flex; align-items:center; background:rgba(255,255,255,0.15); border-radius:10px; padding:0 40px; }
.main5 .contact-box .ip-box .l-box li > label { color:#fff; font-size:19px; font-weight:600; line-height:1.3; width:105px; display:block; }
.main5 .contact-box .ip-box .l-box li .ipC { position:relative; padding-left:30px; width:calc(100% - 105px); }
.main5 .contact-box .ip-box .l-box li .ipC:before { content:""; display:block; width:1px; height:15px; position:absolute; left:0; top:50%; transform:translateY(-50%); background:rgba(255, 255, 255, 0.2); }
.main5 .contact-box .ip-box .stxt { background:rgba(255,255,255,0.15); border-radius:10px; padding:30px 40px; height:300px; }
.main5 .contact-box .ip-box .stxt strong {  color:#fff; font-size:19px; font-weight:600; line-height:1.3; }
.main5 .contact-box .ip-box input[type="text"],
.main5 .contact-box .ip-box input[type="password"] { height:60px; padding:0; width:100%; font-size:17px; color:#fff; font-weight:500; border:none; outline:none; background:none; border-radius:0; }
.main5 .contact-box .ip-box select { width:100%; height:60px; line-height:60px; padding:0 50px 0 0; font-size:17px; color:#fff; font-weight:500;  border:none; outline:none; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url(/img/main/icon_select_down.png) right center no-repeat; }
.main5 .contact-box .ip-box select option { color:#666 }
.main5 .contact-box .ip-box select::-ms-expand { display: none; }
.main5 .contact-box .ip-box textarea { margin-top:25px; width:100%; height:190px; line-height:1.6; padding:0; font-size:17px; color:#fff; font-weight:500; border:none; outline:none; background:none; border-radius:0; }
.main5 .contact-box .ip-box input::placeholder,
.main5 .contact-box .ip-box textarea::placeholder { color:#fff; opacity:1; font-weight:300; }
.main5 .contact-box .ip-box .ch-box { margin-top:20px; display:flex; align-items:center; justify-content:flex-end; gap:0 20px; }
.main5 .contact-box .ip-box .ch-box a { position:relative; color:#fff; font-weight:400; font-size:17px; line-height:1.3}
.main5 .contact-box .ip-box .ch-box a:before { content:""; display:block; width:1px; height:15px; position:absolute; left:-10px; top:50%; transform:translateY(-50%); background:rgba(255, 255, 255, 0.2); }
.main5 .contact-box .ip-box .ch { display:flex; }
.main5 .contact-box .ip-box .ch input[type="checkbox"] {opacity:0; height:auto; }
.main5 .contact-box .ip-box .ch input[type="checkbox"] + span { position:relative; padding:0 0 0 10px; font-weight:400; font-size:17px; line-height:1.3 !important; display:inline-block; color:#fff; }
.main5 .contact-box .ip-box .ch input[type="checkbox"] + span:before  { content:''; display:block; width:16px; height:17px; vertical-align:middle; transition:all 0.3s; background:url(/img/main/ch_off.svg) no-repeat center/ cover; position:absolute; left:-14px; top:4px; }
.main5 .contact-box .ip-box .ch input[type="checkbox"]:checked + span:before { background:url(/img/main/ch_on.svg) no-repeat center/ cover; }
.main5 .contact-box .ip-box .r-box { display:flex; flex-direction:column; justify-content:space-between;}
.main5 .contact-box .ip-box button[type="submit"] { height:80px; display:flex; align-items:center; justify-content:space-between; background:var(--mainColor); border-radius:10px; border:none; outline:none; padding:0 40px; }
.main5 .contact-box .ip-box button[type="submit"] strong { color:#fff; font-size:19px; font-weight:600; line-height:1.3; }
@media screen and (max-width:1280px){
	.main5 .contact-box .ip-box { margin-top:60px; }
	.main5 .contact-box .ip-box .l-box li:not(:last-child) { margin-bottom:10px; }
	.main5 .contact-box .ip-box .l-box li { height:80px; }
	.main5 .contact-box .ip-box .stxt { padding:25px 40px; height:220px; }
	.main5 .contact-box .ip-box textarea { margin-top:20px; height:120px; }
	.main5 .contact-box .ip-box .ch-box { margin-top:10px; }
	.main5 .contact-box .ip-box button[type="submit"] { height:70px; }
}
@media screen and (max-width:1024px){
	.main5 .contact-box .ip-box { margin-top:40px; }
	.main5 .contact-box .ip-box .l-box li { border-radius:5px; padding:0 20px; }
	.main5 .contact-box .ip-box .l-box li > label { font-size:18px; width:85px; }
	.main5 .contact-box .ip-box .l-box li .ipC { padding-left:20px; width:calc(100% - 85px); }
	.main5 .contact-box .ip-box .stxt { padding:25px 20px; border-radius:5px; }
	.main5 .contact-box .ip-box input[type="text"],
	.main5 .contact-box .ip-box input[type="password"],
	.main5 .contact-box .ip-box select,
	.main5 .contact-box .ip-box textarea,
	.main5 .contact-box .ip-box .ch input[type="checkbox"] + span,
	.main5 .contact-box .ip-box .ch-box a { font-size:16px; }
	.main5 .contact-box .ip-box .ch input[type="checkbox"] + span:before  { left:-12px; top:3px; }
	.main5 .contact-box .ip-box button[type="submit"] { padding:0 20px; }
	.main5 .contact-box .ip-box button[type="submit"] strong { font-size:18px; border-radius:5px; }
}
@media screen and (max-width:860px){
	.main5 .contact-box .ip-box { gap:10px; }
	.main5 .contact-box .ip-box > div { width:100%; }
	.main5 .contact-box .ip-box button { margin-top:20px; }
}
@media screen and (max-width:640px){
	.main5 .contact-box .ip-box { margin-top:20px; gap:5px; }
	.main5 .contact-box .ip-box .l-box li { padding:0 15px; height:60px; }
	.main5 .contact-box .ip-box .l-box li > label { font-size:17px; width:75px; }
	.main5 .contact-box .ip-box .l-box li .ipC { width:calc(100% - 75px); }
	.main5 .contact-box .ip-box .l-box li:not(:last-child) { margin-bottom:5px; }
	.main5 .contact-box .ip-box textarea { margin-top:10px; }
	.main5 .contact-box .ip-box button[type="submit"] { height:60px; }
}

/* animation */
.main5 .contact-box .title-box { opacity:0; }
.main5 .aniBox.on .contact-box .title-box { animation:ani_3 0.8s 0.01s; animation-fill-mode:both; }
.main5 .contact-box .ip-box { opacity:0; }
.main5 .aniBox.on .contact-box .ip-box { animation:ani_3 1.0s 0.5s; animation-fill-mode:both; }