/* ===== MAIN - VISUAL ===== */



.main-visual {position:relative;margin:0 auto;height:100vh;}
.main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);  }
.main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;}
.main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center bottom;background-size:cover;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);   transition-duration:3s;}
.main-visual .visual-slider .swiper-slide .vs-bg1{ background-image:url(../img/main/Visual_banner1.jpg);}
.main-visual .visual-slider .swiper-slide .vs-bg2{ background-image:url(../img/main/Visual_banner2.jpg);}
.main-visual .visual-slider .swiper-slide .vs-bg3{ background-image:url(../img/main/Visual_banner3.jpg);}
.main-visual .visual-slider .swiper-slide .vs-bg4{ background-image:url(../img/main/Visual_banner2.jpg);}

.main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; justify-content:center; position:relative; margin:0 auto; max-width:150em; width:74%; height:100%; z-index:1; color:#fff;}
.main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0;;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);}
.main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:85px;font-weight:700; }

.main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:60px; margin:20px 0 30px 0;}
.main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;}
.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:30px;color:#fff;}
.main-visual .visual-slider .swiper-button-prev {  left:330px; }
.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{position:absolute;  background:none; display:flex;align-items: center;justify-content: center;width:70px; height:70px; top:auto;  border-radius:50%; border:1px solid #fff; bottom:300px; z-index:10; }
.main-visual .visual-slider .swiper-button-prev:after { display:none;}
.main-visual .visual-slider .swiper-button-next { left:420px;}
.main-visual .visual-slider .swiper-button-next:after { display:none;}
.main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; top:50%; margin-top:-250px; left:310px; font-size:20px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px;  color:#ffffff; letter-spacing:0.333em;}
.main-visual .visual-slider .swiper-pagination span { font-style:normal;}
.main-visual .visual-slider .swiper-pagination span {font-style:normal;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;}
.hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;}


@media all and ( max-width: 1920px ){

	.main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:75px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:50px;}
	.main-visual .visual-slider .swiper-slide .vs-txt p {font-size:20px;}
	
	.main-visual .visual-slider .swiper-pagination { margin-top:-230px; left:230px; font-size:17px;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:200px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px;}
	.main-visual .visual-slider .swiper-button-prev {  left:250px; }
	.main-visual .visual-slider .swiper-button-next { left:320px;}
	
	
}


@media all and ( max-width: 1440px ){
	.main-visual {height:650px;}
	.main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-80px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:25px;}
	
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:57px; height:57px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:57px; font-size:25px;}
	.main-visual .visual-slider .swiper-button-prev{ margin-top:-100px;}
	.main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px;}

	
}
@media all and ( max-width: 1280px ){
	.main-visual .visual-slider .swiper-slide .vs-txt{ max-width:auto; width:auto; margin-left:10%; margin-top:0;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:100px; width:50px; height:50px;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-pagination{ left:10%;}
	.main-visual .visual-slider .swiper-button-next{ left:calc(10% + 60px)}
	.main-visual .visual-slider .swiper-pagination{ margin-top:-200px;}
}
@media all and ( max-width: 1024px ){
	
	.main-visual {height:550px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:50px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px; margin:10px 0 15px 0;}
	.main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:17px;}
	.main-visual .visual-slider .swiper-pagination{ margin-top:-150px;}
	
}
@media all and ( max-width: 800px ){

	
	
}

@media all and ( max-width: 640px ){
	
	.main-visual {height:450px;}

	.main-visual .visual-slider .swiper-slide .vs-txt p{ display:none;}
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:40px; line-height:40px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;}
	.main-visual .visual-slider .swiper-pagination{ margin-top:-130px;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:50px; width:40px; height:40px;}
	.main-visual .visual-slider .swiper-button-next{ left:calc(10% + 50px)}
}
	


.dl{ display:flex;}
.dl dt{flex-shrink: 0;}
.dl dd{flex-grow: 1;}

.df{ display:flex; flex-wrap: wrap; }

#sec01 h1, #sec02 h1, #sec03 h1,  #sec04 h1{ font-size:45px; color:#333; font-weight:500; letter-spacing:-1px;}
#sec02 h2, #sec03 h2{ color:#1b77cd; font-size:35px; margin-bottom:10px;}



#sec01{ position:relative; padding:170px 0;}
#sec01:before{ content:''; position:absolute; top:0; left:0; width:1250px; height:889px; background:url(../img/main/sec01-03.jpg) no-repeat 50% 0; background-size:cover;}
#sec01:after{ content:''; position:absolute; width:700px; height:100%; top:0; right:0; background-color:rgb(0,0,0,0.05); z-index:-2;}
#sec01 p{ color:#777; font-size:20px; margin:30px 0 100px 0;}
#sec01 ul{gap:0 50px; }
#sec01 ul li{ width:calc((100% / 2) - 25px)}
#sec01 ul li:nth-child(2){ position:relative; margin-top:-170px;}
#sec01 ul li:nth-child(2):before{ content:'MOLD'; position:absolute; top:50px; right:-400px; font-size:270px; font-weight:900;transform:rotate(90deg); color:rgb(0,0,0,0.05); z-index:-1;}
#sec01 ul li img{ width:100%;}
#sec01 a{ position:absolute; right:35%; top:0; display:inline-block; font-size:19px; padding-bottom:15px; border-bottom:1px solid rgb(0,0,0,0.2); color:#999;}
#sec01 a i{ margin-left:70px;}

#sec02{ margin:100px 0 170px 0; text-align:center;}
#sec02 h4{ font-size:25px; }
#sec02 h3{ font-size:50px; font-weight:300; margin:30px 0 50px 0;}
#sec02 h3 span{ display:block; font-weight:600; font-size:60px;}
#sec02 .contentbox .tabcontent ul{gap:0 50px;}
#sec02 .contentbox .tabcontent ul li{ text-align:center; }
.contentbox .tabcontent ul li:before{ content:'';  display:inline-block; width:100px; height:100px;background-size: auto 35px; background-position:50% 50%; background-repeat:no-repeat; border:1px solid rgb(255,255,255,0.5); border-radius:50%;}
.contentbox .tabcontent .tabbox.tabbox_0 ul li:nth-child(1):before{background-image:url(../img/main/sec02-02.png)}
.contentbox .tabcontent .tabbox.tabbox_0 ul li:nth-child(2):before{background-image:url(../img/main/sec02-03.png)}
.contentbox .tabcontent .tabbox.tabbox_0 ul li:nth-child(3):before{background-image:url(../img/main/sec02-04.png)}
.contentbox .tabcontent .tabbox.tabbox_0 ul li:nth-child(4):before{background-image:url(../img/main/sec02-05.png)}
.contentbox .tabcontent .tabbox.tabbox_0 ul li:nth-child(5):before{background-image:url(../img/main/sec02-06.png)}
.contentbox .tabcontent .tabbox.tabbox_1 ul li:nth-child(1):before{background-image:url(../img/main/sec02-08.png)}
.contentbox .tabcontent .tabbox.tabbox_1 ul li:nth-child(2):before{background-image:url(../img/main/sec02-09.png)}
.contentbox .tabcontent .tabbox.tabbox_1 ul li:nth-child(3):before{background-image:url(../img/main/sec02-10.png)}
.contentbox .tabcontent .tabbox.tabbox_1 ul li:nth-child(4):before{background-image:url(../img/main/sec02-11.png)}
#sec02 .contentbox .tabcontent ul li p{ font-size:19px; opacity:0.6; margin-top:10px;}
#sec02 .contentbox .tabcontent dt{flex-basis:55%;}
#sec02 .contentbox .tabcontent dt a{ color:rgb(255,255,255,0.5); display:inline-block; font-size:19px; margin-top:100px; padding-bottom:15px; border-bottom:1px solid rgb(255,255,255,0.2)}
#sec02 .contentbox .tabcontent dt a i{ margin-left:70px;}
#sec02 .contentbox .tabcontent dd img { width:600px;}

.tab_menu { margin-top:40px;}
.tab_menu ul{justify-content: center;}
.tab_menu ul li { }
.tab_menu ul li a { display:inline-block; padding:20px 30px;width:250px; background:#b7b7b7; color:#fff; font-size:25px;}
.tab_menu ul li:nth-child(1) a, .tab_menu ul li:nth-child(2) a, .tab_menu ul li:nth-child(3) a, .tab_menu ul li:nth-child(4) a {border-top-width: 1px;}
.tab_menu ul li:first-child a, .tab_menu ul li:nth-child(4n+1) a {border-left-width: 1px;}
.tab_menu ul li.on a, .tab_menu ul li.active a, .tab_menu ul li a:hover {background-color: #003471;}
.contentbox { background:#1e202b url(../img/main/sec02-01.jpg) no-repeat 100% 0; background-size:cover; margin-left:250px;}
.contentbox .tabcontent { padding:150px 230px 100px 230px; color:#fff; text-align:left;}
.contentbox .tabcontent .tabbox {display: none;}
.contentbox .tabcontent .tabbox.tabbox_0 {display: block;}


#sec03{ text-align:center; margin:0 250px;}
#sec03 .s01{ margin:25px 0 100px 0; border-top:1px #ddd solid; padding-top:100px;}
#sec03 .s01 ul{gap:30px; text-align:left}
#sec03 .s01 ul li{ width:calc((100% / 3) - 20px); color:#444;}
#sec03 .s01 ul li .date{ font-size:20px; color:#86a8ca;}
#sec03 .s01 ul li strong{ display:inline-block; font-size:27px; margin:20px 0 30px 0; height:55px;}
#sec03 .s01 ul li .bTxt{ font-size:19px; color:#777;}
#sec03 .s01 ul li:nth-child(4){ display:none;}
#sec03 .s02 { margin-top:100px;}
#sec03 .s02 ul{gap:1px; text-align:left}
#sec03 .s02 ul li{ width:calc((100% / 2) - 1px);}
#sec03 .s02 ul li a{ color:#fff;}
#sec03 .s02 ul li .area{ padding:70px 70px;}
#sec03 .s02 ul li:nth-child(1){background:url(../img/main/sec03-01.jpg) no-repeat 50% 0; background-size:cover;}
#sec03 .s02 ul li:nth-child(2){background:url(../img/main/sec03-02.jpg) no-repeat 50% 0; background-size:cover;}
#sec03 .s02 ul li p{ font-size:20px; margin-bottom:15px;}
#sec03 .s02 ul li strong{font-size:37px; font-weight:500;}


#sec04{background:#5a799c url(../img/main/sec04-01.jpg) no-repeat 100% 0; background-size:auto 100%; padding:170px 0; margin-top:170px; color:#fff;}
#sec04 h1{ color:#fff;}
#sec04 ul{margin-top:50px;}
#sec04 ul li:nth-child(1){ position:relative; padding-right:70px; margin-right:70px;}
#sec04 ul li:nth-child(1):after{ content:''; position:absolute; right:0; top:0;width:1px; height:100%;border-right:1px solid rgb(255,255,255,0.2)}
#sec04 ul li:nth-child(1):before, #sec04 ul li:nth-child(2):before{ content:''; display:inline-block; width:70px; height:70px;background-size:cover; background-repeat:no-repeat;}
#sec04 ul li:nth-child(1):before{ background-image:url(../img/main/sec04-02.png)}
#sec04 ul li:nth-child(2):before{ background-image:url(../img/main/sec04-03.png)}
#sec04 ul li strong{ display:block; font-size:27px; margin:15px 0 30px 0;}
#sec04 ul li{ font-size:19px;}
#sec04 ul li a{ display:inline-block; padding:13px 25px; border-radius:10px; border:1px solid rgb(255,255,255,0.3); color:#fff; margin-top:30px;}
#sec04 ul li a i{ margin-left:50px; opacity:0.6}




@media all and ( max-width: 1920px ){
	
	#sec01 h1, #sec02 h1, #sec03 h1, #sec04 h1{ font-size:37px;}
	#sec02 h2, #sec03 h2{font-size:30px;}
	
	#sec01 p{font-size:17px;}
	
	#sec01{ padding:120px 0;}
	#sec01:before{width:930px; height:662px;}
	#sec01 p{ margin:30px 0 70px 0;}
	#sec01 ul li:nth-child(2):before{ content:'MOLD'; position:absolute; top:70px; right:-300px; font-size:200px;}
	#sec01 ul li:nth-child(2){margin-top:-100px;}
	
	#sec02{ margin:70px 0 100px 0; text-align:center;}
	#sec02 h4{ font-size:20px;}
	#sec02 h3{ font-size:45px;}
	#sec02 h3 span{ font-size:55px;}
	.tab_menu ul li a {width:200px;  font-size:20px;}
	.contentbox { margin-left:200px;}
	#sec02 .contentbox .tabcontent ul{gap:37px;}
	#sec02 .contentbox .tabcontent ul li p{ font-size:16px;}
	#sec02 .contentbox .tabcontent ul li:before{ width:90px; height:90px;background-size: auto 30px;}

	#sec02 .contentbox .tabcontent dd img{ width:500px;}
	#sec02 .contentbox .tabcontent dt a{ font-size:17px;}
	
	
	#sec03{ margin:0 200px;}
	#sec03 .s01{ margin:25px 0 70px 0; padding-top:70px;}
	#sec03 .s01 ul li .date{ font-size:17px;}
	#sec03 .s01 ul li strong{ font-size:23px; height:35px;}
	#sec03 .s01 ul li .bTxt{ font-size:16px;;}
	#sec03 .s02 { margin-top:50px;}
	#sec03 .s02 ul li p{ font-size:17px; margin-bottom:10px;}
	#sec03 .s02 ul li strong{font-size:30px}
	
	#sec04{padding:120px 0; margin-top:120px; }
	#sec04 ul li strong{ font-size:22px;}
	#sec04 ul li{ font-size:16px;}
	#sec04 ul li:nth-child(1):before, #sec04 ul li:nth-child(2):before{width:60px; height:60px;}
}


@media all and ( max-width: 1680px ){
	.mainContents{ overflow:hidden;}
	.contentbox{ margin-left:0;}
	
	#sec03{ margin:0 50px;}
	
	
}



@media all and ( max-width: 1280px ){
	

	#sec01{ padding:100px 10px;}
	
	.contentbox .tabcontent {padding:150px 100px;}
	
	#sec03{ margin:0 10px;}
	
	  #sec04 {padding: 100px 10px;}

@media all and ( max-width: 1152px ){
	#sec01::before{ display:none;}
	#sec01 a{ right:10px;}
}
@media all and ( max-width: 1024px ){
	#sec01 ul{gap:0 30px;}
	#sec01 ul li:nth-child(2){ margin-top:0;}
	#sec01 ul li {width: calc((100% / 2) - 15px);}
	
	#sec01 h1, #sec02 h1, #sec03 h1, #sec04 h1{ font-size:30px;}
	
	
	#sec02 .contentbox .tabcontent ul {gap: 30px;}

	
	.contentbox .tabcontent .tabbox dl{ display:block;}
	.contentbox .tabcontent .tabbox dl dt{ margin-bottom:50px;}
	
	#sec03 .s01 ul li {width: calc((100% / 2) - 15px);}
	#sec03 .s01 ul li:nth-child(4){ display:block}
	
	#sec04{ background-position:40% 50%;}
}

@media all and ( max-width: 800px ){
	#sec01 a{ position:relative; right:auto; margin-top:20px;}
	
	.contentbox .tabcontent {padding:100px 50px;}
	#sec02 .contentbox .tabcontent ul{gap:10px;}
	#sec02 .contentbox .tabcontent dd img{ width:100%;}
	#sec02 h3{ font-size:40px;}
	#sec02 h3 span{ font-size:50px;}
	.tab_menu ul li a{ width:130px;}
	
	#sec04{ background:#5a799c}
	#sec04 h1{ text-align:center;}
	#sec04 ul li{ width:calc(100% / 2); text-align:center;}
	#sec04 ul li:nth-child(1){ padding-right:0; margin-right:0;}
}
@media all and ( max-width: 640px ){
	#sec01 ul {gap: 0 10px;}
	#sec01 ul li {width: calc((100% / 2) - 5px);}
	
	.contentbox .tabcontent {padding:70px 30px;}
	
	#sec02 h3{ font-size:35px;}
	#sec03 .s02 ul li {width:100%;}
	#sec03 .s02 ul li .area{ padding:50px 30px;}
	
	
  
}
@media all and ( max-width: 480px ){
	.tab_menu ul li a{ font-size:17px; width:110px;}
	#sec02 h4{ font-size:17px;}
	#sec02 h3{ font-size:30px;}
	#sec02 h3 span{ font-size:40px;}
	#sec02 h2, #sec03 h2{ font-size:20px;}
	#sec01 h1, #sec02 h1, #sec03 h1, #sec04 h1{ font-size:23px;}
	
	#sec03 .s01 ul li{ width:100%; padding:0;}
	#sec03 .s01 ul li strong{ height:auto; margin:10px 0;}
	#sec03 .s02 ul li p{ font-size:16px;}
	#sec03 .s02 ul li p br{ display:none;}
	#sec03 .s02 ul li strong{ font-size:25px;}
	
	#sec04 ul li{ width:100%;}
	#sec04 ul li:after{ display:none;}
	#sec04 ul li+li{ border-top:1px solid rgb(255,255,255,0.3); margin-top:50px; padding-top:50px;}
	
	
	
}