/* Hanwha 
@font-face {
    font-family: 'HanwhaL';
    src: url('../font/HanwhaL.ttf') format('truetype');
}
  @font-face {
    font-family: 'HanwhaR';
    src: url('../font/HanwhaR.ttf') format('truetype');
}
  @font-face {
    font-family: 'HanwhaB';
    src: url('../font/HanwhaB.ttf') format('truetype');
}
@font-face {
    font-family: 'KopubL';
    src: url('../font/KoPubWorld Dotum Light.ttf') format('truetype');
}
  @font-face {
    font-family: 'KopubR';
    src: url('../font/KoPubWorld Dotum Medium.ttf') format('truetype');
}
  @font-face {
    font-family: 'KopubB';
    src: url('../font/KoPubWorld Dotum Bold.ttf') format('truetype');
}
*/
:root{
    --base-color:lightgray;
    --black:#101010;
    --white: rgb(240, 240, 240);
}
element.style {
    font-size: 2rem;
    margin: 5px 0;
    font-weight: bold;
    font-style: italic;
    color: #e87026;
}
*{
    user-select: none;
  /*  cursor: url("/img/ico_mouse_drag.svg") 0 0,auto;*/
    max-width: 100%;
}
*::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--base-color);
    background-clip: padding-box;
    border: 0px solid #ffffff70;    
}
.black{
    color:var(--black);
}
.white{
    color:var(--white);
}
h1{
    color: rgb(237,237,237);
    font-size: 4rem;
    margin: 0;
    font-weight: normal;
    z-index: 1;
}
h2{
    color: rgb(219, 219, 219);
    font-size: 4rem;
    margin: 0;
    font-weight: normal;
    z-index: 1;
}
h4 {
    font-size: 2.4rem;
}


.sb-1 {
    opacity: 0;
    animation: wallcome-signal 1s linear alternate forwards;
}
.sb-2 {
    opacity: 0;
    animation: wallcome-signal .3s 1s linear alternate forwards;
}
.sb-3 {
    opacity: 0;
    animation: wallcome-signal 1s 2s linear alternate forwards;
}
.sb-4 {
    opacity: 0;
    animation: wallcome-signal 1s 3s linear alternate forwards;
}
.sb-5 {
    opacity: 0;
    animation: wallcome-signal 1s 4s linear alternate forwards;
}




html,body{
    margin:0;
    font-family: "KopubR","NotoSans", sans-serif;
    /*font-size: 10px;*/
    /* scroll-snap-type: y mandatory; */
    scroll-behavior: smooth;
}
.main-container{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	font-family: "KopubR","NotoSans", sans-serif;
    
}
.banner-container{
    /* display: flex; */
    /* flex-direction: column; */
    width: 100%;
    /* height: calc(100vh - 70px); */
    height: 100vh;
    position: relative;
    /* padding-top: 60px; */
    font-family: 'HanwhaR';
    overflow: hidden;
}
.bottom-box{
    position: absolute;
    display: inline-flex;
    flex-direction: row;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: transparent;
}
.bottom-menu-item{
    flex: 1;
    height: 100%;
    border-right: 1px solid #adadad57;
    border-top: 1px solid #adadad57;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #ffffff17;
    font-size: 1.5rem;
    transition: all .35s;
}
.bottom-menu-item:hover{
    background: #00000094;
    /* flex: 1 1 400px; */
}
.bottom-menu-item > a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
}
.banner-box{
    flex: 1;
    height: 100%;
}
.banner-box.right{
    height:100%;
    position: sticky;
    top: 0;
    /* background: url("../img/CK_tc01330000570_l.jpg") no-repeat; */
    background: url("../img/mainbg-003-01.png") no-repeat;
    /* background: linear-gradient(360deg, #171717, #670505 50%,white 160%); */
    background-size: cover;
    background-position: right;
    background-attachment: fixed;
    animation: scale-down 40s ease-in alternate infinite;
}
@keyframes scale-down{
    from{
        background-size: 100% 100%;
    }
    to{ 
        background-size: 150% 100%;
    }
}
.ov-h{
    overflow: hidden;
}
.container-box{
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    box-sizing: border-box;
    padding:0;
    /* overflow-y: scroll; */
    
    scroll-snap-align: start;
    /* scroll-margin: 70px 0 0px 0; */
}
.container-box.h-sha{
    background: radial-gradient(#6b6b6b82, transparent);
}
.container-box.intro{
    /* max-width: 1400px; */
    /* background: rgba(0, 0, 0, .32); */
}
.container-box1{
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    /* max-height:100vh; */
    height:1200px;
    overflow: auto;
    scroll-snap-align: start;
    /* scroll-margin: 150px 0 0px 0; */
}
.over-scroll{
    /* height: 200vh;
    overflow: auto; */
}
.slider3-text{
    box-sizing: border-box;
    padding: 30px 50px;
    color: white;
    background:linear-gradient(90deg, #5b0303 80%, #ffffff);
    border-radius: 8px;
    box-shadow: 3px 3px 38px #00000075;
}
.deco-card-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background: linear-gradient(148deg, #f37321, #cbb18e); */
    background:linear-gradient(90deg, #395e9e, #ffffff);
    width: 380px;
    height: 100px;
    border-radius: 8px;
    margin: 30px;
    box-shadow: 3px 3px 38px #00000075;
    padding: 30px;
    box-sizing: border-box;
    color: #131313;
    /* border: 2px solid gray; */
}
.deco-card-box:nth-of-type(3n-1){
    background: linear-gradient(148deg, #2188f3, #ab8ecb);
}
.deco-ico{
    width: 300px;
    height: 300px;
    background: url("../img/ico_001.png") no-repeat;
    background-size: cover;
    background-position: right;
    position: absolute;
    right: 60px;
    bottom: 0;
}
.deco-ico-2{
    width: 300px;
    height: 300px;
    background: url("../img/ico_002.svg") no-repeat;
    background-size: cover;
    background-position: right;
    position: absolute;
    right: 60px;
    bottom: 0;
}
.item-box{
    display: inline-flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    /* padding: 20px 10px; */
}
.deco-sub-card-box{
    background: linear-gradient(45deg, #3c9595, #28e5e5);
    color: white;
    padding: 10px 30px;
    display: inline-flex;
    width: 350px;
    border-radius: 20px;
    margin: 30px 10px;
    align-self: normal;
    flex: 1 1 300px;
    flex-direction: column;
    box-shadow: 3px 3px 8px 1px #0000003d;
}
.deco-sub-card-box:nth-of-type(2n){
    background: linear-gradient(45deg, #71deff, #3c9595);
}
.deco-sub-card-box > h3{
    display: inline-flex;
    width: fit-content;
    position: relative;
    z-index: 1;
}
.deco-sub-card-box > h3::before {
    content: '';
    width: 100%;
    position: absolute;
    height: 10px;
    background: #2b6a978c;
    box-shadow: 1px 1px 7px #00000099;
    bottom: 0;
    border-radius: 3px;
    z-index: -1;
}

.deco-sub-card-box > p{
    max-width: 500px;
}
.bubble-deco {
    position: absolute;
    background: linear-gradient(45deg, #8b0fc91a, #0effff2e);
    left: 0;
    bottom: 330px;
    width: 770px;
    height: 160px;
    border-radius: 600px;
    transform: rotate(134deg);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
.bubble-deco.l-t{
    background: linear-gradient(45deg, #ffb7152b, #d9d9d982);
    bottom: 330px;
    width: 780px;
    left: -280px;
}
.bubble-deco.l-b{
    bottom: 0px;
    left: -280px;
}
.bubble-deco.r-t{
    background: linear-gradient(45deg, #ffb7152b, #d9d9d982);
    top: 330px;
    right: -450px;
    width: 1080px;
    left: unset;
}
.bubble-deco.r-b{
    top: 0px;
    left: unset;
    right:  -250px;
}
.test {
    /* flex: 1; */
    width: 100%;
    height: 100px;
    /* background: red; */
    border: 1px solid black;
}
.dragPosition{
    background: #06225626;
    width: 500px;
    height: 430px;
    margin:30px;
    padding:30px;
    border-radius: 20px;
    order: 1;
}
.intro-box{
    position: absolute;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.intro-box::before{
    content: '';
    display: inline-block;
    position: absolute;
    border-radius: 0 0 0 0;
    width: 100%;
    /* background:#ffffffcc; */
    background: url('/img/mainbg-003-01.png') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    left:0;
    height: 100%;
    z-index: 2;
    transition:  cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.35s ;
}
.intro-box::after{
    content: '';
    display: inline-block;
    position: absolute;
    border-radius: 0 0 0 0;
    width: 100%;
    background:#00000091;
    /* background: url("/img/CK_ti302a8109_n_l.jpg") no-repeat; */
    right: 0;
    height: 100%;
    z-index: 2;
    transition:  cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.35s;
}
.intro-box.active::before{
    width:0;
    /* border-radius: 100%; */
    opacity: 0;
    /* transform: rotate3d(1, 1, 1, 323deg); */
}
.intro-box.active::after{
    width:0;
    /* border-radius: 100%; */
    opacity: 0;
    /* transform: rotate3d(1, 1, 1, -323deg); */
}
.alkjaldn{
    width: 100%;
    max-width: 1400px;
    /* height: calc(100vh - 100px); */
    max-height: 800px;
}
.swiper-wrapper{
    height: 100vh;
}
.swiper-slide{
    border: unset;
    height: 100vh;
}
.slide-item{
    position: absolute;
    width: 130%;
    height: 100%;
    background: url("/img/content/processBuilder.png") repeat-x;
    -webkit-background-size:cover;
    background-size: contain;
    background-position: left center;
    /* background-size: cover; */
}
/* .swiper-backface-hidden .swiper-slide {
    height: 600px !important;
} */
.img-content-box{
    display: inline-flex;
    flex:1;
    filter: brightness(.8);
    transition: .5s ease-in-out;
    padding: 40px 0;
    left: 0;
    position: relative;
}
.img-content-box:hover{
    /* flex-basis: 5%; */
}
.img-content-box.robot{
    /* height: 300px; */
    background:url('/img/메인배너_001.png') no-repeat;
    background-size: cover;
    background-position: center;
}
.img-content-box.chip{
    background:url('/img/오른쪽배너.png') no-repeat;
    background-size: cover;
    background-position: center;
}
.img-content-box.erp{
    background:url('/img/인공지능.gif') no-repeat;
    background-size: cover;
    background-position: center;
}
.img-content-box.exit{
    background:url('/img/인공지능.gif') no-repeat;
    background-size: cover;
    background-position: center;
}
.img-content-box:hover{
    filter: brightness(1);
}
.img-content-box h2{
    color: white;
    font-size: 3.4rem;
    margin: 0;
}
.text-shadow-box{
    width: 100%;
    opacity: 0;
    min-height: 180px;
    background: #0000004a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    white-space: nowrap;
}
.col-label{
    background: #671313;
    color: white;
    padding: 2px 20px;
    font-size: 12px;
}
.mobile-col{
}
.snow-box{
    display: flex;
    flex-direction: row;
    position: absolute;
    height: 100%;
}
.snow{
    width: 10px;
    height: 10px;
    position: absolute;
    /* left:5px; */
    top: -55px;
    z-index: 1;
    background: rgb(255, 255, 255);
    border-radius: 100%;
    filter: blur(2px);
    /* animation-timing-function: ; */
    animation: snow 14s ease-in infinite;
}
.snow-box > div:nth-of-type(6n) > .snow{
    width: 20px;
    height: 20px;
    animation: snow 10s ease-in 4.5s infinite;
}
.snow-box > div:nth-of-type(4n) > .snow{
    width: 10px;
    height: 10px;
    animation: snow 20s ease-in 1.5s infinite;
}
.snow-box > div:nth-of-type(4n-1) > .snow{
    width: 15px;
    height: 15px;
    animation: snow 12s ease-in 1s infinite;
}
.snow-box > div:nth-of-type(4n-2) > .snow{
    width: 10px;
    height: 10px;
    animation: snow 19s ease-in .2s infinite;
}
.snow-box > div:nth-of-type(4n-3) > .snow{
    width: 10px;
    height: 10px;
    animation: snow 10s ease-in 2.5s infinite;
}
.snow-box > div:nth-of-type(6n-2) > .snow{
    width: 10px;
    height: 10px;
    animation: snow 13s ease-in 3.5s infinite;
}

.snow-box > div:nth-of-type(7n) > .snow{
    width: 15px;
    height: 15px;
    animation: snow 8s ease-in 5.5s infinite;
}
.foc-title{
    font-size: 3.3rem;
    color: #d88245;
    background: linear-gradient(173deg, #585cc5,#b562f3, #e7728d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* animation: shasha-2 8s ease-in  alternate infinite; */
}
.show-tx:nth-of-type(1){
    opacity: 0;
    animation: shasha-2 .85s cubic-bezier(0.39, 0.575, 0.565, 1) 0s alternate forwards;
}
.show-tx:nth-of-type(2){
    opacity: 0;
    animation: shasha-2 .85s cubic-bezier(0.39, 0.575, 0.565, 1) .2s alternate forwards;
}
/* .h-sha > :nth-of-type(3){
    animation: shasha-2 2s ease-in 1s alternate forwards;
} */
@keyframes shasha-2 {
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(00px);
    }
}
.introPop{
    width: 250px;
    height: auto;
    padding: 10px 20px;
    background: #ffffff;
    position: fixed;
    bottom: 20px;
    right: 100px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    font-family: "KopubL";
    z-index: 9999;
    border-radius: 0 30px 0px 0;
    box-shadow: 0 4px 9px #121212cf;
    transition: cubic-bezier(0.19, 1, 0.22, 1) .45s;
}
.introPop.scroll{
    right: -300px;
}
@keyframes snow{
    0%{
        top: -10%;
        filter: blur(1px);
        transform: translateX(0px);
    }
    20%{
        /* top: 30%; */
        transform: translateX(20px);
        filter: blur(3px);
    }
    40%{
        /* top: 50%; */
        transform: translateX(0px);
        filter: blur(3px);
    }
    60%{
        /* top: 80%; */
        transform: translateX(30px);
        filter: blur(13px);
    }
    80%{
        /* top: 100%; */
        transform: translateX(-10px);
        filter: blur(3px);
    }
    100%{
        top:100%;
        filter: blur(10px);
        transform: translateX(10px);
    }
}
.circle-deco{
    position: absolute;
    width:500px;
    height:500px;
    border: 2px solid rgba(255, 166, 0, 0.342);
    border-radius: 100%;
    animation: circle-deco 20s linear alternate infinite;
    z-index: 0;
}
.circle-deco::after{
    content: '';
    position: absolute;
    width:500px;
    height:500px;
    left: -10px;
    border: 2px solid rgba(255, 166, 0, 0.356);
    border-radius: 100%;
    animation: circle-deco 20.1s linear alternate infinite;
}
.circle-deco::before{
    content: '';
    position: absolute;
    width:500px;
    height:500px;
    left: 0px;
    border: 2px solid rgba(255, 166, 0, 0.212);
    border-radius: 100%;
    animation: circle-deco 20.2s linear alternate infinite;
    transform: translateX(-50px) translateY(0);
}
@keyframes circle-deco{
    0%{
        transform: translateX(-50px) translateY(0) rotate(0deg);   
    }
    20%{
        transform: translateX(50px) translateY(20px) rotate(360deg);   
    }
    50%{transform: translateX(0px) translateY(-20px) rotate(0deg)scale(1);filter: opacity(1);}
    51%{transform :translateX(0px) translateY(-20px) rotate(0deg) scale(1.2);filter: opacity(.51);}
    52%{transform :translateX(0px) translateY(-20px) rotate(0deg) scale(1);filter: opacity(1)}
    100%{
        transform: translateX(0px) translateY(0px) rotate(360deg);
    }
}
.stik-box{
    position: sticky;
    top: 80px;
}
.normal-box{
    box-sizing: border-box;
    padding:10px;
    font-size: 2rem;
    min-height: 40vh;
}
.c-img-box{
    /* width: 300px;
    height: 300px; */
    /* background: #eeedec; */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    
}
.f-1{
    flex: 1;
    height: 100%;
}
.f-2{
    flex: .2;
    height: 100%;
}
.f-3{
    flex: .3;
    height: 100%;
}
.f-4{
    flex: .4;
    height: 100%;
}
.f-5{
    flex: .5;
    height: 100%;
}
.f-6{
    flex: .6;
    height: 100%;
}
.f-7{
    flex: .7;
    height: 100%;
}
.f-8{
    flex: .8;
    height: 100%;
}
.f-9{
    flex: .9;
    height: 100%;
}
.f-10{
    flex: 1;
    height: 100%;
}
.img-side-content-box{
    flex:.8;
}
.description-line{
    display: inline-flex;
    height: 50px;
    background: #0d2947;
}
.circle-container-box {
    position: relative;
    box-shadow: 0 -20px 88px gainsboro inset;
    border-radius: 40px 40px 40px 40px;
    /* background: linear-gradient(45deg, #431717 50%, transparent); */
    background: url("/img/content/processBuilder.png") repeat-x;
    -webkit-background-size:cover;
    background-size: cover;
    background-position: left center;
    min-height: 400px;
    width: 700px;
    max-width: 100%;
    color: var(--black);
    font-style: italic;
    font-size: 30px;
    z-index: 2;
    /* animation: boomboom 8s cubic-bezier(1,-0.03, 1,-0.04) alternate infinite; */
}
.circle-container-box::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(159, 159, 159, .52), transparent);
    transform: perspective(30em) rotateX(77deg);
    filter: blur(20px);
    top: 70%;
}
.circle-title{
    color: #636363;
    animation: roteteText 3s cubic-bezier(1,-0.03, 1,-0.04) alternate infinite;
}
.circle-fire {
    background: linear-gradient(360deg, #FFFFFF 50%, #1b192a 10%,#0b4097 200%);
    border-radius: 80px 80px 0 0;
    box-shadow: 0 -30px 10px #00000059;
    padding: 0px 0 0 0;
}
.문의내용인풋{
    height: 250px;
}
p.base-title3 {
    font-size: 4rem;
    margin: 0 0 20px 0;
    /* font-weight: bold; */
    color: #086ea1;
    font-family: fangsong;
}
.t-center {
    text-align: center;
}
@keyframes roteteText{
    0%{
        transform: translate3d(10px, -30px, 10px) rotateX(0deg);
        text-shadow: 0px 20px 6px #6c6c6c;
    }
    90%{
        text-shadow: 0px 0px 0px #6c6c6c;
    }
    100%{
        transform: translate3d(10px, -30px, 10px) rotateX(365deg);
        text-shadow: 0px 20px 30px #6c6c6c;
    }
}
@keyframes boomboom{
    from{
        transform: scale(1);
        filter:blur(0px);
    }
    to{
        transform: scale(1.2);
        filter: blur(30px);
    }
}

.h-150vh{
    height: 150vh;
}
.h-200vh{
    height: 200vh;
}
.h-1000vh{
    height: 1000vh;
}
.sticky{
    position: sticky;
    top: 0;
}
.navi-bar{
    width: 100%;
    position: absolute;
    height: 3px;
    /* background: #811e1e; */
    z-index: 1;
}
.swiper-content-box{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 40px;
    /* box-shadow: 0 10px 20px #dedede; */
    height: 100%;
}
.pointer-box{
    padding: 10px 20px;
    background: #ff8800;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    font-family: 'HanwhaR';
    box-shadow: 0 0 58px #ff32009e;
}
.persona1{
    background: url("/img/content/persona_1.png") no-repeat;
    background-size: contain;
    background-position: center;
    height: 320px;
    margin: 30px;
}
.resp-test-box{
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
}

.big-title {
    font-family: 'HanwhaR';
    color: #464646;
    padding: 0px 0 20px 0;
    font-size: 4rem;
}
.resp-box {
    position: relative;
    height: 220px;
    background: white;
    margin: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 10px gainsboro;
    min-width: 600px !important;
    max-width: 100%;
    cursor: pointer;
    border-radius: 10px;
    transition: all .45s;
}
.resp-box:hover{
    transform: translateY(-5px);
    padding-bottom: 40px;
}
/* .resp-box:hover::after{
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: -50px;
    background: url("/img/click.gif") no-repeat;
    background-size: contain;
    background-position: center;
    animation: shasha 5s ease-in-out infinite alternate;
} */
@keyframes shasha{
    0%{
        filter: hue-rotate(0deg) invert(.1);
    }
    100%{
        filter: hue-rotate(680deg) invert(.2);
    }
}
.resp-box:first-of-type > .resp-img{
    background-image: url('/img/content/기억.svg');
}
.resp-img {
    height: 100%;
    width: 220px;
    min-width: 220px;
    background: url('/img/ico_002.svg') no-repeat;
    background-position: center;
    background-size: 150px 150px;
}
.resp-title{
    color: orange;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0;
}
.rej999{
    color: #ff6c00 !important;
}
.resp-text{
    color:#707070;
    font-size: 1.5rem;
}
.line-bg{
    background: linear-gradient(162deg, #f6f6f6 50%, #ffffff00 50%);
}

/* 서브페이지 */
.s-banner-container{
    position: relative;
    width: 100%;
    height: 500px;
    background: url("../img/mainbg-002.png") no-repeat;
    /* background: url("../img/mainbg-003-02.jpg") no-repeat; */
    background-size: cover;
    background-position: center;
    font-family: 'HanwhaR';
    animation: scale-down 30s ease-in alternate infinite;
}
.s-banner-content-box{

}
.s-banner-content-box >li {
    color: #c6c6c6;
    align-self: flex-start;
    margin-bottom: 10px;
    font-size: 1.7rem;
}
.s-banner-content-box >li:first-of-type{
    margin-top: 60px;
}
.body-content-box{
    max-width: var(--max-width);
    padding: 30px 10px;
    box-sizing: border-box;
    /* font-family: 'HanwhaL'; */
}
.body-content-f-box{
    box-sizing: border-box;
}
.c-img-box{
    /* width: 300px;
    height: 300px; */
    /* background: #eeedec; */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    max-height: 400px;
}
.f-1{
    flex: 1;
    height: 100%;
}
.c-img-box > img{
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    /* border-radius: 20px; */
}
.c-text-box{
    flex: 1;
    padding: 15px 25px;
    font-size: 2rem;
}
.c-text-box > span {
    font-size: 2rem;
    line-height: 3rem;
    color: #8f8f8f;
    text-align: center;
    display: block;
    text-align: center;
}
.base-title{
    font-family: 'HanwhaR';
    font-size: 2.4rem;
    margin: 5px 0;
    font-weight: bold;
    font-style: italic;
    color: #e87026;
    text-align: center;
    /* text-shadow: 3px 3px 3px #c4c0be;  */
}
.base-title2{
    position: relative;
    font-size: 2.6rem;
    font-weight: bold;
    color: rgb(46, 46, 46);
    margin:5px 0;
    z-index: 1;
}
.base-title2::after{
    content: '';
    position: absolute;
    left: 15px;
    bottom: 5px;
    width: 80%;
    height: 11px;
    background: linear-gradient(122deg, #dbe8ae, transparent);
    z-index: -1;
    border-radius: 0 10px 10px 0;
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) .35s;
}
.base-title2 ~ li{
    font-size: 1.5rem;
    margin:10px 0;
}
#map{
    height: 400px;
    background: rgb(243, 243, 243);
}
.ceo-text{
    width: 100%;
    font-size: 2.1rem;
    line-height: 6rem;
    padding: 50px 100px;
    box-sizing: border-box;
    font-family: "KopubR";
}
.ceo-name {
    color: #313131;
    font-family: "KopubR";
    font-size: 3rem;
}
.deco-line::before {
    content: "";
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
    background: var(--base-color);
}
.deco-title{
    font-size: 7rem;
    font-family: auto;
    margin-bottom: 0px;
    text-align: left;
}
.deco-line {
    width: 100%;
    height: 4px;
    background: #f4f4f4;
    position: relative;
    margin: 30px 0 0 0;
}
.body-content {
    margin: 50px 0;
}
.main-cus .card-shadow-dc{
    z-index: 0;
    background: transparent;
    border-radius: 20px;
    
    /* position: absolute; */
    /* bottom: 170px; */
    position: relative;
    /* box-shadow: 0 0 8px #4a1111; */
    transform: scale(0.8);
}
.main-cus .c-img-box img{
    object-fit: cover;
    filter: hue-rotate(45deg);
    border-radius: 20px;
    height: 300px;
}
/* .f-col.card-shadow-dc.m-sb:nth-of-type(1),
.f-col.card-shadow-dc.m-sb:nth-of-type(3) {
    bottom: 300px;
    background: #ffffffd1;
} */
.main-cus .c-img-box {
    /* height: 200px; */
}
.card-shadow-dc{
    width: 100%;
    /* max-width: 1000px; */
    border-radius: 25px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    background: white;
    /* box-shadow: 0 00px 30px #f2f2f2; */
}
.cross-bg{
    position: sticky;
    top: 0;
    background: white;
    border-radius: 50px;
    box-shadow: 0 0 10px black;
} 

.full-ct{
    height: 100vh;
    min-height: 100vh;
}
.m-sb{
    margin-right: 10px;
    margin-left: 10px;
}
.m-t{
    margin-top: 40px;
}
.cross-bg:nth-of-type(2n){
    background: #071153;
    
}
.cross-bg:nth-of-type(3){
    top: 10px;
}
.cross-bg:nth-of-type(4){
    top: 20px;
}
.cross-bg:nth-of-type(5){
    top: 30px;
}
.cross-bg:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.cross-bg >div > h1 {
    font-family: 'HanwhaR';
    margin-bottom: 6rem;
}
.cross-bg:nth-of-type(2n-1) >div > h1{
    color: #515f91;
}
.cross-bg >div > h2{
    font-size: 2rem;
    line-height: 70px;
}
.cross-bg:nth-of-type(2n-1) >div > h2 {
    color: #5b5b5b;
}

.qus-btn {
    color: whitesmoke !important;
    border: 1px solid whitesmoke;
    padding: 15px 50px;
    font-size: 1.4rem;
    position: relative;
    cursor: pointer;
    transition: all .35s;
    align-self: flex-end;
    margin-bottom: 140px;
    margin-left: 20px;
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) .35s;
}
.qus-btn::after {
    content: '→';
    margin-left: 5px;
    font-weight: bold;
}
.send-container{
    /* border: 1px solid gainsboro; */
    padding: 50px 20px 50px 50px;
    width: 900px;
    max-width: 100%;
    box-shadow: 0 0 30px gainsboro;
    border-radius: 30px;
    box-sizing: border-box;
}
.send-container >div{
    margin-bottom: 15px;
}
.send-container >div>label:not(.send-btn) {
    font-size: 1.4rem;
    font-family: 'HanwhaR';
    color: #484848;
}
.send-btn{
    font-size: 1.4rem;
    color: #86a3ff;
    border: 1px solid #86a3ff;
    padding: 20px 50px;
    cursor: pointer;
}
.send-container >div>input,
.문의내용인풋{
    width:80%;
    padding: 15px;
    border: 1px solid gainsboro;
    border-radius: 4px;
    margin-left: 50px;
}
.send-footer{
    width: 100%;
    height: 150px;
}
.non-padding{
    padding: 0 10px !important;
    height: 740px;
    min-height: unset;
}

.non-height{
    min-height: unset !important;
    height: auto !important;
}

.snow_btn {
    background: white;
    opacity: 1;
    border: unset;
    border-radius: 20px;
    box-shadow: 0px 5px 10px #2e2e2e;
    width: 30px;
    height: 50px;
    /* cursor: pointer; */
    transition: all .35s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.snow_btn::after {
    content: '';
    color: white;
    width: 7px;
    height: 15px;
    position: absolute;
    background: #000000;
    left: 12px;
    top: 10%;
    bottom: 30%;
    border-radius: 13px;
    box-shadow: 0 0 3px black;
}
.snow_sub {
    position: absolute;
    bottom: -40px;
    color: white;
}
.snow_sub::before {
    content: '.';
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    transform: translateY(0px) scale(1);
    font-size: larger;
    animation: upDown 1.5s ease alternate infinite;
    transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) .45s;
}
@keyframes upDown {
    from{    transform: translateY(-10px) scale(1);}
    to{    transform: translateY(5px) scale(1.5);}
}
/* .snow_btn.boom{
    
    animation: snow-boom 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
} */

/* .snow_btn + label{
    color: white;
    font-size: 2rem;
    position: absolute;
    bottom: 140px;
} */
/* .snow_btn.boom + label{
    display: none;
} */
.pupple-bg {
    background: linear-gradient(0deg, white 10%, #e8f3ff 70%);
}
.wait-box{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0 , .95);
    z-index: 50;
}
.wait-box::after{
    content: '준비중입니다..';
    font-size: 4rem;
    color: #d2d2d2;
    font-weight: bold;
    text-shadow: 0 0 50px white;
}
.call-information-btn {
    background: #3d446e;
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.ef-text {
    /* font-weight: bold; */
    /* font-size: 1.5rem; */
    font-style: initial;
}

.inq-box {
    display: flex;
    width: 100%;
    padding: 10px 0;
}
.inq-box > label:nth-of-type(1) {
    min-width: 180px;
}
@keyframes snow-boom{
    0%{
        transform: scale(0) translateY(0vh);
        opacity: 50;
    }
    40%{
        transform: scale(3) translateY(10vh);;
        opacity: 30;
    }
    100%{ 
        transform: scale(100) translateY(-100vh);
        opacity: 0;
        pointer-events: none;
    }
}

/* 서브페이지 */
@media (max-width: 1200px)  {
    html{
        font-size: 9px;
    }
    h1{
        text-align: center;
        font-size: 3.5rem;
    }
    .mobile-col{
        flex-direction: column !important;
        box-sizing: border-box;
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .container-box:not(.container-box.sticky){
        padding: 150px 20px 0 20px;
        flex-direction: column;
    }
    .circle-fire{
        animation: ease;
        background: linear-gradient(360deg, #FFFFFF 25%, #1b192a 10%,#0b4097 230%);
    }
    .resp-box{
        min-width: unset !important;
        flex-direction: column !important;
        align-items: center !important;
        height: fit-content !important;
    }
    .circle-fire{
        padding: 0 20px;
        border-radius: 20px 20px 0 0;
    }
    .main-cus .card-shadow-dc{
        padding: 0;
        margin: 20px 0;
        transform: scale(1);
        z-index: 1;
    }
    .banner-box.right,
    .intro-box::before{
        background-position: center !important;
    }
    .s-banner-container{
        flex-direction: column !important;
        align-items: center !important;
        padding: 80px 15px;
        box-sizing: border-box;
        height: auto;
    }
    .qus-btn{
        align-self: center;
        margin: 0;
    }
    .body-content-box{
        padding: 30px 25px;
    }
    .ceo-text{
        padding: 50px 0;
    }
    .c-img-box{
        width: 100%;
    }
    .cross-bg >div > h2 {
        font-size: 1.6rem;
        line-height: 50px;
    }
    .s-banner-content-box{
        padding:0 15px;
    }
    .scroll-x-show::-webkit-scrollbar{
        height: 5px !important;
    }
    .card-shadow-dc{
        padding: 0;
    }
    .mob-text{
        display: block;
        text-align: center;
    }
}

@media (max-width: 520px)  {
    *::-webkit-scrollbar {
        width: 0px;
        height: 10px;
    }
}

@keyframes wallcome-signal{
    0%{
        opacity: 0;
    }
    100%{ 
        
        opacity: 1;
    }
}