@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arsenal&display=swap');

*{margin: 0;padding: 0;}
html, body{font-size: 14px; color: #222;font-family: 'Noto Sans KR', sans-serif;letter-spacing: -0.03rem;}
h1,h2,h3,h4,h5,h6{font-size: 100%;}
ol,ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img,video{vertical-align: bottom;}
address{font-style: normal;}
table{border-collapse: collapse;}
button{background: transparent; border: none;}
.serif{font-family: 'Nanum Myeongjo', serif;}
.en-font{font-family: 'Arsenal', sans-serif;}

wrap{max-width: 100%}

#bg{height: 100vh;}
section{
    background: #fff;position: relative;z-index: 10;
    box-shadow: 0px -30px 30px rgba(67, 77, 71, 0.3);}

/** 헤더 탑 -------------------------*/
#top-wrap{color: #fff;width: 100%;z-index: 100;
    padding: 14px 20px;position: fixed;opacity: 0.9;
    background: #78817c;overflow: hidden;
    height: 50px;box-sizing: border-box;}
.top-left a{display: block;transition: 0.2s;}
.back-btn{width: 15px;height: 15px;float: left;
    background: url(../img/back_white.png) no-repeat;
    background-size: contain;margin: 4.4px 0 0 0;}
.top-left h4{float: left;
    font-size: 1.05rem;font-weight:400;}
.top-right{float: right;}
.top-right h4{font-size: 1.05rem;font-weight:400;}
.top-left a:hover{opacity: 0.5;}
/** 헤더 바텀 -------------------------*/
#bottom-wrap{z-index: 100;
    position: fixed;right: 20px;bottom: 20px;}
.top-btn{cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    background: url(../img/top.png) no-repeat center;
    width: 40px;height: 40px;background-size: contain;}


/** 메인 풀페이지 -------------------------*/
#main-wrap{position: fixed;z-index: 1;
    width:100%;height:100vh;overflow:hidden;}
.main-bg-color{
    background: #d7e3dc;width: 100%;height: 75vh;}
.main-contents{
    width: 1400px;margin: auto;
    position: relative;height: 100vh;}
/** 메인 텍스트박스 -------------------------*/
.main-text-box{z-index: 1;opacity: 0;
    animation: load-title 1s 0.2s forwards;
    position: absolute;top: 22%;left: -10%;}
@keyframes load-title{to{left: 0;opacity: 1;}}
.main-text-box .title h2{
    font-size: 2.5rem;font-weight: 700;}
.main-text-box .title h4{margin-top: 0.8rem;
    font-size: 1.1rem;font-weight: 500;
    color: #555; margin-left: 3px;}
.tag{margin-top: 6rem;}
.tag li{line-height: 1.6rem;}
.work{margin-top: 2rem;line-height: 1.6rem;}
.work .left{float: left;width: 80px;}
button{transition: 0.2s;
    margin-top: 4rem;background: #222;
    width: 300px;height: 50px;color: #fff;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;letter-spacing: 0.03rem;}
button a{line-height: 50px;
    width: 100%;display: block;height: 50px;}
button:hover{opacity: 0.9}
/** 메인 이미지 -------------------------*/
.main-img{position: absolute;top: 30%;
    animation: load-img 1.5s 0.2s forwards;
    width: 1400px;left: 50%;opacity: 0;}
@keyframes load-img{to{left: 30%;opacity: 1;}}
.main-img img{width: 100%;}


/*## 타이틀/내용 공통 css*/
.cont-h2{font-family: 'Nanum Myeongjo', serif;
    font-size: 2.5rem;font-weight: 500;color:#050505;}
.cont-p-max{margin-top: 30px;line-height: 1.9rem;
    font-size: 1.1rem;color: #888;font-weight: 400;}
.grid-1200{
    width: 1200px;margin: auto;padding-top: 200px;}
.detail{margin: 80px 0 50px;
    width: 1200px;border-top: 1px solid #ccc;}
.detail-h2{margin: 20px 0 5px;letter-spacing: 0.03rem;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.2rem;color: #444;font-weight: 800;}
.detail-p{color: #888;}



/** overview/typography-------------------------*/
.typography{margin-top: 200px;}
.font{font-weight: bold;font-size: 1.8rem;
    margin-top: 10px;color: #555;}
.typography ul li+li{margin-top: 30px;}

/** 그리드-------------------------*/
#grid-wrap{margin-top: 200px;background: #242a27;
    width: 100%;height: 830px;overflow: hidden;
    box-shadow: 0px 0px 500px #96a39c;}
#grid-wrap .grid-1200{padding: 100px 0 100px;
    height: 830px;box-sizing: border-box;}
.grid{position: relative;}
.grid h2{color: #e8f0ec;}.grid ul{color: #abb1ae;}
.grid img{position: absolute;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3);}
.gridimg01{width: 670px;top: 40%;}
.gridimg02{width: 410px;right: 0;top: -25%;}

/** web - main wrap-------------------------*/
.web-main-video{box-sizing: border-box;
    width: 1200px;border: 10px solid transparent;
    border-radius: 25px;
    box-shadow: 0px 40px 500px rgba(47, 54, 50, 0.7);
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #fff, #999, #ddd, #eee);
    background-origin: border-box;
    background-clip: content-box, border-box;}

/** web - sub wrap-------------------------*/
#web-sub-wrap{
    position: relative;margin-top: 50px}
.sub-relative{position: relative;}
.sub-imgbox01 >img{
    box-shadow: 20px 20px 50px rgba(47, 54, 50, 0.4);}
.sub-imgbox01 .img01{width: 500px;margin-top: 10%;}
.sub-imgbox01 .img02{margin-top: -15%;
    width: 370px;position: absolute;right: 0;}
.sub-imgbox01 .img03{right: 8%; margin-top: -10%;
    width: 440px;position: absolute;}
.slide{margin-top: 200px;}
.sub-imgbox02{padding-bottom: 1150px;position: relative;}
.sub-imgbox02>img{
    box-shadow: 20px 20px 50px rgba(47, 54, 50, 0.4);}
.sub-imgbox02 .img01{position: absolute;
    box-shadow: none;z-index: 1;left: 1%;
    margin-top: 24%;}
.sub-imgbox02 .img03{margin-top: -15%;right: 0;
    width: 650px;position: absolute;}
.sub-imgbox02 .img04{left: 15%;
    position: absolute;bottom: 0;width: 600px;}
.sub-imgbox02 .line{width: 250px;height: 195px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    position: absolute;right: 12.3%;bottom: 5%;}

/** pcimg-wrap -------------------------*/
#pcimg-wrap{margin-top: 250px;
    background: url(../img/pcimg-bg.png) no-repeat
        center;height: 1300px;overflow: hidden;
    background-size: cover;position: relative;
}
#pcimg-wrap img{box-sizing: border-box;
    box-shadow: 20px 20px 50px rgba(47, 54, 50, 0.4);
    border: 8px solid transparent;
    border-radius: 25px;width: 600px;
    box-shadow: 0px 40px 500px rgba(47, 54, 50, 0.7);
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #fff, #999, #ddd, #eee);
    background-origin: border-box;
    background-clip: content-box, border-box;}
#pcimg-wrap img+img{margin-left: 20px;}
.pcimg-top{left: -10%;position: absolute;
    margin-top: 100px;}
.pcimg-bottom{right: -10%;position: absolute;
    margin-top: 550px;}


/** 아이패드비디오 wrap-------------------------*/
#ipad-wrap{margin-top: -300px;
    position: relative;padding-bottom: 800px;}
.ipad-video{box-sizing: border-box;
    width: 950px;border: 10px solid transparent;
    border-radius: 25px;margin-top: 80px;
    box-shadow: 0px 40px 500px rgba(47, 54, 50, 0.7);
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #fff, #999, #ddd, #eee);
    background-origin: border-box;
    position: absolute;left: 50%;transform: translateX(-50%);
    background-clip: content-box, border-box;}

/** 모바일 wrap-------------------------*/
#phone-wrap{margin-top: 50px;
    position: relative;overflow: hidden;}
.mobile-img{margin-top: -50px;
    position: relative;padding-bottom: 3480px;}
.mobile-img>img{
    box-sizing: border-box;position: absolute;
    width: 290px;border: 8px solid transparent;
    border-radius: 25px;margin-top: 80px;
    box-shadow: 0px 40px 500px rgba(47, 54, 50, 0.7);
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #fff, #999, #ddd, #eee);background-origin: border-box;
    background-clip: content-box, border-box;}
.mobile-img .img02{width: 270px;top: 5%;
    border: none;border-radius: 25px 25px 0 0;
    left: 50%;transform: translateX(-50%);}
.mobile-img .img03{box-shadow: none;top: 5%;
    left: 50%;transform: translateX(-50%);}
.mobile-img .img04{right: 0;top: 5%;}
.mobile-img .img05{top: 30%;}
.mobile-img .img06{top: 46%;
    left: 50%;transform: translateX(-50%);}
.mobile-img .img07{right: 0;top: 37%;}
.mobile-img .img08{box-shadow: none;border: none;
    border-radius: 0px;background-image:none;
    bottom: 0;transform: translateX(-50%);
    width:1200px;left:53%;}
.bot-btn{position: absolute;animation: none;
    left: 50%;transform: translateX(-50%);top: 79%;}
@keyframes bot-btn{
    to{left: 50%;transform: translateX(-50%);}}
#phone-wrap .img09{width: 100%;
    position: absolute;top: 33.2%;z-index: -1;}


.media-over-840{display: none;}
.media-grid{display: none;}
.media-main{display: none;}
.media-sub{display: none;}





/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (max-width:1450px){
/** 메인 풀페이지 -------------------------*/
    .main-bg-color{height: 75vh;}
    .main-contents{width: 100%;}
/** 메인 텍스트박스 -------------------------*/
    .main-text-box{top: 22%;left: -17%;}
    @keyframes load-title{to{left: 7%;opacity: 1;}}
    button{width: 260px;}
/** 메인 이미지 -------------------------*/
    .main-img{top: 35%;width: 1300px;left: 57%;}
    @keyframes load-img{to{left: 37%;opacity: 1;}}}


@media screen and (max-width:1250px){
/*## 타이틀/내용 공통 css*/
    .grid-1200{width: 1000px;padding-top: 200px;}
    .detail{margin: 80px 0 50px;width: 1000px;}
/** 그리드-------------------------*/
    #grid-wrap{margin-top: 200px;height: 800px;}
    #grid-wrap .grid-1200{padding: 100px 0 100px;
        height: 800px;}
    .gridimg01{width: 500px;top: 40%;}
    .gridimg02{width: 350px;top: -18%;}
/** web - main wrap-------------------------*/
    .web-main-video{width: 1000px;}
/** web - sub wrap-------------------------*/
    .sub-imgbox01 .img01{width: 400px;margin-top: 15%;}
    .sub-imgbox01 .img02{margin-top: -15%;
    width: 270px;right: 0;}
    .sub-imgbox01 .img03{right: 8%; margin-top: -10%;
    width: 340px;}
    .slide{margin-top: 200px;}
    .sub-imgbox02{padding-bottom: 1000px;}
    .sub-imgbox02 .img01{width: 550px;margin-top: 24.5%;}
    .sub-imgbox02 .img03{margin-top: -15%;
    width: 550px;right: 0;}
    .sub-imgbox02 .img04{left: 13%;width: 500px;}
    .sub-imgbox02 .line{width: 240px;height: 195px;
    right: 12.3%;bottom: 5%;}
/** pcimg-wrap -------------------------*/
    #pcimg-wrap{margin-top: 250px;height: 1150px;}
    #pcimg-wrap img{width: 500px;}
    #pcimg-wrap img+img{margin-left: 15px;}
    .pcimg-bottom{margin-top: 490px;}
    .pcimg-top{left: -10%;margin-top: 100px;}
    .pcimg-bottom{right: -10%;margin-top: 490px;}
/** 아이패드비디오 wrap-------------------------*/
    #ipad-wrap{margin-top: -300px;padding-bottom: 690px;}
    .ipad-video{width: 800px;}
/** 모바일 wrap-------------------------*/
    .mobile-img .img08{width:1000px;}}


@media screen and (max-width:1150px){
    .main-text-box{top: 22%;left: -15%;}
    @keyframes load-title{to{left: 5%;opacity: 1;}}
    .main-img{top: 35%;width: 1300px;left: 59%;}
    @keyframes load-img{to{left: 39%;opacity: 1;}}}


@media screen and (max-width:1050px){
/** 메인 텍스트박스 -------------------------*/
    .main-text-box{top: 20%;left: -15%;}
    .main-text-box .title h2{font-size: 2.3rem;}
    .main-text-box .title h4{
        margin-top: 0.5rem;font-size: 1rem;}
    .tag{margin-top: 5rem;}
    .work{margin-top: 1.5rem;}
    button{margin-top: 3rem;}
/** 메인 이미지 -------------------------*/
    .main-img{top: 48%;width: 1000px;left: 45%;}
    @keyframes load-img{to{left: 25%;opacity: 1;}}
/*## 타이틀/내용 공통 css*/
    .cont-h2{font-size: 2rem;}
    .cont-p-max{margin-top: 25px;font-size: 1.1rem;}
    .grid-1200{width: 800px;padding-top: 200px;}
    .detail{margin: 80px 0 50px;width: 800px;}
    .detail-h2{margin: 20px 0 5px;font-size: 1.2rem;}
/** overview/typography-------------------------*/
    .font{font-size: 1.6rem;}
    .typography ul li+li{margin-top: 25px;}
/** 그리드-------------------------*/
    #grid-wrap{margin-top: 200px;height: 550px;}
    #grid-wrap .grid-1200{padding: 50px 0 50px;
        height: 550px;}
    .gridimg01{width: 400px;top: 40%;}
    .gridimg02{width: 250px;top: -18%;}
/** web - main wrap-------------------------*/
    .web-main-video{width: 800px;}
/** web - sub wrap-------------------------*/
    .sub-imgbox01 .img01{width: 300px;margin-top: 10%;}
    .sub-imgbox01 .img02{margin-top:-23%;width:210px;}
    .sub-imgbox01 .img03{margin-top: -18%;width: 260px;}
    .slide{margin-top: 130px;}
    .sub-imgbox02{padding-bottom: 660px;}
    .sub-imgbox02 .img01{left: 10%;
        width:400px;margin-top:15%;}
    .sub-imgbox02 .img03{margin-top: -21%;width: 400px;}
    .sub-imgbox02 .img04{left: 13%;width: 400px;}
    .sub-imgbox02 .line{width: 190px;height: 120px;
    right: 11.5%;bottom: 6%;}
/** pcimg-wrap -------------------------*/
    #pcimg-wrap{margin-top: 250px;height: 1000px;}
    #pcimg-wrap img{width: 400px;border-radius: 20px;}
    .pcimg-top{margin-top: 100px;}
    .pcimg-bottom{margin-top: 425px;}
/** 아이패드비디오 wrap-------------------------*/
    #ipad-wrap{margin-top:-300px;padding-bottom:555px;}
    .ipad-video{width: 650px;margin-top: 60px;}
/** 모바일 wrap-------------------------*/
    .mobile-img{padding-bottom: 2400px;}
    .mobile-img img{width: 210px;border-radius:20px;}
    .mobile-img .img01{top: -1%}
    .mobile-img .img02{width: 190px;top: 5%;
        border-radius: 20px 20px 0 0;
    left: 50%;transform: translateX(-50%);}
    .mobile-img .img05{top: 30%;}
    .mobile-img .img06{top: 46%;
    left: 50%;transform: translateX(-50%);}
    .mobile-img .img07{right: 0;top: 36%;}
    .mobile-img .img08{width:800px;}
    .bot-btn{top: 78%;}
    #phone-wrap .img09{top: 37.5%;}}


@media screen and (max-width:840px){
    .main-bg-color{height: 80vh;}
/** 메인 텍스트박스 -------------------------*/
    .main-text-box{top: 20%;left: -10%;}
    @keyframes load-title{to{left: 10%;opacity: 1;}}
    .main-text-box .title h2{font-size: 2rem;}
    .tag{margin-top: 3.5rem;}
    .work{margin-top: 1rem;}
    button{margin-top: 2rem;}
/** 메인 이미지 -------------------------*/
    .main-img{transform: translateX(-50%);
        top: auto;width: 90%;left: 53%;bottom: -16%;}
    @keyframes load-img{to{opacity: 1;left: 53%;transform: translateX(-50%);bottom: 6%;}}
/*## 타이틀/내용 공통 css*/
    .cont-h2{font-size: 1.8rem;}
    .cont-p-max{margin-top: 20px;font-size: 1.08rem;}
    .grid-1200{width: 90%;padding-top: 200px;}
    .detail{margin: 60px 0 50px;width: 100%;}
    .detail-h2{margin: 20px 0 5px;font-size: 1.2rem;}
/** overview/typography-------------------------*/
/*    .typography{margin-top: 200px;}*/
    .max-over{display: none;}
    .media-over-840{display: block;}
    .font{font-size: 1.5rem;}
    .typography ul li+li{margin-top: 20px;}
/** 그리드-------------------------*/
    #grid-wrap{margin-top: 200px;height: 65vw;}
    #grid-wrap .grid-1200{padding: 50px 0 50px;
        height: 65vw;}
    .gridimg01{width: 50%;top: 40%;}
    .gridimg02{width: 32%;top: 50%;
    transform: translateY(-50%);}
/** web - main wrap-------------------------*/
    .web-main-video{
        border: 8px solid transparent;
        border-radius: 22px;
        width: 100%;}
/** web - sub wrap-------------------------*/
    #web-sub-wrap{margin-top: 30px}
    .sub-imgbox01 .img01{width:44%;margin-top: 8%;}
    .sub-imgbox01 .img02{margin-top:-25%;width:31%;}
    .sub-imgbox01 .img03{margin-top: -15%;width: 36%;}
    .slide{margin-top: 130px;}
    .sub-imgbox02{padding-bottom: 110%;}
    .sub-imgbox02 .img01{left: 0.5%;
        width:55%;margin-top:40%;}
    .sub-imgbox02 .img03{margin-top: 0;width: 56%;}
    .sub-imgbox02 .img04{left: 15%;width: 45%;}
    .sub-imgbox02 .line{width: 190px;height: 115px;
    right: 12.5%;bottom: 2%;}
/** pcimg-wrap -------------------------*/
    #pcimg-wrap{margin-top: 230px;height: 110vw;}
    #pcimg-wrap img{
        border: 6px solid transparent;
        width: 40%;border-radius: 16px;
    }
    #pcimg-wrap img+img{margin-left: 0;}
    .pcimg-top{margin-left:;position: relative;
        margin-top: 80px;width: 100%;left: 0;}
    .pcimg-top img:nth-child(1){
        position: absolute;left: -10%;}
    .pcimg-top img:nth-child(2){
        position: absolute;left: 32%;}
    .pcimg-bottom{position: relative;
        margin-top: 43%;width: 100%;right: 0;}
    .pcimg-bottom img:nth-child(1){
        position: absolute; right: 32%;}
    .pcimg-bottom img:nth-child(2){
        position: absolute;right: -10%;}
/** 아이패드비디오 wrap-------------------------*/
    #ipad-wrap{margin-top:-330px;padding-bottom:60%;}
    .ipad-video{border-radius: 18px;
        border: 7px solid transparent;
        width: 70%;margin-top: 50px;}
/** 모바일 wrap-------------------------*/
    #phone-wrap{margin-top: 30px;}
    .mobile-img{padding-bottom: 420%;}
    .mobile-img img{border: 6px solid transparent;
        width: 35%;border-radius:20px;}
    .mobile-img .img01{top: 0;left: 5%;}
    .mobile-img .img02{width: 35%;top: 7.5%;right: 5%;
        left: auto;transform: translateX(0);}
    .mobile-img .img03{top: 7.5%;right: 5%;
    left: auto;transform: translateX(0);}
    .mobile-img .img04{top: 35%;left: 5%;}
    .mobile-img .img05{top: 57%;left: 5%;}
    .mobile-img .img06{top: 49.5%;right: 5%;
    left: auto;transform: translateX(0);}
    .mobile-img .img07{right: 5%;top: 71%;}
    .mobile-img .img08{display: none;}
    .bot-btn{top: 95%}
    #phone-wrap .img09{top: 35.5%;}}


@media screen and (max-width:620px){
    .max-main{display: none}
    .media-main{display: block;}}


@media screen and (max-width:550px){
    .main-bg-color{height: 80vh;}
    .top-right h4{display: none;}
/** 메인 텍스트박스 -------------------------*/
    .main-text-box{top: 22%;left: -15%;}
    @keyframes load-title{to{left: 5%;opacity: 1;}}
    .main-text-box .title h2{font-size: 1.8rem;}
    .tag{margin-top: 3rem;}
    button{margin-top: 2rem;height: 40px;font-size: 1rem;}
    button a{line-height: 40px;}
/** 메인 이미지 -------------------------*/
    .main-img{width: 120%;bottom: -10%;}
    @keyframes load-img{to{opacity: 1;left: 53%;transform: translateX(-50%);bottom: 5%;}}
/*## 타이틀/내용 공통 css*/
    .cont-h2{font-size: 1.5rem;}
    .cont-p-max{line-height: 1.6rem;
        margin-top: 20px;font-size: 1.05rem;}
    .grid-1200{padding-top: 150px;}
    .detail{margin: 40px 0 30px;width: 100%;}
    .detail-h2{margin: 20px 0 5px;font-size: 1.1rem;}
/** overview/typography-------------------------*/
    .typography{margin-top: 150px;}
    .font{font-size: 1.2rem;margin-top: 5px;}
/** 그리드-------------------------*/
    #grid-wrap{margin-top: 150px;height: 700px;}
    #grid-wrap .grid-1200{padding: 30px 0 53px;
        height: 700px;}
    .gridimg01{width: 300px;top: 25%;
        left: 50%;transform: translateX(-50%);}
    .gridimg02{width: 190px;top: 55%;right: auto;
        left: 50%;transform: translate(-50%,0);}
    .max-grid{display: none;}
    .media-grid{display: block;}
/** web - sub wrap-------------------------*/
    .web-main-video{
        border-radius: 18px;
        border: 6px solid transparent;}
    #web-sub-wrap{margin-top: 30px}
    .max-sub{display: none;}
    .media-sub{display: block;}
    .sub-imgbox01 .img01{width:45%;margin-top: 8%;}
    .sub-imgbox01 .img02{display: none;}
    .sub-imgbox01 .img03{right: 0;
        margin-top: 8%;width: 45%;}
    .slide{margin-top: 40%;}
    .sub-imgbox02{padding-bottom: 110%;}
    .sub-imgbox02 .img01{left: 0.5%;
        width:55%;margin-top:40%;}
    .sub-imgbox02 .img03{margin-top: 0;width: 56%;}
    .sub-imgbox02 .img04{left: 15%;width: 45%;}
    .sub-imgbox02 .line{display: none;}
/** pcimg-wrap -------------------------*/
    #pcimg-wrap{margin-top: 180px;height: 110vw;}
    #pcimg-wrap img{
        border-radius: 12px;
        box-shadow: 10px 10px 20px rgba(47, 54, 50, 0.4); 
        border: 5px solid transparent;
        width: 50%;}
    .pcimg-top{
        margin-top: 50px;width: 100%;left: 0;}
    .pcimg-top img:nth-child(1){
        position: absolute;left: -20%;}
    .pcimg-top img:nth-child(2){left: 32%;}
    .pcimg-bottom{
        margin-top: 48%;width: 100%;right: 0;}
    .pcimg-bottom img:nth-child(1){right: 32%;}
    .pcimg-bottom img:nth-child(2){right: -20%;}
/** 아이패드비디오 wrap-------------------------*/
    #ipad-wrap{margin-top:-30%;padding-bottom:60%;}
    .ipad-video{border-radius: 16px;
        border: 5px solid transparent;
        box-shadow: 0px 10px 100px rgba(47, 54, 50, 0.5);width: 70%;margin-top: 30px;}
/** 모바일 wrap-------------------------*/
    #phone-wrap{margin-top: 30px;}
    .mobile-img{padding-bottom: 420%;}
    .mobile-img img{border: 5px solid transparent;
        width: 42%;border-radius:15px;}
    .mobile-img .img02{width: 42%;top: 10%;}
    .mobile-img .img03{top: 10%;}
    .mobile-img .img04{top: 25%;}
    .mobile-img .img05{top: 50.5%;}
    .mobile-img .img06{top: 59.5%;right: 5%;
    left: auto;transform: translateX(0);}
    .mobile-img .img07{display: none;}
    .mobile-img .img08{display: none;}
    .bot-btn{top: 90%}
    #phone-wrap .img09{top: 43%;}}


@media screen and (max-width:450px){
    .main-bg-color{height: 80vh;}
    .top-right h4{display: none;}
/** 메인 텍스트박스 -------------------------*/
    .main-text-box{top: 20%;left: -15%;}
    @keyframes load-title{to{left: 5%;opacity: 1;}}
    .main-text-box .title h2{font-size: 1.8rem;}
    .tag{margin-top: 2rem;}
    button{margin-top: 2rem;height: 40px;font-size: 1rem;}
    button a{line-height: 40px;}
/** 메인 이미지 -------------------------*/
    .main-img{width: 120%;bottom: -10%;}
    @keyframes load-img{to{opacity: 1;left: 53%;transform: translateX(-50%);bottom: 5%;}}}