@charset "UTF-8";
/******************************** setting **********************************/
body {
    font-size: 1em;
    font-family: 'Montserrat', 'Pretendard', sans-serif;
    letter-spacing: -0.02em;
    --theme  : #075AFA;
    --light1 : #E2E8EE;
    --light2 : #DFE5F5;
    --light3 : #5475CB;
    --dark1  : #254BAB;
    --dark2  : #214298;
    --emph   : #e91538;
    --mark   : #FFD600;
    --ellipsis : 1;
}
.inner { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
.ellipsis { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--ellipsis); -webkit-box-orient: vertical; word-break: keep-all; }
.mark { background: linear-gradient(to bottom, transparent 40%, var(--mark) 40%); padding-right: 0.2em; padding-left: 0.2em; }
.color { color: var(--theme); }
.container { display: flex; align-items: center; justify-content: center; min-height: 75vh; }
.container-title { text-align: center; font-size: 2em; font-weight: 700; margin-bottom: 1em; }

/******************************** content **********************************/
.header { padding: 3em 0; position: fixed; left: 0; top: 0; z-index: 999; color: #fff; width: 100%; transition: 0.4s; }
.header .inner { display: flex; align-items: center; justify-content: space-between; }
.header .logo { max-width: 140px; width: 15%; }
.header .logo img { width: 100%; }
.header .gnb { display: flex; gap: 3em; }
.header .gnb li { font-size: 1.25em; font-weight: 500; }
.header .gnb li:hover { color: var(--theme); }
.header .gnb li.active { color: var(--theme); border-bottom: 2px solid var(--theme); }
.header.fixed { padding: 1em 0; background-color: #fff; border-bottom: 1px solid #ddd; color: #000;}
.header.fixed .logo { filter: invert(1); }

.footer { background-color: #636B73; color: #cad2db; padding: 3em 0; text-align: center; }
.footer b { font-weight: 700; letter-spacing: 2px; font-size: 1.25em; margin-bottom:1em; display: block; }
.footer p { line-height: 1.3; margin-bottom: 1.5em; }
.footer p span { display: block; margin-top: 0.2em; }

.main { word-break: keep-all; }
.section { width: 100%; min-height: 50vw; display: flex; align-items: center; padding: 8em 0;}

.visual { color: #fff; }
.visual h2 { font-size: 5.625em; font-weight: 700; }
.visual .swiper { height: 100%; }
.visual .swiper-slide { height: 50vw; padding: 8em 0; display: flex; align-items: center; background: no-repeat center/cover; }
.visual .slide1 { background-image: url(../img/bg_visual_01.png); }
.visual .slide2 { background-image: url(../img/bg_visual_02.png); }
.visual .slide3 { background-image: url(../img/bg_visual_03.png); }

.company h2 { font-size: 5em; font-weight: 600; }
.company h2 + p { font-size: 1.75em; font-weight: 300; line-height: 1.5; margin-top: 1.5em; }
.company dl { display: flex; justify-content: space-between; align-items: flex-start; }
.company dt { font-size: 2.5em; font-weight: 600; height: 14em; }
.company dt span { display: block; position: sticky; top: 5em; left: 0; }
.company li { padding: 1.5em 0; border-bottom: 1px solid #ddd; }
.company li h5 { font-size: 1.375em; font-weight: 600; margin-bottom: 0.5em; }
.company li p { font-size: 1.25em; font-weight: 300; }
.company li:first-child { padding-top: 0; }

.service .small { display: flex; flex-wrap: wrap; text-align: center; color: #fff; justify-content: center; align-items: center; }
.service .small li { width: 31.333%; margin: 1%; height: 16em; background: no-repeat center/cover; border-radius: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.service .small li:nth-child(1) { background-image: url(../img/img_service_small_01.png); }
.service .small li:nth-child(2) { background-image: url(../img/img_service_small_02.png); }
.service .small li:nth-child(3) { background-image: url(../img/img_service_small_03.png); }
.service .small li:nth-child(4) { background-image: url(../img/img_service_small_04.png); }
.service .small li:nth-child(5) { background-image: url(../img/img_service_small_05.png); }
.service .small li p { font-size: 1.5em; font-weight: 700; }

.service-content { background-color: var(--light1); padding: 8em 0; }
.service-content dt { text-align: center; padding: 0 1.5em; background: #000 no-repeat center/cover; border-radius: 1em; color: #fff; height: 18em; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.service-content dt h5 { font-size: 1.5em; font-weight: 600; }
.service-content dt p { font-size: 1.875em; font-weight: 600; margin-top: 0.5em; }
.service-content dd li { display: flex; justify-content: space-between; }
.service-content dd h5 { font-size: 1.5em; font-weight: 600; padding: 1.75em 0; }
.service-content dd p { width: 70%; font-size: 1.25em; font-weight: 300; padding: 2em 0; border-bottom: 1px solid #ddd; line-height: 1.5; }
.service-content dl:nth-child(1) dt { background-image: url(../img/img_service_big_01.png); }
.service-content dl:nth-child(2) dt { background-image: url(../img/img_service_big_02.png); }
.service-content dl:nth-child(3) dt { background-image: url(../img/img_service_big_03.png); }
.service-content dl:nth-child(4) dt { background-image: url(../img/img_service_big_04.png); }
.service-content dl:nth-child(5) dt { background-image: url(../img/img_service_big_05.png); }
.service-content .inner { position: relative; padding: 0 4em; }
.service-content .slide-item { display: none; }
.service-content .slide-item.active { display: block; }
.service-content .slide-btn { font-size: 2em; position: absolute; top: 4em; color: #aaa; cursor: pointer; }
.service-content .slide-btn:hover { color: #111; }
.service-content .slide-prev { left: 0; }
.service-content .slide-next { right: 0; }
.service-content .show-up,
.service-content .show-down { opacity: 0; }
.service-content .show-up { transform: translateY(3rem); }
.service-content .show-down { transform: translateY(-3rem); }
.service-content .show-up.on,
.service-content .show-down.on { animation: fadeY 0.4s ease-out 0s 1 normal forwards; }

.people h2 { font-size: 3.75em; font-weight: 600; }
.people ul { margin-top: 5em; display: flex; gap: 2em; justify-content: center; }
.people li { max-width: 40%; position: relative; border-radius: 1em; overflow: hidden; cursor: pointer; }
.people li img { width: 100%; }
.people li .txt { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; padding: 1.5em; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 35%); font-weight: 600; }
.people li .txt h6 { font-size: 1.25em; margin-bottom: 0.5em; } 
.people li .txt h5 { font-size: 1.5em; } 

.people .popup { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.2); top: 0; left: 0; z-index: 9999; display: none; }
.people .popup-box { width: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 1100px; background-color: #fff; border-radius: 1.5em; overflow: hidden; display: none; box-shadow: 0.5em 0.5em 1.5em rgba(0,0,0,0.15); }
.people .popup-box.active { display: flex; }
.people .popup-close { position: absolute; top: 0; right: 0; font-size: 2em; margin: 1em; cursor: pointer; }
.people .popup-box .img { width: 40%; padding-top: 54%; background: no-repeat center/cover; }
.people .popup-box .txt { width: 60%; padding: 3em; align-self: center; }
.people .popup-box h6 { font-size: 1.25em; font-weight: 800; margin-bottom: 0.5em; }
.people .popup-box h5 { font-size: 2.5em; font-weight: 800; }
.people .popup-box p { font-size: 1.5em; font-weight: 300; margin-top: 1.25em; }
.people .popup-box dl { font-size: 1.25em; margin-top: 2em; }
.people .popup-box dt { font-weight: 600; margin-bottom: 0.5em; }
.people .popup-box dd { font-size: 0.9em; font-weight: 300; margin-bottom: 0.5em; color: #666; }
.people .popup-box dd::before { content:""; display: inline-block; width: 0.2em; height: 0.2em; background-color: #111; border-radius: 5em; margin-right: 0.3em; vertical-align: middle; margin-top: -0.2em; }

.inquiry { text-align: center; background: var(--light1);}
.inquiry h2 { font-size: 3.75em; font-weight: 600; }
.inquiry p { font-size: 1.5em; font-weight: 300; margin-top: 0.5em; }
.inquiry p a { font-size: 1.5em; font-weight: 700; margin-top: 0.5em; display: block; color: var(--theme); }
.inquiry form { max-width: 500px; margin: 4em auto 0; }
.inquiry .frm-wrap { display: flex; flex-wrap: wrap; gap: 2%; text-align: left; }
.inquiry .frm-wrap h4 { font-size: 1.5em; font-weight: 700; width: 100%; margin-bottom: 0.5em; }
.inquiry .frm-wrap input { width: 49%; margin-bottom: 2%; border: 0; height: 2.8em; }
.inquiry .frm-wrap input.full { width: 100%; }
.inquiry .frm-wrap textarea { height: 5em; border: 0; margin-bottom: 2%; }
.inquiry .frm-wrap button { background-color: #000; color: #fff; width: 100%; font-size: 1.125em; border: 0; height: 2.8em; }


.floating { position: fixed; right: 3%; bottom: 5%; display: flex; flex-direction: column; z-index: 999; }
.floating a { -webkit-border-radius: 20em;-moz-border-radius: 20em;border-radius: 20em; box-shadow: 0.3em 0.3em 1.5em rgba(0,0,0,0.2); margin-bottom: 1em; }

/******************************** effect **********************************/
/* fade */
.fade-up,
.fade-down,
.fade-right,
.fade-left { opacity: 0; }
.fade-up { transform: translateY(3rem); }
.fade-down { transform: translateY(-3rem); }
.fade-right { transform: translateX(-3rem); }
.fade-left { transform: translateX(3rem); }
.fade-up.on,
.fade-down.on { animation: fadeY 0.4s ease-out 0s 1 normal forwards; }
.fade-right.on,
.fade-left.on { animation: fadeX 0.4s ease-out 0s 1 normal forwards; }
@keyframes fadeY {
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes fadeX {
    100% { transform: translateX(0); opacity: 1; }
}

/* typing */
.js-typing { --theme: #000; height: 1.4em; }
.js-typing .typing-list { display: none; }
.js-typing .typing-txt::after { content:""; width: 0.07em; height: 1em; background-color: var(--theme); display: inline-block; vertical-align: middle; margin-top: -0.1em; margin-left: 0.1em; animation: typing-cursor 1.5s linear 0s infinite normal forwards; }
@keyframes typing-cursor {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/******************************** responsive **********************************/
@media screen and (max-width: 1280px){
    .inner { width: 94%; }
    .header,
    .footer,
    .main { font-size: 1.25vw; }
}
@media screen and (max-width: 1024px){
    .header,
    .footer,
    .main { font-size: 1.375vw; }

    #company,
    .visual .swiper-slide { height: 85vh; }
}
@media screen and (max-width: 768px){
    .header,
    .footer,
    .main { font-size: 1.5vw; }

    .people .popup-box { width: 80%; flex-direction: column; }
    .people .popup-box .img,
    .people .popup-box .txt { width: 100%; }
    .people .popup-box .img { padding-top: 70%; background: no-repeat center 20%/cover; }
    .people .popup-box .txt { font-size: 1.25em; }
    .people .popup-close { top: 41.5vh; }
}
@media screen and (max-width: 586px){
    .header,
    .footer,
    .main { font-size: 2.5vw; }

    .company dt { height: 35em; font-size: 2em; }
    .company dd { width: 70%; font-size: 1.125em; line-height: 1.5; }
    .company dd br { display: none; }

    .service .small li { width: 48%; }
    .service-content .inner { padding: 0 3em; }
    .service-content dl br { display: none; }
    .service-content dd li { display: block; margin-top: 2em; }
    .service-content dd h5,
    .service-content dd p { padding: 0; width: 100%; }
    .service-content dd p { padding: 0.5em 0 2em; }

    .people h2,
    .inquiry h2 { font-size: 3em; }

    .people ul { flex-direction: column; }
    .people li { width: 80%; margin: auto; max-width:100%; }
    .people li .txt { font-size: 1.25em; }

    .people .popup-box { width: 90%; }
    .people .popup-box .txt { font-size: 1.125em; padding: 2.5em; }
    .people .popup-close { top: 34.5vh; }
    .inquiry .frm-wrap { font-size: 1.25em; }
    .inquiry .frm-wrap input { width: 100%; }
}
@media screen and (max-width: 324px){
    .company dl { display: block; }
    .company dt { height: auto; margin-bottom: 1em; }
    .company dd { width: 100%; }
}