@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * common *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
@media all and (max-width:1024px){
.inner{width:93.75%; padding:0;}
}
/*--- section ---*/
.section {padding: 200px 0; box-sizing: border-box;}
.section.pb-0 {padding-bottom: 0;}
.section.bgc {background-color: #f9f9f9;}

/*--- heading ---*/
.heading .desc {margin-top: 40px;}
.heading .desc p {font-weight: 500; font-size: var(--fz-24); line-height: 1.41em; color: #666; margin: auto;}
/* main */
.heading.main.mb {margin-bottom: 120px;}
.heading.main {text-align: center;}
.heading.main .sub_main_tit {margin-bottom: 0;}

/*--- main title ---*/
.sub_main_tit {text-align: center;}
.sub_main_tit::before {content: url(/img/mobile/sub01/sub_main_logo.png); display: inline-block; margin-bottom: 70px;}
.sub_main_tit h3 {font-weight: 300; font-size: var(--fz-70); line-height: 1.14em;}
.sub_main_tit h3 b {font-weight: 700;}


@media all and (max-width:768px){
    .sub_main_tit h3{font-size: 35px; word-break: keep-all;}
    .heading .desc p{font-size: 18px; word-break: keep-all;}
    .section{padding: 100px 0;}
    .heading.main.mb{margin-bottom: 80px;}
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * header *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* sub 페이지 로고 사용을 위해 main 페이지 로고 display : none; */
.main_on {display: none !important;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * sub_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* layout */
.sub_visual {background-color: #ed843e;}
.sub_visual .flex_wrap {align-items: center; display: flex;}
.sub_visual .left {width: 45%;}
.sub_visual .right {width: 55%;}
/* txt box */
.sub_visual h2 {font-weight: 700; font-size: 100px; line-height: 1.1em; color: #fff; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.50);}
.sub_visual .desc {margin-top: 100px;}
.sub_visual .desc p { font-family: 'pre-r'; font-size: 24px; line-height: 1.333em; letter-spacing: -1.08px; color: #ffffff; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.50);}
.sub_visual .desc p b {font-weight: 700;}
/* img box */
.sub_visual .img_box {width: 100%; max-width: fit-content; position: relative; padding-top: 200px;}
.sub_visual .img_box img {position: relative; width: 100%;}
.sub_visual .img_box::before {content: ''; position: absolute; display: block; width: 135%; aspect-ratio: 1/0.85; bottom: 0; left: -6%; background: url(/img/mobile/sub01/visual_mockup_bg.png) no-repeat center bottom / contain;}
/* responsive */
@media all and (max-width: 1800px) {
    .sub_visual h2 {font-size: 90px;}
}

@media all and (max-width: 1600px) {
    .sub_visual h2 {font-size: 80px;}
}

@media all and (max-width: 1400px) {
    .sub_visual h2 {font-size: var(--fz-80);}
}

@media all and (max-width: 1200px) {
    .sub_visual {padding-top: 250px;}
    .sub_visual .flex_wrap {flex-wrap: wrap; gap: 100px;}
    .sub_visual .left {width: 100%;} 
    .sub_visual .right {width: 100%;}
    .sub_visual .img_box {padding-top: 0;}
}

@media all and (max-width:800px){
    .sub_visual{padding-top: 130px;}
    .sub_visual h2{font-size: 35px;}
    .sub_visual .desc p{font-size: 16px;}
    .sub_visual .desc{margin-top: 50px;}
}

@media all and (max-width:650px){
    .sub_visual .flex_wrap{gap: 50px;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.con01 .heading .desc p {max-width: 49em;}
/* row01 common */
.con01 ul {display: flex; width: 100%;}
.con01 ul li {margin: 0 -25px; box-sizing: border-box; background-color: rgba(51, 51, 51, 0.95); display: flex; align-items: center; justify-content: center; height: 320px; padding: 0 130px; border-radius: 320px;}
.con01 ul li:first-child,
.con01 ul li:last-child {flex: 1;}
.con01 ul li .txt{display: block; color: #fff; width: 100%;}
.con01 ul li .txt h5 {font-family: 'Audiowide', cursive; font-size: var(--fz-36); line-height: 1.3em; letter-spacing: 0.05em;}
.con01 ul li .txt p {font-size: var(--fz-24); line-height: 1.41em; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6);}

/* row01 shape */
.con01 .blue {text-align: center; background-color: rgba(72, 91, 168, 0.95); box-sizing: border-box; aspect-ratio: 1/1; padding: 0; position: relative; z-index: 1;}
.con01 .orange {text-align: center; background-color: rgba(237, 109, 62, 0.95); box-sizing: border-box;}

.con01 ul li:first-child {text-align: right; padding-left: 0; border-radius: 0 320px 320px 0; position: relative; z-index: 1;}
.con01 ul li:last-child {text-align: left; padding-right: 0; border-radius: 320px 0 0 320px; background-color: rgba(255, 198, 11, 0.95);}

@media all and (max-width: 1600px) {
    .con01 ul li {padding: 0 90px;}
}

@media all and (max-width: 1500px) {
    .con01 ul li {margin: 0 -15px; padding: 0 60px;}
}

@media all and (max-width: 1400px) {
    .con01 ul {flex-wrap: wrap; justify-content: center; gap: 20px;}
    .con01 ul li {margin: 0; padding: 60px;}
    .con01 ul li:first-child,
    .con01 ul li:last-child {width: 100%; text-align: center; flex: unset;}
    .con01 .orange {flex: 1;}
}

@media all and (max-width: 767px) {
    .con01 .orange {flex: unset; width: 100%;}
    .con01 .blue {width: 100%; aspect-ratio: unset;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * con02 *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.con02 {position: relative; background-color: #f9f9f9;}
.con02::before{content: ''; z-index: -1; display: inline-block; width: 75%; height: 100%; background-color: #f9f9f9; position: absolute; top: 0; left: 0;}
.con02 .heading .desc p {max-width: 22em;}
.con02 .bg_box{text-align: center; position: relative;}
.con02 .bg_box .phone{position: relative; z-index: 30; transform: translateX(70px);}
.con02 .bg_box .bg{position: absolute;}
.con02 .bg_box .bg.right{top: -10px; right: 28%;}
.con02 .bg_box .bg.left{top: 13%; left: 24%;}
.con02 .bg_box .bg.bot_r{bottom: -15%; right: 0;}

.con02 .swiper_slider{ position: absolute; overflow: hidden; z-index: 10; bottom: 33%; overflow: unset;}
.con02 .swiper_slider .swiper-slide{padding: 30px; max-width: 330px; box-sizing: border-box; text-align: center;}

.con02 .swiper_slider .swiper-slide .icon{ min-height: 145px; display: flex; align-items: center; justify-content: center;}
.con02 .swiper_slider .swiper-slide .txt h5{font-weight: 500; color:#222; letter-spacing: -0.075em; font-size: 21px; }
.con02 .swiper_slider .swiper-slide .txt p{font-weight: 300; color:#222; letter-spacing: -0.045em; font-size: 15px; line-height: 1.555em;}
.con02 .swiper-wrapper{transition-timing-function:linear; }

.con02 .row02{background-color: #309ee9; position: relative; max-height: 1903px; overflow: hidden;}
.con02 .row02 .img_box{text-align: right; margin-top: 150px;}
#wrap .con02 .row02 .img_box img{width: 63%;}
.con02 .row02 .img_box.aos-animate img{animation:long_img02 8s infinite linear;}


@keyframes long_img02{
    0%{transform:translate(0px,10px);}
    50%{transform:translate(0px,-40%);}
    1000%{transform:translate(0px,10px);}
}

@media all and (max-width: 1400px) {
    .con02{ background-color: #f9f9f9;}
}
@media all and (max-width: 1024px) {
   
    .con02 .bg_box .bg{display: none;}
    .con02 .swiper_slider{bottom: 35%;}
}

@media all and (max-width:650px){
    .con02 .swiper_slider{bottom: 30%;}
    .con02 .swiper_slider .swiper-slide .txt h5{margin: 0;}
    .con02 .swiper_slider .swiper-slide{padding-top: 0;}
	.con02 .bg_box .phone{ transform: translateX(42px)}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * con03 *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.con03{margin-bottom: 160px;}
.con03 .img_box {width: 100%; aspect-ratio: 1/0.6; min-height: 780px;}
.con03 .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

@media all and (max-width: 1000px) {
    .con03{margin-bottom: 13%;}
}