@charset "utf-8";

.section1{width:100%;height:100vh;overflow:hidden;}
.section1 div.img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.section1 div.img img {width:100%; height:auto;}
.section1 h2{font-size:6.25vw;color:#fff;font-weight: 100;text-align: center;margin-bottom: 6%;}

.sec1_txt{position:absolute;left: 34%;top: 35%;}
.sec1_txt2{position:absolute;left: 9%;top: 67%;}
.sec1_txt2 h3{font-size:2.083vw;color:#fff;font-weight: 500;text-shadow: 5px 5px 5px black;}

.sec1_txt2 p{font-size: 1vw;color:#fff;margin-top: 3%;width: 50vw;word-break: keep-all;text-shadow: 5px 5px 5px black;}

.sec1_txt2 ul{display:flex;align-items: center;margin-left: 6%;margin-top: 4%;width: 16%;}
.sec1_txt2 ul li{color: #ffffff70;margin-right: 4%;}
.sec1_txt2 ul li:first-child{font-size:2.083vw;color: #fff;}


.sec1_txt2 img{width:100%; height:100%;}


.section2{width:100%;padding: 8% 9.5%;}

.section2 h2{
    font-size: 2.604vw;
    text-align: center;
    font-weight: 700;
}

.section2 p{text-align:center;font-size:0.937vw;margin-top: 1%;font-weight: 400;}

.section2 ul{display:flex;width:100%;justify-content: space-between;margin-top: 5%;}



.section2 ul li:nth-child(1){background-image:url("/img/main/main_sec2_1_1.png");}
.section2 ul li:nth-child(2){background-image:url("/img/main/main_sec2_2_1.png");}
.section2 ul li:nth-child(3){background-image:url("/img/main/main_sec2_3_1.png");}
.section2 ul li:nth-child(4){background-image:url("/img/main/main_sec2_4_1.png");}
.section2 ul li:nth-child(5){background-image:url("/img/main/main_sec2_5_1.png");}

.section2 ul li{position:relative; background-size: cover;background-position: center; transition: all .5s ease;
    cursor: pointer;}

.section2 ul li{width: 13.5%;height:465px;background-repeat: no-repeat;display: flex;align-items: flex-end;justify-content: flex-end;padding: 1% 1%;}

.section2 ul li h3,
.section2 ul li h4,
.section2 ul li h5,
.section2 ul li dl{display:none;}

.section2 ul .on h3,
.section2 ul .on h4,
.section2 ul .on h5,
.section2 ul .on dl{display:block;}
.section2 ul .on dl{height:100%;display: flex;align-items: flex-end;}

.section2 ul .on{width: 40%;height:465px;background-repeat: no-repeat;padding: 3% 2% 2%;display: flex;flex-direction: column;align-items: flex-start;transition: all .5s ease;color: white;}
.section2 ul .on h3{color:#fff;font-size: 4.187vw;font-weight: 400;text-shadow: 3px 4px 5px black;}
.section2 ul .on h4{color:#fff;font-size:0.833vw;margin-top: 5%;font-weight: 400;}
.section2 ul .on dl dt{font-size:1.25vw;color: #fff;font-weight: 700;}

.section2 ul .on span{display:none;}

.section2 dl dd{position:absolute;right:0;bottom:0;width:160px;height:63px;background-color:#086188;font-size:0.937vw;}
.section2 dl dd a{color:#fff;width:100%;height:100%;display: flex;justify-content: center;align-items: center;}


.section2 span{font-size:1.25vw;font-weight: 700;}



.section2 ul li:before {
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 30%);
}
.section2 ul li.on:before{
    background-color: unset;
}

.section2 ul li:nth-child(3)::before {
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    
}
.section2 ul li:nth-child(4)::before {
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    /* background-color: rgb(255 255 255 / 30%); */
}
.section2 ul li:nth-child(5)::before {
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    /* background-color: rgb(255 255 255 / 30%); */
}


.sec2_line {
    width: 100%;
    height: 1px;
    border: 1px solid #C4C4C4;
    margin-top: 10%;
}

.section3{width:100%;padding: 0% 9.5% 8% 9.5%;}


.section3 .all_input{width:100%;display:flex;}
.section3 .all_input > div {
    width: 45%;
    margin-top: 5%;
}

.section3 .all_input .input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #000000a1;
  color: #555;
  box-sizing: border-box;
  font-size: 18px;
  height: 50px;
  padding: 10px 0px;
  width: 100%;
  }


.section3 .all_input input::-webkit-input-placeholder {
  color: #000;
}

.section3 .all_input input:focus::-webkit-input-placeholder {
  color: dodgerblue;
}

.section3 h2{font-size:2.604vw; font-weight:700;}

.section3 ul{display:flex;width:100%;justify-content: space-between;margin-top: 2%;align-items: center;}
.section3 ul li:first-child{font-size:1.562vw; font-weight:500;}
.section3 ul li span{font-size: 2.5vw;font-weight:500;color:#086188;} 

.section3 ul li{width:45%;}

.section3 p{margin-top:1%}

.section3 ul li:last-child{display:flex;align-items: center;justify-content: space-between;/* border-bottom: 2px solid #000; */height: 65px;padding: 0% 2% 0% 1%;}
.section3 ul li a{color: #ffffff;font-weight:800;/* width: 17%; */display: flex;align-items: center;justify-content: space-between;font-size: 1.2em;border: 1px solid #086188;padding: .5em;border-radius: .3em;background-color: #086188;}
.section3 ul li a i {}
.section3 ul li a svg{margin-left:0%}
.section4{width:100%;height:100vh;background-image:url("/img/main/sec4_img.png");padding: 0% 9.5%;display: flex;flex-direction: column;align-items: center;justify-content: center;background-size: cover;}
.section4 ul li img{width:100%;}
.section4 h2{
    color: #fff;
    font-size: 2.604vw;
    margin-top: 5%;
    font-weight: 700;
}
.section4 p{
    color: #fff;
    font-size: 0.937vw;
    margin-top: 1%;
}

.section4 ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr 1fr;
    gap: calc(100% * 0.035);
    justify-items: center;
    align-content: space-between;
    align-items: center;
    margin-top: 6%;
    width: 100%;
}

.section5{width:100%;padding: 7% 9.5%; background-color:#F5F5F5;}

.section5 div img{width:100%; height:100%; object-fit:cover;}

.section5 ul{width:100%;display: flex;justify-content: flex-start;flex-direction: row;flex-wrap: wrap;/* margin-right: 2em; */}

.section5 ul li{
    width: 31%;
    height: 626px;
    background-color: #fff;
	margin-bottom:2em;
	margin-right:2em;
}
.section5 ul li:nth-child(3n) {margin-right: 0;}

.section5 ul li div{
                   width:100%;
                   background-color:#E5E5E5;
                   height: 35vh;
                   }

.section5 ul li p:nth-child(2){font-size:1.145vw;font-weight:800;padding-top: 6%;}
.section5 ul li p:nth-child(3){font-size:0.885vw;padding: 5% 9%;}
.section5 ul li p:nth-child(4){font-size:0.885vw; opacity:0.5;}
.section5 ul li p{padding-left: 9%;}


@media only screen and (max-width: 1024px)  {
	.section1 ul li:first-child {font-size: 2em;}
	.section1 ul li:nth-child(2) {font-size: 1.1em;}
	.section1 h2 {font-size: 4.5em;}
	.section1 ul li:last-child {}
	.section1 ul li p {font-size: 1.5em;}
	.section1 ul li p:nth-child(2) {font-size: 2em;}
	.section1 {padding: 0% 0% 0% 0%; height: 65vh;}

	.section1 ul li.swiper-button-prev {display:none;}
	.section1 ul li.swiper-button-next {display:none;}
	.sec1_txt2 ul {margin-left: 0%;}

	.sec1_txt2 h3 {font-size: 2em;}
	.sec1_txt2 p {font-size: 1em;}

	.sec1_txt2 {
    position: absolute;
    left: 0;
    top: unset;
    bottom: 3%;
    padding: 1em;
    /* box-sizing: border-box; */
}

	.section2 {padding: 8% 5%;}
	.section3 {padding: 0% 5% 8% 5%;}
	.section4 {padding: 0% 5%;}
	.section5 {padding: 7% 5%;}
	/*section2*/
	.section2 h2 {font-size: 2.2em;}
	.section2 p {font-size: 1em;}


	.section2 ul li:nth-child(2), .section2 ul li:nth-child(3), .section2 ul li:nth-child(4), .section2 ul li:nth-child(5) {
    width: 24%;
    height: 350px;
    margin-top: 1%;}

	.section2 ul li {height:100px;}
	.section2 ul {flex-wrap: wrap;}
	.section2 ul li:first-child {width: 100%;padding: 10% 5%;}

	.section2 ul li:first-child h3 {/* font-size: 1.6em; */}
	.section2 ul li:first-child h4 {font-size: 1.1em;}

	.section2 dl {margin-top: 15%;}
	.section2 ul li:first-child dl dt {font-size: 2em;}
	.section2 dl dd {font-size: 1.3em;}

	.section2 span {font-size: 2em;}

	.section3 h2 {font-size: 2em;}

	.section3 ul {flex-wrap: wrap;}

	.section3 ul li {width: 100%;}
	.section3 p {margin-top: 3%;}

	.section4 ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;}

	.section4 h2 {font-size: 2.5em;}
	.section4 p {font-size: 1em;}
	

	.section5 ul li {
    width: 31%;
    height: auto;
    margin: unset;
    }

	.section5 ul li div {height: 30vh;}

	.section5 ul li p:nth-child(4) {margin-bottom: 15%;font-size: 1em;}	
	.section5 ul li p:nth-child(2) {font-size: 1.1em;word-break: keep-all;}
	.section5 ul li p:nth-child(3) {font-size: 1em; word-break:keep-all}


	.section5 ul {flex-wrap: wrap;}
	.section5 ul li{margin-top:2%;}
	.section5 ul li {width: 49%}

	ul li div.swiper-pagination-progressbar.swiper-pagination-horizontal{display:none;}
	
}

@media only screen and (max-width: 480px)  {
	
	.section1 div.img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

	.sec1_txt2 p {
    width: 100%;
}
	
	.sec1_txt {
    position: absolute;
    left: 12%;
    top: 21%;
    width: 75%;
}
	.section1 {
    padding: 0% 0% 0% 0%;
    height: 100vh;
}
	.section1 div.img img {height: 46vh;width:auto;}
	.section1 .sec1_inner {background-color:black;}
	.section1 ul li:last-child {width: 50%;}

	.section1 ul li:nth-child(2) {}
	.section1 ul {margin-top: 5%;}

	.section2 h2 {margin-top: 10%;word-break: keep-all;}
	
	.section2 ul li:nth-child(2), .section2 ul li:nth-child(3), .section2 ul li:nth-child(4), .section2 ul li:nth-child(5) {
    width: 100%;
    height: 100px;
    }

	.section2 ul li.on {width:100%;height: 280px;}

	.section2 ul .on h3 {
    font-size: 2.4em;
}
	
	.section3 ul li a { width: 40%;margin-top: 3%;}

	.section4 ul {display: grid;grid-template-columns: 1fr 1fr 1fr;}

	.section4 {
    padding: 15% 5%;
    height: auto;}

	.section5 ul li {width: 100%;}

	.section2 dl {}

	.section2 ul li:first-child {}
}

ul li.swiper-pagination-progressbar{top: 99.6%;}
ul li.swiper-button-next{
    right: 81%;
    left: auto;
    top: 91.5%;
    color:#fff;
}

ul li.swiper-button-prev{
    left: 9%;
    right: auto;
    top: 91.5%;
    color:#fff;
}



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

		.sec1_txt2 p br{display:none;}
		.sec1_txt2 h3 { font-size: 1.3em;}
		.sec1_txt2 {left: 5%;top: 60%;width: 90%;}

		.section1 h2 {font-size: 4em;}

}


ul li div.swiper-pagination-progressbar.swiper-pagination-horizontal{
    width: 100%;
    height: var(--swiper-pagination-progressbar-size,4px);
    left: 0;
    top: 99.6%;
}



.section6{width:100%;padding: 8% 10% 8%;background-color: #F5F5F5;}

.section6 h2{position:relative; font-size:0.937vw;color:#333333;font-weight: 500;}
.section6 h3{font-size:2.604vw;font-weight:700;margin-top: 1%;}

.section6 h2:after{
	content:"";
	width:17px;
	height:2px;
	background-color:#F87400;
	margin-left: 0.5%;
	position:absolute;
	left: 4.5%;
	top: 42%;
}

.section6 dl{display:flex;align-items: center;width: 100%;margin-top: 6%;margin-bottom: 2%;}

.section6 dl dt{font-size:1.145vw;font-weight:700;}

.section6 dl dd{font-size:0.937vw;padding: 0% 2%;}

@media screen and (max-width: 1024px) {
	
	.section3 ul li:last-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 1.8em;
    height: unset;
}
	.section3 ul li span {
    font-size: 1.6em;
}
	.section3 ul li a {width:100%;/* text-align: center; */display: flex;justify-content: center;}
	
	.section6 h3{font-size: 2.8em;}


	.section6 h2:after {left: 8%;}
	
	.section6 { padding: 8% 5% 8%;}

	.section6 dl dt {font-size: 1em;width: 100%;}
	.section6 dl dd {font-size: 1em;padding: 0%;}
	.section6 dl {flex-wrap: wrap;}
	
}