@charset "utf-8";
/* CSS Document */
ul{ list-style:none}
.bnr75{ background-color:#7F7D6D; display:flex;flex-wrap: wrap; width:80vw; margin:50px auto; height:12vw; padding:0}
.bnr75 div:nth-of-type(1) { width:24vw;}
.bnr75 div:nth-of-type(2) { width:56vw; display:flex;flex-wrap: wrap; }
.bnr75 div div{ display: flex;align-items: center; align-content:center;justify-content: center;}
.bnr75 div div:nth-of-type(1){ width:70%; font-size:26px; line-height:40px; height:9vw;   }
.bnr75 div div:nth-of-type(2) { width:20%; border-radius:50px; border:1px solid #FFF; text-align:center;  font-size:12px; padding:10px 0; margin:auto 5%}
.bnr75 div div:nth-of-type(3) { width:100%; border-top:1px solid #FFF; margin:auto 5px; font-size:12px; }
@media only screen and (max-width: 1200px) {.bnr75 div div:nth-of-type(3) { font-size:10px; }}
@media only screen and (max-width: 1024px) {.bnr75 div div:nth-of-type(1) { font-size:14px; line-height:24px }
.bnr75 div div:nth-of-type(2) { border-radius:10px; padding:5px 0;font-size:10px; }}
@media only screen and (max-width: 740px) {.bnr75 div div:nth-of-type(1) { height:12vw }.bnr75 div div:nth-of-type(2) { display:none }
.bnr75 div div:nth-of-type(3) { display:none }}
@media only screen and (max-width: 340px) {.bnr75 div div:nth-of-type(1) { font-size:12px; line-height:20px}}

a .bnr75 div { color:#FFF}
section{ width:100%; overflow:hidden}
.second{justify-content: center; flex-direction: row-reverse;}
.second div{ width:45%; margin:50px 0 0 5%; }
.maincopy{ font-size:30px; line-height:50px}
.subcopy{ font-size:16px; line-height:30px; margin-top:30px}
.copy1{ font-size:23px; line-height:40px; font-weight:bold; padding:0; margin:0}
.copy2{ font-size:13px; line-height:30px; padding:0; margin:30px 0 }
.copy3{ font-size:50px; line-height:60px; font-weight:bold; padding:0; margin:0; font-family:"dm"}
.copy5{color:#194951; font-family:"dm"}
.copy6{color:#49BAA8; font-family:"dm"}
.second .copy4,.fourth .copy4{ color:#27525A;}
.third .copy4{display: flex; align-items:center;}
.third .copy4::before { border-top:#FFF 3px solid; content: ""; width:20px; }
.third .copy4 a { margin:0 0 0 10px; color:#FFF;}
.bt{width:200px !important; box-sizing:border-box; text-align:center; font-size:14px; line-height:20px; border-radius:30px; padding:15px; }
.bt1{ color:#27525A; border:#27525A 1px solid; margin:30px 0}
.bt1:hover{ color:#FFF; background-color:#27525A}
.bt2{ color:#FFF; border:#FFF 1px solid; margin:30px auto }
.bt2:hover{ color:#27525A; background-color:#FFF; }
.btpc{ display:block;}
.btsp{ display:none}
.third { background: linear-gradient(to right, #49BAA8 0, #49BAA8 80%, white 80%, white 100%); color:#FFF; position:relative; padding:30px 0 0 0; min-height:850px}
.third .triangle{ top:0; left:70%;background: linear-gradient(225deg, white 0, white 50%, #49BAA8 50%, #49BAA8 100%); width:15%; height:15%; position:absolute; }
.bottom{ width:100%; height:300px; position:absolute; bottom:0; left:0; background-color:#FFF}
.third .flex{ justify-content: space-between; position:relative; }
.third .flex div:first-child{ width:30%; max-width:400px; margin:0 2% 0 10%; z-index:1 }
.third .flex div:last-child{ width:50%; z-index:3}
.third .flex a{ position:relative}
.third a img { border-radius:20px; }
.third a { width:48%; margin:0 1% 10px 1%}
.thirdicon{ position:absolute; bottom:25px; right:30px; z-index:20; background-color:#FFF; width:40px !important; height:40px !important; border-radius:50% }
.thirdarrow{ bottom:40px; right:60px; z-index:10 }
a:hover .thirdicon{ background-color:#27525A;transition : all 0.5s ease 0s; }
.fourth { background-color:#F7F9F8; position:relative; padding:30px 0; }
.fourth .triangle{ top:0; right:0}
.fourth .flex div:first-child{ width:20%; margin:0 2% 0 10%; z-index:1; }
.fourth .flex div:last-child{ width:63%; z-index:3;}
.fourth .triangle{ top:0; right:0;background: linear-gradient(45deg, #F7F9F8 0,#F7F9F8 50%, white 50%,  white 100%); width:100px; height:100px; position:absolute; }
.fourth .copy4{display: flex; align-items:center;}
.fourth .copy4::before { border-top:#49BAA8 3px solid; content: ""; width:20px; margin-right:10px}
.fourth a{ width:100%; margin:0}
.fourth a ul{margin:0 0 20px 0; padding:0; background-color:#FFF; display:flex; align-items: center; border-radius:10px; justify-content: center;}
.fourth a ul li:nth-of-type(1){ width:100px;border-radius:15px; height:30px; line-height:30px; font-size:15px; color:#FFF; font-size:12px;margin:0; padding:0; text-align:center}
.fourth a ul li:nth-of-type(2){ width:calc(100% - 220px); padding:10px 20px;margin:0; color:#333; }
.fourth a ul li:nth-of-type(3){ width:40px; height:40px; border: 1px solid #194951; border-radius:50%;margin:0; padding:10px; position:relative}
.icon_news{ background-color:#F9B13D}
.fourth a:hover ul li:nth-of-type(3){ background-color:#27525A;transition : all 0.5s ease 0s;}
.fourth a:hover ul{ border:1px solid #27525A;transition : all 0.5s ease 0s;}
.fourth a ul li:nth-of-type(3) .arrow{ top:24px}
.date{ color:#194951 !important; font-size:12px; line-height:20px}
.fifth{ width:100%; display:flex; }
.fifth a{ width:50%; height:25vw;position: relative; color:#FFF }
.fifth a div{ width:100%; height:25vw;  background-size: 50vw 25vw; background-repeat:no-repeat; background-position:center}
.fifth a div::before{ background-color: rgba(0,0,0,0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ' ';}
.fifth a div h3{position: absolute; width: 100%; font-size:36px; line-height:45px; top:50px; left:50px; z-index:5}
.fifth a div:hover h3{font-size:50px; transition : all 0.5s ease 0s;}
.fifth a div:hover p{ top:100px; transition : all 0.5s ease 0s;}
.fifth a div p{position: absolute; width: 100%; font-size:16px; line-height:25px; top:80px; left:50px; z-index:6}
.fifth .arrow::before{ background: #fff !important;}
.fifth .arrow::after{border-top: 1px solid #fff !important;border-right: 1px solid #fff !important;}
.fifth .arrow{ bottom:50px; right:50px;}

.fifthicon{ position:absolute; bottom:32px; right:20px; z-index:20; border:1px solid #FFF;width:40px !important; height:40px !important; border-radius:50% }
.fifth a div:hover .fifthicon{ background-color:#27525A;transition : all 0.5s ease 0s; }
.sixth { background-color:#F7F9F8; text-align:center; padding:50px 0 0 0 }
.sixth .flex{ width:98vw; max-width:1200px; margin:50px auto;justify-content: center;}
.sixth .flex a{ width:22%; margin:10px 1%; padding:30px 10px 10px 10px; box-sizing:border-box; background-color:#FFF; color:#333}
.sixth .flex a img{ width:auto; height:5vw }
.sixth dl{ margin:20px 0 0 0; padding:0}
.sixth dl dt{ margin:0; padding:0; font-weight:bold; font-size:16px; line-height:26px}
.sixth dl dd{ margin:0 auto; padding:10px 0 0 0; font-size:10px; line-height:22px; max-width:220px}
@media only screen and (max-width: 1024px) {
.second div{ width:100%;margin:0; max-width:580px; }
.copy3{ font-size:40px; line-height:50px; margin:0; padding:0;}
.copy4{ margin:15px 0 30px 0; }
.second{ width:100%; margin:0; padding:0 40px !important; }
.btpc{ display:none;}
.btsp{ display:block; margin:30px auto !important; text-align:center; }
.third { background:#14b29a; padding:30px 0} 
.third .copy4 a  { height:20px !important; margin:0 0 0 20px !important; }
.third .copy4 a::before{ padding:0 !important;}
.third .triangle{ width:100px; height:100px; left:auto; right:0;background: linear-gradient(45deg, #14b29a 0, #14b29a 50%, white 50%, white 100%); }
.third .flex div:first-child{ width:100%; margin:0; padding:0 30px; max-width:100% }
.third .flex div:last-child{ width:100%;margin:0; padding:0 30px; }
.third .flex a { width:80vw; height:35vw; margin:10px auto }
/* .third .flex a::before{ content: ""; display: block; padding-top: 100%;}  */
.third .flex a img { position: absolute; width: 100%; height:35vw; top:0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover;object-position:0 0 }
.thirdicon{ width:25px !important; height:25px !important; padding:0 !important }
.thirdarrow{ bottom:23px; right:43px;  }
.bottom {background: linear-gradient(135deg, #14b29a 0, #14b29a 50%, white 50%, white 100%); width:100px; height:100px; position:absolute; top:auto; bottom:0; right:0; left:auto}
.fourth .flex div:first-child{ width:100%; margin:0;}
.fourth .flex div:last-child{ width:100%;}
.fourth a ul { position:relative; display:block; margin-bottom:30px}
.fourth a ul li:nth-of-type(1){ width:150px; position:absolute; top:-15px; left:20px}
.fourth a ul li:nth-of-type(2){ width:calc(100% - 20px); padding:20px;margin:0; color:#333; }
.fourth a ul li:nth-of-type(3){ width:20px; height:20px; position:absolute; bottom:15px; right:10px;}
.arrow::before{width:10px; top:-14px; left:-4px;}.arrow::after{top:-16px; left:-1px;}
.fifth a div h3{ font-size:26px; line-height:35px; top:20px !important; left:20px !important;}
.fifth a div p{ font-size:12px; line-height:20px; top:60px !important; left:40px !important;}
.fifthicon{ width:25px !important; height:25px !important; }
.fifth .arrow{ right:34px; bottom:32px  }
.sixth .flex a{ width:48%;}
.sixth dl dd{ display:none}
.bnr75 div:nth-of-type(2) {font-size:20px; line-height:30px; }
}
@media only screen and (max-width: 768px) {
.fifth a{ width:100%; height:300px }
.fifth a div{ width:100%; height:300px; }
.fifth{flex-wrap: wrap;}
.fifth a div:nth-of-type(1){ background-size:cover;} 
.fifth a div h3{top:30px; left:30px; font-size:30px;}
.fifth a div p{ top:50px; left:30px;}
.sixth .flex a{ width:80%; margin:10px auto;}
.sixth .flex a img{ height:10vw }
.sixth dl dt{ font-size:12px; line-height:20px }
.copy3{ font-size:30px; line-height:40px;}
.second{ padding:30px 20px}
.copy1{ font-size:16px; line-height:24px;}
.third { padding:20px 0 100px 0;}
.bnr75 div:nth-of-type(3) div{font-size:10px; padding:0; margin:10px; border:none}
}
@media only screen and (max-width:550px) {
.bnr75 div:nth-of-type(2) { font-size:12px; line-height:20px;}
.bnr75 div:nth-of-type(3){ display:none}
}