@charset "utf-8";

h2 {font-size: 0;}
.about-txtarea {font-size: 1.4rem;color: #A4A4AA;line-height: 150%;}
section {overflow: hidden;}

.ani-txt, .ani-txt-mobile {white-space: nowrap; pointer-events: none; display: block; position: absolute; font-size: 4.8rem;  font-weight: 700; color:white; -webkit-text-stroke: 1.8px #1D3D7D;z-index: 1;  opacity: 0;}
.ani-txt-mobile {display: none;}
#vision .ani-txt{left: -100%;top: 380px;}
#people .ani-txt{ bottom: -8px; left: -100%;}
#prize .ani-txt{ top: 0; left: -100%;}

#visual, .visual {padding-top: 400px;text-align: center; background-image: url('/images/Introduce/Introduce-Top-BG.jpg') ; height: 970px;overflow: visible; background-position: left;}
.title {color: white;margin-bottom: 220px;font-size: 3rem;line-height: 150%;}
.title-main {display: block; font-weight: 700;}
#visual .inner{position: inherit; padding: 80px 40px; background: white; display: flex; box-shadow: 0px 0px 15px rgba(41, 41, 41, 0.1);bottom: -100px;}
.about-visual-contents {width: calc(33.333% - 2px);}
.about-visual-contents::before {content: '';display: block;float: left; width: 1px;height: 100%; background-color: #808080;}
.visual1::before{display: none;}
.about-visual-contents img {margin-bottom: 25px;}
.about-visual-contents h3 {display: flex; flex-direction: column; justify-content: center;height: 3.2rem; font-size: 1.6rem;font-weight: 700;color: #1D3D7D; margin-bottom: 10px; line-height: 120%;}
.about-visual-contents p {font-size: 1.4rem;color: #292929;}
.about-visual-contents {opacity: 0;}

/* vision */
#vision { padding: 450px 0 0;position: relative;overflow: hidden;}
#vision .wrap{display: flex;}
.vision-imgarea {width: 55%;height: 600px; margin-right: 3%; background: url('/images/Introduce/Introduce-company.jpg') center no-repeat; background-size: cover;position:relative ;z-index: 2;}
.vision-txtarea {width: 42%;padding-top: 250px;}
.vision-txtarea h3 {font-size: 2rem;margin-bottom: 40px;color: #292929;font-weight: 700;line-height: 120%;}
/* .vision-txtarea::before {content: '“';display: block;color: #292929;font-size: 2rem;font-weight: 700;transform: translateX(-15px);} */

/* people */
#people { padding: 300px 0 600px;position: relative; }
.people-imgarea {width: 100%;max-width: 1040px; height: 640px; background: url('/images/Introduce/about-ceoteam.jpg') center no-repeat; background-size: cover;float: right;}
.wrap::after {content: '';display: block;clear: both;}
.txt-under {margin-bottom: 50px;}
.people-txtarea h3{font-size: 2rem; margin-bottom: 50px;color: #292929;font-weight: 700;}
.people-txtarea {position: absolute; top: 600px; left: 50%; transform: translate(-100%, 50%); width: 34%;padding: 90px 80px;background: #FFFFFF; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); text-align: right;}
#people::before {content: ''; display: block; position: absolute; width: 550px;height: 550px;background: url('/images/CI_head.png') no-repeat center;background-size: cover; opacity: .05; top: -30px; left: 50px;
    animation-name: rolling;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;}

/* business */
#business .hide-pc {display: none;}
#business .hide-mobile {display: flex; width: 100%;}
.list-title {display: flex;flex-direction: column; justify-content: center; height: 5.4rem;}

#business { position: relative; padding-top: 125px; background-image: url('/images/Introduce/about-busi-BG.jpg');margin-bottom: 200px;z-index: 2;}
#business .inner { padding:50px 10% 100px;background-color: white; background-image: url('/images/Introduce/about-busi-inner-BG.png'); background-size: cover;background-position: center; background-repeat: no-repeat;}
.business-txtarea {width: 100%;}
.business-list-inner{display: flex;width: 100%;}
.business-list{width: 25%; margin-right: 10px; color: white; padding: 45px 5%;text-align: center;border-radius: 20px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);}
.business-list:last-child {margin-right: 0;}
.business-research{background: #333333;}
.business-health{background: #1D3D7D;}
.business-list-sub::before {content: '';display: inline-block;width: 30px;height: 3px;background: #999;margin: 20px 0;border-radius: 3px;}
.business-list li {font-size: 1.2rem;font-weight: 500;word-break: keep-all;line-height: 150%;}
.business-list-sub li {font-size: 1rem;font-weight: 400;margin-bottom: 15px;}
.business-list svg {width: 70%; margin-bottom: 20px;}
.business-list-title{width: 100%;display: flex;margin-bottom: 5px;}
.business-list-title li, .business-list-title {width: 50%; font-size: 1.8rem; font-weight: 700;color: #333;}
.business-list-title li:last-child{text-align: right; color: #1D3D7D;}
.business-txtarea h3 {font-size: 2rem; color:#292929;font-weight: 700; margin-bottom: 30px;}
.business-txtarea p {font-size: 1.2rem; color: #666;line-height: 150%; margin-bottom: 20px;}
.business-txtarea p .txt-point {color: #1D3D7D;font-weight: 500;}
#business h3 {font-size: 0;}


#prize {padding-bottom: 200px; position: relative;}
#prize h3 {font-size:0;font-weight: 700;color: #292929;margin-bottom: 100px; }
.prize-slide {overflow: hidden;position: relative;z-index: 2;}
.swiper-slide img {width: 100%;box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);}
.slide-wide img {position: absolute;margin-top: 50%;transform: translateY(-25%);}

/* employment */
#employmentCnt, #partnersCnt, #mainbizCnt {overflow: visible; padding-bottom: 100px;}
#mainbizCnt .inner {overflow: hidden;}
#employmentCnt .inner, #partnersCnt .inner, #mainbizCnt .inner  {padding: 20px; background: #FFFFFF; box-shadow: 0px 0px 15px rgba(41, 41, 41, 0.1); margin-top: -250px; position: inherit; z-index: 2; text-align: center; }
#employmentCnt .btn-light {border: solid 2px #009AC8; color: #009AC8; display: inline-block; font-weight: 700; border-radius: 5px; width: 100%; max-width: 450px;height: 80px; cursor: pointer; line-height: 50px;}
#employmentCnt .btn-light:hover {background-color: #009AC8; color: #fff;}
#employmentCnt img {width: 100%;}
#employmentCnt .btn-light svg path {fill: #009AC8; transition: all .3s ease;}
#employmentCnt .btn-light:hover svg path {fill: #fff;}
#employmentCnt .notice {font-size: 1.2em; color: #555;font-weight: 500;margin-top: 10px;}
#employmentCnt .btn-area {padding: 50px 0 30px;}

/* partners */
#partnersCnt .inner, #mainbizCnt .inner {margin-top: -350px;}
.customer {margin-bottom: 60px;}
.customer-wrap {display: flex;flex-wrap: wrap;gap: 20px;}
.customer-box {width: calc(100% /4 - 15px);  height: 314px; position: relative; cursor: pointer; overflow: hidden;}
.customer-box > div { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; position: absolute; top: 0;left: 0; }
.customer-box .customer-up {padding:20px 30px 30px 20px; border: 1px solid #D3D5D6; background-color: #FAFAFA; }
.customer-box .customer-down {padding:30px; border: 2px solid transparent; border-image: linear-gradient(180deg, #1D3D7D 0%, #009AC8 100%); border-image-slice: 1; background: #FAFAFA; left: -100%;z-index: 2; transition: all .3s ease;}
.customer-surmary {font-size: 1.30em;font-weight: 500;line-height: 130%;color: #000;}
.customer-surmary .small {font-size: 16px;color: #A4A4AA;font-weight: 300;}
.customer-title {font-size: 26px; font-weight: 700; background: linear-gradient(180deg, #1D3D7D 0%, #009AC8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 130%;}
.customer-list li {font-size: 1.2em;color: #000; line-height: 130%;font-weight: 500; word-break: keep-all;}
.customer-list .small {font-size: 16px;color: #A4A4AA; margin-bottom: 8px;}
.customer-logo img {max-width: 100%;}
#partnersCnt .inner  {padding:80px 50px;}
#partnersCnt .title {color: #000;font-weight: 700; font-size: 1.5em;margin-bottom: 30px;}

.partners-warp {display: flex;flex-wrap: wrap;gap: 60px 30px;justify-content: space-between;}


/* mainbiz */
#mainbizCnt .inner {padding: 130px 110px 100px;}
.mainbiz-content {border-radius: 30px; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);position: relative;display: flex;margin-bottom: 75px;}
.mainbiz-content:last-child {margin-bottom: 0;}
.mainbiz-box {max-width: 720px;width: 100%; min-height: 220px; display: flex; justify-content: space-between;flex-direction: column; text-align: left; position: relative; margin: 40px;}
.mainbiz-thumb{position: absolute;}
.mainbiz-logo {position: absolute;}
.mainbiz-thumb {display: flex;gap: 20px;}
.mainbiz-thumb img {max-width: 80px; display: block;}
.mainbiz-title {padding: 5px 20px;font-size: 1.5em;color: #fff;font-weight: 700; display: inline-block; margin-bottom: 20px; word-break: keep-all; line-height: 120%;}
.mainbiz-surmary {color: #000;font-size: 1.25em;line-height: 150%;font-weight: 500; word-break: keep-all;}
.mainbiz-surmary .small {color: #A4A4AA;font-size: 1em;font-weight: 400;}
.mainbiz-content a {color: #009AC8; font-size: 1em;font-weight: 700;display: flex;align-items: center;}
.mainbiz-content a img {transition: all .2s ease;}
.mainbiz-content a:hover img {transform: translateX(5px);}

.mainbiz-styler .mainbiz-title  {background-color: #0F4BC2;}
.mainbiz-foresight .mainbiz-title  {background-color: #E84B5A;}
.mainbiz-milkyway .mainbiz-title {background-color: #1D3D7D;}
.mainbiz-savepeople .mainbiz-title {background-color: #E46A5A;}
.mainbiz-history .mainbiz-title {background-color: #356461;}
.mainbiz-foresight , .mainbiz-milkyway {justify-content: flex-end;}
.mainbiz-foresight .mainbiz-box, .mainbiz-milkyway .mainbiz-box {text-align: right;}
.mainbiz-foresight a, .mainbiz-milkyway a {justify-content: flex-end;}
.mainbiz-foresight .mainbiz-logo { max-height: 288px;left: 80px;  top: -20px}
.mainbiz-foresight .mainbiz-thumb, .mainbiz-milkyway .mainbiz-thumb {bottom: 0;left: 0;}
.mainbiz-styler .mainbiz-thumb, .mainbiz-savepeople .mainbiz-thumb, .mainbiz-history .mainbiz-thumb {bottom: 0;right: 0;}
.mainbiz-styler .mainbiz-logo, .mainbiz-history .mainbiz-logo {right: 40px; top: -20px; max-height: 288px;}

.mainbiz-savepeople .mainbiz-box {max-width: 100%;}
.mainbiz-savepeople .mainbiz-logo { right: 40px;bottom: 150px;max-width: 330px;}
.mainbiz-savepeople .mainbiz-thumb {display: flex;gap: 20px;}
.mainbiz-savepeople-thumb {background-color: #F9EBEB; color: #000;font-size: 16px;font-weight: 500; padding: 12px 30px;line-height: 120%;text-align: center;}

.mainbiz-milkyway .mainbiz-logo {max-height: 300px;left: 30px; top: 0;}
.mainbiz-milkyway .mainbiz-thumb img {max-width: 140px;}


 @media screen and (max-width: 1500px) {
    .title {padding: 0 30px;}
    .about-visual-contents {padding: 0 20px;}
    .about-visual-contents h3 {font-size: 1.4rem;}
    .about-visual-contents p {font-size: 1.2rem;}
    .about-visual-contents::before {display: none;}
    #business {padding: 80px 50px 0 ;}
    #business .inner {max-width: 100%;}
    .people-txtarea {width: 52%; left: 55%;}
    
    .customer-box {width: calc(100% /3 - 15px);}
    #partnersCnt .inner {padding: 50px;}

    .mainbiz-box {max-width: 460px; min-height: 280px; }
    #mainbizCnt .inner {padding: 60px 50px;}
    .mainbiz-milkyway .mainbiz-thumb img {max-width: 120px;}

    .partners-warp img {max-width: calc(100% / 5 - 30px);}
}
 @media screen and (max-width: 1200px) {
    .ani-txt {display: none;}
    .ani-txt-mobile {display: block;opacity: 1; -webkit-text-stroke: 1.5px #1D3D7D;}
    #vision .ani-txt-mobile {top: 380px;}
    #people .ani-txt-mobile {bottom: -10px;right: 0;}
    #prize .ani-txt-mobile {top:30px;right:0;}
    .people-txtarea {width: 62%; left: 55%;}
    .people-imgarea {width: 82%;height: 500px;}

    .customer-box {width: calc(100% /2 - 15px);}
    
    .mainbiz-content {justify-content: flex-start; flex-direction: column;padding: 40px;}
    .mainbiz-thumb {display: none!important;}
    .mainbiz-logo {position: relative; top: 0!important;left: 0!important;max-width: 250px; max-height: fit-content!important; margin-bottom: 20px;}
    .mainbiz-savepeople .mainbiz-logo {margin: 40px 0;}
    .mainbiz-box {margin: 0; max-width: 100%; min-height: auto; text-align: left!important;}
    .mainbiz-content a {margin-top: 50px; justify-content: flex-end;}

    .partners-warp {justify-content: center;}
    .partners-warp img {max-width: calc(100% / 4 - 15px);}
}
/* tablet */
 @media screen and (max-width: 1024px) {
     #vision {width: 100%;}
    #vision .wrap {display: block;}
    .vision-imgarea {width: 90%; height: 450px;}
    .vision-txtarea {width: 100%; padding: 80px 30px 0 20%; }
    .people-imgarea {width: 90%; height: 400px;}
    #people {padding: 150px 0 150px;}
    #people::before {right: -15%; left: auto; bottom: -50px;top: auto; width: 300px;height: 300px;}
    .people-txtarea {right: -90%; top: -230px;bottom: auto; left: auto; width: 90%; position: relative; overflow: hidden; padding: 70px 60px 80px
        ;} 
    .people-txtarea h3 {margin-bottom: 40px; line-height: 150%;}
    #people .txt-under {margin-bottom: 20px;}
    
    #business {margin-bottom: 100px;}
    #prize {padding-bottom: 150px;}

    }

 /* mobile */
 @media screen and (max-width: 768px){
    .ani-txt-mobile {font-size: 3.6rem;}
    #vision .ani-txt-mobile {top: 410px;}
    #people .ani-txt-mobile {bottom: -5px;}
    .vision-imgarea {height: 350px;}
    .people-imgarea {height: 300px;}
    .people-txtarea { padding: 50px 40px 80px ;}
    .people-txtarea h3 {font-size: 1.8rem;}

    #visual, .visual {padding: 200px 50px 0;}
    #employment, #partners, #mainbiz {height: 780px;}
    #visual .inner {display: block; padding: 60px 50px;}
    #employmentCnt, #partnersCnt {padding: 0 20px 80px;}
    .about-visual-contents {width: 100%;}
    .about-visual-contents::before {content: ''; width: 100%; height: 1px;display: block; background-color: #4C4C5A; margin:40px 0;}
    .about-visual-contents:first-child::before {display: none;}
    .title {text-align: left; margin-bottom: 150px;}

    #business {padding: 0 15% ; margin-bottom: 80px;}
    #business .inner{background: none;}
    #business .hide-pc {display: block;}
    #business .hide-mobile {display: none;}
    .business-list-inner {display: block;}
    .business-list {width: 100%; padding: 50px 15%;margin-bottom: 40px;}
    .business-list li {font-size: 1.8rem;}
    .business-list-sub li {font-size: 1.2rem;}
    .business-list svg {display: block; margin: 0 auto; margin-bottom: 15px;}
    span.business-list-title { color: white;}
    .business-list-title {font-size: 2.4rem; margin-bottom: 20px;}

    #employmentCnt .inner {padding: 30px;}
    .customer-box {width: 100%;}

    #mainbizCnt .inner {padding: 0 ; border-radius: 30px ;}

    .partners-warp img {max-width: calc(100% / 3 - 15px);}
}
 @media screen and (max-width: 576px) {
    .title{padding: 0; font-size: 2.6rem; margin-bottom: 100px;}
    #people {padding-bottom: 100px;}
    .vision-imgarea {height: 250px;}
    .people-imgarea {height: 250px;}
    .people-txtarea {top: -200px;}
    #visual, .visual {padding: 200px 40px 0; }
    #employment, #partners, #mainbiz {height: 680px;}
    #prize .ani-txt-mobile { font-size: 3rem;}

    #employmentCnt .inner {padding: 15px;}
    #partnersCnt .inner {padding: 30px;}

    #business {margin-bottom: 50px;}
    #prize {padding-bottom: 80px;}

    .mainbiz-content {padding: 40px 30px;}
    .customer-surmary .small {font-size: 12px;}
    .customer-list .small {font-size: 12px;}

    .partners-warp img {max-width: calc(100% / 2 - 15px);}
}