@charset "utf-8";

/* platform-common-start */
h2 {font-size: 0;}
h5{line-height: 150%;}
h4 {font-size: 2.8rem;font-weight: 500;color: #000; margin-bottom: 50px; line-height: 150%;  display: inline-block;}
h4::before {content: '';float: left; width: 20px;height:2.8rem;background: #009AC8;transform:skewX(-10deg) translateY(10%);margin-right: 20px; margin-bottom: 30px;}
h4::after {content: '';display: block;clear: both;}
p {line-height: 180%; font-size: 1.2rem;color: #000;word-break: keep-all;}
.p-sub {color: #787879;}
.vertical-center{display: flex; flex-direction: column; justify-content: center;}
li {word-break: keep-all; line-height: 150%;}

.platform-visual {height: 100vh; position: relative; padding: 0; display: flex; flex-direction: column; justify-content: center; background-image: url('/assets/Front/_images/Platform/Platform-recom-BG.jpg'); color: white;}
.platform-title-sub {display: block; font-size: 1.6rem;margin-bottom: 10px; line-height: 150%;}
.platform-visual h3 {font-size: 3.2rem;font-weight: 700;margin-bottom: 50px;} 
.platform-visual p {font-weight: 400; margin-bottom: 50px;color: white;}
.download-btn{display: inline-block; position: relative; height: 80px; padding: 22px; align-items:center; box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);background: #009AC8;transition: all .3s ease; padding-top: 12px;}
.download-btn svg {width: 30px;margin-right: 5px; transform: translateY(25%);}
.download-btn svg path {fill: white;transition: all .3s ease;}
.download-btn:hover {background: white; color: #009AC8;}
.download-btn:hover path {fill: #009AC8;}

@keyframes scroll {
    0% {padding-bottom: 80px;}
    75% {padding-bottom: 0;}
    100% {padding-bottom: 80px;}
}

@keyframes scroll-line {
    0% {opacity: 0;}
    75% {opacity: 1;}
    100% {opacity: 1;}
}

.scroll {position: absolute; left: 50%; transform: translateX(-50%);bottom: 0;text-align: center; height: 80px; 
    animation-name: scroll;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;}

.scroll::after {content: '';display: inline-block;width: 2px;height: 100%;background: white;margin: 0 49%; margin-top: 10px;
    animation-name: scroll-line;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;}

/*platform-about*/
.platform-about {padding: 150px 0 200px;}
.platform-about p {padding: 30px 100px; box-shadow: 0px 0px 15px rgba(41, 41, 41, 0.1); text-align: center;font-size: 1.2rem;color: #000;line-height: 180%; margin-bottom: 60px;}
.platform-about-list {width: 100%; display: flex;}
.platform-about-list > li {width: 19%; padding: 50px 30px; margin-right: 1.25%; background: white; border: 1px solid #009AC8; border-radius: 30px;text-align: center; font-size: 1.6rem;font-weight: 700;color: #009AC8; height: 360px;}
.platform-about-list > li:last-child{margin-right: 0;}
.platform-about-list-inner {height: 100%;font-weight: 400;font-size: 1.2rem; line-height: 200%;color: #A4A4AA;}
.platform-about-list .strong {background: #009AC8; color: white;}
.platform-about-list .strong .platform-about-list-inner{color: white;}

/*platform-function*/
.platform-function{padding: 100px 0 0; overflow: hidden; position: relative; background: #EFF0F1;}
.platform-function p {margin-bottom: 25px;}
.platform-ai {position: relative; margin-bottom: 200px;}
.a-human-txtarea, .platform-ai-contents {position: inherit; z-index: 2;}
.platform-ai-contents {display: flex; width: 80%;}
.platform-ai-contents-inner {padding: 30px; width: 31%;height: 200px; margin-right: 3.5%; text-align: center;margin-top: 80px;background: white;border-radius: 15px 15px 0 0;}
.platform-ai-contents-inner:last-child {margin-right: 0;}
.platform-ai-contents-inner h5 {font-size: 1.2rem; font-weight: 700;color: #000;line-height: 150%;margin-bottom: 12px;}
.platform-ai-contents-inner p {font-size: 1rem;color: #000;margin-bottom: 0;}
.platform-ai-contents .strong {transform: translateY(-25%);background: #2FCFFF; box-shadow: 5px 15px 15px rgba(0, 154, 200, 0.13);}

/*reference*/
.platform-reference{overflow: hidden;padding: 150px 0;}
.platform-reference p {margin-bottom: 80px;}
/*reference-slide*/
.slick-slide {width: 800px; transition: all .3s ease; opacity: .5;}
.slick-active {transform: scale(1.5); opacity: 1; position: inherit; z-index: 2;}
.platform-reference-slide{padding: 200px 0; background:#EFF0F1;}
.slick-list{ overflow: visible;}
.platform-ai::after {content: '';display: block;position: absolute;top: 0; right: -30%;width: 730px;height: 730px;border-radius: 365px;background-position: center;background-size: cover; z-index: 1;}
.rolling-obj {position: absolute; z-index: 0;right: 10%;animation-name: rolling; animation-duration: 20s; animation-iteration-count: infinite;animation-timing-function: linear;}
.platform-reference-imgarea img {width: 100%; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);}

/*  platform-common-end */

/*predict*/
#predict-visual {background-image: url('/assets/Front/_images/Platform/Platform-demand-BG.jpg');}
#predict-about .platform-about-list > li {width: 20%; margin-right: 6.66%; line-height: 150%;}
#predict-about .platform-about-list > li:last-child {margin-right: 0;}
#predict-about .platform-about-list-inner {height: 80%;}
#predict-function .predict-dispatchi .p-sub {margin-bottom: 80px;}
.predict-dispatchi {padding-bottom: 200px;}
.predict-dispatchi-imgarea {text-align: center;}
.predict-dispatchi-imgarea img {display: inline-block; width: 100%; max-width: max-content;}
.predict-dispatchi-imgarea .hide-pc {display: none;}

#predict-function .platform-ai::after {background-image: url('/assets/Front/_images/Platform/Platform-demand-2-ellipse.jpg');}

/*manabgement*/

.ani-txt{ white-space: nowrap;pointer-events: none; display: block; position: absolute; bottom: 180px; left: 150%;transform: translateY(85%); font-size: 4.8rem; font-weight: 700; color: #EFF0F1; -webkit-text-stroke: 1.8px #009AC8;z-index: 1;}

.service-human-contents {display: flex; margin-bottom: 180px;position: relative;z-index: 2;}
.service-human-contents > li {padding: 0 40px; width: 24%;height: 250px;margin-right: 1.333%; text-align: center; font-size: 1.2rem; font-weight: 700;color: #000;background: white; }
.service-human-contents > li:last-child {margin-right: 0;}
.service-human-contents > li > ul {margin-top: 20px;}
.service-human-contents > li > ul > li {font-size: 1rem; color: #333333;line-height: 180%;font-weight: 400;}
.service-human-contents1 {border-top: 20px solid #009AC8;}
.service-human-contents2 {border-top: 20px solid #5E9FF2;}
.service-human-contents3 {border-top: 20px solid #2FCFFF;}
.service-human-contents4 {border-top: 20px solid #E87A69;}

#management-function {position: relative;}
#management-function-2 {overflow: visible; margin-bottom: 100px;padding: 0;}
#management-function-2 .p-sub{margin-bottom: 0;}
.information-update {text-align: right;}
.information-update-contents {background: white;text-align: left;padding: 90px; transform: translateY(100px); box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);}
.information-update-contents > div {width: 45%; float: left;}
.information-update-contents1, .information-update-contents3 {margin-right: 10%;}
.information-update-contents1, .information-update-contents2 {margin-bottom: 80px;}
.information-update-contents > div > img {float: left; width: 86px;margin-right: 30px}
.information-update-contents > div::after {content: '';display: block;clear: both;}
.information-update-contents::after {content: '';display: block;clear: both;}
.information-update-contents h5 {font-size: 1.2rem;color: #000;font-weight: 700; margin-bottom: 15px;}
.information-update-contents p {font-size: 1rem;}

#management-function .platform-ai::after {background-image: url('/assets/Front/_images/Platform/Platform-recom-2-ellipse.jpg');}

/*matching*/

#matching-visual {background-image: url('/assets/Front/_images/Platform/Platform-donation-BG.jpg');}
#matching-about .platform-about-list > li {width: 20%; margin-right: 6.66%; line-height: 150%;}
#matching-about .platform-about-list > li:last-child {margin-right: 0;}
#matching-about .platform-about-list-inner {height: 80%;}

#matching-function .matching-dispatchi .p-sub {margin-bottom: 100px;}
.matching-dispatchi {padding-bottom: 180px;}
.matching-dispatchi-imgarea {text-align: center;}
.matching-dispatchi img {width: 90%;}
.platform-reference-imgarea {text-align: center;background: #EFF0F1;padding: 60px 0;}
#matching-reference img {max-width: 1400px;}

#matching-function .platform-ai::after {background-image: url('/assets/Front/_images/Platform/Platform-donation-2-ellipse.jpg');}

@media screen and (max-width:1500px) {
    .platform-ai::after {top: 150px; width: 530px; height: 530px;}
    .platform-ai-contents {width: 100%;}
    .platform-about-list {flex-wrap: wrap; justify-content: center;}
    .platform-about-list > li {padding: 50px 20px;}
    #predict-about .platform-about-list > li {width: 24%;margin-right: 1%;line-height: 150%;}
    .slick-active {transform: scale(1.2);}
    .information-update-contents > div > img {margin-bottom: 110px;}

    #management-about {padding-bottom: 100px;}
    .service-human-contents > li {height: 350px;}
    .platform-about-list > li {width: 25%;margin-right: 5%; margin-bottom: 30px;}
    .platform-about-list > li :nth-child(3n) {margin-right: 0;}
}
@media screen and (max-width:1200px) {
    h4 {font-size: 2.4rem; margin-bottom: 30px;}

    #predict-about .platform-about-list > li {width: 48%; margin-right: 4%; margin-top: 25px;}
    #predict-about .platform-about-list > li:nth-child(2n) {margin-right: 0;}
    .rolling-obj {top: 650px;}
    

    .platform-ai {margin-bottom: 100px;}
    .platform-ai-contents {flex-direction: column;}
    .platform-ai-contents-inner {width: 50%; margin: 0; margin-bottom: 30px;}
    .platform-ai-contents-inner:first-child {margin-top: 50px;}
    .platform-ai-contents .strong {transform: translate(0);animation-name: none;}
    .platform-ai::after {top: 300px;}
    .predict-dispatchi {padding-bottom: 150px;}
    .slick-initialized .slick-slide {width: 600px;}

    .service-human-contents {flex-wrap: wrap;}
    .service-human-contents > li {width: 48%; margin-right: 4%; height: 300px; margin-bottom: 30px;}
    .service-human-contents > li:nth-child(2n) {margin-right: 0;}
    .platform-about-list > li {width: 30%;margin-right: 3%; margin-bottom: 20px;}
    .information-update-contents {padding-bottom: 50px;}
    .information-update-contents {padding: 50px 60px;}
    
}
/* tablet */
@media screen and (max-width:1024px) {
    h4 {font-size: 2.2rem; margin-bottom: 30px;}
    .predict-dispatchi-imgarea .hide-tablet {display: none;}
    .predict-dispatchi-imgarea .hide-pc {display: inline-block;}
    .platform-reference-slide {padding: 100px 0;}
    .information-update-contents > div {width: 100%;margin: 0; margin-bottom: 10px;}
}
/* mobile */
@media screen and (max-width: 768px){
    .platform-reference p {margin-bottom: 30px;}
    .platform-about {padding: 50px 0;}
    #management-about {padding: 50px 0; }
    .predict-dispatchi {padding-bottom: 100px;}
    .platform-reference {padding-top: 100px;}
    .platform-ai-contents-inner {width: 80%; max-width: 400px;}
    .platform-ai::after {width: 350px;height: 350px;top: 500px;}
    .rolling-obj {right: 5%; top:700px;}
    .slick-initialized .slick-slide {width: 400px;}
    .service-human-contents > li {padding: 0 30px;height: 350px;}
    .ani-txt{display: none;}
    .service-human-contents {margin-bottom: 70px;}
    .platform-about-list > li {width: 48%; margin: 0; margin-right: 4%; margin-bottom: 20px;}
    .platform-about-list > li:nth-child(2n) {margin-right: 0;}
    .information-update-contents {padding: 70px 50px 10px;}
    .information-update-contents > div {margin-bottom: 30px;}
}

@media screen and (max-width:576px) {
    .platform-about-list {padding: 0 15%;}
    .platform-reference {padding-top: 50px;}
    .platform-about p {padding: 20px 50px; margin-bottom: 25px;}
    .platform-about-list > li, #predict-about .platform-about-list > li {width: 100%; height: 250px; margin-right: 0; margin-bottom: 0; margin-top: 25px;}
    .platform-visual p {margin-bottom: 30px;}
    .platform-reference-slide {padding: 50px 0;}
    .slick-initialized .slick-slide {width: 280px;}
    .service-human-contents > li {width: 100%; height: 250px; padding: 0;}
    .information-update-contents {padding: 50px 50px 10px;}
    .information-update-contents > div > img {float: none;margin: 0; margin-bottom: 20px;}
    .service-human-contents > li {font-size: 1.6rem;}
    .service-human-contents > li > ul > li {font-size: 1.2rem;}
    .platform-function {padding-top: 50px;}
    .platform-ai-contents-inner:first-child {margin-top: 30px;}
    .service-human-contents {margin-top: 30px;}
    .platform-ai{margin-bottom: 50px;}

    
    .aniBottom2 { animation-name: bottom2-1; animation-duration: .8s; animation-timing-function: ease-out; animation-fill-mode: forwards; } 
    @keyframes bottom2-1 { 
    0% { opacity: 0; transform: translateY(100px)}
    100% { opacity: 1; transform: translateY(50px)}}
}