@charset "UTF-8";
#banner_baseline{position: fixed;width: 100%;height: auto;bottom: 0;left: 0; z-index: 11;}
.banner_text{position: absolute; left: 10%;top: 10%;transition: top .5s ease-in-out;}
.banner_text h1,.banner_text h1 span{position: relative;}
.banner_text h1 span::before{content: ""; width: 100%;height: 3px;background-color: #FEC739;position: absolute;right: -22%;bottom: -10px;transition: all 0.8s ease-in-out;transform: scale(1.1);opacity: 0;}
.banner_text h1 span::after{content: ""; width: 100%;height: 3px;background-color: #FEC739;position: absolute;right: 20%;bottom: -15px;transition: all 0.9s ease-in-out;transform: scale(1.1);opacity: 0;}
.swiper-slide-active .banner_text{top: 15%}

.swiper-slide-active h1 span::before{;bottom: -3px;transform: scale(1);right: 0%;width: 100%;opacity: 1;}
.swiper-slide-active h1 span::after{bottom: -10px;transform: scale(1);right:0; left: 0;margin: 0 auto;width: 80%;opacity: 1;}

.banner_text h1{font-weight: 600;font-size: 40px;line-height: 1.5;letter-spacing: normal;color: #FFFFFF;margin-bottom: 0;}
.banner_link{position: relative;padding-left: 39px;margin-top: 1.8rem;display: block;}
.banner_link,.banner_link:hover{text-decoration: none; color: #FFFFFF;font-weight: 700;font-size: 20px;line-height: 25px;letter-spacing: 0.04em;}
.banner_link::before{content: "";display: block;width: 33px;height: 19px;position: absolute;left: 0;top: 0;background-image: url("../images/home/icon_db_arrow.svg");background-repeat: no-repeat;background-position: center;background-size: contain;}
#Product_view .swiper-button-next,#Product_view .swiper-button-prev{  height: 100%; top: 0; width: 50px;outline: none;}
#Product_view .swiper-button-next:after,#Product_view .swiper-button-prev:after{bottom: 18%; top: auto; position: absolute;}
#ess_3d{background: radial-gradient(66.07% 66.07% at 71.75% 33.93%, rgba(255, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(50% 50% at 41.55% 50%, #001240 51.83%, rgba(0, 0, 0, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #070707;}
#ess_3d .container{height: 1500px; padding-top: 50px;}
#ess_3d h2{text-align: center; color: #FFFFFF;}
.image-container {
    width: 100%;
    height: 0;
    padding-top: 39%;
    position: sticky;
    top: 385px;
    background-size: cover;
    background-image: url("../images/home/pano3d/0001.png");
  }
 .text-container {
    width: 100%;
    position: sticky;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    top: 50px;
	 color: white;}
 .text-container .subtitle { opacity: 0;font-weight: 600;font-size: 24px;line-height: 30px;letter-spacing: 0.04em;color: #FFFFFF;width: 100%;max-width: 950px;padding-top: 40px;}
 .text-container .title { opacity: 0; font-weight: 600;font-size: 80px;line-height: 101px;text-align: center;letter-spacing: 0.04em;color: #FFFFFF; }
.count {font-weight: 700;font-size: 80px;line-height: 146.99%;text-align: right;color: #FFFFFF;}
.col-pd-1 {
    flex: 0 0 auto;
    width: 60.2%;
	padding-right: 12px
}
.col-pd-2 {
    flex: 0 0 auto;
    width: 39.8%;
	padding-left: 12px
}
#solution figure{text-align: center;}
#solution figure img{max-width: 205px; height: auto;}
#solution figure figcaption{font-weight: 600;font-size: 34px;line-height: 50px;letter-spacing: 0.04em;color: #323232;padding-top: 35px;}
.solution_text{font-weight: 700;font-size: 60px;line-height: 121.7%;letter-spacing: 0.04em;color: #323232;}
.solution_text span{display: block;font-weight: 600;font-size: 45px;line-height: 157.7%;letter-spacing: 0.04em;text-transform: uppercase;color: #9C9C9C;}
#news{background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #D6FAFF 50%, rgba(255, 255, 255, 0) 100%);}
#news_swiper .swiper-slide {height: auto;}
#news a{text-decoration: none;display: block;height: 100%;}
#news h2{font-style: normal;
font-weight: 600;
font-size: 54px;
line-height: 101px;
text-align: center;
letter-spacing: 0.04em;
background: linear-gradient(270deg, #D52FFF 12.19%, #48EDF8 95.97%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
width: 360px;margin: 0 auto;
}
.btn_news{position: relative;padding-right: 30px;background: linear-gradient(270deg, #D52FFF 12.19%, #48EDF8 95.97%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;font-weight: 600;
font-size: 20px;
line-height: 45px;
text-align: center;
letter-spacing: 0.04em;
}
.card{box-shadow: 0px 0px 8px rgba(58, 83, 88, 0.25);height: 100%;}
.card-body{padding-bottom: 55px;}
.card-body >div{position: absolute;right: 25px;bottom: 0;}
.card_img{overflow: hidden;}
.card .card_img img{transition: all .5s ease-in-out;}
.card:hover .card_img img{ transform: scale(1.5);}
.card-text{font-weight: 400;font-size: 18px;line-height: 150.7%;letter-spacing: 0.04em;color: #000000;}
.btn_news::before{content: "";width: 15px; height: 24px;background-image: url("../images/home/icon_news_arrow_rright.svg");background-size: contain;background-repeat: no-repeat;background-position: center;position: absolute;right: 3px;top: 15px; transition: all .5s ease-in-out;}
.card:hover .btn_news::before{transform: translateX(5px);}
#recruiting{height: 0;padding-bottom: 50%;background-image: url("../images/bg_purple_line.jpg");background-size: cover;background-position: center bottom;background-repeat: no-repeat;overflow: hidden;}
#recruiting_box_1{position: absolute; left: 0;top: 25px;width: 40%;padding-top: 100%;}
#recruiting_box_2{position: absolute; right: 0;top: 25px;width: 60%;padding-top: 100%;}
.circle{width: 450px; height: 450px;position: absolute;border-radius: 100%;transition: all .5s ease-in-out;}
#circle_01{background: #DCE6F7;left: -15%;top: 5%;z-index: 1}
#circle_02{background-image: url("../images/home/recruiting_img_01.jpg");background-size: contain;background-position: center;background-repeat: no-repeat;
right: 0;top: 0;z-index: 3}
#circle_03{background-image: url("../images/home/recruiting_img_02.jpg");background-size: contain;background-position: center;background-repeat: no-repeat;
left: 0;top: 15%;z-index: 2}
#circle_04{background: linear-gradient(179.71deg, #BF75FA 0.23%, #39A4D1 140.73%);z-index: 4;left: 30%;top: 4%;}
#circle_04 a{width: 100%;height: 100%;display: block;text-decoration: none;}
#circle_05{background: #D2CFF2;right: 0;top: 10%;z-index: 1}
.circle_text_01{font-weight: 600;font-size: 32px;line-height: 75px;letter-spacing: 0.04em;text-align: center;color: #FFFFFF;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%;}
.circle_text_02{font-weight: 400;font-size: 22px;line-height: 38px;letter-spacing: 0.04em;left: 50%; bottom: 14%; transform: translateX(-50%);color: #FFFFFF;position: absolute;}
.circle_text_02::before{content: "";width: 45px;height: 45px;position: absolute;bottom: -35px;left: 50%; transform: translateX(-50%) rotate(-45deg);border-left: 6px solid #FFFFFF;border-bottom: 6px solid #FFFFFF;}
#recruiting_box_1.active #circle_01{transform: translate(-100px,100px);}
#recruiting_box_1.active #circle_02{transform: translate(100px,100px);}
#recruiting_box_2.active #circle_03{transform: translate(-70px,70px);}
#recruiting_box_2.active #circle_04{transform: scale(1.2);}
#recruiting_box_2.active #circle_05{transform: translate(70px,-70px);}
#FancyBox {	position: fixed;background: rgba(0, 0, 0, 0.59);width: 100%;height: 100%;top: 0;z-index: 999;display: none;padding: 0;opacity: 1;transition: opacity .5s ease-in-out;}
#NewsBox {position: absolute;max-width: 1200px;max-height: 90%;	left: 50%;top: 50%;	transform: translate(-50%, -50%);width: 90%;opacity: 1;	display: flex}
#BgFancyBox{position: absolute;width: 100%;height: 100%}
#NewsBox > div{text-align: center;display: flex;justify-content: center;}
#NewsBox > div > a{position: relative}
#NewsBox > div img{width: auto;height: auto;max-width: 100%;max-height: 100%;}
.close-btn {position: absolute;right: -15px;top: -15px;width: 30px;height: 30px;background-image: url(../images/gray-x.png);background-position: center;
    background-size: cover;z-index: 1000;cursor: pointer;}
#TopAdd{position: fixed;width: 200px;height: 272px;right: -105%;top: 0;bottom: 0;margin: auto;background-color: #FFFFFF;border-radius: 17px;z-index: 10;padding: 1rem;box-shadow: 0px 0px 10px 2px #9a9c9d;transition: all .3s ease-in-out;}
#TopAdd.active{right: 8px;}
#TopAdd a{text-decoration: none;}
#TopAdd img{border-radius: 17px;}
#TopAdd #text{font-size: 1.15rem;text-align: center;padding: 5px 0;font-weight: bolder;    background: linear-gradient(270deg, #5DD4BA 0%, #CCD000 100%);-webkit-text-fill-color: transparent;
    background-clip: text;}
#BtnTopAdd{text-align: center;}
#BtnTopAdd span{display: inline-block;border-radius: 25px;background: linear-gradient(270deg, #5DD4BA 0%, #CCD000 100%);color: #FFFFFF;font-size: 1.25rem;font-weight: bolder;padding: 4px 12px;}
#BtnTopAddClose{position: absolute;right: -6px;top: -11px;width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 100%;background-color: #e7e7e7; border: 2px solid #FFFFFF; color: #8b8b8b;font-size: 2rem;font-weight: bolder;cursor: pointer;}
@media (min-width:2100px) {
	#recruiting{padding-bottom: 920px;background-position: center;}
}
@media (max-width:2100px) {
}
@media (max-width:1400px) {
	.solution_text{font-size: 52px;}
	.solution_text span{font-size: 40px;}
	#solution figure figcaption{font-size: 30px;}
	.circle { width: 350px; height: 350px;}
	.circle_text_01 {font-size: 25px;line-height: 50px}
	.circle_text_02::before { width: 35px; height: 35px;}
	.circle_text_02 {font-size: 18px;}
}
@media (max-width:1300px) {
}
@media (max-width:1200px) {
	.banner_text { top: 20%;}
	.banner_text h1{font-size: 32px;}
	.text-container .title{font-size: 32px;line-height: initial;}
	.count{font-size: 60px;}
	.text-container .subtitle{padding-top: 25px;justify-content: space-around;}
	.text-container {top: 125px;}	
	.image-container{top: 360px;}
	.solution_text {font-size: 42px;}
	.solution_text span {font-size: 32px;}
	#solution figure figcaption{font-size: 24px;padding-top: 16px;line-height: normal;}
	#solution figure img { max-width: 75%;}
}
@media (max-width:991px) {
	.banner_text { top: 19%;}
	.banner_text h1{font-size: 28px;}
	.banner_text h1::before {width: 150px;}
	.banner_text h1::after {width: 100px;}
	.banner_link, .banner_link:hover{font-size: 18px;}
	#banner .swiper-horizontal>.swiper-pagination-bullets,#banner  .swiper-pagination-bullets.swiper-pagination-horizontal,#banner  .swiper-pagination-custom, #banner .swiper-pagination-fraction{bottom: 0;}
	.solution_text { font-size: 34px;}
	.solution_text span {font-size: 24px;}
	#solution figure figcaption { font-size: 18px; padding-top: 6px;max-width: 150px;}
	.card-text{font-size: 16px;}
	.circle {width: 250px;height: 250px;}
	.circle_text_01 { font-size: 18px;line-height: 36px;}
	.circle_text_02 {font-size: 13px;}
	.circle_text_01 span {font-size: 14px;}
	.circle_text_02::before {width: 20px;height: 20px;bottom: -18px;}
}
@media (max-width:767px) {
	.banner_text { top: 50px;}
	.banner_text h1::before {width: 135px;}
	.banner_text h1::after {width: 90px;}
	.swiper-slide-active .banner_text{top: 90px;}
	.banner_text h1 { font-size: 22px;line-height: inherit;}
	.text-container .title { font-size: 28px;}
	.count { font-size: 42px;}
	.text-container .subtitle{font-size:20px;}
	.text-container .subtitle span.text-small {font-size: 12px;}
	#solution .container{padding: 0 25px;}
	#solution figure img{max-width: 150px;}
	.solution_style{position: absolute;}
	#solution_01{height: 500px;position: relative;}
	#solution_02{top: 0;right: 0;}
	#solution_03{bottom: 16%;right: 26%;}
	#solution_04{bottom: 0;left: 0;}
	#news h2{font-size: 40px;line-height: inherit;}
	#circle_01 {left: -40%;top: 14%;}
	#circle_05 {right: -28%;top: 2%;}
	#recruiting {padding-bottom: 65%;}
}
@media (max-width:576px) {
	.text-container .subtitle {font-size: 18px;}
	.banner_text{left: 0;width: 100%;padding-left: 20px;}
	.banner_text h1{font-size: 5vw;}
	.image-container {padding-top: 51%;top:285px;background-size: 154%;background-position: 47% 0;}
	#Product_view .swiper-button-next, #Product_view .swiper-button-prev{display: none;}
	#ess_3d .container {height: 835px;padding: 25px 0 0 0;}
	.text-container .subtitle{text-align: center;}
	.text-container{top: 100px;padding-left: 8px;}
	.text-container .title { font-size: 20px;}
	.count { font-size: 26px;}
	#solution_03 { right: 23%;}
	.col-pd-1,.col-pd-2{width: 100%;padding: 0;}
	.col-pd-2{padding: 15px 50px;margin-bottom: -130px;}
	.col-pd-2 #Product_view{position: relative;top: -160px;}
	.col-pd-2 #Product_view > div.swiper-wrapper img{border-radius: 20px;border: 1px solid #FFFFFF;}
	#Product_view .swiper-pagination-bullet{background: inherit;opacity: 1;order: 3;width: 100%;display: block;border-radius: 20px;height: 0;padding-top: 31.77%;;background-repeat: no-repeat;background-position: center;background-size: contain;margin-top: 15px;transition: padding-top .3s ease-in-out;}
	#Product_view .swiper-pagination-bullet.swiper-pagination-bullet-active{padding-top: 0;}
	#Product_view .swiper-pagination-bullet.swiper-pagination-bullet-active ~ span{order: 1;}
	#Product_view .swiper-pagination{display: flex;flex-wrap: wrap;position: relative;}
/*	#Product_view .swiper-pagination span{}*/
	#Product_view .swiper-pagination span:nth-child(1){background-image: url("../images/home/product/product_img_01_sm_btn.jpg")}
	#Product_view .swiper-pagination span:nth-child(2){background-image: url("../images/home/product/product_img_02_sm_btn.jpg")}
	#Product_view .swiper-pagination span:nth-child(3){background-image: url("../images/home/product/product_img_03_sm_btn.jpg")}
	#Product_view.swiper-fade .swiper-slide{transition-property: opacity,top;top: 150px;opacity: 0;visibility: hidden;}
	#Product_view.swiper-fade .swiper-slide-active.swiper-slide{top: 0;visibility: visible;}
	#news .container{padding: 0;}
	#recruiting{padding-bottom: 550px;background-size: 160%;}
	#recruiting_box_1,#recruiting_box_2{width: 100%;}
	#circle_04 {left: 50%;top: 50%;transform: translate(-50%,-50%);}
	#circle_03 {left: auto;right: 3%;top: 1%;width: 200px;height: 200px;}
	#circle_02 {right: auto;top: auto;left: 7%;bottom: 5%;width: 170px;height: 170px;}
	#circle_01 {left: -2%;top: 4%;background-color: #DFDFDF;}
	#circle_05 {right: -3%;top: auto;bottom: 12%;background-color: #95949E;}
	#circle_05 ,#circle_01,#circle_03{width: 230px;height: 230px;}
}
@media (max-width:480px) {
	#circle_05 ,#circle_01,#circle_03{width: 200px;height: 200px;}
}
@media (max-width:450px) {
	.banner_link, .banner_link:hover {font-size: 16px;}
	.banner_text h1::before {width: 108px;height: 2px;}
	.banner_text h1::after {width: 72px;height: 2px;}
	.text-container .subtitle{font-size:14px;}
	#solution_01 { height: 415px;}
	#solution figure img { max-width: 120px;}
	#solution figure figcaption {font-size: 16px;max-width: 135px;}
	#circle_05 ,#circle_01,#circle_03{width: 180px;height: 180px;}
	#circle_02 {width: 160px;height: 160px;}
	#news h2 {font-size: 32px;}
}
@media (max-width:400px) {
	.swiper-slide-active .banner_text {top: 70px;}
	.banner_text h1 span::before,.banner_text h1 span::after {height: 2px;}
	.banner_text h1 span::after {bottom: -8px;}
	.banner_link {margin-top: 1rem;}
	#solution figure img { max-width: 110px;}
	#solution figure figcaption {font-size: 14px;max-width: 118px;}
	.solution_text {font-size: 28px;}
	.solution_text span {font-size: 20px;}
	#solution_01 { height: 405px;}
	#solution_03 {right: 19%;}
	#circle_05 {right: -5%;bottom: -4%;}
	#circle_02 {left: 2%;bottom: 0;}
	#circle_03 {right: -3%;top: -6%;}
	#circle_01 {left: -13%;}
}
@media (max-width:375px) {
	.banner_link, .banner_link:hover {font-size: 14px;}
	.banner_text h1::before {width: 92px;}
	.banner_text h1::after {width: 63px;}
	.swiper-slide-active h1::after{bottom: -7px;transform: scale(1);right:6%;}
	.text-container .subtitle{font-size:12px;}
	#sitemap_other img{width: 52px;padding-top: 6px;}
	#circle_05 {bottom: -17%;}
	#circle_02 {left: -3%;bottom: -8%;}
	#circle_01 {left: -19%;top: -1%;}
	
}
@media (max-width:350px) {
	#solution_03 {right: 11%;}
}
@media (max-width:320px) {
	.banner_text h1 {font-size: 16px;}
}