@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

.btn_more a{display:flex; align-items: center; color:#535353; transition:0.5s}
.btn_more a i{position:relative; display:inline-block; width:32px; height:32px; background:#b3b3b3; border-radius:50%; margin-left:20rem;}
.btn_more a i:before{content:''; position:absolute; display:block; width:13px; height:1px; left:10rem; top:50%; background:#fff;}
.btn_more a i:after{content:''; position:absolute; display:block; width:1px; height:13px;  left:50%;  top:10rem; background:#fff;}
.btn_more a:hover i{background:#003283; transition:0.5s}

.btn_more.white a{color:#fff;}
.btn_more.white a i{background:#fff;}
.btn_more.white a i:before{background:#111;}
.btn_more.white a i:after{background:#111;}
.btn_more.white a:hover i{}


.tit_main{position:relative;}
.tit_main span{font-size:22rem; color:#0047ba; font-weight:600; letter-spacing:-0.2rem}
.tit_main h2{margin-top:18rem; font-size:40rem;}

/* visual */
.area_visual{position:relative;}
.area_visual .list li,
.area_visual .bx-viewport{height:600rem;}
.area_visual .list li{background:#f7f7f7}
.area_visual .list li .img{position:absolute; right:150rem; top:50%; translate: 0 -50%; mask: url('/images/main/main-visual-mask.webp') no-repeat 50% / contain; }
.area_visual .list li .img img{}
.area_visual .list li .text{z-index: 10; position:absolute; left:150rem; top:45%; transform: translateY(-50%);}
.area_visual .list li .text h2{line-height:1.2; margin-bottom:30rem; font-weight:600; font-size:75rem; color:var(--color-point);}
.area_visual .list li .text p{font-size:22rem;}
.area_visual .list li.swiper-slide-active .img{animation: fade-in-left 1s ease-in-out;}


.area_visual .btn{position:absolute; left:150rem; bottom:0; width:110rem; height:55rem}
.area_visual .btn div[class*="swiper-button"]{width:54rem; height:54rem; }
.area_visual .btn div[class*="swiper-button"]:after{color:#fff; font-size:15rem;}
.area_visual .swiper-button-prev{left:0;background:#b2b2b2;}
.area_visual .swiper-button-next{right:0; background:#343b46;}
.area_visual .ex{position:absolute; bottom:15rem; left:290rem; color:#333}

@-webkit-keyframes 
fade-in-left{
	0%{
	-webkit-transform:translateX(50px);
	transform:translateX(50px);
	opacity:0}
	100%{
	-webkit-transform:translateX(0);
	transform:translateX(0);
	opacity:1}
}

@keyframes 
fade-in-left{
	0%{
		-webkit-transform:translateX(50px);
		transform:translateX(50px);
		opacity:0
	}
	100%{
		-webkit-transform:translateX(0);
		transform:translateX(0);
		opacity:1}
}


/* product */
.area_product{position: relative;margin: 160rem 0 0 0; padding-bottom:220rem;}
.area_product *{box-sizing:border-box;}

.area_product .list_wrap{display:flex; flex-direction: row-reverse;}
.area_product .list_wrap .tit_main{width:calc(100% - 920rem); padding-left:40rem;}
.area_product .list_wrap .tit_main h2{margin-bottom:30rem;}

.area_product .list_pro{display:flex; flex-wrap: wrap; width:920rem;}
.area_product .list_pro li{width:33.3%; height:310rem; background:#fff; border-left:1rem solid #ededed; border-top:1rem solid #ededed;transition:0.5s;}
.area_product .list_pro li:last-child{border-right:1rem solid #ededed}
.area_product .list_pro li:nth-child(3){border-right:1rem solid #ededed;}
.area_product .list_pro li:nth-child(2n)~li{border-bottom:1rem solid #ededed;}

.area_product .list_pro li a h3{font-size:26rem; color:#111; font-weight:600}
.area_product .list_pro li p{margin-top:15rem; font-size:18rem; color:#565656; font-weight:300}
.area_product .list_pro li a{display:block; padding:50rem; width:100%; height:100%; color:#fff; transition: all 0.5s ease;}
.area_product .list_pro li.on{box-shadow: 11rem 14rem 20rem rgb(0 0 0 / 20%); transition:0.5s; background-size:cover;}
.area_product .list_pro li.on *{color:#fff;}
.area_product .list_pro li.on[data-biz="01"]{background-image:url(../../images/main/img_pro01.jpg);}
.area_product .list_pro li.on[data-biz="02"]{background-image:url(../../images/main/img_pro02.jpg);}
.area_product .list_pro li.on[data-biz="03"]{background-image:url(../../images/main/img_pro03.jpg);}
.area_product .list_pro li.on[data-biz="04"]{background-image:url(../../images/main/img_pro04.jpg);}
.area_product .list_pro li.on[data-biz="05"]{background-image:url(../../images/main/img_pro05.jpg);}

.area_product .list_pro li span{display:inline-block; margin-top:30rem; width:70rem; height:70rem; background-repeat:no-repeat; background-position:50% 100%;}
.area_product .list_pro li[data-biz="01"] span{background-image:url(../../images/main/icon_pro01.svg); background-size:60rem}
.area_product .list_pro li[data-biz="02"] span{background-image:url(../../images/main/icon_pro02.svg); background-size:60rem}
.area_product .list_pro li[data-biz="03"] span{background-image:url(../../images/main/icon_pro03.svg); background-size:49rem}
.area_product .list_pro li[data-biz="04"] span{background-image:url(../../images/main/icon_pro04.svg); background-size:65rem}
.area_product .list_pro li[data-biz="05"] span{background-image:url(../../images/main/icon_pro05.svg); background-size:58rem}

.area_product .list_pro li.on[data-biz="01"] span{background-image:url(../../images/main/icon_pro01_w.svg);}
.area_product .list_pro li.on[data-biz="02"] span{background-image:url(../../images/main/icon_pro02_w.svg);}
.area_product .list_pro li.on[data-biz="03"] span{background-image:url(../../images/main/icon_pro03_w.svg);}
.area_product .list_pro li.on[data-biz="04"] span{background-image:url(../../images/main/icon_pro04_w.svg);}
.area_product .list_pro li.on[data-biz="05"] span{background-image:url(../../images/main/icon_pro05_w.svg);}


.area_product .img_wrap {position: absolute; top: 310rem; z-index: -1; height: 530rem; width: 100%; }
.area_product .img_wrap .wrap{position:relative;}
.area_product .biz_img{top: 310rem;right: 0; z-index: -1;}
.area_product .biz_img [data-biz].on{opacity:1;}
.area_product .biz_img [data-biz="01"]{background-image:url('/images/main/main_visual06.webp');}
.area_product .biz_img [data-biz="02"]{background-image:url('/images/main/main_visual05.webp');}
.area_product .biz_img [data-biz="03"]{background-image:url('/images/main/img_pro06_01.webp');}
.area_product .biz_img [data-biz="04"]{background-image:url('/images/main/main_visual07.webp');}
.area_product .biz_img [data-biz="05"]{background-image:url('/images/main/img_pro07_01.webp');}
/* .area_product .biz_img [data-biz]{position:absolute;opacity:0;top:0;right:0;width:calc(100% - 21.9%) ;height:308rem;background-size:cover;transition:all 0.5s ease;background-position: 50%;} */
.area_product .biz_img [data-biz]{position:absolute;opacity:0;top:0;right:0;width:calc(100% - 43%) ;height:308rem;background-size:cover;transition:all 0.5s ease;background-position: 50%;}

.area_product:before{content:''; z-index:-1; position:absolute; bottom:0; left:0; display:block; width:100%; height:530rem; background:#f7f7f7;}

/* high tech */
.area_hightech{padding:150rem 0; background-image:url(../../images/main/img_tech_bg.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 100%; color:#fff;}
.area_hightech .wrap{display:flex; align-items: center;}
.area_hightech .wrap h2{line-height:1.2; width:65%; font-weight:600; font-size:46rem}
.area_hightech .wrap .text{width:30%;}
.area_hightech .wrap .text h3{font-size:30rem; font-weight:600}
.area_hightech .wrap .text p{margin:25rem 0 55rem 0; font-size:18rem; font-weight:300}
.area_hightech .wrap .text .btn_more a{color:#fff;}
.area_hightech .wrap .text .btn_more a i{background:#003283;}


/* news */
.area_news{margin:140rem 0 50rem 0;}
.area_news .tit_main{margin-bottom:50rem;}
.area_news .tit_main .btn_more{position:absolute; right:0; bottom:10rem}
.area_news .list{display:grid; gap: 16rem; grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8rem), 270rem), 1fr)); }
.area_news .list li{box-sizing:border-box; transition:0.5s}
.area_news .list li:hover{box-shadow: 20rem 20rem 19rem 0px rgba(0,0,0,0.08);transition:0.5s}
.area_news .list li .img{overflow:hidden;position:relative;width:100%;padding-top: 66%; text-align:center;transition:opacity 0.5s ease-out 0s;display: block;}
.area_news .list li .img img{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); transition:all 0.5s ease-out 0s;}
.area_news .list li .text{padding:30rem;display: block;}
.area_news .list li .text h3{display: -webkit-box; overflow:hidden; font-size:20rem; color:#111; font-weight:500; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.area_news .list li .text p{display:flex; align-items: center; margin-top:24rem; font-size:16rem}
.area_news .list li .text p i{color:#0047ba}
.area_news .list li .text p i:after{content:''; display: inline-block; margin:-2rem 14rem; width:1rem; height:14rem; background:#ddd}
.area_news .list li .text p em{color:#999}

/* company */
.area_company{margin-bottom:140rem}
.area_company .list{display:flex;}
.area_company .list li{box-sizing:border-box; float:left; width:50%; padding:80rem 50rem;color:#fff;}
.area_company .list li:first-child{background:#003283}
.area_company .list li:last-child{background:url(../../images/main/img_location_bg.jpg) no-repeat center;}
.area_company .list li h2{font-size:30rem;}
.area_company .list li p{margin:15rem 0 40rem 0; font-size:18rem; font-weight:300}
.area_company .down-links { display: flex; justify-content: space-between; font-size: 20rem;
	a { display: inline-flex; align-items: center; gap: 0.4ch; color: #fff; }
	.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-size: inherit; }
}

@media screen and (max-width:1919px){

}

@media screen and (max-width:1600px){
    .area_visual .list li .img{right:30rem;}
	.area_visual .list li .text{left:30rem}

	.area_visual .btn{left:30rem}
	.area_visual .ex{left:190rem}
}

@media screen and (max-width:1480px){
    .area_product .biz_img [data-biz]{width: calc(100% - 22.2%);}
}

@media screen and (max-width:1279px){
	
}


@media screen and (max-width:1023px){
	.area_visual .list li{background:#333}
	.area_visual .list li, 
	.area_visual .bx-viewport{height: -webkit-calc(100vh - 75rem); height: calc(100vh - 75rem);}
	.area_visual .list li .img{right:0; top:50%; animation:none; width:95%;transform: translateY(-50%);}
	.area_visual .list li.swiper-slide-active .img{right:0; top:50%; animation:none; width:95%;transform: translateY(-50%);}
	.area_visual .list li.swiper-slide-active .img img{width:100%}
	.area_visual .list li .img img{width:100%;}
	.area_visual .list li .text h2{color:#fff;}
	.area_visual .list li .text p{color:#fff;}
	.area_visual .list li .text p b{display:block;}
	.area_visual .ex{color:#fff;}
	
	.area_product{padding-bottom:0; margin:100rem 0}
	.area_product:before{display:none;}
	.area_product .list_wrap .tit_main{width:100%; margin-bottom:40rem; padding-left:0}
	.area_product .img_wrap{display:none;}
	.area_product .list_wrap{flex-direction: column;}

	.area_product .list_pro{width:100%;}

	.area_hightech .wrap{flex-direction: column;}
	.area_hightech .wrap h2{width:100%; margin-bottom:50rem; text-align:center;}
	.area_hightech .wrap .text{width:100%; text-align:center;}
	.area_hightech .wrap .btn_more{display: inline-block;}
	
}

@media screen and (max-width:860px){
	.area_visual .list li .text{left:0; width:100%; text-align:center;}
	.area_visual .btn{left:0}
	.area_visual .ex{left:130rem;}



	.area_product .list_pro{border-bottom:1rem solid #ededed}
	.area_product .list_pro li{width:50%;}
	.area_product .list_pro li:last-child{width:100%;}
	.area_product .list_pro li:nth-child(2n){border-right:1rem solid #ededed}
	.area_product .list_pro li:nth-child(2n)~li{border-bottom:0}
	.area_product .list_pro li:nth-child(3){border-right:0}
	.area_product .list_pro li:last-child{border-bottom:1rem solid #ededed}

	.area_news .list li .text{padding:15rem}
}

@media screen and (max-width:540px){
	.tit_main h2{margin-top:8rem; font-size:20rem}
	.tit_main span{font-size:16rem}
	
	.area_visual .list li, .area_visual .bx-viewport{height: -webkit-calc(100vh - 65rem);  height: calc(100vh - 65rem);}
	.area_visual .list li .img{left:30rem; right:auto; width:650rem;}
	.area_visual .list li.swiper-slide-active .img{left:30rem; right:auto; width:650rem;}

	.area_visual .list li .text h2{font-size:40rem}
	.area_visual .list li .text p{font-size:18rem}
	
	.area_product{margin:60rem 0}
	.area_product .list_pro li{height:auto;}
	.area_product .list_pro li p{display:none;}
	.area_product .list_pro li a h3{font-size:16rem}
	.area_product .list_pro li a{padding:15rem}
	.area_product .list_pro li span{margin-top:15rem; width:35rem; height:35rem}
	.area_product .list_pro li[data-biz="01"] span{background-image:url(../../images/main/icon_pro01.svg); background-size:30rem}
	.area_product .list_pro li[data-biz="02"] span{background-image:url(../../images/main/icon_pro02.svg); background-size:30rem}
	.area_product .list_pro li[data-biz="03"] span{background-image:url(../../images/main/icon_pro03.svg); background-size:28rem}
	.area_product .list_pro li[data-biz="04"] span{background-image:url(../../images/main/icon_pro04.svg); background-size:35rem}
	.area_product .list_pro li[data-biz="05"] span{background-image:url(../../images/main/icon_pro05.svg); background-size:30rem}
	
	.area_product .list_pro li.on *{color:#111}
	.area_product .list_pro li.on[data-biz="01"]{background-image:none;}
	.area_product .list_pro li.on[data-biz="02"]{background-image:none;}
	.area_product .list_pro li.on[data-biz="03"]{background-image:none;}
	.area_product .list_pro li.on[data-biz="04"]{background-image:none;}
	.area_product .list_pro li.on[data-biz="05"]{background-image:none;}

	.area_product .list_pro li.on[data-biz="01"] span{background-image:url(../../images/main/icon_pro01.svg);}
	.area_product .list_pro li.on[data-biz="02"] span{background-image:url(../../images/main/icon_pro02.svg);}
	.area_product .list_pro li.on[data-biz="03"] span{background-image:url(../../images/main/icon_pro03.svg);}
	.area_product .list_pro li.on[data-biz="04"] span{background-image:url(../../images/main/icon_pro04.svg);}
	.area_product .list_pro li.on[data-biz="05"] span{background-image:url(../../images/main/icon_pro05.svg);}


	.area_hightech{padding:80rem 0}
	.area_hightech .wrap h2{margin-bottom:25rem; font-size:22rem;}
	.area_hightech .wrap .text h3{font-size:16rem}
	.area_hightech .wrap .text p{margin: 11rem 0 30rem 0; font-size:14rem}


	.area_news{margin:60rem 0 40rem 0 }
	.area_news .list{flex-direction: column;}
	.area_news .list li{width:100%; margin-bottom:30rem;}
	.area_news .list li:last-child{margin:0}
	.area_news .list li .text{padding:15rem 0}
	.area_news .list li .text h3{font-size:16rem}
	.area_news .list li .text p{margin-top:10rem; font-size:14rem;}
	.area_news .tit_main .btn_more{position:static; margin-top:20rem;}
	
	.area_company{margin-bottom:60rem}
	.area_company .list{flex-direction: column;}
	.area_company .list li{width:100%; padding:25rem;}
	.area_company .list li h2{font-size:18rem}
	.area_company .list li p{margin: 6rem 0 20rem 0; font-size:14rem;}

}