@charset "utf-8";

.content{max-width: 2560px;margin: 0 auto;}/* background: rgba(255, 89, 89, 0.2); */
/* .inner{width: 1920px; max-width: 1920px; margin: 0 auto; }background: rgba(255, 249, 84, 0.2); */
/* 비쥬얼 */
.sub_visual{
    position: relative;
    max-width:2560px ;
    height: 1550px;
    margin: 0 auto;
    background: url("/img/mobile/sub03/sub03_bg.png")no-repeat center center;
}
.sub_visual .bg_box img{
    width: 100%;
}
.sub_visual .title_box{
    position: absolute;
    top: 600px;
    left: 410px;
    color: #fff;
}
.sub_visual .title_box .txt{
    font-family: 'pre-r';
    font-size: 24px;
    line-height: 140px;
    letter-spacing: -1.08px;
    color: #ffffff;
    margin-top: 100px;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.50);
}
.sub_visual .title_box .txt span{
    font-family: "pre-b";
}
/* con_wrap - 이미지와 텍스트가 옆으로 나열 되어있는 그룹 (공용)*/
.con_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 컨텐츠 제목과 텍스트 박스  (공용)*/
.txt_wrap .tit{
    font-family: "pre-b";
    font-size: 90px;
    letter-spacing: -0.025em;
    color: #222;
}
.txt_wrap .txt{
    font-family: "pre-m";
    font-size: 24px;
    letter-spacing: -0.025em;
    color: #444;
    line-height: 34px;
    margin-top: 55px;
}

@media all and (max-width:1000px){

    .sub_visual .title_box .txt{font-size: 16px;}
}

/* con01 */
.sub03_con01{height: 1328px; position: relative; overflow: hidden;}
.sub03_con01 .txt_wrap{
    margin-left: 320px;
}
.sub03_con01 .txt_wrap h3{white-space: nowrap;}
.sub03_con01 .slide_txt{
    position: absolute;
    bottom: -40px;
    right: -60%;
    font-family: "pre-b";
    font-size: 180px;
    color: #43484c;
    opacity: 40%;
    white-space: nowrap;
}

.sub03_con01 .slide_txt .sl_txt{
    position: relative;
}
@keyframes text_ani {
    0%{transform: translateX(0%);}
    100%{transform: translateX(-100%);}
}

/* con02 */

.sub03_con02{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1460px;
    background: #f7f8f9;
}

.sub03_con02 .img_box{
    display: flex;
    align-items: center;
    margin-left:160px ;
}
.phone_frame{
    width: 402px;
    height: 870px;
    border-radius: 35px;
    border: 10px solid #000;
    box-sizing: border-box;
    overflow-y: hidden;
    box-shadow: 70px 70px 80px rgba(0,0,0,.1) ;
}
.phone_frame img{
    display: block;
    width: 100%;
    object-fit: cover;
}
.phone_frame:nth-child(1){
    margin-top: -150px;
}
.phone_frame:nth-child(2){
    margin-left: 118px;
    margin-top: 55px;
}
.sub03_con02 .txt_wrap{text-align: right;}

/* con03 */
.sub03_con03{
    width: 100%;
    height: 1986px;
    position: relative;
    background: #000;
    padding-top: 250px;
    box-sizing: border-box;
}
.sub03_con03 .txt_wrap .tit, .sub03_con03 .txt_wrap .txt{
    color: #fff;
}
.sub03_con03 .slide_wrap{margin-top: 92px; overflow: hidden;}

.sub03_con03 .gr_box{
    position: absolute;
    width: 100%;
    height: 755px;
    background: linear-gradient(to bottom, transparent 10%, #000 70%);
    left: 0;
    bottom: 0;
    z-index: 1;
}
/* con04 */

.sub03_con04{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 1507px;
    background: url("/img/mobile/sub03/sub03_con04_bg.png")no-repeat center bottom;
    padding-top: 248px;
    box-sizing: border-box;
    margin-bottom: 160px;
}

.sub03_con04 .con_wrap{
    align-items: flex-start;
}
.sub03_con04 .txt_wrap{
    text-align: right;
}
.sub03_con04 .img_box{
    position: relative;
}
.sub03_con04 .mockup{
    position: absolute;
    width: 1155px;
}
.sub03_con04 .mockup img{
    width: 100%;
}
.sub03_con04 .mockup:nth-child(1){
    top: 0;
    left: -180px;
}
.sub03_con04 .mockup:nth-child(2){
    top: 410px;
    left: -292px;
}
.qhd{display: none;}
/* 1920 */
@media all and (max-width:1920px) {
    .content{max-width: 1920px;}
    .inner{width: 1400px; max-width: 1400px;}
    .sub_visual{width: 100%; height: 110vh; background-size: cover;}
    .sub_visual .title_box{left: 10%; top: calc(50% - 250px/2); }
    .txt_wrap .tit{font-size: 70px;}
    .txt_wrap .txt{font-size: 18px; line-height: 30px;}
    .sub03_con01{height: auto;}
    .sub03_con01 .txt_wrap{margin-left: 10%}
    .sub03_con01 .img_box{width: 40%;}
    .sub03_con01 .slide_txt {bottom: -30px;right: -65%;font-size: 130px;}
    .sub03_con02{height: auto; padding: 200px 0;}
    .sub03_con02 .img_box{margin-left: 0;}
    .phone_frame {width: calc(402px/1.2);height: calc(870px/1.2);border-radius: 30px;box-shadow: 50px 50px 60px rgb(0 0 0 / 10%); }
    .phone_frame:nth-child(2) {margin-left: 80px; }
    .sub03_con03{height: auto; padding: 200px 0;}
    .sub03_con04{height: 1250px; padding-top: 200px; background-size: contain; margin-bottom: 200px;}
    .sub03_con04 .mockup img{width: 83.33%;}
    /* .sub03_con04 .mockup:nth-child(1){left: 0;} */
    .sub03_con04 .mockup:nth-child(2){top: 310px;}
    .qhd{display: block;}
}
/* 1400 */
@media all and (max-width:1400px) {
    .inner{width: 100%; max-width: 100%;}
    .sub_visual{width: 100%; height: 110vh; background-size: cover;}
    .sub_visual .title_box{left: 210px; top: calc(50% - 250px/2); }
    .sub03_con01{height: auto;}
    .sub03_con01 .txt_wrap{margin: 80px 30px 0 120px;}
    .sub03_con01 .img_box{width: 50%;}
    .sub03_con01 .slide_txt {bottom: -30px;right: -65%;font-size: 130px;}
    .sub03_con02{height: auto; padding: 200px 0;}
    .sub03_con02 .img_box{margin-left: 0;}
    .phone_frame {
        width: calc(402px/1.2);
        height: calc(870px/1.2);
        border-radius: 30px;
        box-shadow: 50px 50px 60px rgb(0 0 0 / 10%);
    }
    .phone_frame:nth-child(2) {
        margin-left: 80px;
    }
    .sub03_con03{height: auto; padding: 200px 0;}
    .sub03_con04{height: 1250px; padding-top: 200px; background-size: contain; margin-bottom: 200px;}
    .sub03_con04 .mockup img{width: 83.33%;}
    .sub03_con04 .mockup:nth-child(1){left: 0;}
    .sub03_con04 .mockup:nth-child(2){top: 310px;}
}

@media all and (max-width:1000px){
    .txt_wrap .tit{font-size: 46px;}
    .txt_wrap .txt br{display: none;}
    .con_wrap{flex-direction: column;}
    .sub03_con01 .txt_wrap{margin-left: 0; padding: 60px 0}
    .sub03_con01 .img_box{width: 100%;}
    .sub03_con02{padding: 100px 0;}
    .sub03_con02 .txt_wrap{order: 1;margin-bottom: 70px;}
    .sub03_con02 .img_box{order: 2;}
    .sub03_con04{margin-bottom: 30%;}
    .sub03_con04 .mockup:nth-child(1),
    .sub03_con04 .mockup:nth-child(2){width: 800px;}
    .sub03_con04{height: 760px; padding: 100px 0;}
    .sub03_con04 .mockup:nth-child(1){top:422px}
    .sub03_con04 .mockup:nth-child(2){top: 370px;}
    .sub03_con03{padding: 100px 0;}
}

@media all and (max-width:767px){
    .sub_visual .title_box{left: 0; width: 100%; text-align: center;}
    .sub_visual .title_box .title{width: 80%; margin: 0 auto;}
    .sub_visual .title_box .txt{text-align: center; margin-top: 50px;}
    
    .txt_wrap .tit{font-size: 35px;}
    .txt_wrap .txt{word-break: keep-all;}
    .sub03_con04{background: none;}
	.sub03_con02 .phone_frame{width:100%; margin-top:-30px;}
	.sub03_con02 .phone_frame:nth-child(2){ display:none;}
	    .sub03_con01 .txt_wrap{width:93.75%; margin:0 auto 30px;}

}
@media all and (max-width:1024px){
.inner{width:93.75%; padding:0;}
}