@charset "utf-8";

#main * {word-break:keep-all;}
#main {margin-top:230px;}
#footer {margin-top:15rem;}

#main_visual {position:relative; overflow:hidden; height:calc(100vh - 230px);}
#main_visual .swiper-slide {overflow:hidden; position:relative; height:calc(100vh - 230px);}
#main_visual .bg {position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat center/cover; transform:scale(1.1); transition:transform 2s 0.1s;}
#main_visual .inbox {display:flex; align-items:center; height:100%; padding-bottom:12rem;}
#main_visual .txt {position:relative; z-index:2; width:100%; line-height:1.5; font-size:10px; color:#fff;}
#main_visual .t1 {font-size:2rem; font-weight:300;}
#main_visual .t2 {margin-top:3rem; font-size:5rem; font-weight:300; line-height:1.4;}
#main_visual .t2 strong {font-weight:700;}
#main_visual .t3 {margin-top:5rem; position:relative; padding-left:24rem; font-size:2.2rem; font-weight:300;}
#main_visual .t3 i {position:absolute; top:50%; left:0; width:20.4rem; height:1px; background:#fff;}
#main_visual .t3 i::after {position:absolute; right:0; top:-1rem; height:2rem; width:1px; background:#fff; content:'';}
#main_visual .t4 {margin-top:3rem; margin-left:24rem; font-size:2rem; color:#BFBFBF;}
#main_visual .slide01 .t1 {color:#57B6FF}
#main_visual .controls {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position:absolute; left:50%; bottom:8rem; z-index:100; margin-left:-750px; width:380px;}
#main_visual .controls ul {font-size:2rem; font-weight:500; color:#fff;}
#main_visual .controls li {display:none;}
#main_visual .controls li.on {display:block;}
#main_visual .controls .btn_g {display:flex; align-items:center; justify-content:space-between; width:70px;}
#main_visual .controls .btn_g button {position:relative; width:33px; height:33px; background:url('../images/main/main_visual_arr.png') no-repeat center;}
#main_visual .controls .btn_g button::before {position:absolute; top:0; left:0; right:0; bottom:0; background:url('../images/main/main_visual_arr_on.png') no-repeat center; opacity:0; content:''; transition:opacity 0.4s;}
#main_visual .controls .btn_g button:hover::before {opacity:1;}
#main_visual .controls .btn_g .btn_next {transform:rotate(180deg);}
#main_visual .controls .progress {width:100%; height:4px; margin-top:18px; background:rgba(255,255,255,0.2);}
#main_visual .controls .progress > span {display:block; height:4px; background:#57B6FF;}
#main_visual .swiper-button-prev,
#main_visual .swiper-button-next {position:absolute; top:50%; z-index:100; width:26px; height:48px; margin-top:-24px; background:url('../images/main/main_visual_arr2.png') no-repeat center/contain;}
#main_visual .swiper-button-prev {left:15rem;}
#main_visual .swiper-button-next {right:15rem; transform:rotate(180deg);}
#main_visual .swiper-pagination {display:none;}

#main_visual .txt > div {transform:translateY(5rem); opacity:0; transition:all 0.7s 1s;}
#main_visual .ani_play .bg {transform:scale(1);}
#main_visual .ani_play .txt > div {transform:translateY(0px); opacity:1;}
#main_visual .ani_play .txt .delay01 {transition-delay:0.7s;}
#main_visual .ani_play .txt .delay02 {transition-delay:0.8s;}
#main_visual .ani_play .txt .delay03 {transition-delay:0.9s;}
#main_visual .ani_play .txt .delay04 {transition-delay:1.0s;}
#main_visual .ani_play .txt .delay05 {transition-delay:1.1s;}



.top_ban_none #main {margin-top:110px;}
.top_ban_none #main_visual,
.top_ban_none #main_visual .swiper-slide {height:calc(100vh - 110px);}


@media screen and (max-width:1920px){
	#main_visual .swiper-button-prev {left:11rem;}
	#main_visual .swiper-button-next {right:11rem;}
}
@media screen and (max-width:1800px){
	#main_visual .swiper-button-prev,
	#main_visual .swiper-button-next {display:none;}
}
@media screen and (max-width:1650px){
	#main_visual .controls {margin-left:0; left:4%}
}
@media screen and (min-width:1024.2px){
	#main_visual .slide01 .bg {background-image:url('../images/main/main_visual1.jpg');}
	#main_visual .slide02 .bg {background-image:url('../images/main/main_visual2.jpg');}
	#main_visual .slide03 .bg {background-image:url('../images/main/main_visual3.jpg');}
}
@media screen and (max-width:1024px){
	#main {margin-top:65px !important;}
	#main_visual,
	#main_visual .swiper-slide {height:calc(100vh - 65px) !important;}
	#main_visual .slide01 .bg {background-image:url('../images/main/main_visual1_m.jpg');}
	#main_visual .slide02 .bg {background-image:url('../images/main/main_visual2_m.jpg');}
	#main_visual .slide03 .bg {background-image:url('../images/main/main_visual3_m.jpg');}
	#main_visual .t2 {font-size:4.2rem;}
	#main_visual .t3 {padding-left:0; font-size:2.1rem;}
	#main_visual .t3 i {display:none;}
	#main_visual .t4 {margin-left:0;}
	#main_visual .controls {display:none;}
	#main_visual .swiper-pagination {display:block; bottom:25px; left:0; width:100%; text-align:center;}
	#main_visual .swiper-pagination-bullet {width:14px; height:14px; margin:0 10px; border-radius:100%; opacity:1; background:rgba(0,0,0,0.4); transition:all 0.4s;}
	#main_visual .swiper-pagination-bullet-active {background:#fff;}
	#main_visual .swiper-button-prev,
	#main_visual .swiper-button-next {display:block; top:auto; bottom:20px; width:20px; height:30px;}
	#main_visual .swiper-button-prev {left:3rem;}
	#main_visual .swiper-button-next {right:3rem;}
}



#section1 {margin-top:20rem; margin-bottom:15rem; text-align:center;}
#section1 .st {display:flex; align-items:center; justify-content:center; margin-bottom:2.5rem; font-weight:300; font-family: "Gabarito", sans-serif; font-size:1.5rem; color:#89909A; letter-spacing:0.03em;}
#section1 .st span {display:flex; align-items:center; gap:4rem; border-left:1px solid #89909A; border-right:1px solid #89909A;}
#section1 .st span::before,
#section1 .st span::after {width:8rem; height:1px; background:#89909A; content:'';}
#section1 ul {display:flex; gap:5.9rem; margin-top:7rem;}
#section1 li {flex:1; min-width:0;}
#section1 li .inbox {overflow:hidden; position:relative; height:53.8rem; border-radius:0 0 3rem 0;}
#section1 li .tbox1 {overflow:hidden; border:1px solid #D8D8D8; border-bottom:0;}
#section1 li .tbox1 > div {position:relative; height:27.9rem; padding:4.5rem 2rem; background:#fff; transition:all 0.6s;}
#section1 li .tbox1 span {display:block; font-family: "Gabarito", sans-serif; font-size:1.5rem; font-weight:300;}
#section1 li .tbox1 strong {font-size:2.8rem; font-weight:700;}
#section1 li .tbox1 strong::before {display:block; width:1px; height:3rem; margin:1.5rem auto; background:#325280; content:'';}
#section1 li .tbox1 p {margin-top:3rem; font-size:1.5rem; line-height:1.6;}
#section1 li .sbg {height:25.9rem; border-radius:0 0 3rem 0; background:no-repeat center/cover; opacity:1; transition:all 0.6s;}
#section1 li:nth-child(1) .sbg {background-image:url('../images/main/section1_simg1.jpg');}
#section1 li:nth-child(2) .sbg {background-image:url('../images/main/section1_simg2.jpg');}
#section1 li:nth-child(3) .sbg {background-image:url('../images/main/section1_simg3.jpg');}
#section1 li .tbox2 {overflow:hidden; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; opacity:0; transition:all 0.6s;}
#section1 li .tbox2::before {position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat center/cover; content:''; transform:scale(1); transition:all 1.5s;}
#section1 li:nth-child(1) .tbox2::before {background-image:url('../images/main/section1_img1.jpg');}
#section1 li:nth-child(2) .tbox2::before {background-image:url('../images/main/section1_img2.jpg');}
#section1 li:nth-child(3) .tbox2::before {background-image:url('../images/main/section1_img3.jpg');}
#section1 li .tbox2 > div {position:relative; z-index:2; color:#fff;}
#section1 li .tbox2 .num {display:block; position:relative; width:4.3rem; height:4.3rem; margin:auto; line-height:4.3rem;}
#section1 li .tbox2 .num::before {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #fff; border-radius:100%; content:'';}
#section1 li .tbox2 strong {display:block; margin:3rem 0; font-size:2.8rem; font-weight:700;}
#section1 li .tbox2 p {font-size:1.5rem; line-height:1.6;}
#section1 li .tbox2 a {display:inline-flex; align-items:center; gap:3.8rem; height:3.9rem; margin-top:7rem; padding:0 2.2rem; border:1px solid #fff; font-size:1.5rem; font-weight:500; transition:all 0.6s;}
#section1 li .tbox2 a::after {display:flex; width:1.1rem; height:0.7rem; background:url('../images/main/icon_more.png') no-repeat center/contain; filter: brightness(0) invert(1); content:''; transition:all 0.6s;}

@media screen and (min-width:1024.2px){
	#section1 li .tbox2 a:hover {color:#203047; background:#fff;}
	#section1 li .tbox2 a:hover::after {filter:none;}


	#section1 li .inbox:hover .tbox1 > div {transform:translateY(-100%);}
	#section1 li .inbox:hover .sbg {opacity:0;}
	#section1 li .inbox:hover .tbox2 {opacity:1;}
	#section1 li .inbox:hover .tbox2::before {transform:scale(1.2);}
}
@media screen and (max-width:1024px){
	#section1 {margin-top:15rem;}
	#section1 .scroll {margin-right:-3rem; padding-right:3rem;}
	#section1 ul {min-width:230vw; gap:4rem;}
	#section1 li .tbox1 span,
	#section1 li .tbox1 p,
	#section1 li .tbox2 p {font-size:1.8rem;}
}

#section2 {position:relative;}
#section2 .tit {margin-right:-14rem; font-family: "Gabarito", sans-serif; font-size:13rem; color:#57B6FF; letter-spacing:0.1em; opacity:0.07; line-height:1.2; text-align:right;}
#section2 .cbox {display:flex;}
#section2 .cont1 {width:29.45%;}
#section2 .cont1 .t1 {margin-bottom:4rem; font-size:3.2rem; line-height:1.4; font-weight:300;}
#section2 .cont1 .t1::before {display:block; width:2.9rem; height:2.2rem; margin-bottom:3.4rem; background:url('../images/main/icon_quote.jpg') no-repeat center/cover; content:'';}
#section2 .cont1 .t2 {position:relative; padding:4rem 0; background:#325280;}
#section2 .cont1 .t2::after {position:absolute; top:0; left:0; width:1000px; height:100%; margin-left:-1000px; background:#325280; content:'';}
#section2 .cont1 .t2 li {position:relative; padding-left:1.5rem; color:#fff; line-height:2;}
#section2 .cont1 .t2 li::before {position:absolute; top:50%; left:0; width:0.4rem; height:0.4rem; margin-top:-0.2rem; background:#fff; content:'';}
#section2 .img {width:28.52%; border-radius:0 7rem 0 0; background:url('../images/main/section2_img.jpg') no-repeat center/cover;}
#section2 .cont2 {flex:1; min-width:0; padding-left:7.7rem; padding-top:9rem;}
@media screen and (max-width:1024px){
	#section2 {margin-top:15rem;}
	#section2 .tit {margin-right:0; margin-bottom:4rem; font-size:7rem;}
	#section2 .cbox {flex-direction:column; gap:5rem;}
	#section2 .cont1 {width:100%;}
	#section2 .cont1 .t2 {padding:0;}
	#section2 .cont1 .t2::before {display:block; padding-bottom:70%; background:url('../images/main/section2_img.jpg') no-repeat center 25%/cover; content:'';}
	#section2 .cont1 .t2::after {display:none;}
	#section2 .cont1 .t2 ul {padding:4rem 3rem;}
	#section2 .img {display:none;}
	#section2 .cont2 {padding:0;}
}

#section3 {margin-top:15rem;}
#section3 h3 {display:flex; align-items:center; gap:2rem; margin-bottom:4rem;}
#section3 h3 img {width:18.1rem;}
#section3 .scroll {margin-right:-3rem; padding-right:3rem;}
.youtube_list {display:grid; grid-template-columns: repeat(4, 1fr); gap:3.2rem;}
.youtube_list li {}
.youtube_list .inbox {height:100%; border:1px solid #D9DADC;}
.youtube_list .img {position:relative; padding-bottom:59%;}
.youtube_list .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.youtube_list .cont {padding:2rem; text-align:center; font-size:1.8rem; line-height:1.5;}
@media screen and (max-width:1024px){
	.youtube_list {width:300vw;}
	.youtube_list .cont {font-size:2rem;}
}


#section4 {display:flex; gap:10rem; margin-top:10rem;}
#section4 > div {flex:1; min-width:0;}
#section4 .notice .top {display:flex; justify-content:space-between; margin-bottom:4rem;}
#section4 .btn_more {display:flex; align-items:center; gap:1.6rem; height:3.6rem; padding:0 1.8rem; border:1px solid #D8D8D8; border-radius:1.8rem;}
#section4 .btn_more::after {width:1.1rem; height:0.7rem; background:url('../images/main/icon_more.jpg')no-repeat center/contain; content:'';}
#section4 .notice ul {padding-top:5rem; border-top:1px solid #D8D8D8; line-height:2.5;}
#section4 .notice ul a {display:flex; align-items:center; gap:2rem;}
#section4 .notice ul .tit {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#section4 .customer {display:flex; border:1px solid #D8D8D8;}
#section4 .customer .img {width:46.57%; background:url('../images/main/customer_img.jpg')no-repeat center/cover;}
#section4 .customer .cont {display:flex; justify-content:center; flex:1; min-width:0; padding:6.7rem 2rem; text-align:center;}
#section4 .customer .cont > div {display:inline-block; text-align:left;}
#section4 .customer h3 {margin-bottom:1.5rem; font-size:3.2rem; color:#203047; font-weight:700;}
#section4 .customer h3::before {display:block; width:4rem; height:3px; margin-bottom:3rem; background:#325280; content:'';}
#section4 .customer .stxt {}
#section4 .customer .tel {margin-top:2.5rem; font-size:4rem; color:#57B6FF; font-weight:700;}
@media screen and (max-width:1024px){
	#section4 {flex-direction:column; gap:6rem;}
	#section4 .notice ul {font-size:1.8rem;}
}
@media screen and (max-width:700px){
	#section4 .customer {flex-direction:column-reverse;}
	#section4 .customer .img {width:100%; height:30rem;}
	#section4 .customer .cont {padding:5rem 4rem;}
	#section4 .customer .cont > div {width:100%;}
}