@charset "utf-8";


/************************************************************************
* COMMON *
************************************************************************/
.container{width:100%;position:relative;overflow:hidden;}
.contents{position:relative;}
.contents section[id*='sec-']{padding:160px 0;}
sub.contents .detail{padding-top:120px;padding-bottom:120px;}
sub.contents .detail.pt0{padding-top:0 !important;}

@media screen and (max-width:1280px) {
.contents section[id*='sec-']{padding:100px 0;}
sub.contents .detail{padding-top:100px;padding-bottom:100px;}
}
@media screen and (max-width:960px) {
.contents section[id*='sec-']{padding:80px 0;}
sub.contents .detail{padding-top:90px;padding-bottom:90px;}
}
@media screen and (max-width:767px) {
.contents section[id*='sec-']{padding:70px 0;}
sub.contents .detail{padding-top:80px;padding-bottom:80px;}
}
@media screen and (max-width:640px) {
.contents section[id*='sec-']{padding:60px 0;}
sub.contents .detail{padding-top:65px;padding-bottom:65px;}
}
@media screen and (max-width:560px) {
.contents section[id*='sec-']{padding:40px 0;}
sub.contents .detail{padding-top:50px;padding-bottom:50px;}
}

.contentsBg{background:#f1f1f1;}


.contents .c-bg{width:40%;max-width:779px;position:absolute;display:block;z-index:-1;}
@media screen and (max-width:640px){
.contents .c-bg{width:55%;}
}
@media screen and (max-width:480px){
.contents .c-bg{width:65%;}
}
@media screen and (max-width:360px){
.contents .c-bg{width:75%;}
}



/************************************************************************
* button *
************************************************************************/
.button{font-size:18px;color:#000;text-align:left;position:relative;}
.button i{width:6px;height:6px;margin-left:10px;margin-top:9px;display:inline-block;position:relative;transition:all 0.2s ease;}
.button i:after{content:"";width:5px;height:5px;border:solid rgba(0,0,0,0.8);border-width:1px 1px 0 0;position:absolute;top:calc(50% - 4px);right:0;display:block;transform:rotate(45deg);}
.button:hover i{margin-left:20px;transition:all 0.2s ease;}
.button b{font-family:'Pretendard-SemiBold';transition:all 0.2s ease;}

.button.type1{width:200px;margin:0 auto;padding:16px 0;color:#fff;text-align:center;font-family:'Pretendard-Light';background:#0072cd;border-radius:30px;}
.button.type1 a{color:#fff;transition:all 0.2s ease;}
.button.type1:hover a{letter-spacing:0.2em;transition:all 0.2s ease;}
.button.type1:hover b{letter-spacing:0.2em;transition:all 0.2s ease;}


@media screen and (max-width:960px){
.button{font-size:16px;}
.button i{width:15px;}

.button.type1{width:180px;padding:15px 0;}
}
@media screen and (max-width:640px){
.button{font-size:14px;}
.button i:after{content:"";width:4px;height:4px;top:calc(50% - 3px);}

.button.type1{width:160px;padding:14px 0;}
}
@media screen and (max-width:420px){
.button i{width:13px;margin-top:8px;}

.button.type1{width:140px;padding:13px 0;}
}


.btWrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.btWrap a.bt{padding:20px 60px;margin:0 10px;text-align:center;font-size:38px;line-height:120%;color:#fff;border-radius:50px;display:table;transition:all 0.2s ease;position:relative;}
.btWrap a.bt i{width:18px;height:3px;background:#fff;display:inline-block;position:absolute;top:calc(50% - 1px);right:50px;transition:all 0.2s ease;}
.btWrap a.bt i:after{content:"";width:14px;height:14px;border:solid #fff;border-width:3px 3px 0 0;position:absolute;top:calc(50% - 7px);right:0;display:block;transform:rotate(45deg);}

.btWrap a.bt:hover{padding:20px 100px; transition:all 0.2s ease;}

.btWrap a.bt.black{background:#000; ;font-family: 'Philosopher' !important;text-shadow: 3px 2px 10px rgba(255,255,231,0.55);}
.btWrap a.bt.black:hover{color: #e2d3ae;text-shadow: 3px 2px 20px rgba(255,255,231,0.25);  box-shadow: 0 0px 50px rgb(255 245 217 / 80%);}


    @media screen and (max-width:1280px){
    .btWrap a.bt{padding:20px 50px; font-size:30px;}
    .btWrap a.bt:hover{padding:20px 80px;}
    }
    @media screen and (max-width:1100px){
    .btWrap a.bt{font-size:26px;}
    }
    @media screen and (max-width:960px){
    .btWrap a.bt{padding:20px 50px; font-size:30px;}
    .btWrap a.bt:hover{padding:20px 80px;}
    }
    @media screen and (max-width:767px){
    .btWrap a.bt{padding:17px 45px; font-size:27px;}
    .btWrap a.bt:hover{padding:17px 70px;}
    }
    @media screen and (max-width:640px){
    .btWrap a.bt{padding:16px 40px; font-size:25px;}
    .btWrap a.bt:hover{padding:16px 60px;}
        
    .btWrap a.bt.black{margin-top: 20px !important;}
    }
    @media screen and (max-width:360px){
    .btWrap a.bt{padding:14px 35px; font-size:22px;}
    .btWrap a.bt:hover{padding:14px 55px;}
    }






/************************************************************************
* MAIN_CONTENTS *
************************************************************************/


/***** ===== sec-1 나만의 스튜디오가 되어주세요. ===== *****/
main .sec-1{padding:200px 0 !important;}
main .sec-1 .portfolio{width: 50%; position:relative;text-align: center; margin: 0 auto; overflow: hidden;}

main .sec-1 .portfolio h2, main .sec-1 .portfolio h3{font-family:'Pretendard-Light' !important; font-weight:100 !important; letter-spacing: -0.01em;transition:all 0.2s ease;}
main .sec-1 .portfolio h2 br.hide{display: block !important;}

main .sec-1 .portfolio font{transition:all 0.2s ease;}
main .sec-1 .portfolio font br.hide2, main .sec-1 .portfolio font br.hide3{display: block;}
main .sec-1 .portfolio font br.hide22, main .sec-1 .portfolio font br.hide33{display: none;}

    @media screen and (max-width:1100px){
        main .sec-1 .portfolio{width: 70%;}
    }
    @media screen and (max-width:960px){
        main .sec-1{padding:180px 0 !important;}
        main .sec-1 .portfolio h2 {font-size: 50px !important;}
        main .sec-1 .portfolio h3 {font-size: 40px !important;}
    }
    @media screen and (max-width:767px){
        main .sec-1 .portfolio h2 {font-size: 45px !important;}
        main .sec-1 .portfolio h3 {font-size: 35px !important;}
        main .sec-1 .portfolio .type28 {font-size: 22px !important;}
    }
    @media screen and (max-width:640px){
        main .sec-1{padding:160px 0 !important;}
        
        main .sec-1 .portfolio{width: 90%;}
        main .sec-1 .portfolio h2{line-height: 120%;}
        main .sec-1 .portfolio h2 br.hide{display: block !important;}
        main .sec-1 .portfolio h3{margin-top: 20px !important;}
        
        main .sec-1 .portfolio .type28 {font-size: 20px !important;}
        main .sec-1 .portfolio .type28.mt60 {margin-top: 50px !important;}
        main .sec-1 .portfolio .type28.mt40 {margin-top: 30px !important;}
    }
    @media screen and (max-width:460px){
        main .sec-1 .portfolio h2 {font-size: 40px !important;}
        main .sec-1 .portfolio h3 {font-size: 30px !important;}
        
        main .sec-1 .portfolio .type28 {font-size: 18px !important;}
        main .sec-1 .portfolio font br.hide22, main .sec-1 .portfolio font br.hide33{display: block;}
    }
    @media screen and (max-width:360px){
        main .sec-1{padding:140px 0 !important;}
        
        main .sec-1 .portfolio h2 {font-size: 35px !important;}
        main .sec-1 .portfolio h3 {font-size: 25px !important;}
        
        main .sec-1 .portfolio .type28 {font-size: 17px !important;}
    }



/* 갤러리 팝업 */
.b-modal.__b-popup1__{opacity:0 !important;}

#popup2{width:100% !important;height:100%;display:none;overflow-y:auto;scrollbar-arrow-color:#fff;scrollbar-track-color:#000;scrollbar-face-color:#fff;position:fixed !important;top:0 !important;}
#popup2 .content{position:relative;width:98% !important;max-width:1280px;margin:2% auto;padding:60px 60px 80px 60px;border:solid 1px #000;border-radius:50px;background:rgba(0,0,0,.85);}


.pop_body{width:100%;}
.pop_body .tit{display:flex;align-items:center;flex-wrap:wrap;}
.pop_body .imgBox a{width:calc(100%/7.05); height: 100%; border-radius:20px;margin:8px;display:block;overflow:hidden;}
.pop_body .imgBox img{width:100%;}



@media screen and (max-width:960px) {
#popup2 .content{margin:1% auto;padding:40px 50px;border-radius:40px;}

.pop_body .imgBox a{border-radius:20px;margin:5px;}
}
@media screen and (max-width:820px) {
.pop_body table.w60{width:80% !important;}
}

@media screen and (max-width:767px) {
#popup2 .content{padding:40px 50px;border-radius:30px;}
}
@media screen and (max-width:640px) {
#popup2 .content{padding:35px 40px;border-radius:25px;}

.pop_body .imgBox a{width:calc(100%/2);border-radius:15px;}
}
@media screen and (max-width:500px) {
#popup2 .content{padding:35px 30px;}
}



#popup2 .button.b-close,#popup2 .button.bClose{width:52px;height:52px;background:#000;border-radius:50%;position:fixed;right:15%;top:25px;z-index:999;cursor:pointer;}
#popup2 .button.b-close span,#popup2 .button.bClose span{font-size:0;}
#popup2 .button.b-close:before,#popup2 .button.bClose:before{width:2px;height:30px;margin-top:-15px;position:absolute;left:50%;top:50%;background-color:#fff;content:'';transform:rotate(45deg);transition:transform .2s ease;}
#popup2 .button.b-close span:before,#popup2 .button.bClose span:before{width:2px;height:30px;margin-top:-15px;position:absolute;left:50%;top:50%;background-color:#fff;content:'';transform:rotate(-45deg);transition:transform .2s ease;}
#popup2 .button.b-close:hover:before,#popup2 .button.bClose:hover:before{transform:rotate(225deg);}
#popup2 .button.b-close:hover span:before,#popup2 .button.bClose:hover span:before{transform:rotate(135deg);}
@media screen and (max-width:1024px) {
#popup2 .button.b-close,#popup2 .button.bClose{width:44px;height:44px;right:20px;top:20px;}
#popup2 .button.b-close:before,#popup2 .button.bClose:before{width:2px;height:20px;margin-top:-10px;}
#popup2 .button.b-close span:before,#popup2 .button.bClose span:before{width:2px;height:20px;margin-top:-10px;}
}
@media screen and (max-width:767px) {
#popup2 .button.b-close,#popup2 .button.bClose{width:38px;height:38px;right:16px;top:16px;}
}
@media screen and (max-width:640px) {
#popup2 .button.b-close,#popup2 .button.bClose{right:12px;top:12px;}
}


/*
#popup2 #map img{min-width:100% !important;min-height:100% !important;left:0 !important;top:0 !important;}
*/


/***** ===== sec-2 2page 업그레이드. ===== *****/
main .sec-2{padding:230px 0 !important;position:relative;background:#e7e5e2; border-top-left-radius:800px; overflow:hidden;}
main .sec-2:before{content:"";width:100%;height:100%;background:url(/img/sec2_bg.jpg) no-repeat left -150px top #e7e5e2; background-size: cover; position:absolute;top:0;left:0;display:block;opacity:0;}
main .sec-2.in-view:before{content:"";animation-name:rightslide;animation-duration:1s;animation-fill-mode:forwards;}

main .sec-2 .txtBox{width: 36%; float: right;}
main .sec-2 .txtBox h2{font-family:'GmarketSansMedium';text-align: center; margin: 15px 0; color: #73461d;}


.btWrap a.bt.brown{clear: both;padding:22px 60px; font-size:45px !important; background:linear-gradient(120deg, #834f21 50% , #63350c 100%);border:none;color:#fff; text-shadow: 3px 2px 10px rgba(255,255,231,0.55);
 box-shadow: 0 0px 20px rgb(255 245 217 / 40%); transition:all 0.2s ease;}
.btWrap a.bt.brown:hover{padding:22px 80px;text-shadow: 3px 2px 20px rgba(255,255,231,0.25);  box-shadow: 0 0px 50px rgb(255 245 217 / 80%); transition:all 0.2s ease;}


    @media screen and (max-width:1600px){
        main .sec-2 .txtBox{width: 40%;}
    }
    @media screen and (max-width:1500px){
        main .sec-2{padding:220px 0 !important;border-top-left-radius:700px;}
        main .sec-2:before{background:url(/img/sec2_bg.jpg) no-repeat left -220px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 43%;}
        main .sec-2 .txtBox h2{margin: 12px 0;}
        
        .btWrap a.bt.brown{font-size:42px !important;}
    }
    @media screen and (max-width:1280px){
        main .sec-2{padding:200px 0 !important;border-top-left-radius:500px;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -60px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox h2{font-size: 45px !important;}
        
        .btWrap a.bt.brown{padding:20px 50px; font-size:38px !important;}
        .btWrap a.bt.brown:hover{padding:20px 70px;}
    }
    @media screen and (max-width:1100px){
        main .sec-2{padding:180px 0 !important;border-top-left-radius:300px;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -100px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 46%;}
        main .sec-2 .txtBox h2{font-size: 40px !important;margin: 10px 0;}
        
        .btWrap a.bt.brown{padding:18px 45px; font-size:32px !important;}
        .btWrap a.bt.brown:hover{padding:18px 65px;}
    }
    @media screen and (max-width:860px){
        main .sec-2{padding:160px 0 !important;border-top-left-radius:200px;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -100px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 50%;}
        main .sec-2 .txtBox h2{font-size: 36px !important;}
        
        .btWrap a.bt.brown{padding:16px 40px; font-size:27px !important;}
        .btWrap a.bt.brown:hover{padding:16px 60px;}
    }
    @media screen and (max-width:700px){
        main .sec-2{padding:150px 0 !important;border-top-left-radius:0px;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -180px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 60%;}
        main .sec-2 .txtBox h2{font-size: 34px !important;}
        
        .btWrap a.bt.brown{padding:16px 40px; font-size:25px !important;}
        .btWrap a.bt.brown:hover{padding:16px 60px;}
    }
    @media screen and (max-width:560px){
        main .sec-2{padding:150px 0 !important;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -280px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 85%;padding-top: 100px;}
        main .sec-2 .txtBox h2{font-size: 30px !important;}
        
        .btWrap a.bt.brown{padding:16px 35px; font-size:23px !important;}
        .btWrap a.bt.brown:hover{padding:16px 55px;}
    }
    @media screen and (max-width:460px){
        main .sec-2{padding:140px 0 !important;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -280px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 100%;}
        main .sec-2 .txtBox h2{font-size: 30px !important;margin: 8px 0;}
        
        .btWrap a.bt.brown{padding:16px 30px; font-size:22px !important;}
        .btWrap a.bt.brown:hover{padding:16px 50px;}
    }
    @media screen and (max-width:360px){
        main .sec-2{padding:140px 0 !important;border-top-left-radius:0;}
        main .sec-2:before{background:url(/img/sec2_bg2.jpg) no-repeat left -280px top #e7e5e2; background-size: cover;}
        
        main .sec-2 .txtBox{width: 100%;}
        main .sec-2 .txtBox h2{font-size: 27px !important;margin: 6px 0; text-shadow: 3px 2px 20px rgba(255,255,231,0.85);}
        
        .btWrap a.bt.brown{padding:15px 35px; font-size:20px !important;}
        .btWrap a.bt.brown:hover{padding:15px 55px;}
    }
    @media screen and (max-width:320px){
        main .sec-2 .txtBox h2{font-size: 24px !important;}
        
        .btWrap a.bt.brown{padding:14px 35px; font-size:20px !important;}
        .btWrap a.bt.brown:hover{padding:14px 55px;}
    }







/***** ===== sec-3 Luxury Brand. ===== *****/
main .sec-3{position:relative; padding:270px 0 100px 0 !important; overflow:hidden;}
main .sec-3:before{content:"";width:100%;height:1718px; background:url(/img/sec3_bg.jpg) no-repeat top center; background-size: contain; position:absolute;top:0;left:0;display:block;transition:all 0.2s ease;}

/* 타이틀 텍스트 */
main .sec-3 .txtBox{text-align: center;}
main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-family:'GmarketSansMedium';text-align: center; font-size: 85px !important; color: #714731;transition:all 0.2s ease;}
main .sec-3 .txtBox h2.Luxury b{position: relative;}
main .sec-3 .txtBox h2.Luxury b:after{width: 52px; height: 36px; background: url(/img/sec3_crown.png) no-repeat; position: absolute;top:-38px;left:2px;display:block;content:"";opacity:0; background-size: cover; transition:all 0.2s ease;}
main .sec-3.in-view .txtBox h2.Luxury b:after{content:"";animation-name:downslide;animation-duration:2s;animation-fill-mode:forwards;}

main .sec-3 .txtBox h2.Lunching{font-family:'GmarketSansMedium';text-align: center; font-size: 85px !important; background:linear-gradient(180deg, #a67e69 50% , #734933 100%);  color: transparent;  -webkit-background-clip: text;transition:all 0.2s ease;}


/* 드레스 이미지 */
main .sec-3 .imgBox {width: 85%; margin: 0 auto;}
main .sec-3 .imgBox div[class*='dress-']{width: 660px; height: 940px; border-top-left-radius: 500px;border-bottom-left-radius: 500px; border-top-right-radius: 500px;border-bottom-right-radius: 500px; position: relative;transition:all 0.2s ease;}
main .sec-3 .imgBox div[class*='dress-']:nth-child(even){ float: right; margin-top: -200px;}
main .sec-3 .imgBox div[class*='dress-']:hover{box-shadow: 0 0 30px 0 rgba(106, 89, 198, 0.2); transition:all 0.2s ease;}

main .sec-3 .imgBox .dress-1 {background:url(/img/sec3_dress1.jpg) no-repeat center center;}
main .sec-3 .imgBox .dress-2 {background:url(/img/sec3_dress2.jpg) no-repeat center center;}
main .sec-3 .imgBox .dress-3 {background:url(/img/sec3_dress3.jpg) no-repeat center center; clear: both; top: -200px !important;}
main .sec-3 .imgBox .dress-4 {background:url(/img/sec3_dress4.jpg) no-repeat center center; top: -200px !important;}

main .sec-3 .imgBox .insta{height: 49px; background: url(/img/i_instagram.png) no-repeat; padding-left: 60px;left:680px; top:46%; display: block;position:absolute;transition:all 0.2s ease;}
main .sec-3 .imgBox .insta.R{height: 49px; background: url(/img/i_instagram.png) no-repeat top 0 right 0; padding-right: 60px;left:-355px; top:49%; text-align: right; display: block;position:absolute;}
main .sec-3 .imgBox .insta a font{margin-top: 5px;position: relative;}

main .sec-3 .imgBox div[class*='dress-'] .insta a font:after{content:"";display:block;width:0;  height:1px;background:#6a55c6;position:absolute;left:0;bottom:0;transition:all 0.2s ease;}
main .sec-3 .imgBox div[class*='dress-']:hover .insta a font:after{width:100%;transition:all 0.2s ease;}

main .sec-3 .imgBox .c_AMY{right:-380px; top:38%;display: block;position:absolute;transition:all 0.2s ease;}
main .sec-3 .imgBox .c_Raynco{left:-260px; top:38%;display: block;position:absolute;transition:all 0.2s ease;}
main .sec-3 .imgBox .c_Matin{right:-380px; top:38%;display: block;position:absolute;transition:all 0.2s ease;}
main .sec-3 .imgBox .c_chloe{left:-260px; top:38%;display: block;position:absolute;transition:all 0.2s ease;}


    @media screen and (max-width:1700px){
        main .sec-3 .imgBox {width: 90%;}    
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 70px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 70px !important;} 
        
        main .sec-3 .imgBox div[class*='dress-']{width: 560px; height: 877px;}
        main .sec-3 .imgBox .dress-1 {background:url(/img/sec3_dress1.jpg) no-repeat top -10px center;}
        main .sec-3 .imgBox .dress-2 {background:url(/img/sec3_dress2.jpg) no-repeat top center;}
        main .sec-3 .imgBox .dress-3 {background:url(/img/sec3_dress3.jpg) no-repeat top -100px center;}
        main .sec-3 .imgBox .dress-4 {background:url(/img/sec3_dress4.jpg) no-repeat top center;}
        
        main .sec-3 .imgBox .insta{background-size: 40px 40px; left:590px; top:42%;padding-left: 50px;}
        main .sec-3 .imgBox .insta.R{background-size: 40px 40px; left:-355px; top:44%;padding-right: 50px;}
        main .sec-3 .imgBox .insta a font{margin-top: 2px;}
        
        main .sec-3 .imgBox .c_AMY{right:-420px; top:34%;}
        main .sec-3 .imgBox .c_Raynco{left:-250px; top:33%;}
        main .sec-3 .imgBox .c_Matin{right:-400px; top:34%;}
        main .sec-3 .imgBox .c_chloe{left:-360px; top:34%;}
    }
    @media screen and (max-width:1500px){
        main .sec-3 .imgBox {width: 95%;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 65px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 65px !important;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 500px; height: 783px;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 45px; height: 31px;top:-34px;left:-2px;}
        
        main .sec-3 .imgBox .insta{left:520px; top:44%;}
        main .sec-3 .imgBox .insta.R{left:-330px; top:45%;}
        
        main .sec-3 .imgBox span[class*='c_']{width: 400px; height:90px;}
        main .sec-3 .imgBox .c_AMY{right:-360px; top:36%;}
        main .sec-3 .imgBox .c_Raynco{left:-220px; top:35%;}
        main .sec-3 .imgBox .c_Matin{right:-340px; top:36%;}
        main .sec-3 .imgBox .c_chloe{left:-300px; top:35%;}
    }
    @media screen and (max-width:1280px){
        main .sec-3{padding:200px 0 100px 0 !important;}
        
        main .sec-3 .imgBox {width: 96%; margin-top: 140px !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 60px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 60px !important;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 450px; height: 705px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: -150px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: -150px !important;}
                
        main .sec-3 .imgBox .insta{left:470px; top:45%;}
        main .sec-3 .imgBox .insta.R{left:-300px; top:47%;}
        
        main .sec-3 .imgBox span[class*='c_']{width: 360px; height:81px;}
        main .sec-3 .imgBox .c_AMY{right:-330px; top:36%;}
        main .sec-3 .imgBox .c_Raynco{left:-200px; top:35%;}
        main .sec-3 .imgBox .c_Matin{right:-310px; top:36%;}
        main .sec-3 .imgBox .c_chloe{left:-285px; top:36%;}
    }
    @media screen and (max-width:1100px){
        main .sec-3{padding:180px 0 100px 0 !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 55px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 55px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 40px; height: 28px;top:-30px;left:-2px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 400px; height: 627px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: -120px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: -120px !important;}
                
        main .sec-3 .imgBox .insta{left:470px; top:45%;}
        main .sec-3 .imgBox .insta.R{left:-300px; top:47%;}
        
        main .sec-3 .imgBox span[class*='c_']{width: 330px; height:74px;}
        main .sec-3 .imgBox .c_AMY{right:-300px; top:36%;}
        main .sec-3 .imgBox .c_Raynco{left:-195px; top:35%;}
        main .sec-3 .imgBox .c_Matin{right:-285px; top:36%;}
        main .sec-3 .imgBox .c_chloe{left:-260px; top:36%;}
    }
    @media screen and (max-width:960px){
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 55px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 55px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 40px; height: 28px;top:-30px;left:-2px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 360px; height: 564px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: -80px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: -80px !important;}
                
        main .sec-3 .imgBox .insta{background-size: 36px 36px; left:380px; top:46%; padding-left: 46px;}
        main .sec-3 .imgBox .insta.R{background-size: 36px 36px; left:-300px; top:48%; padding-right: 46px;}
        main .sec-3 .imgBox .insta a font{margin-top: 2px;}
        
        main .sec-3 .imgBox span[class*='c_']{width: 300px; height:auto;}
        main .sec-3 .imgBox .c_AMY{right:-275px; top:36%;}
        main .sec-3 .imgBox .c_Raynco{left:-180px; top:35%;}
        main .sec-3 .imgBox .c_Matin{right:-260px; top:36%;}
        main .sec-3 .imgBox .c_chloe{left:-235px; top:36%;}
    }
    @media screen and (max-width:767px){
        main .sec-3{padding:160px 0 !important;}
        
        main .sec-3 .imgBox {width: 90%; margin-top: 120px !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 48px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 48px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 36px; height: 25px;top:-28px;left:-3px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 320px; height: 501px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: -20px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: -20px !important;}
        
        main .sec-3 .imgBox .insta{background-size: 34px 34px; left:340px; top:46%; padding-left: 44px;}
        main .sec-3 .imgBox .insta.R{background-size: 34px 34px; left:-270px; top:48%; padding-right: 44px;}
                        
        main .sec-3 .imgBox span[class*='c_']{width: 270px; height:auto;}
        main .sec-3 .imgBox .c_AMY{right:-245px; top:36%;}
        main .sec-3 .imgBox .c_Raynco{left:-160px; top:35%;}
        main .sec-3 .imgBox .c_Matin{right:-235px; top:36%;}
        main .sec-3 .imgBox .c_chloe{left:-215px; top:36%;}
    }
    @media screen and (max-width:640px){
        main .sec-3{padding:140px 0 200px 0 !important;}
        
        main .sec-3 .txtBox h2.Lunching{margin-top: 20px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 36px; height: 25px;top:-28px;left:-3px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 460px; height: 600px; margin: 0 auto;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){float: none; margin: 0 auto; margin-top: 200px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: 200px !important;}
        main .sec-3 .imgBox .dress-4 {margin-bottom: 250px !important;}
                
        
        main .sec-3 .imgBox .insta{background-size: 30px 30px; left:30%;right:auto; top:102%; padding-left: 38px; position:relative;width: 50%;}
        main .sec-3 .imgBox .insta.R{background: url(/img/i_instagram.png) no-repeat top 0 left 0; padding-left: 38px;background-size: 30px 30px; left:28%;right:auto; text-align: left; top:102%;position:relative;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 280px; height:auto; position:relative;margin: 0 auto; display: block;}
        main .sec-3 .imgBox .c_AMY{right:auto; left:30px; top:103%;}
        main .sec-3 .imgBox .c_Raynco{right:auto; left:50px; top:103%;}
        main .sec-3 .imgBox .c_Matin{right:auto; left:auto; top:103%;}
        main .sec-3 .imgBox .c_chloe{right:auto; left:20px; top:103%;}
    }
    @media screen and (max-width:540px){
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 44px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 44px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 32px; height: 22px;top:-26px;left:-3px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 400px; height: 520px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: 200px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: 200px !important;}
                
        
        main .sec-3 .imgBox .insta{background-size: 28px 28px; left:30%;right:auto; top:102%; padding-left: 36px; width: 60%;}
        main .sec-3 .imgBox .insta.R{background: url(/img/i_instagram.png) no-repeat top 0 left 0; padding-left: 36px;background-size: 28px 28px; left:28%; top:102%;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 250px; height:auto;}
    }
    @media screen and (max-width:460px){
        main .sec-3{padding:120px 0 200px 0 !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 40px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 40px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 28px; height: 19px;top:-22px;left:-2px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 360px; height: 480px;}
                
        
        main .sec-3 .imgBox .insta{background-size: 28px 28px; left:30%;right:auto; top:102%; padding-left: 36px; width: 50%;}
        main .sec-3 .imgBox .insta.R{background: url(/img/i_instagram.png) no-repeat top 0 left 0; padding-left: 36px;background-size: 28px 28px; left:28%; top:102%;}
        main .sec-3 .imgBox .insta.R.wh{width: 70%;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 250px; height:auto;}
    }
    @media screen and (max-width:420px){
        main .sec-3 .imgBox {margin-top: 100px !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 38px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 38px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 28px; height: 19px;top:-22px;left:-1px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 320px; height: 440px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: 160px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: 160px !important;}
                
        
        main .sec-3 .imgBox .insta{background-size: 26px 26px; left:27%;right:auto; top:102%; padding-left: 34px; width: 50%;}
        main .sec-3 .imgBox .insta.R{background: url(/img/i_instagram.png) no-repeat top 0 left 0; padding-left: 34px;background-size: 26px 26px; left:22%; top:102%;}
        main .sec-3 .imgBox .insta.R.wh{width: 75%;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 240px; height:auto;}
    }
    @media screen and (max-width:360px){
        main .sec-3{padding:100px 0 200px 0 !important;}
        
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 35px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 35px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 28px; height: 19px;top:-22px;left:-2px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 300px; height: 400px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: 160px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: 160px !important;}
                
        
        main .sec-3 .imgBox .insta{left:24%; width: 57%;}
        main .sec-3 .imgBox .insta.R{left:20%;}
        main .sec-3 .imgBox .insta.R.wh{width: 80%;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 220px; height:auto;}
    }
    @media screen and (max-width:320px){
        main .sec-3 .txtBox h2.Luxury, main .sec-3 .txtBox h2.Luxury b{font-size: 33px !important;}
        main .sec-3 .txtBox h2.Lunching{font-size: 33px !important;}
        
        main .sec-3 .txtBox h2.Luxury b:after{width: 28px; height: 19px;top:-22px;left:-3px;}
        
        main .sec-3 .imgBox div[class*='dress-']{width: 260px; height: 360px;}
        main .sec-3 .imgBox div[class*='dress-']:nth-child(even){margin-top: 150px;}
        main .sec-3 .imgBox .dress-3, main .sec-3 .imgBox .dress-4 {top: 150px !important;}
                
        
        main .sec-3 .imgBox .insta{left:20%; width: 60%;}
        main .sec-3 .imgBox .insta.R{left:18%;}
        main .sec-3 .imgBox .insta.R.wh{width: 92%;}
                                
        main .sec-3 .imgBox span[class*='c_']{width: 220px; height:auto;}
    }







/***** ===== sec-4 웨딩드레스 추가금 ===== *****/
main .sec-4{position:relative; padding:200px 0 !important;  overflow:hidden;}
main .sec-4:before{content:"";width:100%;height:100%;background:url(/img/sec4_bg.jpg) no-repeat left -300px top 0; background-size: cover;position:absolute;top:0;left:0;display:block;transition:all 0.2s ease;}
main .sec-4:after{content:"";width:900px;height:334px; background:url(/img/sec4_tbg.png) no-repeat right top ;position:absolute;background-size: cover;top:-150px;right:7%;display:block;z-index: 0;transition:all 0.2s ease;}

main .sec-4 .txtBox{width: 860px;text-align: center; float:right; margin-right:5%;}
main .sec-4 .txtBox .s4_cuppon{width: 860px; height: 500px; background:url(/img/sec4_cuppon.png) no-repeat left top;padding: 15% 2% 5% 2%; text-align: center;transition:all 0.2s ease;}
main .sec-4 .txtBox .s4_cuppon h5{font-weight: 100 !important; transition:all 0.2s ease;}
main .sec-4 .txtBox .s4_cuppon h3{font-size: 55px !important; color: #382a1b !important; font-family:'GmarketSansMedium'; line-height: 180%;transition:all 0.2s ease;}
main .sec-4 .txtBox .s4_cuppon img{margin: 0 10px;display: inline-block;transition:all 0.2s ease;}
main .sec-4 .txtBox .s4_cuppon h3.discount{margin-top: 10px; display: inline-block;font-family:'GmarketSansMedium';transition:all 0.2s ease;}



.btWrap a.bt.gray{clear: both;padding:22px 60px; font-size:45px !important; background:linear-gradient(120deg, #3f3d3c 50% , #7b7a77 100%);border:none;color:#fff; text-shadow: 3px 2px 10px rgba(255,255,231,0.55);
 box-shadow: 0 0px 20px rgb(255 245 217 / 40%); transition:all 0.2s ease;}
.btWrap a.bt.gray:hover{padding:22px 80px;text-shadow: 3px 2px 20px rgba(255,255,231,0.25);  box-shadow: 0 0px 50px rgb(255 245 217 / 80%); transition:all 0.2s ease;}


    @media screen and (max-width:1700px){
        main .sec-4:before{background:url(/img/sec4_bg.jpg) no-repeat left -500px top 0;background-size: cover;}
        main .sec-4:after{width:800px;height:279px;background-size: contain;top:-140px;right:2%;}
    }
    @media screen and (max-width:1500px){
        main .sec-4:before{background:url(/img/sec4_bg.jpg) no-repeat left -400px top 0;background-size: cover;}
        main .sec-4:after{width:800px;height:279px;background-size: cover;top:-140px;right:2%;}
        
        main .sec-4 .txtBox{width: 800px;margin-right:2%;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 50px !important;}
        main .sec-4 .txtBox .s4_cuppon{width: 800px; height: 465px; background:url(/img/sec4_cuppon.png) no-repeat left top; background-size: cover;}
        
        .btWrap a.bt.gray{font-size:42px !important;}
    }
    @media screen and (max-width:1280px){
        main .sec-4{padding:180px 0 !important;}
        
        main .sec-4:before{background:url(/img/sec4_bg2.jpg) no-repeat left -200px top 0;background-size: cover;}
        main .sec-4:after{width:600px;height:223px;top:-120px;right:0%;}
        
        main .sec-4 .txtBox{width: 700px;margin-right:0;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 46px !important;}
        main .sec-4 .txtBox .s4_cuppon{width: 700px; height: 407px; background:url(/img/sec4_cuppon.png) no-repeat left top;background-size: cover;}
        main .sec-4 .txtBox .s4_cuppon img{width: 180px; height: 74px; display: inline-block;}
        
        .btWrap a.bt.gray{padding:20px 50px; font-size:38px !important;}
        .btWrap a.bt.gray:hover{padding:20px 70px;}
    }
    @media screen and (max-width:1100px){
        main .sec-4:after{width:500px;height:186px;background-size: contain;top:-120px;right:-1%;}
        
        main .sec-4 .txtBox{width: 600px;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 40px !important; line-height: 160%;}
        main .sec-4 .txtBox .s4_cuppon{width: 600px; height: 349px; background:url(/img/sec4_cuppon.png) no-repeat left top; background-size: cover; padding: 14% 1% 2% 1%;}
        main .sec-4 .txtBox .s4_cuppon img{width: 160px; height: auto;}
        
        .btWrap a.bt.gray{padding:18px 45px; font-size:32px !important;}
        .btWrap a.bt.gray:hover{padding:18px 65px;}
    }
    @media screen and (max-width:860px){
        main .sec-4{padding:160px 0 !important;}
        
        main .sec-4 .txtBox{width: 500px;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 34px !important; line-height: 140%;}
        main .sec-4 .txtBox .s4_cuppon{width: 500px; height: 291px; background:url(/img/sec4_cuppon.png) no-repeat left top; background-size: cover;}
        main .sec-4 .txtBox .s4_cuppon img{width: 140px; height: auto;}
        
        .btWrap a.bt.gray{padding:16px 40px; font-size:27px !important;}
        .btWrap a.bt.gray:hover{padding:16px 60px;}
    }
    @media screen and (max-width:700px){
        main .sec-4:before{background:url(/img/sec4_bg2.jpg) no-repeat left -200px top 0; background-size: cover;}
        
        main .sec-4 .txtBox .s4_cuppon h5{font-size: 22px !important;}
        
        .btWrap a.bt.gray{padding:16px 40px; font-size:25px !important;}
        .btWrap a.bt.gray:hover{padding:16px 60px;}
    }
    @media screen and (max-width:560px){
        main .sec-4{padding:160px 0 80px 0 !important;}
        main .sec-4:after{display: none;}
        
        main .sec-4 .txtBox{width: 94%;float:none; margin: 0 auto; margin-top: 100px !important;}
        main .sec-4 .txtBox .s4_cuppon h5{font-size: 20px !important;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 30px !important; line-height: 140%;}
        main .sec-4 .txtBox .s4_cuppon{width: 85%; height: 230px; background:url(/img/sec4_cuppon.png) no-repeat left top; background-size: cover; margin: 0 auto; padding: 12% 1% 2% 1%;}
        main .sec-4 .txtBox .s4_cuppon img{width: 120px; height: auto;}
                
        .btWrap a.bt.gray{padding:16px 35px; font-size:23px !important;}
        .btWrap a.bt.gray:hover{padding:16px 55px;}
    }
    @media screen and (max-width:460px){
        main .sec-4{padding:120px 0 !important;}
        main .sec-4:before{background:url(/img/sec4_bg2.jpg)  no-repeat left -200px top 0; background-size: cover; }
        
        main .sec-4 .txtBox{width: 90%;}
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 28px !important; line-height: 130%;}
        main .sec-4 .txtBox .s4_cuppon{width: 96%; height: 210px; background:url(/img/sec4_cuppon.png) no-repeat left top; background-size: cover; margin: 0 auto; padding: 13% 0 2% 0;}
        main .sec-4 .txtBox .s4_cuppon img{width: 120px; height: auto;}
        
        .btWrap a.bt.gray{padding:16px 30px; font-size:22px !important;}
        .btWrap a.bt.gray:hover{padding:16px 50px;}
    }
    @media screen and (max-width:360px){
        main .sec-4{padding:100px 0 !important;}
        
        main .sec-4 .txtBox .s4_cuppon h3{font-size: 26px !important;}
        main .sec-4 .txtBox .s4_cuppon{width: 95%; height:190px; background:url(/img/sec4_cuppon.png) no-repeat left -20px top; background-size: cover !important; margin: 0 auto; padding: 12% 0 2% 0;}
        main .sec-4 .txtBox .s4_cuppon img{width: 90px; height: auto;}
        
        .btWrap a.bt.gray{padding:15px 35px; font-size:20px !important; margin-top: -10px !important;}
        .btWrap a.bt.gray:hover{padding:15px 55px;}
    }
    @media screen and (max-width:320px){
        main .sec-4 .txtBox .s4_cuppon{width: 95%; height:170px; background:url(/img/sec4_cuppon2.png) no-repeat left -10px top; background-size: cover; margin: 0 auto; padding: 10% 0 2% 0;}
        
        .btWrap a.bt.gray{padding:14px 35px; font-size:20px !important;}
        .btWrap a.bt.gray:hover{padding:14px 55px;}
    }







/***** ===== sec-5 프리미엄 웨딩스타일링 ===== *****/
main .sec-5{position:relative; padding:260px 0 260px 2% !important;  overflow:hidden;}
main .sec-5:before{content:"";width:100%;height:100%;background:url(/img/sec5_bg.jpg) no-repeat right top; background-size: cover; position:absolute;top:0;left:0;display:block;transition:all 0.2s ease;}

main .sec-5  h2{font-size: 70px !important; color: #018360;font-family:'GmarketSansMedium'; transition:all 0.2s ease;}
main .sec-5  .txtBox h3{width: fit-content; background: #24b688; color: #fff; padding: 14px 80px; border-radius: 100px; margin: 10px 20px; font-family: 'Philosopher'; font-weight: 300 !important; transition:all 0.2s ease;}
main .sec-5  .txtBox h3.s5-1, main .sec-5  .txtBox h3.s5-2{display: inline-block;}
main .sec-5  .txtBox h4{font-size: 50px !important; color: #018360; margin-left: 16%; transition:all 0.2s ease;}
main .sec-5  .txtBox h3.s5-3{margin-left: 2%;}

/*
main .sec-5  .txtBox h3:nth-child(2){margin-left: 5%;}
main .sec-5  .txtBox h3:nth-child(3){margin-left: 11%;}
*/

    @media screen and (max-width:1700px){
        main .sec-5  .txtBox h4{margin-left: 18%;}
    }
    @media screen and (max-width:1500px){
        main .sec-5:before{background:url(/img/sec5_bg.jpg) no-repeat right -100px top; background-size: cover;}
        main .sec-5  .txtBox h4{margin-left: 20.5%;}
    }
    @media screen and (max-width:1280px){
        main .sec-5{padding:220px 0 220px 5% !important; background-size: cover;}
        main .sec-5  h2{font-size: 60px !important;}
        
        main .sec-5  .txtBox h3{padding: 14px 70px; margin: 10px 15px;}
        main .sec-5  .txtBox h4{margin-left: 20%;}
    }
    @media screen and (max-width:1100px){
        main .sec-5{padding:220px 0 220px 5% !important;}
        main .sec-5:before{background:url(/img/sec5_bg.jpg) no-repeat right -150px top; background-size: cover;}
        
        main .sec-5  h2{font-size: 55px !important;}
        main .sec-5  .txtBox h4{margin-left: 23%;}
    }
    @media screen and (max-width:960px){
        main .sec-5{padding:200px 0 200px 3% !important;}
        main .sec-5:before{background:url(/img/sec5_bg.jpg) no-repeat right -180px top; background-size: cover;}
        
        main .sec-5  h2{font-size: 50px !important;}
        main .sec-5  .txtBox h3{padding: 14px 60px;margin: 8px 12px;}
    }
    @media screen and (max-width:767px){
        main .sec-5{padding:200px 0 100px 3% !important;}
        main .sec-5:before{background:url(/img/sec5_bg2.jpg) no-repeat right -80px top; background-size: cover;}
        
        main .sec-5  h2{margin-top: 50px !important;}
        main .sec-5  .txtBox h3{padding: 14px 60px;margin: 5px 10px;}
        main .sec-5  .txtBox h4{margin-left: 26%; line-height: 100%;}
    }
    @media screen and (max-width:640px){
        main .sec-5{padding:120px 0 100px 3% !important;}
        
        main .sec-5  h2{font-size: 40px !important; letter-spacing: -0.04em;margin-top: 70px !important;}
        
        main .sec-5  .txtBox h3{padding: 14px 50px;margin: 0 5px;}
        main .sec-5  .txtBox h3.s5-3{margin-top: 10px;}
        main .sec-5  .txtBox h4{font-size: 40px !important; margin-left: 27%; line-height: 80%;}
    }
    @media screen and (max-width:560px){        
        main .sec-5  h2{font-size: 36px !important;}
        
        main .sec-5  .txtBox h3{padding: 12px 50px;margin: 0 5px;font-size: 26px !important;}
        main .sec-5  .txtBox h4{font-size: 35px !important; margin-left: 30%;}
    }
    @media screen and (max-width:460px){
        main .sec-5{padding:170px 0 120px 2% !important;}
        main .sec-5:before{background:url(/img/sec5_bg2.jpg) no-repeat right -90px top; background-size: cover;}
        
        main .sec-5  h2{font-size: 32px !important;margin-top: 60px;}
        
        main .sec-5  .txtBox {width: 80%; margin-left: 0;}
        main .sec-5  .txtBox h3{font-size: 24px !important; margin: 0 5px; padding: 10px 40px !important; }
        main .sec-5  .txtBox h4{margin-left: 37%;}
    }
    @media screen and (max-width:420px){
        main .sec-5:before{background:url(/img/sec5_bg2.jpg) no-repeat right -100px top; background-size: cover;}
        
        main .sec-5 h2{font-size: 28px !important; }
        
        main .sec-5 .txtBox {width: 90%; }
        main .sec-5 .txtBox h3{font-size: 23px !important; padding: 10px 30px !important;}
        main .sec-5  .txtBox h4{margin-left: 31%;}
    }
    @media screen and (max-width:360px){
        main .sec-5:before{background:url(/img/sec5_bg2.jpg) no-repeat right -110px top; background-size: cover;}
        
        main .sec-5 h2{width: 100%; font-size: 28px !important; margin-top: 50px; }
        
        main .sec-5 .txtBox h3{font-size: 23px !important;}
        main .sec-5 .txtBox {width: 95%;}
    }
    @media screen and (max-width:320px){ 
        main .sec-5 .txtBox h3{font-size: 22px !important; padding: 8px 28px !important;}    
    }





/***** ===== sec-6 퍼스널 컬러진단 ===== *****/
main .sec-6{width: 1700px; height: 940px;position:relative; padding: 0 !important; margin: 0 auto; border-bottom-left-radius: 100%;border-bottom-right-radius: 100%; overflow:hidden; z-index: 2;}
main .sec-6:before{content:"";width:100%;height:100%;background:url(/img/sec6_bg.png) no-repeat center  top; background-size: cover; position:absolute;top:0;left:0;display:block;transition:all 0.2s ease;}

main .sec-6 .txtBox{width: 34%; float: right; margin-right: 15%; margin-top: 10%;}
main .sec-6 .txtBox h2{font-family:'GmarketSansMedium';text-align: center; margin: 10px 0; color: #077f34;}

.btWrap a.bt.green{clear: both;padding:22px 60px; font-size:45px !important; background:linear-gradient(120deg, #12b25d 50% , #058c44 100%);border:none;color:#fff; text-shadow: 3px 2px 10px rgba(255,255,231,0.55);
 box-shadow: 0 0px 20px rgb(255 245 217 / 40%); transition:all 0.2s ease;}
.btWrap a.bt.green:hover{padding:22px 80px;text-shadow: 3px 2px 20px rgba(255,255,231,0.25);  box-shadow: 0 0px 50px rgb(255 245 217 / 80%); transition:all 0.2s ease;}



    @media screen and (max-width:1700px){
        main .sec-6{width: 100%; height: 940px; margin: 0 auto;}
    }
    @media screen and (max-width:1500px){
        main .sec-6{height: 774px;}
        main .sec-6:before{background:url(/img/sec6_bg2.png) no-repeat center top; background-size: cover;}
        
        main .sec-6 .txtBox{width: 43%;margin-right: 8%; margin-top: 8% !important;}
        main .sec-6 .txtBox h2{margin: 7px 0;}
        
        .btWrap a.bt.green{font-size:42px !important;}
    }
    @media screen and (max-width:1280px){
        main .sec-6{height: 750px;}
        main .sec-6:before{background:url(/img/sec6_bg3.png) no-repeat center top; background-size: cover;}
        
        main .sec-6 .txtBox{margin-top: -90px;}
        main .sec-6 .txtBox h2{font-size: 50px !important;}
        
        .btWrap a.bt.green{padding:20px 50px; font-size:38px !important;}
        .btWrap a.bt.green:hover{padding:20px 70px;}
    }
    @media screen and (max-width:1100px){
        main .sec-6{height: 600px;}
        main .sec-6:before{height: 580px; background:url(/img/sec6_bg4.png) no-repeat center top; background-size: cover;}
        
        main .sec-6 .txtBox{width: 46%;}
        main .sec-6 .txtBox h2{font-size: 40px !important;}
        
        .btWrap a.bt.green{padding:18px 45px; font-size:32px !important;}
        .btWrap a.bt.green:hover{padding:18px 65px;}
    }
    @media screen and (max-width:860px){
        main .sec-6{height: 520px;}
        main .sec-6:before{height: 480px; background:url(/img/sec6_bg5.png) no-repeat center top; background-size: cover;}
        
        main .sec-6 .txtBox{width: 50%;margin-right: 7%; margin-top: 10% !important;}
        main .sec-6 .txtBox h2{font-size: 36px !important;margin: 2px 0;}
        
        .btWrap a.bt.green{padding:16px 40px; font-size:27px !important;}
        .btWrap a.bt.green:hover{padding:16px 60px;}
    }
    @media screen and (max-width:700px){
        main .sec-6{height: 380px;}
        main .sec-6:before{height: 360px; background:url(/img/sec6_bg6.png) no-repeat center top; background-size: cover;}
        
        main .sec-6 .txtBox{width: 60%; margin-right: 5% !important; margin-top: 10% !important;}
        main .sec-6 .txtBox h2{font-size: 30px !important;margin: 0px 0;}
        
        .btWrap a.bt.green{padding:16px 40px; font-size:25px !important;}
        .btWrap a.bt.green:hover{padding:16px 60px;}
    }
    @media screen and (max-width:560px){  
        main .sec-6{height: 480px; border-radius: 0 !important; }
        main .sec-6:before{height: 480px;background:url(/img/sec6_bg7.png) no-repeat left -30px top; background-size: cover;}
        
        main .sec-6 .txtBox{width: 60%;margin-right: 1%; margin-top: 30% !important;}
        main .sec-6 .txtBox h2{font-size: 36px !important;margin: 2px 0;}
        
        .btWrap a.bt.green{padding:16px 35px; font-size:23px !important;}
        .btWrap a.bt.green:hover{padding:16px 55px;}
    }
    @media screen and (max-width:500px){  
        main .sec-6:before{height: 480px;background:url(/img/sec6_bg7.png) no-repeat left -80px top; background-size: cover;}
    }
    @media screen and (max-width:460px){
        main .sec-6 .txtBox{width: 70%; margin-top: 40% !important; text-align: center;}
        main .sec-6 .txtBox h2{font-size: 32px !important;margin: 8px 0;}
        
        .btWrap a.bt.green{padding:16px 30px; font-size:22px !important;}
        .btWrap a.bt.green:hover{padding:16px 50px;}
    }
    @media screen and (max-width:360px){       
        main .sec-6{height: 450px;} 
        main .sec-6:before{height: 450px;}
        
        main .sec-6 .txtBox{width: 80%;margin-top: 50% !important;}
        main .sec-6 .txtBox h2{font-size: 28px !important;margin: 6px 0; }
        
        .btWrap a.bt.green{padding:15px 35px; font-size:20px !important;}
        .btWrap a.bt.green:hover{padding:15px 55px;}
    }
    @media screen and (max-width:320px){
        main .sec-6 .txtBox{margin-top: 60% !important}
        main .sec-6 .txtBox h2{font-size: 24px !important;}
        
        .btWrap a.bt.green{padding:14px 35px; font-size:20px !important;}
        .btWrap a.bt.green:hover{padding:14px 55px;}
    }







/***** ===== sec-7 신부야 여행가자 ===== *****/
main .sec-7{position:relative; padding:380px 0 240px 0 !important;  overflow:hidden;margin-top: -350px; z-index: 0;}
main .sec-7:before{content:"";width:100%;height:100%;background:url(/img/sec7_bg.jpg) no-repeat center  top; background-size: cover; position:absolute;top:0;left:0;display:block;transition:all 0.2s ease;}


main .sec-7 .txtBox{text-align: center;}
main .sec-7 .txtBox img{display: block;margin: 0 auto;}
main .sec-7 .txtBox h4{color: #ff2828;}
main .sec-7 .txtBox font{font-size: 30px !important; color: #391b1b;}


main .sec-7 .imgBox{padding:120px 2% 80px 2%; background: rgba(255,255,255,.88); text-align: center; border-radius: 100px; overflow: hidden; transition:all 0.2s ease;}
main .sec-7 .imgBox h4{color: #15459f;}
main .sec-7 .imgBox h2{color: #2a67d6; font-size: 80px !important;}


/* 사은품 증정 */
main .sec-7 .imgBox .giftBox{height: 1200px; background:url(/img/sec7_giftbg.png) no-repeat center top; padding: 220px 0 0 26%; background-size: cover; transition:all 0.2s ease;}
main .sec-7 .imgBox .giftBox img{transition:all 0.2s ease;}

.btWrap a.bt.blue{padding:30px 90px; font-size:50px !important; border-radius: 80px; background:linear-gradient(120deg, #29b1da 45% , #1f68c5 100%);border:none;color:#fff; text-shadow: 3px 2px 10px rgba(255,255,231,0.55);
 box-shadow: 0 0px 20px rgb(255 245 217 / 40%);  transition:all 0.2s ease; margin-top: -300px;}
.btWrap a.bt.blue:hover{padding:30px 120px;text-shadow: 3px 2px 20px rgba(255,255,231,0.25);  box-shadow: 0 0px 50px rgb(255 245 217 / 80%); transition:all 0.2s ease;}

    @media screen and (max-width:1720px){
        main .sec-7 .imgBox{width: 95%; margin: 0 auto;}        
        main .sec-7 .imgBox .giftBox{height: 1200px; background:url(/img/sec7_giftbg.png) no-repeat center top; background-size: contain; padding: 220px 0 0 26%;}
        main .sec-7 .imgBox .giftBox img{width: 55%;}
        
        .btWrap a.bt.blue{margin-top: -450px;}
    }
    @media screen and (max-width:1600px){
        main .sec-7 .imgBox{padding:100px 2% 100px 2% !important;}
        main .sec-7 .imgBox h2{font-size: 70px !important;}
        
        .btWrap a.bt.blue{margin-top: -580px;}
    }
    @media screen and (max-width:1500px){
        main .sec-7{padding:380px 0 240px 0 !important; margin-top: -300px;}
        
        main .sec-7 .imgBox h2{font-size: 60px !important;}        
        main .sec-7 .imgBox .giftBox{height: 900px;  padding: 190px 0 0 26%;}
        main .sec-7 .imgBox .giftBox img{width: 50%;}
        
        .btWrap a.bt.blue{padding:25px 80px; font-size:45px !important; margin-top: -250px;}
        .btWrap a.bt.blue:hover{padding:25px 100px;}
    }
    @media screen and (max-width:1280px){
        main .sec-7{margin-top: -280px;}
        main .sec-7 .txtBox .s7_ttl1{width: 300px; height: auto;}
        main .sec-7 .txtBox .s7_ttl2{width: 800px; height: auto;}
        main .sec-7 .txtBox font{font-size: 26px !important;}
        
        main .sec-7 .imgBox{padding:80px 2% 80px 2% !important; border-radius: 80px; margin-top: 60px !important}
        main .sec-7 .imgBox h2{font-size: 60px !important;}        
        main .sec-7 .imgBox .giftBox{height: 700px;  padding: 120px 0 0 24%;}
        
        .btWrap a.bt.blue{padding:22px 70px; font-size:40px !important; margin-top: -120px;}
        .btWrap a.bt.blue:hover{padding:22px 90px;}
    }
    @media screen and (max-width:1100px){
        main .sec-7{padding:300px 0 150px 0 !important;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 280px;}
        main .sec-7 .txtBox .s7_ttl2{width: 700px;}
        main .sec-7 .txtBox font{font-size: 24px !important;}
        
        main .sec-7 .imgBox{padding:60px 2% 80px 2% !important; border-radius: 70px;}        
        main .sec-7 .imgBox .giftBox{height: 760px; background:url(/img/sec7_giftbg.png) no-repeat center top; background-size: 110%; padding: 170px 0 0 26%;}
        main .sec-7 .imgBox .giftBox img{width: 55%;}
        
        .btWrap a.bt.blue{padding:22px 60px; font-size:38px !important; margin-top: -180px;}
        .btWrap a.bt.blue:hover{padding:22px 80px;}
    }
    @media screen and (max-width:960px){
        main .sec-7{padding:280px 0 130px 0 !important;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 250px;}
        main .sec-7 .txtBox .s7_ttl2{width: 670px;}
        
        main .sec-7 .imgBox{padding:60px 2% 70px 2% !important; border-radius: 60px;}        
        main .sec-7 .imgBox .giftBox{height: 700px;padding: 130px 0 0 26%;}
        main .sec-7 .imgBox .giftBox img{width: 57%;}
        
        .btWrap a.bt.blue{padding:22px 60px; font-size:36px !important; margin-top: -230px;}
        .btWrap a.bt.blue:hover{padding:22px 80px;}
    }
    @media screen and (max-width:860px){
        main .sec-7 .imgBox .giftBox{height: 610px;}
    }
    @media screen and (max-width:767px){
        main .sec-7{padding:200px 0 120px 0 !important; margin-top: -180px;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 220px;}
        main .sec-7 .txtBox .s7_ttl2{width: 640px;}
        main .sec-7 .txtBox font{font-size: 22px !important;}
        
        main .sec-7 .imgBox{padding:60px 2% 60px 2% !important;}    
        main .sec-7 .imgBox h2{font-size: 55px !important;}        
        main .sec-7 .imgBox .giftBox{height: 550px; padding: 100px 0 0 28%;}
        main .sec-7 .imgBox .giftBox img{width: 60%;}
        
        .btWrap a.bt.blue{padding:18px 50px; font-size:30px !important; margin-top: -180px;}
        .btWrap a.bt.blue:hover{padding:18px 70px;}
    }
    @media screen and (max-width:640px){
        main .sec-7{padding:200px 0 100px 0 !important;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 200px;}
        main .sec-7 .txtBox .s7_ttl2{width: 520px;}
        main .sec-7 .txtBox font{font-size: 20px !important;}
        
        main .sec-7 .imgBox{border-radius: 50px;}
        main .sec-7 .imgBox h2{font-size: 50px !important;}        
        main .sec-7 .imgBox .giftBox{height: 500px; padding: 90px 0 0 28%;}
        main .sec-7 .imgBox .giftBox img{width: 60%;}
        
        .btWrap a.bt.blue{padding:18px 40px; font-size:28px !important; margin-top: -200px;}
        .btWrap a.bt.blue:hover{padding:18px 60px;}
    }
    @media screen and (max-width:560px){
        main .sec-7{padding:150px 0 80px 0 !important; margin-top: -50px;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 160px;}
        main .sec-7 .txtBox .s7_ttl2{width: 480px;}
        main .sec-7 .txtBox font{font-size: 18px !important;}
        
        main .sec-7 .imgBox{padding:60px 2% 40px 2% !important; margin-top: 40px !important;}    
        main .sec-7 .imgBox h2{font-size: 43px !important;}        
        main .sec-7 .imgBox .giftBox{height: 450px;padding: 70px 0 0 28%;}
        main .sec-7 .imgBox .giftBox img{width: 62%;}
        
        .btWrap a.bt.blue{padding:15px 35px; font-size:24px !important; margin-top: -240px;}
        .btWrap a.bt.blue:hover{padding:15px 55px;}
    }
    @media screen and (max-width:460px){
        main .sec-7{padding:140px 0 80px 0 !important;}
        
        main .sec-7 .txtBox .s7_ttl1{width: 120px;}
        main .sec-7 .txtBox .s7_ttl2{width: 400px;}
        main .sec-7 .txtBox font{font-size: 16px !important;}
        
        main .sec-7 .imgBox{padding:60px 2% 40px 2% !important; border-radius: 40px;}
        main .sec-7 .imgBox h2{font-size: 36px !important;}
        
        main .sec-7 .imgBox .giftBox{height: 330px;background:url(/img/sec7_giftbg2.png) no-repeat center top; background-size: 110%; padding: 40px 0 0 27%;}
        main .sec-7 .imgBox .giftBox img{width: 72%;}
        
        .btWrap a.bt.blue{padding:13px 30px; font-size:22px !important; margin-top: -100px;}
        .btWrap a.bt.blue:hover{padding:13px 50px;}
    }
    @media screen and (max-width:360px){        
        main .sec-7 .txtBox .s7_ttl1{width: 120px;}
        main .sec-7 .txtBox .s7_ttl2{width: 360px;}
        main .sec-7 .txtBox font{font-size: 13px !important;}
        
        main .sec-7 .imgBox{padding:40px 2% 40px 2% !important; border-radius: 30px;}
        main .sec-7 .imgBox h4{font-size: 20px !important; letter-spacing: -0.04em;}
        main .sec-7 .imgBox h2{font-size: 32px !important;}
        
        main .sec-7 .imgBox .giftBox{height: 280px; padding: 35px 0 0 27%;}
        main .sec-7 .imgBox .giftBox img{width: 68%;}
        
        .btWrap a.bt.blue{padding:12px 25px; font-size:20px !important; margin-top: -60px;}
        .btWrap a.bt.blue:hover{padding:12px 45px;}
    }
    @media screen and (max-width:320px){
        main .sec-7 .imgBox h4{font-size: 18px !important;}
        main .sec-7 .imgBox h2{font-size: 28px !important;}
        
        .btWrap a.bt.blue{padding:12px 20px; font-size:18px !important; margin-top: -120px;}
        .btWrap a.bt.blue:hover{padding:12px 35px;}
    }




/* 여행상품 */
main .sec-7 .imgBox .travelBox{width: 90%; margin: 0 auto; margin-top: 100px !important; overflow: hidden;}
main .sec-7 .imgBox .travelBox span{width:calc(100%/2.08); margin-bottom: 60px; transition:all 0.2s ease;}
main .sec-7 .imgBox .travelBox span:nth-child(1){width:100%;}
main .sec-7 .imgBox .travelBox span:nth-child(1) img{width: fit-content; transition:all 0.2s ease;}
main .sec-7 .imgBox .travelBox img{width: 100%; transition:all 0.2s ease;}


main .sec-7 .imgBox .travelBox2{width: 90%; margin: 0 auto;overflow: hidden;}
main .sec-7 .imgBox .travelBox2 h3{color: #027379; font-family:'GmarketSansLight' !important; margin: 0 auto;}
main .sec-7 .imgBox .travelBox2 h3 b{font-family:'GmarketSansBold';}


main .sec-7 .imgBox .travelBox2 .worldBox{width: 80%; margin: 0 auto; overflow: hidden;}
main .sec-7 .imgBox .travelBox2 .worldBox span{width:calc(100%/3.3); margin: 0 auto; margin-bottom: 60px; transition:all 0.2s ease;}
main .sec-7 .imgBox .travelBox2 .worldBox font{font-family:'GmarketSansLight' !important; color: #393939; letter-spacing: -0.08em; margin-bottom: 10px;}
main .sec-7 .imgBox .travelBox2 .worldBox font b{font-family:'GmarketSansBold'; display: inline-block; letter-spacing: -0.05em;}


    @media screen and (max-width:1280px){
        main .sec-7 .imgBox .travelBox span:nth-child(1) img{width: 50%; margin: 0 auto;}        
        main .sec-7 .imgBox .travelBox span{width:calc(100%/2.05);margin-bottom: 20px;}
        
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 85%;}
        main .sec-7 .imgBox .travelBox2 .worldBox span{width:calc(100%/3.3); margin-bottom: 40px;}
    }
    @media screen and (max-width:1200px){        
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 90%;}
    }
    @media screen and (max-width:1100px){        
        main .sec-7 .imgBox .travelBox2 .worldBox span{width:calc(100%/2.3);}
    }
    @media screen and (max-width:767px){
        main .sec-7 .imgBox .travelBox{width: 95%; margin-top: 70px !important;}
        
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 95%;}
        main .sec-7 .imgBox .travelBox2 .worldBox span{width:calc(100%/2.2);}
    }
    @media screen and (max-width:640px){
        main .sec-7 .imgBox .travelBox{width: 80%; margin-top: 50px !important;}
        
        main .sec-7 .imgBox .travelBox span:nth-child(1){width:100% !important; ;margin-bottom: 40px;}
        main .sec-7 .imgBox .travelBox span:nth-child(1) img{width: 100% !important;}
        main .sec-7 .imgBox .travelBox span{width:calc(100%/1);margin-bottom: 40px;}
        
        main .sec-7 .imgBox .travelBox2 h3{font-size: 30px !important;}
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 60%;}
        main .sec-7 .imgBox .travelBox2 .worldBox span{width:calc(100%/1);}
    }
    @media screen and (max-width:460px){
        main .sec-7 .imgBox .travelBox{width: 85%;}
        
        main .sec-7 .imgBox .travelBox span:nth-child(1){margin-bottom: 30px;}
        main .sec-7 .imgBox .travelBox span{margin-bottom: 30px;}
        
        main .sec-7 .imgBox .travelBox2 h3{font-size: 26px !important;}
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 65%;}
    }
    @media screen and (max-width:420px){
        main .sec-7 .imgBox .travelBox span:nth-child(1){margin-bottom: 20px;}
        main .sec-7 .imgBox .travelBox span{margin-bottom: 20px;}
        
        main .sec-7 .imgBox .travelBox2 h3{font-size: 24px !important;}
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 70%;}
    }
    @media screen and (max-width:360px){
        main .sec-7 .imgBox .travelBox2 h3{font-size: 22px !important;word-break:keep-all !important; }
        
        main .sec-7 .imgBox .travelBox2 .worldBox{width: 75%;}
        main .sec-7 .imgBox .travelBox2 .worldBox font{display: block;}
        main .sec-7 .imgBox .travelBox2 .worldBox font b{display: block;}
    }





/* 파트너스 */
main .sec-7 .partnerBox{padding:100px 0 90px 0; background: rgba(255,255,255,1); border-radius: 100px; overflow: hidden; transition:all 0.2s ease;}
main .sec-7 .partnerBox h5{width: fit-content; position: relative; margin: 0 auto;}
main .sec-7 .partnerBox h5:after{width:110%;height:2px;background:#000;position:absolute; bottom:-5px;left:-10px;display:block;content:"";}

main .sec-7 .partnerBox .partners{width: 75%; margin: 0 auto;}
main .sec-7 .partnerBox .partners span{width:calc(100%/7.08); margin: 0 auto; margin-bottom: 15px; transition:all 0.2s ease;}
main .sec-7 .partnerBox .partners img{width: 100%; transition:all 0.2s ease;}
main .sec-7 .partnerBox .partners img:hover{transform:scale(1.1);transition:all 0.2s ease;}


    @media screen and (max-width:1280px){
        main .sec-7 .partnerBox{padding:80px 0 60px 0;border-radius: 80px;}
        
        main .sec-7 .partnerBox .partners{justify-content: center !important;}
        main .sec-7 .partnerBox .partners span{width:calc(100%/6.08); }
    }
    @media screen and (max-width:1100px){
        main .sec-7 .partnerBox{border-radius: 70px;}
    }
    @media screen and (max-width:960px){
        main .sec-7 .partnerBox{padding:60px 0 40px 0; border-radius: 60px;}
        main .sec-7 .partnerBox .partners span{width:calc(100%/5.08); }
    }
    @media screen and (max-width:767px){
        main .sec-7 .partnerBox .partners span{width:calc(100%/4.1); }
    }
    @media screen and (max-width:640px){
        main .sec-7 .partnerBox{padding:50px 0 40px 0; border-radius: 50px;}
        main .sec-7 .partnerBox .partners span{width:calc(100%/4.2); }
    }
    @media screen and (max-width:460px){
        main .sec-7 .partnerBox{border-radius: 40px;}
        main .sec-7 .partnerBox .partners{width: 85%;}
    }
    @media screen and (max-width:360px){
        main .sec-7 .partnerBox{border-radius: 30px;}s
    }








/***** ===== sec-8 무료사전신청 ===== *****/
main .sec-8 {background: #f0ede5; padding: 160px 0;  position: relative; z-index: 9;}
main .sec-8::before {width:700px;height:1044px;background:url(/form/img/form_bg.png) no-repeat left top;position:absolute; background-size: contain; top:0;left:0;display:block;content:"";z-index: 0; opacity: .7;transition:all 0.2s ease;}
main .sec-8 .formBox .buCon{margin-bottom:50px;}
main .sec-8 .formBox .buCon h2{font-size: 70px !important;}

main .sec-8 .formBox .buCon .boxLine{width:50%;padding:60px 50px; margin: 0 auto; border-radius:30px;box-shadow:1px 1px 15px rgba(0,0,0,0.1);background:#fff;}
main .sec-8 .formBox .buCon .boxLine .progress{width:100%;padding:30px;border-radius:40px;border:solid 1px #e9e9e9;background:#fafafa;position:relative;}
main .sec-8 .formBox .buCon .boxLine .progress .depart{font-weight:bold;position:absolute;top:calc(50% + 40px);right:calc(38% - 5px);z-index:10;}
main .sec-8 .formBox .buCon .boxLine .progress .item{width:calc(100%/5);padding:20px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-wrap:wrap;}
main .sec-8 .formBox .buCon .boxLine .progress .item img{width:60%;max-width:144px;margin:0 auto;display:block;}
main .sec-8 .formBox .buCon .boxLine .progress *{text-align:center;}
main .sec-8 .formBox .buCon .boxLine .progress .step{padding:14px 26px 10px 26px;background:#1774d0;color:#fff;border-radius:30px;box-shadow:2px 2px 10px rgba(0,0,0,0.1);}
main .sec-8 .formBox .buCon .boxLine .progress span{width:100%;height:26px;margin:30px 0 20px 0;position:relative;display:block;z-index:9;}
main .sec-8 .formBox .buCon .boxLine .progress span:before{content:"";width:100%;height:1px;margin-top:-6px;background:#ddd;position:absolute;top:50%;left:0;display:block;}
main .sec-8 .formBox .buCon .boxLine .progress i{width:16px;height:16px;margin:0 auto;background:#1774d0;border-radius:50%;display:block;position:relative;}
main .sec-8 .formBox .buCon .boxLine .progress i:before{content:"";width:26px;height:26px;border:solid 1px #1774d0;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;}

main .sec-8 .formBox .buCon .boxLine .progress.s1prog .item{width:calc(100%/4);}
main .sec-8 .formBox .buCon .boxLine .progress.s1prog .item font.con{color:#606060;line-height:135% !important;}



main .sec-8 .formBox .buCon .boxLine .progress_timeline{width:100%;padding:50px 30px;border-radius:40px;border:solid 1px #e9e9e9;background:#fafafa;position:relative;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline:after{content:"";width:1px;height:100%;background:#ddd;position:absolute;top:0;left:72px;display:block;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item{padding:20px 0;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item span{width:86px;height:100%;position:relative;display:block;z-index:9;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item i{width:16px;height:16px;margin:0 auto;background:#1774d0;border-radius:50%;display:block;position:relative;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item i:before{content:"";width:26px;height:26px;border:solid 1px #1774d0;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item div.disF{width:calc(100% - 86px);margin-top:-5px;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item div.disF .time{width:150px;}
main .sec-8 .formBox .buCon .boxLine .progress_timeline .item div.disF .minute{width:60px;color:#1774d0;}


main .sec-8 .formBox .buCon .textareaBox{height:170px;padding:30px 40px;background:#f9f9f9;font-size:18px;line-height:200%;overflow-y:auto;}
main .sec-8 .formBox .buCon .textareaBox::-webkit-scrollbar{width:8px;}
main .sec-8 .formBox .buCon .textareaBox::-webkit-scrollbar-track{background:#f9f9f9;}
main .sec-8 .formBox .buCon .textareaBox::-webkit-scrollbar-thumb{background:#aaa;border-radius:8px;}
main .sec-8 .formBox .buCon .textareaBox::-webkit-scrollbar-thumb:hover{background:#777;}

main .sec-8 .formBox .buCon .textareaBox p{font-family:'Noto Sans KR';}

main .sec-8 .formBox .buCon .textareaBox .table{border-top:solid 1px #555;}
main .sec-8 .formBox .buCon .textareaBox .table tr th,
main .sec-8 .formBox .buCon .textareaBox .table tr td{padding-top:12px;padding-bottom:12px;font-size:18px !important;}
main .sec-8 .formBox .buCon .textareaBox .table tr td{text-align:left;}

main .sec-8 .formBox .buCon .checkBox input[type="checkbox"]{display:none;}
main .sec-8 .formBox .buCon .checkBox .custom-checkbox{width:22px;height:22px;border:1px solid #a0a0a0;border-radius:3px;background-color:#fff;display:inline-block;position:relative;cursor:pointer;}
main .sec-8 .formBox .buCon .checkBox input[type="checkbox"]:checked + .custom-checkbox{}
main .sec-8 .formBox .buCon .checkBox input[type="checkbox"]:checked + .custom-checkbox::after{content:"";width:8px;height:17px;content:'';position:absolute;top:-4px;left:6px;border:solid #000;border-width:0 3px 3px 0;transform:rotate(45deg);}
main .sec-8 .formBox .buCon .checkBox .checkbox-label{width:calc(100% - 22px);padding-left:10px;}


main .sec-8 .formBox .buCon .checkBox span a {width: 80px; display: inline-block;}
main .sec-8 .formBox .buCon .checkBox span a u{color:#808080;cursor:pointer;}




    @media screen and (max-width:1280px){
    main .sec-8::before {width:600px;height:895px;background:url(/form/img/form_bg.png) no-repeat left top; background-size: contain; top:0;left:-15%;}
        
    main .sec-8 .formBox .buCon h2{font-size: 60px !important;}
        
    main .sec-8 .formBox .buCon .boxLine{width:60%;padding:50px 40px;border-radius:30px;}
    }
    @media screen and (max-width:960px){
    main .sec-8::before {width:500px;height:746px;background:url(/form/img/form_bg.png) no-repeat left top; background-size: contain; top:0;left:-25%; opacity: .5;}
    main .sec-8 .formBox .buCon .boxLine{width:70%;padding:40px 30px;border-radius:25px;}
    }
    @media screen and (max-width:767px){
    main .sec-8::before {width:400px;height:597px;background:url(/form/img/form_bg.png) no-repeat left top; background-size: contain; top:0;left:-25%; opacity: .5;}
        
    main .sec-8 .formBox .buCon h2{font-size: 50px !important;}
        
    main .sec-8 .formBox .buCon .boxLine{width:80%;}
    }
    @media screen and (max-width:660px){
    main .sec-8::before {display: none;}
        
    main .sec-8 .formBox .buCon h2{font-size: 45px !important;}
        
    main .sec-8 .formBox .buCon .boxLine{width:85%;padding:40px 30px;border-radius:25px;}
    }
    @media screen and (max-width:560px){
    main .sec-8 .formBox .buCon .boxLine{width:90%;padding:30px 20px;border-radius:20px;}
        
    main .sec-8 .formBox .buCon h2{font-size: 40px !important;}
    }
    @media screen and (max-width:500px){
    main .sec-8 .formBox .buCon .boxLine{width:95%;padding:30px 20px;border-radius:20px;}
    }
    @media screen and (max-width:420px){
    main .sec-8 .formBox .buCon h2{font-size: 36px !important;}
    main .sec-8 .formBox .buCon .type24{font-size: 14px !important;}
    }



.btWrap.form{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.btWrap.form a.bt{width: 40%; padding:30px 100px;padding-right:110px;margin:0 10px;text-align:center;font-weight:500;font-size:29px;line-height:120%;color:#fff;border-radius:10px !important;display:table;transition:all 0.2s ease;position:relative;box-shadow:5px 5px 12px rgba(0,0,0,0.3);}
.btWrap.form a.bt i{width:18px;height:3px;background:#fff;display:inline-block;position:absolute;top:calc(50% - 1px);right:50px;transition:all 0.2s ease;}
.btWrap.form a.bt i:after{content:"";width:14px;height:14px;border:solid #fff;border-width:3px 3px 0 0;position:absolute;top:calc(50% - 7px);right:0;display:block;transform:rotate(45deg);}

.btWrap.form a.bt .ico {position: absolute; display: block; right:10px; top: -80px;}

.btWrap.form a.bt:hover{padding-right:130px;box-shadow:0 0 12px rgba(0,0,0,0.3);transition:all 0.2s ease;}
.btWrap.form a.bt.blue{background:#1774d0;}
.btWrap.form a.bt.gray{background:#c1c1c1;}
.btWrap.form a.bt.black{background:#000;}


    @media screen and (max-width:1500px){
        .btWrap.form a.bt{width: 50%; padding:30px 0px;margin:0 10px;font-size:29px;line-height:120%;}
    }
    @media screen and (max-width:960px){
        .btWrap.form a.bt{width: 60%; padding:28px 0px;}
        .btWrap.form a.bt .ico {width: 120px; height: auto; right:0px; top: -70px;}
    }
    @media screen and (max-width:767px){
        .btWrap.form a.bt{width: 70%; padding:25px 0px;font-size:27px;}
    }
    @media screen and (max-width:600px){
        .btWrap.form a.bt{width: 80%; font-size:25px;}
        .btWrap.form a.bt .ico {width: 100px; right:0px; top: -60px;}
    }
    @media screen and (max-width:460px){
        .btWrap.form a.bt{width: 85%; font-size:24px;}
        .btWrap.form a.bt .ico {width: 80px; right:0px; top: -50px;}
    }
    @media screen and (max-width:360px){
        .btWrap.form a.bt{width: 90%; font-size:22px;}
    }




/* 신청폼 > 입력폼 */

.appBox input[type=text],
.appBox input[type=number],
.appBox input[type=button],
.appBox select,
.appBox textarea{padding:var(--common-padding);margin-right:10px;border:solid 1px #ccc;border-radius:var(--common-border-radius);font-size:var(--common-font-size);line-height:var(--common-line-height);display:block; border-radius: 5px !important}
.appBox input[type=text]:last-child,
.appBox select:last-child{margin-right:0 !important;}
.appBox input[type=text].w100{width: 100% !important;}
.appBox input[type=text]::-webkit-input-placeholder{color:#000 !important;}
.appBox input[type=text]::-moz-input-placeholder{color:#000 !important;}
.appBox input[type=text]::-ms-input-placeholder{color:#000 !important;}

.appBox select{padding-right:40px;background:url(/form/img/select_arrow.png) no-repeat right 20px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:all 0.2s ease;}
.appBox select::-ms-expand{display:none;}

.appBox input[type=checkbox]{display:inline-block;}
.appBox input[type=checkbox] + label{padding-left:10px;display:inline-block;position:relative;}

.appBox textarea{width:100%;min-height:150px;}



.appBox input[type=checkbox2]{margin-right:12px;display:inline-block;display:none;}
.appBox input[type=checkbox2] + label{display:inline-block;position:relative;padding-left:40px;}

.appBox input[type=checkbox2] + label:before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;display:inline-block;background:url(/form/img/icon_chk_off.png) no-repeat left center;background-size:cover;}
.appBox input[type=checkbox2]:checked + label:before{content:"";background:url(/sub3/img/icon_chk_on.png) no-repeat left center;background-size:cover;}

.appBox input[type=radio] + label:after{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;display:inline-block;background:url(/form/img/icon_radio_off.png) no-repeat left center;background-size:cover;}
.appBox input[type=radio]:radio + label:after{content:"";background:url(/form/img/icon_radio_on.png) no-repeat left center;background-size:cover;}



@media screen and (max-width:1500px) {
.appBox input[type=text],
.appBox input[type=button],
.appBox textarea,
.appBox select{margin-right:8px;}
.appBox select{padding-right:35px;}
}
@media screen and (max-width:1280px) {
.appBox input[type=text],
.appBox input[type=button],
.appBox textarea,
.appBox select{margin-right:6px;}
.appBox select{padding-right:30px;background-position:right 15px center;background-size:12px;}
}
@media screen and (max-width:640px) {
.appBox input[type=text],
.appBox input[type=button],
.appBox textarea,
.appBox select{max-width:100% !important;}
}
@media screen and (max-width:400px) {
.appBox input[type=text],
.appBox input[type=button],
.appBox textarea,
.appBox select{margin-right:4px;}
.appBox select{padding-right:25px;background-position:right 10px center;background-size:10px;}
}



/* 신청폼 > 레이아웃 */
.appBox .titBox{padding:0 20px;}
.appBox i.star{width:10px;height:10px;margin:0px;margin-bottom:0 !important;border-radius:50%;background:url(/form/img/star.png) no-repeat top right;display:inline-block;}

.appBox .appBox-D{width:100%;/*border-top:solid 1px #c3c3c3;*/}
.appBox .appBox-D .itemBox{width:100%;padding:25px 25px; border-bottom:solid 1px #f0f0f0; /*display:flex;align-items:center;flex-wrap:wrap;*/}
.appBox .appBox-D .itemBox .ttit{width:100%; margin-bottom: 10px;}
.appBox .appBox-D .itemBox .ttit font{line-height:160% !important;}
.appBox .appBox-D .itemBox .ttit i.star{margin-left:10px;margin-top:0px;}
.appBox .appBox-D .itemBox .ccon{width:100% ;}
/*
.appBox .appBox-D .itemBox .ccon{width:calc(100% - 180px);}
*/
.appBox .appBox-D .itemBox .ccon .butStyle{width:150px;height:52px;line-height:52px !important;padding:0 !important;border-radius:30px;font-size:var(--common-font-size);line-height:var(--common-line-height);color:#fff;text-align:center;box-shadow:4px 4px 8px rgba(0,0,0,0.2);border:none;cursor:pointer;}
.appBox .appBox-D .itemBox .ccon a.add{width:38px;height:38px;margin-bottom:6px;padding-bottom:2px;color:#fff;font-size:28px;font-weight:normal;line-height:120%;border-radius:50%;background:#1774d0;display:flex;align-items:center;justify-content:center;}

.appBox .appBox-D .itemBox .ccon.basic{}
.appBox .appBox-D .itemBox .ccon.basic select{width:30%;}

.appBox .appBox-D .itemBox .ccon.contact{display:flex;align-items:center;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.contact font{width:21px;text-align:left;}
.appBox .appBox-D .itemBox .ccon.contact input[type=text]{width:calc(100%/3 - 21px);max-width:130px;}
.appBox .appBox-D .itemBox .ccon.contact input[type=number]{width:calc(100%/3 - 21px);max-width:130px;font-size: 16px;}
.appBox .appBox-D .itemBox .ccon.contact select{width:calc(100%/3);max-width:130px;padding: 14px 20px;}

.appBox .appBox-D .itemBox .ccon.contact_custom{display:flex;align-items:flex-end;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox{min-width:780px;margin-top:5px;margin-right:15px;display:flex;align-items:center;}
.appBox .appBox-D .itemBox .ccon.contact_custom.s4 .dataBox{width:calc(100% - 60px);}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox:first-child{margin-top:0 !important;}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox input[type=text]{width:30%;}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox span{width:70%;display:flex;align-items:center;}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox span font{width:21px;text-align:left;}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox span input[type=text]{width:calc(100%/3 - 21px);}
.appBox .appBox-D .itemBox .ccon.contact_custom .dataBox span select{width:calc(100%/3);}


.appBox .appBox-D .itemBox .ccon.sns_account{display:flex;align-items:flex-end;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.sns_account .dataBox{min-width:780px;margin-top:5px;margin-right:15px;display:flex;align-items:center;}
.appBox .appBox-D .itemBox .ccon.sns_account .dataBox:first-child{margin-top:0 !important;}
.appBox .appBox-D .itemBox .ccon.sns_account .dataBox select{width:30%;}
.appBox .appBox-D .itemBox .ccon.sns_account .dataBox input[type=text]{width:70%;}



.appBox .appBox-D .itemBox .ccon.adress{}
.appBox .appBox-D .itemBox .ccon.adress input#address_post{margin-bottom:10px;background:#1774d0;}
.appBox .appBox-D .itemBox .ccon.adress input#address_post::-webkit-input-placeholder{color:#fff !important;}
.appBox .appBox-D .itemBox .ccon.adress input#address_post::-moz-input-placeholder{color:#fff !important;}
.appBox .appBox-D .itemBox .ccon.adress input#address_post::-ms-input-placeholder{color:#fff !important;}
.appBox .appBox-D .itemBox .ccon.adress input#address_address1{width:60%;margin-bottom:5px;}
.appBox .appBox-D .itemBox .ccon.adress input#address_address2{width:40%;}

.appBox .appBox-D .itemBox .ccon.idcard{display:flex;align-items:flex-end;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.idcard .idsample{padding:10px 0;}
.appBox .appBox-D .itemBox .ccon.idcard .idsample *{margin-right:20px;}
.appBox .appBox-D .itemBox .ccon.idcard .idsample img.id{width:30%;max-width:255px;}
.appBox .appBox-D .itemBox .ccon.idcard .idsample font{padding-left:10px;text-indent:-15px;}

.appBox .appBox-D .itemBox .ccon .dataWrap{display:flex;align-items:flex-end;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon .dataWrap .dataBox{min-width:675px;margin-top:10px;}
.appBox .appBox-D .itemBox .ccon .dataWrap .dataBox .custom-file-input{width:0;height:0;opacity:0;position:absolute;z-index:-1;}
.appBox .appBox-D .itemBox .ccon .dataWrap .dataBox .file-name{padding:var(--common-padding);padding-right:40px;margin-right:10px;border:solid 1px #ccc;border-radius:var(--common-border-radius);font-size:var(--common-font-size);line-height:var(--common-line-height);color:#9d9d9d;display:inline-block;}
.appBox .appBox-D .itemBox .ccon .dataWrap .dataBox .custom-label{background-color:#b5b5b5;display:inline-block;}
.appBox .appBox-D .itemBox .ccon.file .dataWrap .dataBox .file-name{min-width:70%;max-width:495px;min-height:52px;}

.appBox .appBox-D .itemBox .ccon.accommodation{display:flex;align-items:flex-start;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.accommodation figure{width:100%;padding-top:60%;margin-top:10px;display:block;overflow:hidden;border-radius:var(--common-border-radius);position:relative;}
.appBox .appBox-D .itemBox .ccon.accommodation figure img{width:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.appBox .appBox-D .itemBox .ccon.accommodation input[type=button]{width:180px;background:#1774d0;}
.appBox .appBox-D .itemBox .ccon.accommodation input[type=button]::-webkit-input-placeholder{color:#fff !important;}
.appBox .appBox-D .itemBox .ccon.accommodation input[type=button]::-moz-input-placeholder{color:#fff !important;}
.appBox .appBox-D .itemBox .ccon.accommodation input[type=button]::-ms-input-placeholder{color:#fff !important;}

.appBox .appBox-D .itemBox.name{}
.appBox .appBox-D .itemBox.name .ttit{}

.appBox .appBox-D .itemBox.name .gender{width:200px; display:flex; justify-content: flex-end;  align-items: center; ; margin-top: -4px;}
.appBox .appBox-D .itemBox.name .gender .radioBox{width: 80px; display: flex; align-items: center; justify-content: center; margin-top: 2px;}
.appBox .appBox-D .itemBox.name .gender .radioBox b{width:30px;}
.appBox .appBox-D .itemBox.name .gender .radioBox font{width:60px; text-align: left;}



.appBox .appBox-D .itemBox .date_wedding{}
.appBox .appBox-D .itemBox .date_wedding span{display:flex;align-items:flex-start;}
.appBox .appBox-D .itemBox .date_wedding span .ui-datepicker-trigger{width:120px;height:52px;line-height:52px !important;font-size: 18px !important; padding:0 !important;border-radius:10px;font-size:var(--common-font-size);line-height:var(--common-line-height);color:#fff;text-align:center;/*box-shadow:4px 4px 8px rgba(0,0,0,0.2);*/border:none;cursor:pointer;background:#a2623d; margin-right: 10px;}
.appBox .appBox-D .itemBox .date_wedding.seBox{display:flex;align-items:center;}
.appBox .appBox-D .itemBox .date_wedding.seBox span{width: 100%; /*width:calc(40% - 35px);*/}
.appBox .appBox-D .itemBox .date_wedding.seBox font{width:60px;}
.appBox .appBox-D .itemBox .date_wedding.seBox input[type=text]{width:calc(100% - 200px);}


.appBox .appBox-D .itemBox .date_wedding.seBox .radioBox{width: 80px; display: flex; align-items: center; justify-content: center; margin-top: 2px;}
.appBox .appBox-D .itemBox .date_wedding.seBox .radioBox b{width:30px;}
.appBox .appBox-D .itemBox .date_wedding.seBox .radioBox font{width:60px; text-align: left;}



.appBox .appBox-D .itemBox .ccon.email{display:flex;align-items:center;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.email font{width:31px;text-align:left;}
.appBox .appBox-D .itemBox .ccon.email input[type=text]{width:calc(100%/3 - 31px);max-width:160px;}
.appBox .appBox-D .itemBox .ccon.email select{width:calc(100%/3);max-width:160px;}

.appBox .appBox-D .itemBox .ccon.basic_plus span{display:flex;align-items:center;flex-wrap:wrap;}
.appBox .appBox-D .itemBox .ccon.basic_plus span font{color:#9d9d9d;}
.appBox .appBox-D .itemBox .ccon.basic_plus input[type=checkbox]{margin-right:10px;}
.appBox .appBox-D .itemBox .ccon.basic_plus div.disF span{margin-right:40px;}


    @media screen and (max-width:1280px) {
        .appBox .appBox-D .itemBox .date_wedding span .ui-datepicker-trigger{width:110px;height:45px;line-height:45px !important;font-size: 18px !important; margin-right: 10px;}
        .appBox .appBox-D .itemBox .ccon.contact select{padding: 12px 18px;}
    }    
    @media screen and (max-width:1100px) {
        .appBox .appBox-D .itemBox .ccon.contact input[type=text]{width:calc(100%/3 - 21px);max-width:110px !important;}
        .appBox .appBox-D .itemBox .ccon.contact input[type=number]{width:calc(100%/3 - 21px);max-width:110px !important;}
        .appBox .appBox-D .itemBox .ccon.contact select{width:calc(100%/3);max-width:110px !important;}
    }
    @media screen and (max-width:960px) {
        .appBox .appBox-D .itemBox{padding:20px 20px; }
        
        .appBox .appBox-D .itemBox .ccon.contact input[type=text]{width:calc(100%/3 - 21px);max-width:100px !important;}
        .appBox .appBox-D .itemBox .ccon.contact input[type=number]{width:calc(100%/3 - 21px);max-width:100px !important;}
        .appBox .appBox-D .itemBox .ccon.contact select{width:calc(100%/3);max-width:100px !important;}
        .appBox .appBox-D .itemBox .date_wedding span .ui-datepicker-trigger{width:100px;height:42px;line-height:42px !important;font-size: 16px !important; margin-right: 10px;}
    }
    @media screen and (max-width:660px){
        .appBox .appBox-D .itemBox .ccon.contact input[type=text]{width:calc(100%/3 - 18px);max-width:90px !important;}
        .appBox .appBox-D .itemBox .ccon.contact input[type=number]{width:calc(100%/3 - 18px);max-width:90px !important;}
        .appBox .appBox-D .itemBox .ccon.contact select{width:calc(100%/3);}
    }
    @media screen and (max-width:640px){
        .appBox .appBox-D .itemBox{padding:15px 15px; }
    }
    @media screen and (max-width:470px){
        .appBox .appBox-D .itemBox .ccon.contact input[type=text]{width:calc(100%/1 - 1px) !important;max-width:100% !important;}
        .appBox .appBox-D .itemBox .ccon.contact input[type=number]{width:calc(100%/1 - 1px) !important;max-width:100% !important;}
        .appBox .appBox-D .itemBox .ccon.contact select{width:calc(100%/1 - 1px) !important;max-width:100% !important;}
    }
    @media screen and (max-width:420px){
        .appBox .appBox-D .itemBox.name .ttit.disF{display: block;}

        .appBox .appBox-D .itemBox.name .gender{width:100%; display:flex; justify-content: flex-start; margin-top: 0px;}
        
        .appBox .appBox-D .itemBox .date_wedding.seBox input[type=text]{width:calc(100% - 120px);}
        .appBox .appBox-D .itemBox .date_wedding.seBox input[type=number]{width:calc(100% - 120px);}
        .appBox .appBox-D .itemBox .date_wedding span .ui-datepicker-trigger{width:80px;height:40px;line-height:40px !important;font-size: 15px !important;}
    }
    @media screen and (max-width:380px){        
        .appBox .appBox-D .itemBox .date_wedding.seBox input[type=text]{width:calc(100% - 90px);}
        .appBox .appBox-D .itemBox .date_wedding.seBox input[type=number]{width:calc(100% - 90px);}
        .appBox .appBox-D .itemBox .date_wedding span .ui-datepicker-trigger{width:90px;height:38px;line-height:38px !important;font-size: 14px !important;}
        .appBox .appBox-D .itemBox .date_wedding.seBox .radioBox{width: 60px; }
    }




.formBox input[type=text]{padding:14px 20px;margin-right:10px;border:solid 1px #ccc;border-radius:5px;font-size:16px;}
.formBox input[type=text]:last-child{margin-right:0;}
.formBox input[type=text]::-webkit-input-placeholder{color:#999 !important;font-weight: 300; font-size: 16px;}
.formBox input[type=text]::-moz-input-placeholder{color:#999 !important;font-weight: 300; font-size: 16px;}
.formBox input[type=text]::-ms-input-placeholder{color:#999 !important;font-weight: 300; font-size: 16px;}

.formBox input[type=checkbox]{margin-right:14px;display:inline-block;display:none;}
.formBox input[type=checkbox] + label{display:inline-block;position:relative;padding-left:30px;}

.formBox input[type=checkbox] + label:before{content:"";position:absolute;left:0;top:-6px;width:22px;height:22px;display:inline-block;background:url(/form/img/icon_chk_off.png) no-repeat left center;background-size:cover;}
.formBox input[type=checkbox]:checked + label:before{content:"";background:url(/form/img/icon_chk_on.png) no-repeat left center;background-size:cover;}

.formBox input[type=checkbox] + label.mt:before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;display:inline-block;background:url(/form/img/icon_chk_off.png) no-repeat left center;background-size:cover;}
.formBox input[type=checkbox]:checked + label.mt:before{content:"";background:url(/form/img/icon_chk_on.png) no-repeat left center;background-size:cover;}

.formBox .agree label a{text-decoration:underline;}

.formBox textarea{width:100%;min-height:180px;padding:12px 20px;border:solid 1px #ccc;border-radius:5px;font-size:16px;}

.formBox select{padding:12px 60px 12px 20px;margin-right:10px;border:solid 1px #ccc;border-radius:5px;font-size:16px;background:url(/form/img/select_arrow.png) no-repeat right 15px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;}
.formBox select:last-child{margin-right:0;}
.formBox select::-ms-expand{display:none;}