@charset "utf-8";


/* sub1 contents */


.storytelling{
    width: 100%;
    padding: 15.625vw 0 0 160px;
    background: #442DC3 url(../images/storytelling-bg.png) 100% 95px no-repeat;
}
.story-con{
    width: 88%;
    padding-top: 280px;
    padding-bottom: 80px;
    background: url(../images/storytelling-tv.png) 0 100% no-repeat;
}
.story-txt{
    margin-top: 100px;
    width: 546px;
    margin-left: auto;
}
.story-txt p{margin-bottom: 20px;font-size: 1.125rem/* 18 */;}

.contents-video{
    padding: 80px 0;
    color: #000;
    text-align: center;
}
.contents-video-wrap h4{
    font-family: 'Cafe24 Ohsquare';
    font-size: 3.75rem/* 60 */;
    color: #442DC3;
}
.contents-video-wrap > p{width: 540px;margin: 15px auto 0;}
.contents-video-wrap > ul{margin-top: 10px;}
.v-icon-list{display: flex;justify-content: center;align-items: center;margin-top: 60px;}
.v-icon-list li{
    width: 340px;
    height: 340px;
    padding: 50px 30px 0;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    margin: 0 2.78%;
    transition: 0.4s;
}

.v-icon{
    width: 148px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.v-icon span{
    width: 100%;
    height: 90px;
    display: block;
    background: url() 50%/contain no-repeat;
}
.v-icon1 span{background-image: url(../images/video-icon1.png);}
.v-icon2 span{background-image: url(../images/video-icon2.png);}
.v-icon3 span{height: 103px;background-image: url(../images/video-icon3.png);}
.v-icon4 span{height: 110px;background-image: url(../images/video-icon4.png);}
.v-icon5 span{height: 95px;background-image: url(../images/video-icon5.png);}
.v-icon6 span{background-image: url(../images/video-icon6.png);}
.v-icon7 span{background-image: url(../images/video-icon7.png);}
.v-icon8 span{background-image: url(../images/video-icon8.png);}
.v-icon9 span{background-image: url(../images/video-icon9.png);}
.v-icon10 span{background-image: url(../images/video-icon10.png);}

.v-icon-list li strong{display: block;margin-top: 20px;font-weight: 600;color: #442DC3;font-size: 1.375rem/* 22 */;}
.v-icon-list li p{margin-top: 15px;font-size: 1.0625rem/* 17 */;max-width: 300px;}


.contents-design{
    padding: 90px 0 110px;
    background: #442DC3;
    text-align: center;
}
.design-top span{
    display: block;
    width: 564px;
    height: 564px;
    background: url(../images/design-banner.png) 50%/cover no-repeat;
    margin: 0 auto;
}
.design-top h3{
    font-family: 'Raleway', sans-serif;
    font-size: 5.8125rem/* 93 */;
    margin-top: 40px;
}
.design-top h3::after{
    content: "";
    display: block;
    width: 498px;
    height: 125px;
    background: url(../images/design-txtbg.png) 50%/cover no-repeat;
    margin: -84px auto 0;
}
.design-top strong{
    font-family: 'Cafe24 Ohsquare';
    font-size: 1.6875rem/* 27 */;
    display: block;
    margin-top: 15px;
}
.design-top p{margin-top: 15px;}
.design-top p:nth-of-type(1){margin-top: 50px;}

.design-bottom{margin-top: 150px;}
.design-bottom h4{
    font-family: 'Cafe24 Ohsquare';
    font-size: 3.75rem/* 60 */;
    color: #27B2F3;
}
.design-bottom > p{width: 670px;margin: 20px auto 0;}
.design-bottom ul{width: 100%;margin-top: 100px;display: flex;justify-content: space-between;align-items: center;}
.design-bottom ul li{width: 340px;height: 340px;padding: 75px 40px 0;background: #000;border-radius: 50%;}
.d-icon{width: 148px;height: 100px;margin: 0 auto;display: flex;justify-content: center;align-items: center;}
.d-icon span{display: block;width: 100%;height: 90px;background: url() 50%/contain no-repeat;margin: 0 auto;}

.d-icon1 span{background-image: url(../images/design-icon1.png);}
.d-icon2 span{background-image: url(../images/design-icon2.png);}
.d-icon3 span{height: 100px;background-image: url(../images/design-icon3.png);}

.design-bottom ul li strong{font-weight: 600;font-size: 1.375rem/* 22 */;margin-top: 20px;display: block;color: #27B2F3;}
.design-bottom ul li p{font-size: 1.0625rem/* 17 */;margin-top: 24px;}



/* sub2 marketing */


.integrate{
    padding-top: 180px;
    padding-bottom: 140px;
    background: #000 url(../images/integrate-bg2.png) 97% 100% no-repeat;
}
.integrate-txt{
    width: 950px;
    padding: 170px 0 0 120px;
    background: url(../images/integrate-bg1.png) 0 0 no-repeat;
}
.integrate-txt h3{
    font-family: 'Raleway', sans-serif;
    font-size: 4.375rem/* 70 */;
}
.integrate-txt h3:nth-of-type(1){border-bottom: 4px solid #fff;}
.integrate-txt strong{font-weight: 600;margin-top: 15px;font-size: 1.25rem;}
.integrate-txt-box{width: 680px;}
.integrate-txt-box p{margin-top: 20px;font-size: 1.125rem/* 18 */;}
.integrate-txt-box p:nth-of-type(1){margin-top: 40px;}


.m-slide1-wrap, .m-slide2-wrap{width: 100%;position: relative;min-height: 100vh;}
.m-process-info, .m-social-info{
    position: absolute;
    top: 0;
    width: 43%;
    height: 100%;
    min-height: 100vh;
    background: #442DC3 url(../images/marketing-slide-bg1.png) 100% 0 no-repeat;
}
.m-process-info{left: 0;}
.m-process-info-bg,.m-social-info-bg{
    position: sticky;
    top: 0;
    left: 50%;
}
.m-process-info-txt, .m-social-info-txt{
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
}
.m-process-info-txt strong, .m-social-info-txt strong{
    font-family: 'Raleway', sans-serif;
    font-size: 3.3125rem/* 53 */;
}
.m-process-info-txt strong b, .m-social-info-txt strong b{color: #27B2F3;display: block;line-height: 0.6;}
.m-process-info-txt p, .m-social-info-txt p{margin: 70px auto 0;font-size: 1.375rem/* 22 */;width: 50%;}

.m-process, .m-social{width: 57%;display: inline-block;min-height: 100vh;height: 100%;}
.m-process{margin-left: 43%;}
.m-social{margin-right: 43%;}
.process-box-wrap{width: 57%;margin: 0 auto;}
.process-box{padding: 55px 64px 65px;color: #000;width: 100%;}
.process-box strong{
    font-family: 'Cafe24 Ohsquare';
    color: #17148C;
    font-size: 2.5rem/* 40 */;
}
.process-box p{
    font-size: 1.125rem/* 18 */;
    margin-top: 10px;
}
.process-box-r{text-align: right;border-right: 6px solid #000;}
.process-box-n1{width: 67.5%;border-right: 6px solid #000;border-bottom: 6px solid #000;}
.process-box-l{border-left: 6px solid #000;}
.process-box-l:nth-child(2){border-bottom: 6px solid #000;}
.process-box:nth-of-type(4){border-top: 6px solid #000;border-bottom: none;}
.process-box-r:nth-child(6),
.process-box-r:nth-child(9){border-bottom: 6px solid #000;}
.process-box-n2-wrap{display: flex;padding: 0 !important;}
.process-box-n2{padding-top: 8.3vw;width: 50%;border-top: 6px solid #000;border-right: 6px solid #000;}
.process-box-n2:nth-of-type(2){border-top: none;border-right: none;border-bottom: 6px solid #000;}

.m-social-info{right: 0;background-image: url(../images/marketing-slide-bg2.png);}
.m-social{padding: 120px 0 200px;}
.m-social ul{width: 67.5%;margin: 0 auto;color: #000;}
.m-social ul li{display: flex;justify-content: flex-start;align-items: center;margin-top: 100px;}
.m-social ul li:nth-child(1){margin-top: 0;}
.m-social ul li:nth-child(even){flex-direction: row-reverse;}
.m-social ul li figure{margin-right: 12%;width: 50%;}
.m-social ul li:nth-child(even) figure{margin-right: 0;margin-left: 12%;}
.m-social ul li:nth-child(even) .msocial-txt{text-align: right;}
.m-social ul li:nth-child(even) .msocial-txt strong{
    margin-right: -1.5rem;
}
.m-social ul li:nth-child(even) .msocial-txt strong::after{
    margin-left: -6.8rem;
}
.msocial-txt{width: 38%;}
.msocial-txt h5{
    font-family: 'Cafe24 Ohsquare';
    font-size: 4.375rem/* 70 */;
    line-height: 0.8;
}
.m-social ul li:nth-child(even) .msocial-txt h5{
    margin-right: -0.2rem;
}
.m-social ul li:nth-child(odd) .msocial-txt h5{
    margin-left: -0.2rem;
}
.msocial-txt strong{
    font-weight: 400;
    margin-top: 4px;
    font-size: 1.5rem/* 24 */;
    letter-spacing: 1.5rem;
    display: inline-block;
}
.msocial-txt strong::after{
    content: "";
    display: block;
    width: 164%;
    height: 1px;
    background: #000;
    margin-top: 12px;
    margin-bottom: 25px;
}
.msocial-txt p{font-size: 1.125rem/* 18 */;}
.msocial-txt i{margin-bottom: 10px;display: block;}


.synergy{background: #000 url(../images/synergy-bg1.png) 96% 100% no-repeat;padding-top: 56px;padding-bottom: 230px;}
.synergy-head{display: flex;align-items: flex-end;margin-top: -20px;}
.synergy-head p{margin-bottom: 30px;margin-left: 55px;width: 31.6%;}
.synergy-con{margin-top: 36px;display: flex;align-items: center;}
.synergy-con span{width: 35.4%;display: block;background: url(../images/synergy-bg2.png) 50%/cover no-repeat;}
.synergy-con span::before{
    content: "";
    display: block;
    padding-top: 91.8%;
}
.synergy-box{display: flex;justify-content: space-between;align-items: center;margin-left: 7%;}
.synergy-box > div{width: 380px;height: 500px;background: url(../images/synergy-txt-bg.png) 50%/cover no-repeat;margin: 0 20px;color: #000;text-align: center;padding: 70px 38px 0 28px;}
.synergy-box > div strong{
    font-family: 'Cafe24 Ohsquare';
    font-size: 2.5rem/* 40 */;
}
.synergy-box > div p{margin-top: 30px;}
.synergy-box > div strong b{color: #442DC3;display: inline-block;}
.synergy-box > div strong b::after{
    content: "";
    display: block;
    width: 110%;
    height: 1.9rem;
    background: #27B2F3;
    margin-left: -6%;
    margin-top: -2.85rem;
}


/* sub3 online */


.online-media{
    width: 100%;
    background: #442DC3 url(../images/online-media-bg.png) 100% 50% no-repeat;
    padding-top: 22.4vw/* 약 430 */;
    padding-left: 14vw/* 약 170 */;
    padding-bottom: 18.23vw/* 약 350 */;
}
.online-media-title{position: relative;width: 47.135vw;}
.online-media-title::before,
.online-media-title::after{
    content: "";
    display: block;
    width: 2px;
    height: 175px;
    background: #fff;
    position: absolute;
    transform: translateX(-50%);
}
.online-media-title::before{
    top: -240px;
    left: 50%;
}
.online-media-title::after{
    bottom: -240px;
    left: 50%;
}
.online-media-title h3{width: 47.135vw;}
.online-media-title strong{font-weight: 600;margin-top: 25px;display: inline-block;font-size: 1.25rem;}
.online-media-title p{
    font-size: 1.125rem/* 18 */;
    width: 32.3vw/* 620 */;
    margin-top: 20px;
}

.online-media-list{
    padding: 80px 0 110px;
    background: url(../images/online-media-list-bg.png) 0 100% no-repeat;
}
.online-media-list ul li{color: #000;}
.online-list-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 100px 0 70px;
}
.online-list-title h4{
    font-family: 'Raleway', sans-serif;
    font-size: 3.4375rem/* 55 */;
}
.online-icon{
    width: 45px;
    height: 45px;
    background: url() 50%/cover no-repeat;
    margin-bottom: 20px;
}
.online-media-list ul li{margin-top: 120px;}
.online-media-list ul li:first-child{margin-top: 0 !important;}
.online-media-list ul li:nth-child(1) span{
    width: 64px;
    background-image: url(../images/online-icon1.png);
}
.online-icon-wrap{display: flex;justify-content: space-between;align-items: center;width: 104px;}
.online-icon-wrap span:nth-child(1){background-image: url(../images/online-icon2.png);}
.online-icon-wrap span:nth-child(2){background-image: url(../images/online-icon3.png);}
.online-media-list ul li:nth-child(3) span{background-image: url(../images/online-icon4.png);}
.online-media-list ul li:nth-child(4) span{background-image: url(../images/online-icon5.png);}
.online-media-list ul li:nth-child(5) span{background-image: url(../images/online-icon6.png);}

.online-list-tag{
    width: 100%;
    background: #E5E5FC;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 70px 0;
}
.online-list-tag p{
    font-weight: 400;
    color: #442DC3;
    font-size: 1.3125rem/* 21 */;
    display: block;
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid #442DC3;
    margin-right: 30px;
    margin-bottom: 15px;
}
.online-list-tag p.tag-on{
    background: #442DC3;
    color: #fff;
}

.online-media-list ul li > p{
    width: 43%;
    margin-top: 35px;
    margin-left: 70px;
}

.online-ad-list{
    border-top: 1px solid #E9E9E9;
    margin-top: 60px;
    padding: 55px 70px 0;
    display: flex;
    justify-content: space-between;
    align-items: top;
    flex-wrap: wrap;
}
.online-ad-list dl{width: 40%;margin-bottom: 100px;}
.online-ad-list dl:nth-child(3),
.online-ad-list dl:nth-child(4){margin-bottom: 0;}
.online-ad-list dl dt{
    font-family: 'Cafe24 Ohsquare';
    font-size: 1.375rem/* 22 */;
}
.online-ad-list dl dt::after{
    content: "";
    display: block;
    width: 220px;
    height: 1px;
    background: #000;
    margin-top: 8px;
    margin-bottom: 15px;
}
.online-ad-list dl dd{
    font-weight: 400;
    font-size: 1.125rem/* 18 */;
}


/* sub4 offline */


.offline-media{
    width: 100%;
    background: #000 url(../images/offline-media-bg.png) 90% 100% no-repeat;
    padding-top: 140px;
}
.offline-media-title-wrap{
    width: 60.58%/* 1163 */;
    padding-top: 15.625vw/* 300 */;
    padding-left: 13.54%/* 260 */;
    padding-bottom: 5.2vw/* 100 */;
    background: url(../images/offline-media-title-line.png) 100% 50%/cover no-repeat;
}
.offline-media-title{width: 76%;}
.offline-media-title p{
    font-size: 1.125rem/* 18 */;
    margin-top: 30px;
}
.offline-media-list{
    padding: 110px 0 50px;
    background: #000;
    text-align: center;
}
.offline-media-list h4{
    font-family: 'Raleway', sans-serif;
    font-size: 4.375rem/* 70 */;
}
.offline-slide{margin-top: 90px;width: 100%;overflow: hidden;}
.offline-media-list ul{
    width: 111.5%/* 2160 */;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.offline-media-list ul li{width: 180px;}
.slide-con-a{background: #7B7DEE;}
.slide-con-b{background: #B4B6F3;}
.offline-icon-box{display: flex;justify-content: center;align-items: center;height: 134px;}
.offline-icon-box span{width: 134px;height: 84px;background: url() 50%/contain no-repeat;}
.offline-icon-box1 span{background-image: url(../images/offline-icon1.png);}
.offline-icon-box2 span{background-image: url(../images/offline-icon2.png);}
.offline-icon-box3 span{background-image: url(../images/offline-icon3.png);}
.offline-icon-box4 span{background-image: url(../images/offline-icon4.png);}
.offline-icon-box5 span{background-image: url(../images/offline-icon5.png);}
.offline-icon-box6 span{background-image: url(../images/offline-icon6.png);}
.offline-icon-box7 span{background-image: url(../images/offline-icon7.png);}
.offline-icon-box8 span{background-image: url(../images/offline-icon8.png);}
.offline-icon-box9 span{background-image: url(../images/offline-icon9.png);}
.offline-icon-box10 span{background-image: url(../images/offline-icon10.png);}
.offline-icon-box span.box-a{height: 92px;}
.offline-icon-box span.box-b{height: 74px;}
.offline-icon-box span.box-c{height: 102px;}
.offline-list-txt{
    border-top: 3px solid #000;
    height: 72px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-weight: 400;
    font-size: 1.25rem/* 20 */;
    line-height: 1.1;
}
.list-btn{
    width: 95px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    margin-left: auto;
}
.list-btn a{
    width: 40px;
    height: 40px;
    background: url() 50%/cover no-repeat;
    text-indent: -999px;
    overflow: hidden;
}
.list-btn .btn-prev{background-image: url(../images/btn-prev.png);}
.list-btn .btn-next{background-image: url(../images/btn-next.png);}



/* 최적화 */
@media screen and (max-width:1700px) {
    /* sub4 offline */
    .offline-media-title-wrap{width: 65%;}
}

@media screen and (max-width:1680px) {

    /* sub2 marketing */
    .integrate{background-image: url(../images/integrate-bg2-1680.png);}
    .m-social ul{width: 75%;}
    .msocial-txt strong::after{width: 150%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -5.7rem;}

    /* sub4 offline */
    .offline-media-list ul{width: 128.5%;}
}

@media screen and (max-width:1500px) {

    /* sub1 contents */
    .story-con{background-size: contain;}

    /* sub2 marketing */
    .msocial-txt h5{font-size: 3.7rem;}

    /* sub4 offline */
    .offline-media-title-wrap{width: 68%;}
    .offline-media-list ul li{width: 160px;}
    .offline-list-txt{padding: 12px 0px;}
}

@media screen and (max-width:1400px) {

    /* sub1 contents */
    .storytelling{padding-left: 0;}
    .story-con{margin: 0 auto;}
    .story-txt{margin-top: 120px;}
    .story-txt p{font-size: 1.12rem;}
}

@media screen and (max-width:1300px) {

    /* sub2 marketing */
    .m-process-info-txt, .m-social-info-txt{padding-top: 140px;}
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 3.3125rem;line-height: 1.1;}
    .m-process-info-txt strong b, .m-social-info-txt strong b{line-height: 1;}
    .process-box{padding: 45px 54px 50px;}
    .m-social ul{width: 80%;}
    .m-social ul li{margin-top: 80px;}
    .m-social ul li figure{margin-right: 10%;}
    .m-social ul li:nth-child(even) figure{margin-left: 10%;}
    .msocial-txt{width: 40%;}
    .msocial-txt h5{font-size: 3.5rem;}

    /* sub4 offline */
    .offline-media-title-wrap{width: 72%;}
    .offline-media-list ul{width: 150.8%;}
}

@media screen and (max-width:1170px) {

    /* sub1 contents */
    .storytelling{padding-top: 14vw;}
    .story-con{padding-bottom: 30px;}
    .design-bottom ul li{width: 300px;height: 300px;padding-top: 44px;}

    /* sub2 marketing */
    .synergy-box{margin-left: 2%;}

    /* sub4 offline */
    .offline-media-title-wrap{
        width: 70%;
        padding-left: 10%;
    }
    .offline-media-title{width: 70%;}
}

@media screen and (max-width:1100px) {

    /* sub2 marketing */
    .synergy-box > div{margin: 0 14px;}

    /* sub4 offline */
    .offline-media{background-position: 100% 100%;}
    .offline-media-title-wrap{padding-left: 10%;}
    .offline-media-list ul li{width: 154px;}
}

/* tablet */

@media screen and (max-width:1024px) {

    /* sub1 contents */

    .storytelling{padding: 13.5vw 0 0 0;background: #442DC3 url(../images/storytelling-bg-tablet.png) 100% 55px no-repeat;}
    .story-con{
        width: 93.5%;
        padding-top: 262px;
        padding-bottom: 35px;
        background: url(../images/storytelling-tv-tablet.png) 0 100% no-repeat;
    }
    .story-txt{
        margin-top: 0;
        width: 450px;
    }
    .story-txt p{margin-bottom: 15px;font-size: 1rem;line-height: 1.2;}

    .contents-video{padding: 60px 0 80px;}
    .contents-video-wrap h4{font-size: 2.875rem/* 46 */;line-height: 1.1;}
    .contents-video-wrap > p{width: 500px;margin-top: 20px;font-size: 1.125rem/* 18 */;}
    .v-icon-list{margin-top: 50px;}
    .v-icon-list li{
        width: 274px;
        height: 300px;
        padding-top: 35px;
        margin: 0 6.4% 0 0;
    }
    .v-icon-list li:last-child{margin-right: 0;}
    .v-icon{width: 120px;height: 89px;}
    .v-icon span{height: 73px;}
    .v-icon3 span{height: 83px;}
    .v-icon4 span{height: 89px;}
    .v-icon5 span{height: 77px;}

    .v-icon-list li strong{font-size: 1.375rem/* 22 */;margin-top: 10px;}
    .v-icon-list li p{font-size: 1rem;}

    .contents-design{padding: 100px 0 80px;}
    .design-top span{width: 433px;height: 433px;}
    .design-top h3{font-size: 4.375rem/* 70 */;margin-top: 35px;}
    .design-top h3::after{
        width: 382px;
        height: 95px;
        margin-top: -66px;
    }
    .design-top strong{font-size: 1.5rem/* 24 */;}
    .design-top p{font-size: 1rem;margin-top: 15px;}
    .design-top p:nth-of-type(1){margin-top: 40px;}
    .design-bottom{margin-top: 110px;}
    .design-bottom h4{font-size: 2.875rem/* 46 */;line-height: 1.1;}
    .design-bottom > p{margin-top: 20px;font-size: 1.125rem/* 18 */;width: 610px;}
    .design-bottom ul{margin-top: 60px;}
    .design-bottom ul li{width: 275px;height: 275px;padding-top: 50px;}
    .d-icon{width: 120px;height: 81px;}
    .d-icon span{height: 73px;}
    .d-icon3 span{height: 81px;}
    .design-bottom ul li strong{font-size: 1.375rem/* 22 */;}
    .design-bottom ul li p{margin-top: 15px;}


    /* sub2 marketing */


    .integrate{padding-top: 90px;padding-bottom: 56px;background-image: url(../images/integrate-bg2-tablet.png);}
    .integrate-txt{width: 520px;padding: 110px 0 0 3.90625%/* 40 */;background-image: url(../images/integrate-bg1-tablet.png);}
    .integrate-txt h3{font-size: 2.875rem/* 46 */;}
    .integrate-txt strong{font-size: 1.125rem/* 18 */;}
    .integrate-txt-box{width: 430px;}
    .integrate-txt-box p{margin-top: 15px;font-size: 1rem;}
    .integrate-txt-box p:nth-of-type(1){margin-top: 25px;}
    .m-process-info, .m-social-info{background-size: contain;}
    .m-process-info-txt, .m-social-info-txt{padding-top: 90px;}
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 2.75rem/* 44 */;line-height: 1.1;}
    .m-process-info-txt p, .m-social-info-txt p{margin-top: 24px;font-size: 1.125rem/* 18 */;width: 68%;}

    .process-box-wrap{width: 75.8%;}
    .m-process-info{background: #442DC3 url(../images/marketing-slide-bg1-tablet.png) 50% 0/cover no-repeat;}
    .process-box{padding: 32px 28px 32px;}
    .process-box strong{font-size: 1.875rem/* 30 */;}
    .process-box p{font-size: 1rem;}
    .process-box-n1{width: 80%;}

    .m-social-info{background: #442DC3 url(../images/marketing-slide-bg2-tablet.png) 50% 0/cover no-repeat;}
    .m-social{padding: 70px 0 60px;}
    .m-social ul{width: 83.4%;}
    .m-social ul li{margin-top: 50px;}
    .m-social ul li figure{width: 45%;}
    .msocial-txt h5{font-size: 3rem/* 48 */;}
    .msocial-txt strong{font-size: 1.25rem/* 20 */;letter-spacing: 1.25rem;}
    .m-social ul li:nth-child(even) .msocial-txt strong{margin-right: -1.25rem;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -4.7rem;}
    .msocial-txt strong::after{margin-top: 8px;margin-bottom: 15px;}
    .msocial-txt p{font-size: 1rem;}
    .msocial-txt i{font-size: 1.125rem/* 18 */;margin-bottom: 3px;}

    .synergy{background-image: url(../images/synergy-bg1-tablet.png);background-position: 100% 100%;padding-top: 40px;padding-bottom: 140px;}
    .synergy-head{display: block;}
    .synergy-head p{width: 45.5%/* 426 */;font-size: 1.125rem/* 18 */;margin-left: auto;margin-right: 56px;}
    .synergy-con{flex-direction: column-reverse;align-items: flex-start;margin-top: 80px;}
    .synergy-con span{width: 49.0234375%/* 502 */;margin-top: 68px;}
    .synergy-con span::before{
        padding-top: 91.6%;
    }
    .synergy-box{margin: 0 auto;width: 78.125%/* 800 */;}
    .synergy-box > div{width: 47.5%/* 380 */;height: 100%;padding: 0;position: relative;}
    .synergy-box > div::before{
        content: "";
        display: block;
        padding-top: 131.5789%/* 500 */;
    }
    .brand-booster-con, .performance-booster-con{position: absolute;top: 14%;left: 50%;transform: translateX(-50%);width: 84%;}
    .synergy-box > div strong b::after{margin-left: -5.5%;}


    /* sub3 online */


    .online-media{
        background-image: url(../images/online-media-bg-tablet.png);
        padding: 32.9102vw/* 337 */ 3.90625vw/* 40 */;
        padding-right: 0;
    }
    .online-media-title::before,
    .online-media-title::after{
        height: 122px;
    }
    .online-media-title::before{top: -170px;}
    .online-media-title::after{bottom: -170px;}
    .online-media-title h3{width: 64vw/* 630 */;}
    .online-media-title p{margin-top: 15px;width: 45.8vw/* 450 */;}
    .online-media-list{padding-bottom: 80px;background-image: url(../images/online-media-list-bg-tablet.png);}
    .online-list-title{padding: 0 80px 0 56px;}
    .online-list-title h4{font-size: 3.125rem/* 50 */;}
    .online-icon{width: 36px;height: 36px;margin-bottom: 16px;}
    .online-media-list ul li{margin-top: 70px;}
    .online-media-list ul li:nth-child(1) span{width: 52px;}
    .online-icon-wrap{width: 84px;}
    .online-list-tag{padding: 12px 56px 0;}
    .online-list-tag p{
        font-size: 1.0625rem/* 17 */;
        margin-bottom: 12px;
        padding: 7px 12px;
        margin-right: 25px;
    }
    .online-media-list ul li > p{
        font-size: 1.125rem/* 18 */;
        margin-top: 30px;
        margin-left: 56px;
    }
    .online-ad-list{
        margin-top: 40px;
        padding: 45px 56px 0;
    }
    .online-ad-list dl{margin-bottom: 75px;}
    .online-ad-list dl:nth-child(3),
    .online-ad-list dl:nth-child(4){margin-bottom: 0;}
    .online-ad-list dl dt::after{
        width: 176px;
        margin-top: 2px;
        margin-bottom: 12px;
    }
    .online-ad-list dl dd{font-size: 1rem;}


    /* sub4 offline */


    .offline-media{
        background-image: url(../images/offline-media-bg-tablet.png);
        background-position: 100% 100%;
        padding-top: 120px;
    }
    .offline-media-title-wrap{
        padding-top: 18.06640625vw/* 185 */;
        padding-left: 4vw/* 40 */;
        padding-bottom: 8.7891vw/* 90 */;
        background: url(../images/offline-media-title-line-tablet.png) 100% 0 no-repeat;
    }
    .offline-media-title{width: 100%;}
    .offline-media-title h3{width: 81.3%/* 553 */;}
    .offline-media-title p{margin-top: 36px;}
    .offline-media-list{padding: 50px 0 30px;}
    .offline-media-list h4{font-size: 2.875rem/* 46 */;}
    .offline-slide{margin-top: 50px;}
    .offline-media-list ul{width: 180.8594%/* 1852 */;}
    .offline-media-list ul li{width: 154px;}
    .offline-icon-box{height: 115px;}
    .offline-icon-box span{width: 115px;height: 72px;}
    .offline-icon-box span.box-a{height: 79px;}
    .offline-icon-box span.box-b{height: 64px;}
    .offline-icon-box span.box-c{height: 88px;}
    .offline-list-txt{
        height: 62px;
        padding: 7px 0px;
        font-size: 1.25rem/* 20 */;
    }


}

/* 최적화 */

@media screen and (max-width:930px) {

    /* sub1 contents */
    .v-icon-list li{margin-right: 1%;}

}

@media screen and (max-width:900px) {

    /* sub1 contents */
    .story-con{background-size: contain;}
    .v-icon-list li{padding: 50px 20px 0;}
    .design-bottom ul li{width: 250px;height: 250px;padding-top: 38px;}
    .design-bottom ul li p{font-size: 1rem;margin-top: 8px;}

    /* sub2 marketing */
    .integrate{background-image: url(../images/integrate-bg2-900.png);}
}

@media screen and (max-width:870px) {

    /* sub2 marketing */
    .msocial-txt h5{font-size: 2.7rem;}
    .synergy-box{width: 90%;}

    /* sub4 offline */
    .offline-media-list ul li{width: 140px;}
}

@media screen and (max-width:830px) {

    /* sub1 contents */
    .story-txt{width: 60%;}
    .story-txt p{margin-bottom: 10px;}
    .v-icon-list li{padding-top: 36px;}
    .design-bottom ul{flex-direction: column;}
    .design-bottom ul li{margin-top: 50px;width: 300px;height: 300px;padding-top: 50px;}
    .design-bottom ul li:first-child{margin-top: 0;}
    .design-bottom ul li p{font-size: 1.0625rem;margin-top: 15px;}

    /* sub2 marketing */
    .msocial-txt strong::after{width: 140%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -3.7rem;}

    /* sub4 offline */
    .offline-media-title-wrap{width: 80%;}
    .offline-media-title{width: 90%;}
}

@media screen and (max-width:800px) {

    /* sub2 marketing */
    .m-social ul li{flex-direction: column;margin-top: 50px;}
    .m-social ul li figure{margin-right: 0;width: 80%;}
    .m-social ul li:nth-child(even){flex-direction: column;}
    .m-social ul li:nth-child(even) figure{margin-left: 0;}
    .msocial-txt{width: 80%;margin-top: 30px;}
    .msocial-txt h5{font-size: 3.4rem;}
    .msocial-txt strong::after{width: 180%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -6.7rem;}

    /* sub4 offline */
    .offline-media-list ul{width: 220%;}
    
}

@media screen and (max-width:768px) {

    /* sub1 contents */
    .story-con{padding-bottom: 18px;}
    .story-txt{width: 58%;}
    .v-icon-list{margin-top: 0;flex-direction: column;}
    .v-icon-list li{margin-top: 30px;margin-right: 0;}

    /* sub2 marketing */
    .synergy-box > div p{font-size: 1.125rem;}
    .brand-booster-con, .performance-booster-con{top: 13%;}
    .synergy-box > div strong{font-size: 2.3rem;}
    .synergy-box > div strong b::after{height: 1.7rem;margin-top: -2.6rem;}
    
    /* sub4 offline */
    .offline-media{background-size: 70%;}
    .offline-media-title-wrap{background-position: 120% -20%;}

}


@media screen and (max-width:700px) {

    /* sub1 contents */
    .respon-700{display: block;}
    .story-con{background: none;width: 100%;padding-top: 80px;padding-bottom: 0;}
    .story-con-bg{
        width: 98%;
        background: url(../images/storytelling-tv-mobile.png) 0 100%/contain no-repeat;
        padding-top: 0;
        padding-right: 0px;
        position: relative;
    }
    .story-con-bg::before{
        content: "";
        display: block;
        padding-top: 58.3%;
    }
    .story-con-bg strong{
        display: block;
        font-size: 1.625rem/* 26 */;
        color: #27B2F3;
        font-family: 'Cafe24 Ohsquare';
        width: 50%;
        position: absolute;
        top: 33.4vw;
        right: 0px;
    }
    .story-txt{
        padding: 40px 50px 40px;
        background: #17148C;
        width: 100%;
    }
    .story-txt p{
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 1rem;
    }
    .story-txt p:first-child{margin-top: 0;}
    .contents-video-wrap > p{width: 80%;}
    .design-bottom > p{width: 94%;}

    /* sub2 marketing */
    .synergy-box{width: 96%;}
    .synergy-box > div{margin: 0 10px;}
}

@media screen and (max-width:650px) {

    /* sub2 marketing */
    .integrate-txt{width: 80%;}
    .integrate-txt-box{width: 82.7%;}
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 2.3rem;}
    .synergy-box > div strong{font-size: 2.6rem;}
    .synergy-box > div strong b::after{height: 1.8rem;margin-top: -2.9rem;}
    .synergy-box > div p{font-size: 1.25rem;}
    .brand-booster-con, .performance-booster-con{top: 15%;}
    .synergy{background-image: url(../images/synergy-bg1-mobile.png);background-position: 90% 252px;background-size: 38%;padding: 55px 0 80px;}
    .synergy-con{flex-direction: column;margin-top: 36px;}
    .synergy-con span{width: 45%;margin-top: 0;}
    .synergy-con span::before{padding-top: 91.5%;}
    .synergy-box{width: 70%;flex-direction: column;}
    .synergy-box > div{width: 89.4%;}
    .synergy-box > .performance-booster{margin-top: 30px;}

    /* sub4 offline */
    .offline-slide{margin-top: 40px;padding: 0px 10px;}
    .offline-media-list ul{width: 80%;flex-wrap: wrap;margin: 0 auto;}
    .offline-media-list ul li{margin: 20px 4% 0;width: 154px;}
    .offline-media-list ul li:nth-child(1),
    .offline-media-list ul li:nth-child(2){margin-top: 0;}
    .offline-media-list ul li:nth-child(1),
    .offline-media-list ul li:nth-child(4n):nth-child(-n+8),
    .offline-media-list ul li:nth-child(9)
    {background: #7B7DEE;}
    .offline-media-list ul li:nth-child(2),
    .offline-media-list ul li:nth-child(3n):nth-child(-n+6),
    .offline-media-list ul li:nth-child(7),
    .offline-media-list ul li:nth-child(10)
    {background: #B4B6F3;}
    .btn-wrap{display: none;}
}

@media screen and (max-width:600px) {

    /* sub1 contents */
    .story-con-bg strong{top: 31vw;}
    /* sub4 offline */
    .offline-media-title-wrap{background-position: 140% -30%;}
}

@media screen and (max-width:540px) {

    /* sub1 contents */
    .story-con-bg strong{font-size: 1.5rem;}

    /* sub2 marketing */
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 2rem;}
    .m-process-info-txt p, .m-social-info-txt p{font-size: 1.1rem;}

    /* sub3 online */
    .online-list-title{padding: 0 50px 0 30px;}
    .online-list-title h4{font-size: 2.8rem;line-height: 1.2;}
    .online-icon-wrap{width: 78px;}
    .online-icon{margin-bottom: 10px;}
    .online-list-tag{padding: 12px 36px 0;}
    .online-media-list ul li > p{margin-left: 36px;}
    .online-ad-list{
        margin-top: 50px;
        padding: 40px;
        padding-bottom: 0;
        flex-direction: column;
    }
    .online-ad-list dl{margin-bottom: 40px;width: 87%;}
    .online-ad-list dl:nth-child(3){margin-bottom: 40px;}
    .online-ad-list dl:nth-child(4){margin-bottom: 0;}

    /* sub4 offline */
    .offline-media-title-wrap{background-position: 150% -40%;}
}

@media screen and (max-width:500px) {

    /* sub1 contents */
    .story-con-bg strong{font-size: 1.3rem;width: 56%;}
    .design-top span{width: 380px;height: 380px;}

    /* sub2 marketing */
    .msocial-txt h5{font-size: 2.8rem;}
    .msocial-txt strong::after{width: 150%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -4.7rem;}
    .synergy{background-position: 90% 222px;}
    .synergy-box{width: 80%;}
    .synergy-head p{width: 64%;margin-right: 10px;}

    /* sub3 online */
    .online-list-title{padding-right: 30px;}
    .online-list-title h4{font-size: 2.5rem;}
    .online-media-list ul li > p{width: 60%;}

    /* sub4 offline */
    .offline-media-title-wrap{width: 90%;}
}

@media screen and (max-width:480px) {

    /* sub2 marketing */
    .synergy-head p{width: 70%;}

    /* sub4 offline */
    .online-list-title{padding: 0 28px 0 28px;}
    .offline-media-title-wrap{width: 100%;}
    .offline-media-list ul li{margin: 20px 0 0;}
}


@media screen and (max-width:450px) {

    /* sub3 online */
    .online-list-tag{padding: 12px 28px 0;}
}

/* mobile */

@media screen and (max-width:425px) {

    /* sub1 contents */

    .storytelling{
        padding: 24.7vw 0 0 0;
        background: #442DC3 url(../images/storytelling-bg-mobile.png) 100% 74px no-repeat;
        background-size: 265px 239px;
    }
    .story-con{
        width: 100%;
        padding: 0;
        background: none;
    }
    .story-con-bg{
        width: 96%;
        background: url(../images/storytelling-tv-mobile.png) 0 100%/contain no-repeat;
    }
    .story-con-bg::before{
        padding-top: 72%;
    }
    .story-con-bg strong{
        display: block;
        font-size: 1.1875rem/* 19 */;
        color: #27B2F3;
        font-family: 'Cafe24 Ohsquare';
        width: 52%;
        top: 38vw;
    }
    .story-txt{
        padding: 30px 50px 40px;
        background: #17148C;
        width: 100%;
    }
    .story-txt p{
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 0.875rem/* 14 */;
    }
    .story-txt p:first-child{margin-top: 0;}

    .contents-video{padding: 50px 0;}
    .contents-video-wrap h4{font-size: 2.625rem/* 42 */;}
    .contents-video-wrap > p{
        width: 80vw/* 340 */;
        margin-top: 15px;
        font-size: 1rem;
    }

    .contents-design{padding-top: 90px;}
    .design-top span{width: 304px;height: 304px;}
    .design-top h3{font-size: 3.125rem/* 50 */;margin-top: 25px;}
    .design-top h3::after{
        width: 268px;
        height: 66px;
        margin-top: -44px;
    }
    .design-top strong{font-size: 1.375rem/* 22 */;}
    .design-top p{margin: 20px auto 0;width: 92%;}
    .design-top p:nth-of-type(1){margin-top: 30px;}
    .design-bottom{margin-top: 90px;}
    .design-bottom h4{font-size: 2.625rem/* 42 */;}
    .design-bottom > p{margin-top: 25px;font-size: 1rem;width: 91.4%/* 352 */;}
    .design-bottom ul{margin-top: 70px;}


    /* sub2 marketing */


    .integrate{
        padding-top: 120px;
        padding-bottom: 40px;
        background: #000 url(../images/integrate-bg2-mobile.png) 100% 32%/349px 317px no-repeat;
    }
    .integrate-txt{
        width: 95.3%/* 405 */;
        padding: 56px 0 0 5%/* 20 */;
        background: url(../images/integrate-bg1-mobile.png) 0 0/140px 272px no-repeat;
    }
    .integrate-txt h3{font-size: 2.25rem/* 36 */;}
    .integrate-txt strong{font-size: 1rem;}
    .integrate-txt-box{width: 76%;}
    .integrate-txt-box p{font-size: 0.875rem/* 14 */;}

    .m-process-info, .m-social-info{background: #442DC3;width: 48%;}
    .m-process-info-txt, .m-social-info-txt{padding-top: 50px;padding-bottom: 110px;top: 120px;position: sticky;}
    .m-process-info-bg, .m-social-info-bg{
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        background: url() 50% 100%/cover no-repeat;
    }
    .m-process-info-bg{left: 0;}
    .m-social-info-bg{right: 0;}
    .m-process-info-bg{background-image: url(../images/marketing-slide-bg1-tablet.png);}
    .m-social-info-bg{background-image: url(../images/marketing-slide-bg2-tablet.png);}
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 1.75rem/* 28 */;}
    .m-process-info-txt p, .m-social-info-txt p{margin-top: 16px;font-size: 0.875rem/* 14 */;width: 74%;}

    .m-process, .m-social{width: 52%;}
    .m-process{margin-left: 48%;}
    .m-social{margin-right: 48%;}

    .process-box-wrap{width: 82%/* 182 */;}
    .process-box{padding: 26px 14px;border-width: 4px !important;}
    .process-box strong{font-size: 1.25rem/* 20 */;}
    .process-box p{font-size: 0.875rem/* 14 */;margin-top: 3px;}
    .process-box-n1{width: 100%;}
    .process-box-n2{border-width: 4px;width: 100%;}
    .process-box-n2:nth-of-type(2){border-width: 4px;}
    .m-social{padding: 50px 0;}
    .m-social ul li figure{width: 90%;}
    .msocial-txt{width: 90%;margin-top: 22px;}
    .m-social ul li{margin-top: 25px;}
    .msocial-txt h5{font-size: 2.75rem/* 44 */;}
    .msocial-txt strong{margin-top: 2px;}
    .msocial-txt strong::after{margin-top: 5px;width: 130%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -3.2rem;}
    .msocial-txt i{font-size: 1rem;}

    .synergy{background-image: url(../images/synergy-bg1-mobile.png);background-position: 90% 12%;background-size: 162px 296px;padding: 55px 0 80px;}
    .synergy h3{width: 83.5%;}
    .synergy-head{margin-top: -10px;}
    .synergy-head h3{width: 72%;}
    .synergy-head p{width: 100%;font-size: 1rem;margin: 7px auto 0;}
    .synergy-box{width: 100%;}
    .synergy-box > div{width: 80%;}
    .synergy-box > div strong{font-size: 2.3rem;}
    .synergy-box > div strong b::after{
        height: 1.7rem;
        margin-top: -2.6rem;
    }
    .synergy-box > div p{font-size: 1.125rem;}
    


    /* sub3 online */


    .online-media{
        background-image: url(../images/online-media-bg-mobile.png);
        background-size: 359px 341px;
        padding: 52.23vw/* 222 */ 4.705882352941176vw/*  */;
    }
    .online-media-title{width: 100%;}
    .online-media-title::before,
    .online-media-title::after{height: 74px;left: 38%;}
    .online-media-title::before{top: -100px;}
    .online-media-title::after{bottom: -100px;}
    .online-media-title h3{width: 100%;}
    .online-media-title strong{margin-top: 16px;font-size: 1.125rem/* 18 */;padding-right: 10px;}
    .online-media-title p{margin-top: 18px;font-size: 1rem;width: 71.3vw/* 303 */;}
    .online-media-list{padding-top: 50px;background-image: url(../images/online-media-list-bg-mobile.png);background-size: 224px 185px;}
    .online-list-title{padding: 0 20px;}
    .online-media-list ul li{margin-top: 60px;}
    .online-list-tag{padding: 18px 20px 4px;}
    .online-list-tag p{
        font-size: 1rem;
        padding: 7px 14px;
        margin-bottom: 14px;
        margin-right: 20px;
    }
    .online-media-list ul li > p{
        font-size: 1rem;
        margin-left: 20px;
        width: 78%;
    }
    


    /* sub4 offline */


    .offline-media{
        background-image: url(../images/offline-media-bg-mobile.png);
        background-position: 50% 100%;
        background-size: contain;
        padding-top: 100px;
    }
    .offline-media-title-wrap{
        width: 100%;
        padding-top: 22.58823529411765vw/* 96 */;
        padding-left: 0;
        padding-bottom: 40.7059vw/* 173 */;
        background-image: url(../images/offline-media-title-line-mobile.png);
        background-position: 100% 0;
        background-size: 134px 81px;
    }
    .offline-media-title h3{width: 100%;}
    .offline-media-title p{margin-top: 25px;font-size: 1rem;}
    .offline-media-list{padding-bottom: 80px;}
    .offline-media-list h4{font-size: 2.625rem/* 42 */;}
    .offline-media-list ul{width: 100%;}
    .offline-list-txt{font-size: 1.125rem;}
    

}

/* 최적화 */

@media screen and (max-width:380px) {
    /* sub3 online */
    .online-list-title h4{font-size: 2.3rem;}
    .online-icon{width: 34px;height: 34px;}
    .online-media-list ul li:nth-child(1) span{width: 48px;}
    .online-icon-wrap{width: 72px;}
}

@media screen and (max-width:375px) {

    /* sub2 marketing */
    .integrate-txt h3:nth-of-type(1){line-height: 1.2;}
    .msocial-txt h5{font-size: 2.5rem;}

    /* sub4 offline */
    .offline-media-list ul li{width: 140px;}
    .offline-slide{padding: 0;}
}

@media screen and (max-width:360px) {

    /* sub1 contents */
    .story-con-bg strong{top: 34vw;font-size: 1.125rem;}

    /* sub2 marketing */
    .m-process-info-txt strong, .m-social-info-txt strong{font-size: 1.5rem;}
    .m-process-info-txt strong b, .m-social-info-txt strong b{margin-top: 6px;}
    .m-social ul li figure{width: 100%;}
    .msocial-txt{width: 100%;}
    .synergy{background-position: 94% 11.5%;}

    /* sub3 online */
    .online-list-title{padding: 0 10px;}
    .online-list-tag{padding: 18px 10px 4px;}

    /* sub4 offline */
    .synergy-box > div{width: 86%;}

    
}

@media screen and (max-width:340px) {

    /* sub1 contents */
    .story-con-bg strong{font-size: 1rem;}
    .design-top span{width: 290px;height: 290px;}

    /* sub2 marketing */
    .msocial-txt h5{font-size: 2.3rem;}
    .msocial-txt strong::after{width: 120%;}
    .m-social ul li:nth-child(even) .msocial-txt strong::after{margin-left: -2.5rem;}
    .brand-booster-con, .performance-booster-con{top: 12%;}
    .synergy-box > div strong{font-size: 2.3rem;}
    .synergy-box > div strong b::after{
        height: 1.6rem;
        margin-top: -2.6rem;
    }
    .synergy-box > div p{margin-top: 20px;font-size: 1.2rem;}

    /* sub3 online */
    .online-list-title h4{font-size: 2.1rem;}
    .online-list-tag p{padding: 7px 10px;font-size: 0.95rem;}

    /* sub4 offline */
    .synergy-box > div{width: 89%;}
    
}