#main_visual{position: relative; width: 100%; height:100vh; background: #020202;}
#main_visual .title{position: absolute; left:5%; bottom:15vh;color: #fff; z-index: 10;}
#main_visual .title h4{font-size: clamp(19px, 2.5vw, 21px);font-weight:700; color: #ff2d02;}
#main_visual .title h2{margin:0.15em 0 0.2em;font-size: clamp(30px, 9.5vw, 64px); font-weight: 700;}
#main_visual .title p{margin-bottom:1.5em;font-size: clamp(15px, 1vw, 17px);}
#main_visual .title a{display:flex;padding:8px 16px;width: 120px;column-gap:8px; border:2px solid #fff; border-radius:100px; justify-content:center; align-items:center;  transition:0.3s }
#main_visual .title a span{display: block;font-weight:600;font-size:16px;}
#main_visual .title a img{width:12px; transition:0.3s}
#main_visual .title a:hover{background: #fff !important; color: #111 !important;border:2px solid #fff !important; }
#main_visual .title a:hover img{transform:rotate(-45deg);filter: invert(1);}
#main_visual .video{position:fixed; width:100%;height:100vh; overflow: hidden;transition:1s; z-index:5; background: #020202;}
#main_visual .video video{position: absolute;width:1920px; height:1080px; left: 50%; top:50%; transform:translate(-50%,-50%);opacity: 0.9;}
@media all and (min-width:1921px){
	#main_visual .video video{width:100%; height:auto;}

}

#main_intro{position: relative;padding:20vh 0; text-align: center; background:rgba(3,3,3,0.7);backdrop-filter: blur(20px); z-index: 5;}
#main_intro .intro_logo{position: relative;width:30%; margin:0 auto 36px; z-index: 10;}
#main_intro .intro_logo img{width:100%;}
#main_intro .title{position: relative; z-index: 10;font-size: clamp(17px, 1.6vw, 21px); line-height:1.8; margin-bottom:2.2em; color: #fff; letter-spacing:0; font-weight:400;}
#main_intro .title h2{display: none;font-weight:500;}
#main_intro .list{position: relative; z-index: 10;padding: 0 5%}
#main_intro .list ul{display: flex; justify-content:center; gap:24px}
#main_intro .list ul li{display:flex;align-items:center;  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);padding:3em 2.5em; border-radius:24px;justify-content: space-between; transition:0.3s}
#main_intro .list ul li .text{width:65%; text-align:left;font-size: clamp(16px, 1vw, 18px); color: #aaa;}
#main_intro .list ul li .text h3{color: #ff2f00; margin-bottom:0.1em;font-size: clamp(24px, 2vw, 36px); font-weight: 800;}
#main_intro .list ul li .icon{width:25%;}
#main_intro .list ul li:hover{background: rgba(255,255,255,0.07); box-shadow:inset 0 0 100px rgba(255,255,255,0.15)}
#main_intro .list ul li:hover .text p{color: #fff;}
#main_logo path,
#main_logo g path {
    stroke: #FF4B00;
    stroke-width: 1;
    fill: transparent;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}
#main_logo.animate path,
#main_logo.animate g path {
    animation: draw 2.5s ease-in-out forwards, fillIn 1s ease-in-out forwards 2s;
}

@keyframes draw {
    from {
        stroke-dashoffset: 1500;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillIn {
    from {
        fill: transparent;
    }
    to {
        fill: #ff2f00;
    }
}

#main_product{position: relative; padding:10vh 0;z-index: 10; background: #fff;}
#main_product .inner{padding:0 5%;display:grid; grid-gap:24px}
#main_product .inner .product:nth-child(1){grid-column:1/3 ;grid-row:1 /2; height:600px;}
#main_product .inner .product:nth-child(2){grid-column:1;grid-row:2 /3; height:320px;}
#main_product .inner .product:nth-child(3){grid-column: 2;grid-row:2 / span 3; height:782px;}
#main_product .inner .product:nth-child(4){grid-column:1;grid-row:3 / 3; height: 320px;}
#main_product .inner .product{position: relative;border-radius:24px;;display:flex;padding:3vw; background: #111;	color: #fff;flex-direction: column;    justify-content: center; overflow: hidden;}
#main_product .inner .product .title{position: relative; z-index: 5;}
#main_product .inner .product .title span{color: #ff2f00; font-weight: bold; font-size:1.1em;}
#main_product .inner .product .title h2{font-size:3.5em; margin:0.1em 0 0.25em; font-weight:700;}
#main_product .inner .product .title p{font-size:1em; line-height:1.8; font-weight:400;}
#main_product .inner .product a.product_btn{position: relative; z-index: 5;display:flex;font-size: 0.9em;margin-top:1.2em;width:220px;height:40px; line-height:40px;background: #ff2f00; color: #fff; text-align: center; border-radius:100px; justify-content:center; }
#main_product .inner .product a.product_btn:hover img{transform:rotate(90deg)}
#main_product .inner .product a.product_btn img{margin-left:8px;width:12px; transition:0.5s}

#main_product .video{position:absolute; left: 0;width:100%;height:100vh; overflow: hidden;transition:1s; z-index:5; background: #000; z-index: 0;}
#main_product .video video{position: absolute; width:1920px; height:1080px; left: 50%; top:50%; transform:translate(-50%,-50%);opacity: 0.9;}
@media all and (min-width:1921px){
	#main_product  .video video{width:100%; height:auto;}

}



#partner{position: relative;padding:5vh 0 12vh; background: #fff; box-sizing:border-box; z-index: 10;}
#partner .title{display:flex;width:100%; text-align: center; justify-content:center; align-content:center; align-items:center;  }
#partner .title h2{margin-bottom:0.1em;font-size: clamp(48px, 5vw, 64px); font-weight:bold;}
#partner .title p{color: #aaa;margin-bottom:36px; font-size:clamp(16px, 2vw, 20px);font-weight:bold;}
#partner .swiper-container .swiper-button-next:after,.swiper-container .swiper-button-prev:after{display: none;}
#partner .swiper-container .swiper-wrapper{transition-timing-function: linear;	}


#db{position: relative; z-index: 10;display:flex; padding:15vh 0;background: url(../image/db_bg.jpg) no-repeat 50% 0 / cover #101010; color: #fff; flex-wrap:wrap}
#db .title{display:flex;width:45%; text-align: center; justify-content:center; align-content:center; align-items:center;  }
#db .title h2{margin-bottom:0.2em;font-size: clamp(48px, 5vw, 64px); font-weight:bold;}
#db .title p{color: #ff2f00; font-size:clamp(16px, 2vw, 20px);font-weight:bold;}
#db .title p br{display: none;}
#db .db_wrap{width:38%;}
#db .db_wrap .db_list{position: relative;margin-bottom:2.4em;}
#db .db_wrap .db_list h3{display:flex;margin-bottom:0.8em;font-size: clamp(20px, 2vw, 24px); align-items:center; font-weight:bold; }
#db .db_wrap .db_list h3 span{font-size:0.7em; margin-right:8px;		color: #ff2f00;}
#db .db_wrap .db_list  .db_category .db_product{display:flex; width: 100%; background: #202020; border:1px solid #393939; border-radius:16px; overflow: hidden;}
#db .db_wrap .db_list  .db_category .db_product li{position: relative;width:100%;  text-align: center; border-right: 1px solid #393939;}
#db .db_wrap .db_list  .db_category .db_product li:last-child{border-right: 0;}
#db .db_wrap .db_list  .db_category .db_product li label{display: block; height:60px; line-height:60px; transition:0.3s}
#db .db_wrap .db_list  .db_category .db_product li input[type="checkbox"]{position: absolute;width:0;height: 0; top:-20px; left:-20px;}
#db .db_wrap .db_list  .db_category .db_product li input[type="checkbox"]:checked ~ label{background: #ff2f00;	color: #fff;}
#db .db_wrap .db_list  .db_category .db_product.icon_check li label span{display: inline-block;padding-left:30px; background:url(../image/icon_check_off.png) no-repeat 0 50% ; background-size:20px}
#db .db_wrap .db_list  .db_category .db_product.icon_check li input[type="checkbox"]:checked ~ label span{ background:url(../image/icon_check_on_wh.png) no-repeat 0 50% ;background-size:20px}
#db .db_wrap .db_list  .db_category .db_info{display:flex; padding: 20px 24px; background: #202020; border:1px solid #393939; border-radius:16px; margin-bottom:16px; transition:0.3s;}
#db .db_wrap .db_list  .db_category .db_info.on{border:1px solid #ff2f00;}
#db .db_wrap .db_list  .db_category .db_info label{width:110px; font-size:20px; font-weight:600;}
#db .db_wrap .db_list  .db_category .db_info label i{display: inline-block;color: #ff2f00; transform:translate(0,-5px)}
#db .db_wrap .db_list  .db_category .db_info input,#db .db_wrap .db_list  .db_category .db_info textarea{width: 100%;background:none; border:none; resize:none;font-size:1.05em;}
#db .db_wrap .db_list  .db_category .db_info textarea{padding-top:6px;}
#db .agree_text_layer{z-index:1000;position: absolute; display: none;width:90%;border-radius:24px;box-sizing:border-box;max-width:640px;padding:48px;left: 50%; top:50%;transform:translate(-50%,-50%); background:rgba(0,0,0,0.6); border:2px solid #ff2f00;backdrop-filter: blur(10px); }
#db .agree_text_layer h3{padding-bottom:0.5em;border-bottom: 1px solid #ff2f00;font-size:1.8em; margin-bottom:0.5em;font-weight:bold;}
#db .agree_text_layer p{font-size:0.95em; line-height:1.6;}
#db .agree_text_layer p strong{font-size:1.1em;}
#db .agree_text_layer p em{display: block;opacity:0.9; margin-top:8px; font-size:0.9em;}
#db .agree_text_layer .layer_close_btn{position: absolute;padding:12px; box-sizing:border-box;right:16px;	top:16px;border:none;-webkit-appearance: none;-moz-appearance: none;appearance: none; background:#ff2f00;  border-radius:100px;}
#db .agree_text_layer .layer_close_btn img{width:16px;}
#db .db_wrap .db_list  .db_category.db_agree label span{display:inline-block; padding-left:28px;  background:url(../image/icon_check_off.png) no-repeat 0 50% ; background-size:20px}
#db .db_wrap .db_list  .db_category.db_agree input[type="checkbox"]:checked ~ label span{background:url(../image/icon_check_on.png) no-repeat 0 50% ;background-size:20px; color: #ff2f00;}
#db .db_wrap .db_list  .db_category.db_agree input[type="checkbox"]{position: absolute;width:0;height: 0; top:-20px; left:-20px;}
#db .db_wrap .db_list  .db_category.db_agree .agree_text{display: inline-block; margin-left:4px;font-size:0.9em; opacity:0.6;}
#db .db_wrap .db_submit button{margin:0 auto;width:400px;display:flex;font-size:1.5em;font-weight:700;height:70px; line-height:70px; border:2px solid #fff; justify-content:center; align-content:center; align-items:center; cursor: pointer; border-radius:100px; background:rgba(255,255,255,0); color: #fff; transition:0.3s}
#db .db_wrap .db_submit button:hover{background:rgba(255,255,255,0.9); color: #111;}
#db .db_wrap .db_submit button:hover img{filter: invert(1); transform:translate(6px,0)}
#db .db_wrap .db_submit button img{width:16px; margin-left: 8px; transition:0.3s}




@media all and (max-width:1440px){
	#db .db_wrap{width:50%;}
	#main_product .inner .product .title h2{font-size:3.2em;}
}

@media all and (max-width:1200px){
	#main_intro{padding:12vh 4% 10vh;text-align: center;}
	#main_intro .intro_logo{width:55%; margin:0 auto 36px;}
	#main_intro .title{padding:0 4%;}
	#main_intro .title strong{display: block;}
	#main_intro .title p br{display: none;}
	#main_intro .list{padding:0 0; }
	#main_intro .list ul{gap:16px}
	#main_intro .list ul li .text{width:80%;}
	#main_intro .list ul li .icon{width:20%;}

	#main_product .inner{padding:0 5%;display:flex; gap:24px;flex-direction: column;}
	#main_product .inner .product{padding:10% 5% 8%; }
	#main_product .inner .product:nth-child(1){height: auto;}
	#main_product .inner .product:nth-child(2){height: auto;}
	#main_product .inner .product:nth-child(3){height: auto;}
	#main_product .inner .product:nth-child(4){height: auto;}
	#db .title{width:45%;}
}


@media all and (max-width:1024px){
	#main_visual .title{left:8%; bottom:8vh;;}
	#main_intro .intro_logo{width:65%;margin:0 auto 24px;}
	#main_intro .list {max-width:700px; margin:0 auto;}
	#main_intro .list ul{flex-wrap:wrap; gap:20px}
	#main_intro .list ul li{width: 100%;padding: 2.5em 2.5em;}
	#main_product .inner{gap:20px;}
	#main_product .inner .product .title h2{font-size:2.7em;}
	#main_product .inner .product .title p{line-height:1.6;}
	#main_product .inner .product .title p br{display: none;}

	#db{display:flex; padding:12vh 6%;}
	#db .title{margin-bottom:2em;}
	#db .db_wrap{max-width:640px;width: 100%; margin:0 auto;}
	#db .title{width:100%;}
	#db .db_wrap .db_list .db_category .db_product li label{font-size:15px;}
	#db .db_wrap .db_list .db_category .db_info label{font-size:18px;}
	#db .db_wrap .db_list  .db_category .db_info{ padding: 16px 24px; }
	#db .db_wrap .db_submit button{width:80%;}
}


@media all and (max-width:864px){
	#main_visual .title{left:6%; bottom:15vh}
	#main_visual .title a{padding:6px 16px;width: 110px;column-gap:8px; font-size: 15px;}

	#main_intro .intro_logo{width:70%;}
	#main_product .inner .product{padding:80px 8% 64px; text-align: center; }
	#main_product .inner .product .title h2{font-size:2.3em;}
	#main_product .inner .product .product_btn{margin:0 auto;}
	#db .title p br{display: block;}
	#main_visual .video video{height:100%;}
	#db .agree_text_layer{position: fixed;padding:48px 24px;}
}