@import url("common.css");


/*** Visual ***/
#visual {width:100%; height:var(--vh); overflow:hidden; background:var(--black); position:relative;}
#visual .visual_in {width:100%; height:100%; position:relative;}
#visual .visual_in .roll {width:100%; height:var(--vh); position:relative;}
#visual .visual_in .roll .v_bg {position:absolute; left:0; top:0; width:100%; height:100%;}
#visual .visual_in .roll .v_bg .bg {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; transform:scale(1.1); transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}



#visual .visual_in .roll .v_txt {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index:10; width:90%; max-width:1350px;}
#visual .visual_in .roll .v_txt .fs60 {color:var(--white); transition:all .6s .3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs24 {margin:24px 0 0; color:rgba(255,255,255,0.7); transition:all .6s .6s linear; opacity:0; transform:translateY(60px);}


#visual .indicator {position:absolute; left:50%; bottom:55px; transform:translateX(-50%); display:flex; align-items:center; gap:15px; z-index:9999;}
#visual .indicator .prev,
#visual .indicator .next {border:0; background:none; padding:0; cursor:pointer; font-size:0;}
#visual .indicator .prev::before,
#visual .indicator .next::before {display:block; font-family:var(--icon); font-size:28px; color:var(--white); line-height:1; font-weight:400; display:block;}
#visual .indicator .prev::before {content:'\e314';}
#visual .indicator .next::before {content:'\e315';}
#visual .indicator .fs16 {display:flex; align-items:center; gap:10px; color:var(--white);}
#visual .indicator .fs16 * {font-family: var(--eng); line-height: 1; letter-spacing: 0; display:block;}
#visual .indicator .slash {opacity:.5;}
#visual .indicator .total {opacity:.5; font-style:normal;}
#visual .scroll_down {position:absolute; right:calc((100% - 1350px) / 2); bottom:50px; z-index:9999; display:flex; align-items:flex-start; gap:3px; overflow:hidden;}
#visual .scroll_down span {display:block; line-height:1;}
#visual .scroll_down::before {content:'\ead0'; font-size:22px; display:block; line-height:1; font-family:var(--icon); animation: scroll_down 1.8s infinite; color:var(--white);}


#visual .visual_in .roll.action .v_bg .bg {transform:scale(1);}
#visual .visual_in .roll.action .v_txt .fs60 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs24 {transform:translateY(0); opacity:.7;}

@keyframes scroll_down {
	0% {
		transform: translateY(-100%);
		opacity: 0;
		animation-timing-function: ease-out; 
	}
	25% {
		transform: translateY(2px);
		opacity: 1;
	}
	70% {
		transform: translateY(2px);
		opacity: 1;
		animation-timing-function: ease-in; 
	}
	100% {
		transform: translateY(150%); 
		opacity: 0;
	}
}


/*** Product ***/
#product {background:var(--blueBg);}
#product .tit_area {display:flex; align-items:flex-end; justify-content:space-between; gap:30px;}
#product .tit_area .tit_wrap {display:flex; align-items:flex-end; gap:30px; flex:1;}
#product .tit_area .tit_wrap .fs50 {white-space:nowrap;}
#product .tit_area .tit_wrap .fs18 {padding-bottom:6px;}

#product .tit_area .control {display:flex; align-items:center; gap:4px; flex-shrink:0;}
#product .tit_area .control .prev,
#product .tit_area .control .next {width:54px; height:54px; border:1px solid rgba(26,26,26,.3); border-radius:50%; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s linear; font-size:0;}
#product .tit_area .control .prev::before,
#product .tit_area .control .next::before {display:block; font-family:var(--icon); font-size:28px; color:var(--black); line-height:1; font-weight:400;}
#product .tit_area .control .prev::before {content:'\e314';}
#product .tit_area .control .next::before {content:'\e315';}
#product .tit_area .control .prev:hover,
#product .tit_area .control .next:hover {background:var(--white); border-color:var(--white); box-shadow:0 4px 16px rgba(27,47,103,.1); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px);}
#product .tit_area .control .prev:hover::before,
#product .tit_area .control .next:hover::before {color:var(--main);}
#product .product_roll {width:100%; margin:50px 0 0; overflow:visible;}
#product .product_roll.swiper-container {overflow:visible;}
#product .product_roll li {opacity:0.2; transition:opacity .3s linear;}
#product .product_roll li.swiper-slide-fully-visible {opacity:1; transition:opacity .3s linear;}
#product .product_roll li a {background:var(--white); padding:20px 20px 45px; box-sizing:border-box; text-align:center; display:block;}
#product .product_roll li a::after {content:''; width:100%; height:100%; border:3px solid var(--main); position:absolute; left:0; top:0; z-index:0; pointer-events: none; box-sizing: border-box; opacity:0; transition:opacity .3s linear;}
#product .product_roll li a:hover::after {opacity:1; transition:opacity .3s linear;}
#product .product_roll li figure {width:100%; aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center; margin: 0 0 20px;}
#product .product_roll li figure img {width:100%; height:100%; object-fit:cover; display:block;}
#product .product_roll li .fs16 {opacity:.5; margin:0 0 4px; font-weight: 600;}
#product .product_roll li .fs24 {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; font-weight: 600; color:var(--black); transition:all 0.3s linear;}
#product .product_roll li a:hover .fs24 {color:var(--main); transition:all 0.3s linear;}
#product .progress_area {display:flex; align-items:center; gap:30px; margin:50px 0 0;}
#product .progress_area .progress {flex:1; height:4px; background:rgba(102,102,102,.2); border-radius:3px; overflow:hidden;}
#product .progress_area .progress span {display:block; height:100%; width:0; background:var(--main); border-radius:3px; transition:width .6s linear;}
#product .progress_area p {display:flex; align-items:center; gap:8px; white-space:nowrap;}
#product .progress_area p strong {color:var(--black); font-family: inherit; line-height: 1; display:block;}
#product .progress_area p em {opacity:.7; font-style:normal; font-family: inherit; line-height: 1; display:block;}


/*** Data ***/
#data {background:var(--white); position:relative; overflow:hidden; z-index: 10;}
#data:before {content:''; display:block; width:100%; height:100%; background:url('/img/data_bg.png') no-repeat center top/cover; position:absolute; left:0; top:0; mix-blend-mode:luminosity; opacity:.6; pointer-events:none; z-index: -1;}
#data .basic_in {position:relative; z-index:1;}
#data .data_top {display:flex; gap:30px; align-items:flex-start;}
#data .data_top .tit_wrap {width:calc(50% - 15px); flex-shrink:0;}
#data .data_top .tit_wrap .fs18 {margin:20px 0 0;}
#data .data_top .tit_wrap .more_btn {margin:40px 0 0;}
#data .data_top .news_list {width:calc(50% - 15px);}
#data .data_top .news_list li + li {margin-top:5px;}
#data .data_top .news_list li a {display:flex; align-items:center; gap:20px; padding:30px; background:var(--grayBg); box-sizing:border-box; position:relative;}
#data .data_top .news_list li a::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(27,47,103,.05); opacity:0; transition:opacity .3s linear; pointer-events:none; z-index:0;}
#data .data_top .news_list li dl {flex:1; min-width:0; position:relative; z-index:1;}
#data .data_top .news_list li .fs20 {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .3s linear; font-weight:600;}
#data .data_top .news_list li .fs14 {opacity:.7; margin:5px 0 0;}
#data .data_top .news_list li a .arr {width:50px; height:50px; border-radius:50%; background:var(--white); box-shadow:0 0 5px rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0; transition:background .3s linear; position:relative; z-index:1;}
#data .data_top .news_list li a .arr::before {content:'\e315'; display:block; font-family:var(--icon); font-size:24px; line-height:1; font-weight:400; color:var(--black); transition:color .3s linear;}
#data .data_top .news_list li a:hover::after {opacity:1;}
#data .data_top .news_list li a:hover .fs20 {color:var(--main);}
#data .data_top .news_list li a:hover .arr {background:var(--main);}
#data .data_top .news_list li a:hover .arr::before {color:var(--white);}
#data .banner {display:flex; gap:30px; margin:80px 0 0;}
#data .banner a {display:flex; align-items:center; justify-content:space-between; width:calc(50% - 15px); height:220px; padding:0 40px; box-sizing:border-box; background-repeat:no-repeat; background-size:cover; background-position:center; position:relative; overflow:hidden;}
#data .banner a:nth-child(1) {background-image:url('/img/bn_cert.jpg');}
#data .banner a:nth-child(2) {background-image:url('/img/bn_catalog.jpg');}
#data .banner a::after {content:''; position:absolute; left:0; bottom:0; width:100%; height:0; background:rgba(27,47,103,.8); transition:all .3s linear; pointer-events:none; z-index:0;}
#data .banner a strong {color:var(--white); position:relative; z-index:1;}
#data .banner a .arr {width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.3); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; font-size:0; transition:background .3s linear;}
#data .banner a .arr::before {content:'\e315'; display:block; font-family:var(--icon); font-size:24px; line-height:1; font-weight:400; color:var(--white); transition:color .3s linear;}
#data .banner a:hover::after {height:100%; transition:all .3s linear;}
#data .banner a:hover .arr {background:var(--white);}
#data .banner a:hover .arr::before {color:var(--main);}








/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

#visual {height:900px;}
#visual .visual_in .roll {height:900px;}
#visual .scroll_down {right:5%;}

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

#visual {height:800px;}
#visual .visual_in .roll {height:800px;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

#visual {height:var(--vh);}
#visual .visual_in .roll {height:var(--vh);}
#visual .visual_in .roll .v_txt .fs60 {}
#visual .visual_in .roll .v_txt .fs24 {margin:15px 0 0;}
#visual .indicator {bottom:30px;}
#visual .indicator .prev,
#visual .indicator .next {width:24px; height:24px;}
#visual .indicator .prev::before,
#visual .indicator .next::before {font-size:24px; line-height:1;}
#visual .scroll_down {bottom:30px;}
#visual .scroll_down svg {display:block; line-height: 1; width:20px; height:auto;}
#visual .scroll_down::before {font-size: 18px;}

#product .tit_area {gap:20px;}
#product .tit_area .tit_wrap {flex-direction:column; align-items:flex-start; gap:10px;}
#product .tit_area .tit_wrap .fs50 {line-height:1.35;}
#product .tit_area .tit_wrap .fs18 {line-height:1.71; padding:0;}
#product .tit_area .control .prev,
#product .tit_area .control .next {width:42px; height:42px;}
#product .tit_area .control .prev::before,
#product .tit_area .control .next::before {font-size:22px;}
#product .product_roll {width:100%; margin:30px 0 0; overflow:visible;}
#product .product_roll li a {padding:20px 20px 40px;}
#product .product_roll li .fs24 {line-height:1.5;}
#product .progress_area {margin:30px 0 0;}

#data .data_top {flex-direction:column; gap:0;}
#data .data_top .tit_wrap {display:contents;}
#data .data_top .tit_wrap .fs50 {order:1; line-height:1.35;}
#data .data_top .tit_wrap .fs18 {order:2; line-height:1.71; margin:10px 0 30px; width: 100%;}
#data .data_top .news_list {order:3; width:100%;}
#data .data_top .tit_wrap .more_btn {order:4; width:100%; margin:20px 0 0;}
#data .data_top .news_list li a {padding:20px;}
#data .data_top .news_list li .fs20 {line-height:1.625;}
#data .data_top .news_list li a .arr {width:40px; height:40px;}
#data .data_top .news_list li a .arr::before {font-size:19px;}

#data .banner {gap:20px;}
#data .banner a {width:calc(50% - 10px); height:180px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


	#product .product_roll li {opacity:1;}
	#product .product_roll.swiper-container {width:85%;}
	#data .data_top .news_list li .fs14 {margin:2px 0 0;}

	#data .banner {flex-direction:column; gap:2px; margin:30px 0 0;}
	#data .banner a {width:100%; height:130px; padding:0 20px;}
	#data .banner a .fs28 {font-size:1.333rem; line-height:1.5;}
	#data .banner a .arr {width:30px; height:30px;}
	#data .banner a .arr::before {font-size:18px;}

}