.intro {height: 100vh; background-image: url(../img/intro_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;}
.intro .wrap {max-width: 1570px; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.intro .intro_text {width: 70%;}
.intro .intro_text h1 {margin-bottom: 40px; width: 30%;}
.intro .intro_text h2 {font-size: 80px; color: #000; line-height: 1.2; margin-bottom: 60px; font-family: 'GmarketSansBold';}
.intro .intro_text h2 span {color: #154897;}
.intro .intro_text p {font-size: 2.5rem; color: #444444; margin-bottom: 50px; line-height: 1.5;}
.intro .over {position: relative; overflow: hidden;}
.intro .over span {position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background-size: 100% auto; background-repeat: no-repeat; background-position-x: 0; background-position-y: 100%; transition: .3s; transition-timing-function: linear;}
.intro .object {position: absolute; width: 42%; right:0; bottom: -10%;}
.intro .over.text1 {width: 60%;}
.intro .over.text1 span {background-image: url(../img/intro_text1Over.png);}
.intro .over.text2 {position: absolute; right: 0; top: 10%; width: 40%;}
.intro .over.text2 span {background-image: url(../img/intro_text2Over.png);}

@media screen and (max-width:1590px){
    .intro .intro_text h1 {margin-bottom: 5%;}
    .intro .intro_text h2 {font-size: 5vw; margin-bottom: 0.8em;}
    .intro .intro_text p {font-size: 1.6rem; margin-bottom: 3.125em;}
}
@media screen and (max-width:768px){
    .intro {height: 90vh;}
    .intro .intro_text {width: 100%;}
    .intro .over.text2 {width: 55%;}
    .intro .intro_text h1 {width: 50%;}
    .intro .intro_text h2 {font-size: 8vw; white-space: nowrap;}
    .intro .object {bottom: -5%; width: 50%;}
}

.con1 {height: 1300px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.con1 .text {position: relative; overflow: hidden; width: 200%;}
.con1 .text img {transform: translateX(0); transition: .3s; transition-timing-function: linear;}
.con1 .scroll_img {max-width: 1220px; margin: 100px auto 0; width: 90%;}
.con1 .scroll_img .bar {height: 60px; background-image: url(../img/cont1_bar.png); background-position: bottom center; background-size: 100% auto; border-radius: 20px 20px 0 0; background-repeat: no-repeat;}
.con1 .scroll_img .imgbox {border: 10px solid #154897; overflow-x: hidden; width: 100%; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; position: relative; pointer-events: none;}
.con1 .scroll_img .imgbox .img {position: absolute; left: 0; top: 0;}
.con1 .scroll_img .imgbox::-webkit-scrollbar {display: none;}
.con1 .scroll_img .imgbox::after {content: ''; display: block; padding-bottom: 56.25%;}

@media screen and (max-width:1550px){
    .con1 {padding: 15% 0; height: auto;}
    .con1 .scroll_img {margin: 5% auto 0;}
    .con1 .scroll_img .bar {height: auto; padding-top: 5%;}
}

@media screen and (max-width:768px) {
    .con1 {padding: 25% 0 15%;}
}


.con2 {background: #f3f5f8; padding: 120px 0 180px; overflow: hidden;}
.con2 .box1{padding: 0 180px 0 150px; box-sizing: border-box; margin-bottom: 200px;}
.con2 .box1 .lt {position: relative;}
.con2 .box1 .lt .obj {position: absolute;  top: -10%; display: flex; align-items: flex-start; right: 85%; left: -5%; z-index: 5;}
.con2 .box1 .lt > img {width: 60%;}
.con2 .box1 .lt .rg{position: absolute; right: 0; top: 4vw; width: 40%;}
.con2 .box1 .lt .rg dt {font-size: 6rem; margin-bottom: 45px; font-family: 'GmarketSansBold';}
.con2 .box1 .lt .rg dd {font-size: 2.5rem; color: #444; line-height: 1.3;}

.con2 .box2 dl,
.con2 .box2 .img {max-width: 1280px; margin: 0 auto; width: 90%; position: relative;}
.con2 .box2 .obj {position: absolute;}
.con2 .box2 .obj.obj1 {left: 94%; top: -30%; right: -5%; z-index: 5;}
.con2 .box2 .obj.obj2 {top: 5%; left: -8%; right: 90%;}
.con2 .box2 dl {margin-bottom: 38px;}
.con2 .box2 dl dt {font-size: 6rem; margin-bottom: 30px; font-family: 'GmarketSansBold';}
.con2 .box2 dl dd {font-size: 2.5rem; color: #444; line-height: 1.3;}

@media screen and (max-width:1700px){
    .con2 .box1 {padding: 0 10vw 0 10vw;}
    .con2 .box1 .lt .rg dt {font-size: 3.5vw; margin-bottom: 0.5em; white-space: nowrap;}
    .con2 .box1 .lt .rg dd {font-size: 2rem;}
    .con2 .box2 dl dt {font-size: 3.5vw; margin-bottom: 0.5em; white-space: nowrap;}
    .con2 .box2 dl dd {font-size: 2rem;}
}

@media screen and (max-width:1000px){
    .con2 .box1 {padding: 0; width: 90%; margin: 0 auto 200px;}
}


@media screen and (max-width:768px) {
    .con2 {padding: 15% 0;}
    .con2 .box1 {padding: 0; margin: 0 auto; margin-bottom: 15%; width: 90%;}
    .con2 .box1 .lt .obj {top: -5%; width: 40%; right: auto; display: flex;}
    .con2 .box1 .lt .obj img {width: 40%;}
    .con2 .box1 .lt .obj img:first-child {width: 60%;}
    .con2 .box1 .lt > img {width: auto;}
    .con2 .box1 .lt .rg {position: static; width: auto; text-align: center; margin-top: 10%;}
    .con2 .box1 .lt .rg dt {font-size: 7vw;}
    .con2 .box1 .lt .rg dd {width: 85%; margin: 0 auto;}
    .con2 .box2 {display: flex; flex-direction: column-reverse;}
    .con2 .box2 dl {margin-top: 10%;}
    .con2 .box2 dl dt {font-size: 7vw;}
    .con2 .box2 dl dd {width: 85%; margin: 0 auto; text-align: center;}
    .con2 .box2 .obj.obj1 {right: 0; top: -10%; left: 85%;}
    .con2 .box2 .obj.obj2 {top: auto; bottom: 13%; left: 0; right: 85%;}
}

.con3 {background: #ffe48e; box-sizing: border-box; padding: 0 145px 0 70px; height: 1080px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;}
.con3 .textline {position: absolute; top: 13%; font-size: 6vw; font-family: 'GmarketSansBold'; display: flex; left: 50%; transform: translateX(-50%);}
.con3 .textline span {transition: 2s; transition-property: transform;}

.con3 .textline span:nth-of-type(1) {transform: translate3D(0,100%,0) rotate(-45deg);}
.con3 .textline span:nth-of-type(2) {transform: translate3D(-20%,45%,0) rotate(-30deg)}
.con3 .textline span:nth-of-type(3) {transform: translate3D(-35%,0,0) rotate(-10deg)}
.con3 .textline span:nth-of-type(4) {transform: translate3D(-45%,-35%,0) rotate(-15deg);}

.con3 .textline span:nth-of-type(5) {transform: translate3D(0,-70%,0) rotate(-15deg);}
.con3 .textline span:nth-of-type(6) {transform: translate3D(0,-90%,0) rotate(-10deg);}
.con3 .textline span:nth-of-type(7) {transform: translate3D(0,-100%,0) rotate(-5deg);}
.con3 .textline span:nth-of-type(8) {transform: translate3D(0,-108%,0) rotate(-4deg);}
.con3 .textline span:nth-of-type(9) {transform: translate3D(0,-113%,0) rotate(-3deg);}
.con3 .textline span:nth-of-type(10) {transform: translate3D(0,-118%,0) rotate(-2deg);}
.con3 .textline span:nth-of-type(11) {transform: translate3D(0,-122%,0) rotate(-1deg);}
.con3 .textline span:nth-of-type(12) {transform: translate3D(0,-127%,0) rotate(0deg);}

.con3 .textline span:nth-of-type(13) {transform: translate3D(25%, -125%,0) rotate(8deg);}
.con3 .textline span:nth-of-type(14) {transform: translate3D(25%,-120%,0) rotate(8deg);}
.con3 .textline span:nth-of-type(15) {transform: translate3D(25%,-105%,0) rotate(12deg);}
.con3 .textline span:nth-of-type(16) {transform: translate3D(20%,-80%,0) rotate(20deg);}

.con3 .textline span:nth-of-type(17) {transform: translate3D(25%,-50%,0) rotate(30deg);}
.con3 .textline span:nth-of-type(18) {transform: translate3D(25%,-15%,0) rotate(27deg);}
.con3 .textline span:nth-of-type(19) {transform: translate3D(25%,25%,0) rotate(30deg);}
.con3 .textline span:nth-of-type(20) {transform: translate3D(19%,70%,0) rotate(35deg);}
.con3 .textline span:nth-of-type(21) {transform: translate3D(-7%,108%,0) rotate(40deg);}
.con3 .textline span:nth-of-type(22) {transform: translate3D(-27%,162%,0) rotate(42deg);}
.con3 .textline span:nth-of-type(23) {transform: translate3D(-50%,223%,0) rotate(45deg);}

.con3.texton .textline span:nth-of-type(1) {transform: translate3D(0,-100%,0) rotate(45deg);}
.con3.texton .textline span:nth-of-type(2) {transform: translate3D(-20%,-45%,0) rotate(30deg)}
.con3.texton .textline span:nth-of-type(3) {transform: translate3D(-35%,0,0) rotate(10deg)}
.con3.texton .textline span:nth-of-type(4) {transform: translate3D(-45%,35%,0) rotate(15deg);}

.con3.texton .textline span:nth-of-type(5) {transform: translate3D(0,70%,0) rotate(15deg);}
.con3.texton .textline span:nth-of-type(6) {transform: translate3D(0,90%,0) rotate(10deg);}
.con3.texton .textline span:nth-of-type(7) {transform: translate3D(0,100%,0) rotate(5deg);}
.con3.texton .textline span:nth-of-type(8) {transform: translate3D(0,108%,0) rotate(4deg);}
.con3.texton .textline span:nth-of-type(9) {transform: translate3D(0,113%,0) rotate(3deg);}
.con3.texton .textline span:nth-of-type(10) {transform: translate3D(0,118%,0) rotate(2deg);}
.con3.texton .textline span:nth-of-type(11) {transform: translate3D(0,122%,0) rotate(1deg);}
.con3.texton .textline span:nth-of-type(12) {transform: translate3D(0,127%,0) rotate(0deg);}

.con3.texton .textline span:nth-of-type(13) {transform: translate3D(25%,125%,0) rotate(-8deg);}
.con3.texton .textline span:nth-of-type(14) {transform: translate3D(25%,120%,0) rotate(-8deg);}
.con3.texton .textline span:nth-of-type(15) {transform: translate3D(25%,105%,0) rotate(-12deg);}
.con3.texton .textline span:nth-of-type(16) {transform: translate3D(20%,80%,0) rotate(-20deg);}

.con3.texton .textline span:nth-of-type(17) {transform: translate3D(25%,50%,0) rotate(-30deg);}
.con3.texton .textline span:nth-of-type(18) {transform: translate3D(25%,15%,0) rotate(-27deg);}
.con3.texton .textline span:nth-of-type(19) {transform: translate3D(25%,-25%,0) rotate(-30deg);}
.con3.texton .textline span:nth-of-type(20) {transform: translate3D(19%,-70%,0) rotate(-35deg);}
.con3.texton .textline span:nth-of-type(21) {transform: translate3D(-7%,-108%,0) rotate(-40deg);}
.con3.texton .textline span:nth-of-type(22) {transform: translate3D(-27%,-162%,0) rotate(-42deg);}
.con3.texton .textline span:nth-of-type(23) {transform: translate3D(-50%,-223%,0) rotate(-45deg);}


.con3 .box1 {display: flex; align-items:center; position: relative; top: 10%; z-index: 5;}
.con3 .box1 .lf {width: 60%; position: relative;}
.con3 .box1 .lf .obj {position: absolute; right: 0; bottom: 10%; width: 30%;}
.con3 .box1 .rg {width: 40%; margin-left: 50px; margin-top: -5%;}
.con3 .box1 .rg h2 {font-size: 3rem; font-family: 'GmarketSansLight'; font-weight: normal; margin-bottom: 25px;}
.con3 .box1 .rg dl dt {font-size: 6rem; font-family: 'GmarketSansBold'; font-weight: normal; margin-bottom: 25px;}
.con3 .box1 .rg dl dd {font-size: 2.3rem; line-height: 1.5;}
.con3 .box1 .rg ul {display: flex; margin-top: 60px;}
.con3 .box1 .rg ul li {flex: 1; background: #154897; color: #fff; text-align: center; margin-right: 30px; position: relative; cursor: pointer; border-radius: 30px;}
.con3 .box1 .rg ul li::after {content: ''; display: block; padding-bottom: 100%;}
.con3 .box1 .rg ul li:last-child {margin-right: 0;}
.con3 .box1 .rg ul li i {position: absolute; left: 50%; transform: translateX(-50%); color: #000; top: -30%; display: none; background-image: url(../img/clk_arrow.png); width: 1.5vw; height: 1.5vw; background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.con3 .box1 .rg ul li.active i {display: block; animation: kkok 1s infinite alternate;}
.con3 .box1 .rg ul li .cont {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; font-size: 19px;}
.con3 .box1 .rg ul li .cont .img {max-width: 30px   ; width: 33%; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 10px;}
.con3 .box1 .rg ul li .cont .img::after {content: ''; display: block; padding-bottom: 100%;}
.con3 .box1 .rg ul li.active {background: #e63636;}


@keyframes kkok {
    0%{
        transform: translate3D(-50%,-10px,0);
    }
    100% {
        transform: translate3D(-50%,0,0);
    }
}

@media screen and (max-width:1400px){
    .con3 .textline {top: 10%;}
    .con3 {height: auto; padding: 25% 5vw 15%;}
    .con3 .box1 {position: static;}
    .con3 .box1 .rg dl dt {font-size: 5vw; margin-bottom: 0.5em;}
    .con3 .box1 .rg ul {margin-top: 15%;}
    .con3 .box1 .rg dl dd {font-size: 1.6rem;}
    .con3 .box1 .rg ul li {margin-right: 5%; border-radius: 10%;}
    .con3 .box1 .rg ul li .cont {font-size: 1.5vw;}
}

@media screen and (max-width:768px){
    .con3 .textline {top: 8%;}
    .con3 {height: auto; padding: 25% 0;}
    .con3 .box1 {display: block;}
    .con3 .box1 .lf {width: 90%; margin: 0 auto;}
    .con3 .box1 .rg {padding-top: 0; width: 90%; margin: 0 auto; text-align: center;display: flex; flex-direction: column;}
    .con3 .box1 .rg h2 {font-size: 5vw; margin-bottom: 0.5em; order: 2;}
    .con3 .box1 .rg dl {order: 3;}
    .con3 .box1 .rg dl dt{margin-bottom: 0.3em; font-size: 10vw;}
    .con3 .box1 .rg ul {margin-top: 0; order: 1; margin-bottom: 10%;}
    .con3 .box1 .rg dl dd{font-size: 2rem;}
    .con3 .box1 .rg ul li {margin-right: 3%; border-radius: 20%;}
    .con3 .box1 .rg ul li .cont{font-size: 3vw;}
    .con3 .box1 .rg ul li i {top: -40%; width: 5vw; height: 5vw;}
}

.con4 {height: 1300px;}
.con4 .wrap {height: 100%;}
.con4 .img {position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
.con4 dl {position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 15%; box-sizing: border-box;}
.con4 dl dt {font-size: 6rem; text-transform: uppercase; font-family: 'GmarketSansBold'; line-height: 1;}
.con4 dl dd {font-size: 2.5rem; margin-top: 40px; line-height: 1.3;}

@media screen and (max-width:1400px) {
    .con4 {height: auto; padding: 25% 0;}
    .con4 .img {position:static; transform: none;}
    .con4 dl {padding-bottom: 0;}
}

@media screen and (max-width:768px){
    .con4 {padding: 15% 0;}
    .con4 dl dt {font-size: 10vw;}
    .con4 dl dd {font-size: 2rem; margin-top: 20px;}
}


.con5 {background: #f3f5f8; height: 1700px; display: flex; flex-direction: column; justify-content: center; position: relative;}
.con5 .lir {position: absolute; animation: tongtong 1s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.con5 .lir:first-child {top: -5%; right: calc(400/1920 * 100%); left: calc(1300/1920 * 100%);}
.con5 .lir:nth-of-type(2) {right: calc(140/1920 * 100%); left: calc(1600/1920 * 100%); top: -5%; animation-delay: 1.5s;}
.con5 .lir:nth-of-type(3) {right: calc(200/1920 * 100%); left: calc(1530/1920 * 100%); top: 5%; animation-delay: 3s;}
.con5 .textbox {max-width: 1400px; margin: 0 auto; width: 90%;}
.con5 .textbox .imgtext.text1 {margin-bottom: 40px; width: 65%;}
.con5 .textbox .imgtext {width: 50%; position: relative;}
.con5 .textbox span {position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background-position-x: 0; background-position-y: 100%; background-repeat: no-repeat; background-size: 100% auto;}
.con5 .textbox .imgtext.text1 span {height: 100%;}

.con5 .textbox .p1 {margin-top: 80px; font-size: 2.5rem; line-height: 1.5; font-weight: 600;}
.con5 .textbox .p2 {margin-top: 30px; font-size: 2rem; color: #444; line-height: 1.5; width: 60%;}
.con5 .sliebox {position: relative;}
.con5 .bigbox {position: absolute; left: 50%; transform: translateX(-50%); max-width: 1400px; text-align: right; bottom: 0; width: 100%;}
.con5 .bigbox .img { border: 5px solid #154897; border-radius: 20px; overflow: hidden; display: inline-block; width: calc(40% - 70px);}
.con5 .smallbox {width: 60%; max-width: 1000px; margin-top: 130px;}
.con5 .smallbox li {border: 5px solid #154897; border-radius: 20px; overflow: hidden; cursor: pointer;}

@keyframes tongtong {
    40%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-30px);
    }
}


@media screen and (max-width:1400px){
    .con5 {height: auto; padding: 15% 0;}
    .con5 .bigbox .img {width: calc(40% - 5%);}
    .con5 .textbox .p1 {margin-top: 5%;}
    .con5 .textbox .p2 {margin-top: 3%;}
    .con5 .smallbox {margin-top: 20%;}
}
@media screen and (max-width:768px){
    .con5 .textbox .p2 {width: auto;}
    .con5 .textbox .imgtext:first-child{margin-bottom: 5%; width: 90%;}
    .con5 .textbox .imgtext{width: 70%;}
    .con5 .textbox .p1 {font-size: 2rem;}
    .con5 .textbox .p2 {font-size: 1.8rem;}
    .con5 .smallbox li {border: 2px solid #154897;}
    .con5 .bigbox .img {border: 2px solid #154897;}
}

.con6 {height: 40vw; background-image: url(../img/con6_prallex.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: auto 100%; display: flex; align-items: center; position: relative;}
.con6 .obj {position: absolute; transform: translateY(-20%); opacity: 0;}
.con6 .obj1 {left: calc(156/1920 * 100%); right: calc(1290/1920 * 100%); top: -20%;}
.con6 .obj2 {left: calc(1500/1920 * 100%); right: calc(214/1920 * 100%); top: -15%;}
.con6 .obj.on {animation: con6tongtong 2s forwards;}
.con6 .obj2.on {animation-duration: 1.5s;}
.con6 .txtbar {width: 100%; overflow: hidden;}
.con6 .txt1 {margin-bottom: 30px; padding-right: 20%; position: relative; right: -14%;}
.con6 .txt2 {text-align: right; padding-left: 20%; position: relative; left: -6%;}

@media screen and (max-width:768px) {
    .con6 {height: 30vh; background-size: cover; background-image: url(../img/con6_prallex_m.jpg); background-position: center;}
}


@keyframes con6tongtong {
    0%{
        transform: translateY(-20%);
        opacity: 0;
    }
    40%{
        transform: translateY(100%);
        opacity: 1;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
    
}


/*기본 폼*/
.pf_next {height: 560px; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #000;}
.pf_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}
.pf_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); background-repeat: no-repeat; background-position: center; background-size: cover;}
.pf_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.pf_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.pf_next .textbox dl dd {font-size: 60px; font-weight: bold; margin-top: 10px;}

@media screen and (max-width: 768px) {
    
    .pf_next {height: 250px;} 
    .pf_next .textbox {top: 50px;}
    .pf_next .textbox dl dd {font-size: 30px;}
    
}

.pf_link {padding: 60px 0 60px; text-align: center; background: #f3f4f6;}
.pf_link a {color: #333; font-size: 30px; font-weight: 600;}
.pf_link span {position: relative; top: -5px; margin-right: 20px;}
.pf_link img {vertical-align: middle;}

@media screen and (max-width: 768px) {
    
    .pf_link {padding: 30px 0 30px;}
    .pf_link a {font-size: 20px;}
    
}