/* :::::::::::::::: Common Layout :::::::::::::::: */
html{min-width: 280px; color:#666666; font-family: "Pretendard", sans-serif; font-size:12px; letter-spacing: -0.5px;}
body.scr_off{overflow: hidden;}
.fx_box{display: flex; flex-flow: row wrap;}
.inner{width: 1200px; margin: 0 auto;}
.landing p, .landing div, .landing ul, .landing li, .landing dl, .landing dt, .landing dd, .landing ol, .landing fieldset, .landing textarea, .landing input, .landing select, .landing button, 
.landing table, .landing th, .landing td, .landing address, .landing cite, .landing span, .landing a{font-family: "Pretendard", sans-serif;}

button.custom{
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; text-indent: -9999px; background-color: transparent; cursor: pointer;
}
button.custom::before{
    display: block; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
    width: 20px; height: 2px; background-color: #333333;
}
button.custom::after{
    display: block; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-135deg);
    width: 2px; height: 20px; background-color: #333333;
}

#skip{}
#skip a{display:block; position:absolute; top:0; width:0; height:0; margin-top:-1px; text-align:center; white-space:nowrap; overflow:hidden; text-decoration:none;}
#skip a:focus, #skip a:active{position:relative; top:0; left:0;  width:100%; height:40px; line-height:40px; font-size:18px; font-weight:bold; color:#fff; background-color:#333; z-index:100;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1260px){
    .inner{width: 100%; padding: 0 3%;}
}

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

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

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


/* :::::::::::::::::::::::::::::::::::::::::::::::: #oth_header :::::::::::::::::::::::::::::::::::::::::::::::: */
#oth_header{position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 2000;}
#oth_header.intro_hd{top: 60px;}
#oth_header h1.logo{}
#oth_header h1.logo a{display: block;}
#oth_header h1.logo a img{display: block;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1260px){
    
}

@media screen and (max-width:1024px){
    #oth_header.intro_hd{top: 20px;}
    #oth_header h1.logo a img{width: 180px;}
}

@media screen and (max-width:768px){
    #oth_header h1.logo a img{width: 140px;}
}

@media screen and (max-width:480px){
    #oth_header{top: 10px;}
    #oth_header.intro_hd{top: 10px;}
    #oth_header h1.logo a img{width: 100px;}
}


/* :::::::::::::::::::::::::::::::::::::::::::::::: #intro_wrap :::::::::::::::::::::::::::::::::::::::::::::::: */
#intro_wrap{display: flex; height: 100vh;}
.intro{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; z-index: 10;}
.intro .bg_pic{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; 
z-index: -10; transition: all 0.4s;}
.intro .go_link{}
.intro .go_link a{display: block; padding-right: 70px; margin-right: -70px;}
.intro .go_link a span{display: block; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; color: #ffffff; font-weight: 300; font-size: 18px; 
text-align: center; letter-spacing: 18px; transition: all 0.4s;}
.intro .go_link a h2{position: relative; padding-bottom: 0; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #ffffff; font-weight: 600; font-size: 60px; text-align: center;
transition: all 0.4s;}
.intro .go_link a h2::before{display: block; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0%; height: 1px; 
background-color: #ffffff; transition: all 0.4s;}
.intro .go_link a h2::after{display: block; content: ''; position: absolute; right: -70px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; 
background: url('../images/ico/go_arrow.png') 50% 50% no-repeat; border: 1px solid #fff; border-radius: 50%; opacity: 0;}
/* hover */
.intro.on .bg_pic{width: 110%; margin-left: -5%; transition: all 0.4s;}
.intro.on .go_link a span{letter-spacing: 10px; transition: all 0.4s;}
.intro.on .go_link a h2::after{opacity: 1; transition: all 0.4s;}
.intro.on .go_link a h2{padding-bottom: 15px; transition: all 0.4s;}
.intro.on .go_link a h2::before{width: 100%; transition: all 0.4s;}


#intro_sns{position: fixed; right: 3%; bottom: 2%; z-index: 1000;}
#intro_sns ul{display: flex;}
#intro_sns ul li{margin-right: 10px;}
#intro_sns ul li:last-child{margin-right: 0;}
#intro_sns ul li a{display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border: 1px solid #fff; border-radius: 50%;}
#intro_sns ul li a img{display: block;}
/* hover */
#intro_sns ul li:nth-child(1) a:hover{background-color: #435e99; border: 0;}
#intro_sns ul li:nth-child(2) a:hover{background: url('../images/ico/sns_bg.jpg') 50% 50% no-repeat; background-size: cover; border: 0;}
#intro_sns ul li:nth-child(3) a:hover{background-color: #009345; border: 0;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1260px){
    
}

@media screen and (max-width:1024px){
    #intro_wrap{display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;}
    .intro{width: 100%; height: 50%;}
    .intro .go_link a h2{font-size: 50px;}

	.intro.brand{order:2;}
	.intro.franc{order:1;}

}

@media screen and (max-width:768px){
    .intro.brand .bg_pic{background-position: 50% 40%;}
    .intro .go_link a{padding-right: 50px; margin-right: -50px;}
    .intro .go_link a h2{font-size: 40px;}
    .intro .go_link a h2::after{right: -50px; top: 47%; width: 36px; height: 36px;}
    .intro .go_link a span{font-size: 16px; letter-spacing: 10px;}
    .intro.on .go_link a span{letter-spacing: 4px;}
}

@media screen and (max-width:480px){
    .intro{padding-top: 10px;}
    .intro .go_link a{padding-right: 40px; margin-right: -40px;}
    .intro .go_link a h2{font-size: 30px;}
    .intro .go_link a h2::after{right: -40px; top: 56%; width: 28px; height: 28px; background-size: 10px; opacity: 1;}
    .intro .go_link a span{font-size: 12px; letter-spacing: 6px;}
    .intro.on .go_link a span{letter-spacing: 6px;}
    .intro.on .go_link a h2{padding-bottom: 0;}
    .intro.on .go_link a h2::before{width: 0;}

    #intro_sns ul li{margin-right: 8px;}
    #intro_sns ul li a{width: 36px; height: 36px;}
}


/* :::::::::::::::::::::::::::::::::::::::::::::::: #visual :::::::::::::::::::::::::::::::::::::::::::::::: */
#visual{}
#visual .vd_area{position: relative; padding-bottom: 56.25%;}
#visual .vd_area::before{display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10;}
#visual .vd_area video{display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; 
object-fit: cover;}
#visual .vd_area iframe{display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: 100%;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1560px){

}

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

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

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

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


/* :::::::::::::::::::::::::::::::::::::::::::::::: #contents :::::::::::::::::::::::::::::::::::::::::::::::: */
section{overflow: hidden;}
#visual ~ section{padding: 150px 0;}
section .sec_tit{margin-bottom: 100px;}
section .sec_tit .symbol{}
section .sec_tit .symbol img{display: block; margin: 0 auto; opacity: 0; transform: translateY(-40px);}
section .sec_tit .step{margin: 10px 0 20px; opacity: 0; transform: translateY(40px);}
section .sec_tit .step span{display: block; font-family: 'Montserrat', sans-serif; color: #222222; font-weight: 600; font-size: 18px; 
text-align: center; letter-spacing: 4px; padding-left: 18px;}
section .sec_tit .tt{opacity: 0; transform: translateY(40px);}
section .sec_tit .tt h2{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-size: 50px; text-align: center; word-break: keep-all;}
section .sec_tit .tt h2 br{display: none;}
section .sec_tit.colr .step span{color: #ffffff; font-weight: 500;}
section .sec_tit.colr .tt h2{color: #ffffff;}
/* on */
section.on .sec_tit .step{transform: translateY(0); opacity: 1; transition: all 0.4s;}
section.on .sec_tit .tt{transform: translateY(0); opacity: 1; transition: all 0.4s; transition-delay: 0.2s;}
section.on .sec_tit .symbol img{transform: translateY(0); opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}
section.on .sec_tit .step span{letter-spacing: 18px; transition: letter-spacing 0.4s; transition-delay: 0.6s;}

#sectionYT .inner{width:1500px}

/* #sectionYT */
#sectionYT .yt_slide_wrap{width:100%; position:relative; opacity:0; transform: scale(0)}
#sectionYT .yt_slide_wrap .yt_slider{width:100%; padding:0 0px; overflow:hidden;}
#sectionYT .yt_slide_wrap .yt_slider li{padding:0 10px;}
#sectionYT .yt_slide_wrap .yt_slider li a{cursor:pointer;}
#sectionYT .yt_slide_wrap .yt_slider li .yt_img{position:relative; padding-bottom:56.25%; margin-bottom:16px; }
#sectionYT .yt_slide_wrap .yt_slider li .yt_img img{
   object-fit: cover;
    position: absolute;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
    left: -9999px;
    margin: auto;
    min-width: 100%;
    height: 100%;
	}
#sectionYT .yt_slide_wrap .yt_slider li .yt_text{padding:0 10px;}
#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.tit{font-size:20px; color:#222; font-weight:700;
letter-spacing:-0.03em; text-align:left;
overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;}
#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.day{font-size:16px; margin-top:10px;
letter-spacing:-0.03em; line-height:1; text-align:right;}


#sectionYT .yt_slide_wrap .yt_arr{position:absolute; top:50%; 
margin-top:-50px; background:rgba(0,0,0,0.6);
width:50px; height:50px; border-radius:50px; display:flex; align-items:center; justify-content:center;}

#sectionYT .yt_slide_wrap .yt_arr.yt_prev{left:-70px; cursor:pointer;}
#sectionYT .yt_slide_wrap .yt_arr.yt_next{right:-70px; cursor:pointer;}

#sectionYT .yt_slide_wrap.on{transform: scale(1); opacity: 1; transition: all 1s; transition-delay: 0.6s;}

.video_box{width: 90%; display:none;
    max-width: 1020px; z-index:9999;
	    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	}
.video_box .in_box{padding-bottom: 56.25%;  height:auto; position:relative;}
.video_box .in_box iframe{    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

.video_box .video_close{     right: 0px;     top: -40px; width: 40px; position: absolute;
    height: 40px;
    background: #000;
    transform: rotate(0);
    transition: background-color 0.4s;
	cursor:pointer;}
.video_box .video_close:hover{background:#c8a063;}

.video_box .video_close:before{position:absolute; left: 20px; top:6.5px;  width: 2px;  height: 30px;   margin-left: 0;  background: #fff;  content: ""; transform: rotate(45deg);}
.video_box .video_close:after{position:absolute; left: 6.5px; top: 20px; width: 30px; height: 2px; margin-left: 0;  background: #fff; content: ""; transform: rotate(45deg);}

.video_gra{ display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index:9998;}

/* #section01 */
#section01{background: url('../images/contents/sec01_bg.jpg') 50% 50% no-repeat; background-size: cover;
border-bottom-left-radius: 200px; border-bottom-right-radius: 200px;}
.step1{display: flex;}
.step1 .box{width: 390px; margin-right: 15px; transform: rotateY(90deg);}
.step1 .box:last-child{margin-right: 0;}
.step1 .box .img_box{overflow: hidden; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.step1 .box .img_box img{display: block; max-width: 100%;}
.step1 .box .txt_box{padding: 5px; background-color: #ffffff;
border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.step1 .box .txt_box .wrap{display: flex; justify-content: center; align-items: center; min-height: 140px; padding: 10px; 
border: 1px solid #c3b4a3; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.step1 .box .txt_box p{color: #222222; font-weight: 500; font-size: 20px; line-height: 1.4; text-align: center; word-break: keep-all;}
.step1 .box .txt_box p span.sm{display: block; margin-top: 2px; color: #333333; font-weight: 400; font-size: 18px;}
/* on */
.step1 .box1.on{transform: rotateY(0); transition: all 0.4s linear;}
.step1 .box2.on{transform: rotateY(0); transition: all 0.4s linear; transition-delay: 0.2s;}
.step1 .box3.on{transform: rotateY(0); transition: all 0.4s linear; transition-delay: 0.4s;}


/* #section02 */
#section02{}
.step2{display: flex; flex-flow: row wrap; margin-top: -40px;}
.step2 .box{width: 580px; margin-right: 40px; margin-top: 40px;}
.step2 .box:nth-child(2n){margin-right: 0;}
.step2 .box:nth-child(odd){opacity: 0; transform: translateX(-60px);}
.step2 .box:nth-child(even){opacity: 0; transform: translateX(60px);}
.step2 .box .img_box{overflow: hidden; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.step2 .box .img_box img{display: block; max-width: 100%;}
.step2 .box .txt_box{position: relative; min-height: 255px; padding: 50px 15px 20px; background-color: #ffffff; border: 1px solid #ddd;
border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.step2 .box .txt_box span.num{display: block; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: 60px; height: 60px; 
font-family: 'Montserrat', sans-serif; color: #ffffff; font-weight: 600; font-size: 24px; line-height: 60px; text-align: center; 
background-color: #6b4534; border-radius: 10px;}
.step2 .box .txt_box h3{margin-bottom: 10px; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-size: 34px; line-height: 1.4; text-align: center; word-break: keep-all;}
.step2 .box .txt_box p{color: #222222; font-weight: 500; font-size: 20px; line-height: 1.6; text-align: center; word-break: keep-all;}
.step2 .box .txt_box p br.m_on{display: none;}
.step2 .box .txt_box p span.sm{display: block; margin-top: 2px; color: #333333; font-weight: 400; font-size: 18px;}
/* on */
.step2 .box1.on{opacity: 1; transform: translateX(0); transition: all 0.4s linear;}
.step2 .box2.on{opacity: 1; transform: translateX(0); transition: all 0.4s linear;}
.step2 .box3.on{opacity: 1; transform: translateX(0); transition: all 0.4s linear;}
.step2 .box4.on{opacity: 1; transform: translateX(0); transition: all 0.4s linear;}


/* #section03 */
#section03{position: relative;}
.moving_pic{position: relative; z-index: -10;}
.pic_rail{}
.pic_rail li{}
.pic_rail li img{display: block; width: 480px; height: 480px; object-fit: cover; margin: 0 20px; border-top-left-radius: 20px; border-top-right-radius: 20px;
box-shadow: 7px 14px 16px rgba(1, 1, 1, 0.1);}
.moving_logo{position: absolute; left: 0; bottom: 0; width: 100%; padding: 150px 0 35px; background-color: #6e4837; z-index: -20;}
.logo_rail{}
.logo_rail li{}
.logo_rail li img{display: block; width: 465px; margin: 0 125px;}


/* #section04 */
#section04{overflow: hidden; padding-bottom: 0 !important; background: url('../images/contents/sec04_bg.jpg') 50% 50% no-repeat; background-size: cover; 
border-bottom-left-radius: 200px; border-bottom-right-radius: 200px;}
.step4{display: flex;}
.step4 .box{position: relative; width: 560px; margin-right: 80px; padding: 25px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.step4 .box:last-child{margin-right: 0;}
.step4 .box1{background-color: #565656; opacity: 0; transform: translateX(-60px);}
.step4 .box2{background-color: #3c2810; opacity: 0; transform: translateX(60px);}
.step4 .box .list{display: flex; align-items: center; min-height: 575px; padding: 40px; background-color: #ffffff; 
border-top-left-radius: 20px; border-top-right-radius: 20px;}
.step4 .box .list .wrap{width: 100%;}
.step4 .box .list h4{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-size: 50px; text-align: center;}
.step4 .box .list ul{margin-top: 20px;}
.step4 .box .list ul li{padding: 10px; color: #222222; font-weight: 500; font-size: 22px; line-height: 1.4; text-align: center; word-break: keep-all;
border-bottom: 1px solid #ddd;}
.step4 .box .list ul li.check{color: #39250d; font-weight: 700; font-size: 24px;}
.step4 .box .list ul li.check span{position: relative;}
.step4 .box .list ul li.check span::before{display: block; content: ''; position: absolute; left: -35px; top: 3px; width: 25px; height: 21px; 
background: url('../images/ico/check.png') 50% 50% no-repeat; background-size: cover;}
.step4 .box p.dsc{margin-top: 20px; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #ffffff; font-size: 34px; text-align: center;}
.step4 .box .deco{}
.step4 .box .deco span{position: absolute;}
.step4 .box .deco span img{display: block; width: 100%;}
.step4 .box .deco span.ico1{top: -150px; right: -60px; transform: scale(0);}
.step4 .box .deco span.ico2{top: 40%; left: -35px; transform: scale(0) translateY(-50%);}
.step4 .box .deco span.ico3{bottom: 30px; right: -30px; transform: scale(0);}
/* on */
.step4 .box1.on{opacity: 1; transform: translateX(0); transition: all 0.4s;}
.step4 .box2.on{opacity: 1; transform: translateX(0); transition: all 0.4s;}
.step4 .box2.on .deco span.ico1{transform: scale(1); transition: all 0.4s; transition-delay: 0.4s;}
.step4 .box2.on .deco span.ico2{transform: scale(1) translateY(-50%); transition: all 0.4s; transition-delay: 0.8s;}
.step4 .box2.on .deco span.ico3{transform: scale(1); transition: all 0.4s; transition-delay: 1.2s;}


/* #section05 */
#section05{}

@property --progress-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@keyframes sales1-progress {
to { --progress-value: 80; }
}

@keyframes sales2-progress {
to { --progress-value: 80; }
}

@keyframes sales3-progress {
to { --progress-value: 80; }
}

.step5{display: flex; justify-content: space-around;}
.step5 .box{width: 300px; margin: 0 20px;}
.step5 .box p.return{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-weight: 900; font-size: 34px; line-height: 1.1; text-align: center;}
.step5 .box p.return span{display: inline-block; transform: translateY(5px); font-family: 'KBIZHanmaumMyungjo', sans-serif; font-size: 50px; letter-spacing: -2px;}
.step5 .box .progress_bar{position: relative; display: flex; flex-direction: column; justify-content: center; margin: 25px 0; border-radius: 50%;}
.step5 .box .progress_bar .wrap{padding-bottom: 100%;}
.step5 .box .progress_bar p{position: absolute; left: 0; top: 46%; transform: translateY(-50%); width: 100%; padding: 0 10px; 
font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-weight: 900; font-size: 30px; line-height: 1; text-align: center;}
.step5 .box .progress_bar p span{display: inline-block; transform: translateY(5px); font-family: 'KBIZHanmaumMyungjo', sans-serif; font-size: 40px; letter-spacing: -2px;}
.step5 .box progress{position: absolute; visibility: hidden; width: 0; height: 0;}
.step5 .box p.store{color: #222222; font-weight: 500; font-size: 22px; text-align: center;}

.section05 .mc05_img{opacity: 0; transform: translateY(60px);  display:block;   transition: all 0.4s;}
.section05.on .mc05_img{opacity:1;  transform:translateY(0); }



.step5.on .box .bar1.sales1{
    background: 
        radial-gradient(closest-side, #ffffff 75%, transparent 76% 100%),
        conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    animation: sales1-progress 2s 1 forwards;
}


.step5.on .box .bar2.sales2{
    background: 
        radial-gradient(closest-side, #ffffff 75%, transparent 76% 100%),
        conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    animation: sales2-progress 2s 1 forwards;
}

.step5.on .box .bar3.sales3{
    background: 
        radial-gradient(closest-side, #ffffff 75%, transparent 76% 100%),
        conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    animation: sales3-progress 2s 1 forwards;
}


/* #section06 */
#section06{background-color: #fdf1e3; border-top-left-radius: 200px; border-top-right-radius: 200px;}
.step6{display: flex; justify-content: space-around;}
.step6 .box{margin: 0 10px; opacity: 0; transform: translateY(60px);}
.step6 .box .circ{position: relative;}
.step6 .box .circ .moo{position: absolute; right: 10px; top: 10px; opacity: 0; transform: scale(2);}
.step6 .box .circ .moo img{display: block; width: 100%;}
.step6 .box .circ img{display: block; max-width: 100%; margin: 0 auto;}
.step6 .box .txt{margin-top: 15px;}
.step6 .box .txt h3{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #222222; font-weight: 900; font-size: 34px; text-align: center; word-break: keep-all;}
/* on */
.step6 .box1.on{opacity: 1; transform: translateY(0); transition: all 0.4s;}
.step6 .box2.on{opacity: 1; transform: translateY(0); transition: all 0.4s; transition-delay: 0.2s;}
.step6 .box3.on{opacity: 1; transform: translateY(0); transition: all 0.4s; transition-delay: 0.4s;}
.step6 .box1.on .circ .moo{opacity: 1; transform: scale(1); transition: all 0.4s; transition-delay: 0.8s;}
.step6 .box2.on .circ .moo{opacity: 1; transform: scale(1); transition: all 0.4s; transition-delay: 0.8s;}
.step6 .box3.on .circ .moo{opacity: 1; transform: scale(1); transition: all 0.4s; transition-delay: 0.8s;}


/* #section07 */
#section07{background: url('../images/contents/sec07_bg.jpg') 50% 50% no-repeat; background-size: cover;}
.step7{}
.step7 p.dsc{margin-bottom: 40px; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #ffffff; font-weight: 900; font-size: 34px; text-align: center; word-break: keep-all;
opacity: 0;}
.step7 .box{display: flex; align-items: center; margin-bottom: 40px; opacity: 0; transform: translateY(60px);}
.step7 .box:last-child{margin-bottom: 0;}
.step7 .box .bubble{position: relative; padding: 35px; border-radius: 30px; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.2);}
.step7 .box .bubble::before{display: block; content: ''; position: absolute; top: 0; width: 20px; height: 20px;}
.step7 .box .bubble p{color: #333333; font-weight: 600; font-size: 20px; line-height: 1.8; word-break: keep-all;}
.step7 .box .l_box{width: 500px; padding: 0 20px;}
.step7 .box .l_box .bubble{width: 440px; max-width: 100%; background-color: #ffffff; border-top-left-radius: 0;}
.step7 .box .l_box .bubble::before{left: -20px; background: url('../images/ico/l_tail.png') 50% 50% no-repeat; background-size: cover;}
.step7 .box .l_box .bubble p{}
.step7 .box .l_box img{display: block; max-width: 100%; margin: 0 auto; opacity: 0;}
.step7 .box .r_box{width: 700px; padding: 0 20px;}
.step7 .box .r_box .bubble{background-color: #fef2e4; border-top-right-radius: 0;}
.step7 .box .r_box .bubble::before{right: -20px; background: url('../images/ico/r_tail.png') 50% 50% no-repeat; background-size: cover;}
.step7 .box .r_box .bubble p{}
/* on */
.step7.on p.dsc{opacity: 1; transition: all 0.4s;}
.step7 .box1.on{opacity: 1; transform: translateY(0); transition: all 0.4s;}
.step7 .box2.on{opacity: 1; transform: translateY(0); transition: all 0.4s;}
.step7 .box2.on .l_box img{opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}


/* #section08 */
#section08{}
.step8{}
.step8 .box_wrap{display: flex; justify-content: space-evenly; margin-bottom: 100px;}
.step8 .box_wrap .m_wrap{display: flex; justify-content: space-evenly; width: calc((100% - 60px)/2);}
.step8 .box_wrap:last-child{margin-bottom: 0;}
.step8 .box{opacity: 0; transform: translateY(60px);}
.step8 .box .ico{margin-bottom: 25px;}
.step8 .box .ico img{display: block; max-width: 100%;}
.step8 .box .txt{}
.step8 .box .txt span{display: block; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; color: #6b4534; font-weight: 500; font-size: 20px; text-align: center;}
.step8 .box .txt p{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #333333; font-weight: 900; font-size: 28px; text-align: center; word-break: keep-all;}
.step8 .step_arr{align-self: center; margin: 0 10px; opacity: 0;}
.step8 .step_arr img{display: block; max-width: 100%;}
/* on */
.step8 .wrap1.on .box1{opacity: 1; transform: translateY(0); transition: all 0.3s linear;}
.step8 .wrap1.on .box2{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.15s;}
.step8 .wrap1.on .box3{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.3s;}
.step8 .wrap1.on .box4{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.45s;}
.step8 .wrap1.on .step_arr{opacity: 1; transition: all 0.3s; transition-delay: 0.75s;}
.step8 .wrap2.on .box5{opacity: 1; transform: translateY(0); transition: all 0.3s linear;}
.step8 .wrap2.on .box6{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.15s;}
.step8 .wrap2.on .box7{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.3s;}
.step8 .wrap2.on .box8{opacity: 1; transform: translateY(0); transition: all 0.3s linear; transition-delay: 0.45s;}
.step8 .wrap2.on .step_arr{opacity: 1; transition: all 0.3s; transition-delay: 0.75s;}


/* #section09 */
#section09{background: url('../images/contents/sec09_bg.jpg') 50% 50% no-repeat; background-size: cover;
border-top-left-radius: 200px; border-top-right-radius: 200px;}
.step9{display: flex; flex-flow: row wrap; justify-content: center;}
.step9 .box{position: relative; margin: 10px;}
.step9 .box:nth-child(odd){opacity: 0; transform: rotateX(90deg);}
.step9 .box:nth-child(even){opacity: 0; transform: rotateY(90deg);}
.step9 .box .pic{overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);}
.step9 .box .pic img{display: block; max-width: 100%; width: 100%;}
.step9 .box .txt{position: absolute; left: 0; bottom: 20px; width: 100%; padding: 0 15px;}
.step9 .box .txt p{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #ffffff; font-size: 28px; text-align: center; word-break: keep-all;}
/* on */
.step9.on .box1{opacity: 1; transform: rotateX(0); transition: all 0.3s ease;}
.step9.on .box2{opacity: 1; transform: rotateY(0); transition: all 0.3s ease; transition-delay: 0.15s;}
.step9.on .box3{opacity: 1; transform: rotateX(0); transition: all 0.3s ease; transition-delay: 0.3s;}
.step9.on .box4{opacity: 1; transform: rotateY(0); transition: all 0.3s ease; transition-delay: 0.45s;}
.step9.on .box5{opacity: 1; transform: rotateX(0); transition: all 0.3s ease; transition-delay: 0.6s;}
.step9.on .box6{opacity: 1; transform: rotateY(0); transition: all 0.3s ease; transition-delay: 0.75s;}
.step9.on .box7{opacity: 1; transform: rotateX(0); transition: all 0.3s ease; transition-delay: 0.9s;}
.step9.on .box8{opacity: 1; transform: rotateY(0); transition: all 0.3s ease; transition-delay: 1.05s;}
.step9.on .box9{opacity: 1; transform: rotateX(0); transition: all 0.3s ease; transition-delay: 1.2s;}


/* #section10 */
#section10{}
.step10{margin-bottom: 100px;}
.step10:last-child{margin-bottom: 0;}
.step10 p.dsc{margin-bottom: 10px; color: #333333; font-weight: 500; font-size: 20px; text-align: right; opacity: 0;}
.step10 h3{margin-bottom: 20px; color: #333333; font-weight: 600; font-size: 22px; text-align: center; opacity: 0;}
.step10 table{width: 100%; border-collapse: collapse; table-layout: fixed; opacity: 0; transform: translateY(60px);}
.step10 table tr{}
.step10 table tr th{padding: 18px 16px; color: #222222; font-weight: 500; font-size: 20px; background-color: #fef2e4; border-top: 1px solid #c3b4a3; border-right: 1px solid #c3b4a3; 
border-bottom: 1px solid #c3b4a3;}
.step10 table tr th span{display: block; font-size: 16px; line-height: 1;}
.step10 table tr th em{display:inline-block; font-style:normal;}
.step10 table tr th b{font-family: "Pretendard", sans-serif;}
.step10 table tr th:last-child{border-right: 0;}
.step10 table.table_01 tr th:nth-child(1){width: 14%;}
.step10 table.table_01 tr th:nth-child(2){width: 18%;}
.step10 table.table_01 tr th:nth-child(3){width: 18%;}
.step10 table.table_01 tr th:nth-child(4){width: 18%;}
.step10 table.table_01 tr th:nth-child(5){width: 18%;}
.step10 table.table_02 tr th:nth-child(1){width: 25%;}
.step10 table.table_02 tr th:nth-child(2){width: 25%;}
.step10 table.table_02 tr th:nth-child(3){width: 25%;}
.step10 table.table_02 tr th:nth-child(4){width: 25%;}
.step10 table tr td{padding: 18px 16px; color: #333333; font-weight: 500; font-size: 20px; text-align: center; word-break: keep-all; border-bottom: 1px solid #ddd; 
border-right: 1px solid #ddd;}
.step10 table tr td span{color: #f20000; text-decoration: line-through;}
.step10 table tr td:first-child{word-break: break-all;}
.step10 table tr td:last-child{border-right: 0;}
.step10 table tr td br{display: none;}
.step10 table tr td br.on{display: block;}

.step10 ul{margin-top:16px; opacity: 0; transform: translateY(60px);}
.step10 ul li{font-size:16px; letter-spacing:-0.025em; word-break:keep-all; position:relative; color:#333; word-break:keep-all; padding-left:26px;}
.step10 ul li:after{content:""; display:block; position:absolute; top:0px; left:0px;}
.step10 ul li.none{padding-left:0px;}
.step10 ul li.none:after{display:none} 
.step10 ul li.n1:after{content:"01.";}
.step10 ul li.n2:after{content:"02.";}
.step10 ul li.n3:after{content:"03.";}

/* on */
.step10.on p.dsc{opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}
.step10.on h3{opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}
.step10.on table{opacity: 1; transform: translateY(0); transition: all 0.4s;}


.step10.on p{opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}
.step10.on ul{opacity: 1; transition: all 0.4s; transition-delay: 0.4s;}




/* #section11 */
#section11{}
.step11{}
.step11 p.dsc{position: relative; padding-bottom: 150px; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #333333; font-weight: 900; font-size: 34px; 
line-height: 1.4; text-align: center; word-break: keep-all; opacity: 0;}
.step11 p.dsc::after{display: block; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(calc(-50% + 0.5px)) scale(0); width: 1px; height: 100px; 
background-color: #c3b4a3;}
.step11 p.dsc br.m_on{display: none;}
.step11 .form_box{margin-top: 50px; opacity: 0; transform: translateY(60px);}
.step11 .form_box table{width: 100%; border-collapse : collapse; table-layout: fixed; border-top: 1px solid #c3b4a3; border-bottom: 1px solid #c3b4a3;}
.step11 .form_box table tr{}
.step11 .form_box table tr.half{display: inline-block; vertical-align: top; width: 50%; font-size: 0;}
.step11 .form_box table tr.mg th{padding-top: 10px;}
.step11 .form_box table tr.mg td{padding-top: 10px;}
.step11 .form_box table tr th{display: inline-block; vertical-align: top; width: 200px; padding-left: 25px; color: #202020; font-weight: 500; font-size: 18px; text-align: left; 
line-height: 60px; background-color: #fef2e4;}
.step11 .form_box table tr th span{color: #D50F0E;}
.step11 .form_box table tr:last-child th{height: 150px;}
.step11 .form_box table tr td{display: inline-block; vertical-align: top; width: calc(100% - 200px); padding: 0 20px; line-height: 60px;}
.step11 .form_box table tr:last-child td{height: 150px; padding: 10px 20px 20px;}
.step11 .form_box table tr td input{vertical-align: middle; width: 250px; padding-left: 10px; color: #202020; font-size: 16px; line-height: 40px; border: 1px solid #ddd; border-radius: 4px;}
.step11 .form_box table tr td span{display: inline-block; vertical-align: middle; margin-left: 10px; color: #202020; font-size: 16px; line-height: 40px;}
.step11 .form_box table tr td textarea{width: 100% !important; height: 100% !important; resize: none; border: 1px solid #ddd; border-radius: 4px;}
.step11 .form_box .apply{width: 200px; margin: 0 auto; background-color: #3a260e; border-radius: 10px;}
.step11 .form_box .apply a{display: block; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #fff; font-size: 20px; line-height: 60px; text-align: center;}
.step11 .form_box .agree{margin: 20px 0;}
.step11 .form_box .agree label{display: inline-block; vertical-align: middle;}
.step11 .form_box .agree label .check{display: inline-block; vertical-align: middle; position: relative; width: 16px; height: 16px;}
.step11 .form_box .agree label .check input{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; z-index: -10;}
.step11 .form_box .agree label .check span.ck_box{position: relative; display: block; height: 100%; background-color: #ffffff; border: 1px solid #ddd; border-radius: 4px;}
.step11 .form_box .agree label .check span.ck_box::after{display: none; content: ''; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-45deg); width: 6px; height: 4px; 
border-left: 2px solid #fff; border-bottom: 2px solid #fff;}
.step11 .form_box .agree label span.txt{display: inline-block; vertical-align: middle; padding: 0 4px; color: #333333; font-weight: 500; font-size: 15px;}
.step11 .form_box .agree label .check input:checked ~ span.ck_box{background-color: #3a260e; border: 1px solid #3a260e;}
.step11 .form_box .agree label .check input:checked ~ span.ck_box::after{display: block;}
.step11 .form_box .agree a{display: inline-block; vertical-align: middle; color: #333333; font-weight: 500; font-size: 15px;}
/* on */
.step11.on p.dsc{opacity: 1; transition: all 0.4s;}
.step11.on p.dsc::after{transform: translateX(calc(-50% + 0.5px)) scale(1); transition: all 0.4s; transition-delay: 0.2s;}
.step11.on .form_box{opacity: 1; transform: translateY(0); transition: all 0.4s; transition-delay: 0.6s;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1560px){
    /* #section04 */
    #section04{border-bottom-left-radius: 80px; border-bottom-right-radius: 80px;}
	#sectionYT .inner{width:100%; padding:0 3%;}
	#sectionYT .yt_slide_wrap{padding:0 50px;}
	#sectionYT .yt_slide_wrap .yt_slider{ }
	#sectionYT .yt_slide_wrap .yt_arr.yt_prev{left:0px;}
	#sectionYT .yt_slide_wrap .yt_arr.yt_next{right:0px;}
}

@media screen and (max-width:1260px){
	 /* #sectionYT */




    /* #section01 */
    #section01{border-bottom-left-radius: 140px; border-bottom-right-radius: 140px;}

    /* #section02 */
    .step2{margin-top: -3%;}
    .step2 .box{width: 48.5%; margin-right: 3%; margin-top: 3%;}
    .step2 .box:nth-child(2n){margin-right: 0;}

    /* #section04 */
    .step4 .box{width: 48%; margin-right: 4%;}
    .step4 .box:last-child{margin-right: 0;}
    .step4 .box .deco span.ico1{right: -40px;}

    /* #section06 */
    #section06{border-top-left-radius: 140px; border-top-right-radius: 140px;}

    /* #section09 */
    #section09{border-top-left-radius: 140px; border-top-right-radius: 140px;}
    .step9 .box:nth-child(n){width: 31.333%; margin: 1%;}

    /* #section11 */
    .step11 .form_box table tr td input{width: calc(100% - 37px);}
    .step11 .form_box table tr td span{width: 27px;}
}

@media screen and (max-width:1024px){
    section .sec_tit .tt h2{font-size: 44px;}

    /* #section01 */
    #section01{border-bottom-left-radius: 100px; border-bottom-right-radius: 100px;}
    .step1 .box .txt_box p{font-size: 18px;}
    .step1 .box .txt_box p span.sm{font-size: 16px;}

    /* #section02 */
    .step2 .box .txt_box h3{font-size: 30px;}
    .step2 .box .txt_box p{font-size: 18px;}
    .step2 .box .txt_box span.num{top: -25px; width: 50px; height: 50px; font-size: 22px; line-height: 50px;}
    .step2 .box .txt_box p span.sm{font-size: 16px;}

    /* #section03 */
    .pic_rail li img{width: 380px; height: 380px; margin: 0 10px;}
    .logo_rail li img{width: 365px; margin: 0 80px;}

    /* #section04 */
    .step4 .box .list{padding: 30px;}
    .step4 .box .list h4{font-size: 44px;}
    .step4 .box .list ul li{font-size: 20px;}
    .step4 .box .list ul li.check{font-size: 22px;}
    .step4 .box p.dsc{font-size: 30px;}
    .step4 .box .deco span.ico1{top: -20%; width: 42%;}
    .step4 .box .deco span.ico2{width: 22%;}
    .step4 .box .deco span.ico3{width: 28%;}

    /* #section05 */
    .step5 .box{margin: 0 10px;}
    .step5 .box p.return{font-size: 28px;}
    .step5 .box p.return span{font-size: 44px;}
    .step5 .box .progress_bar p{font-size: 24px;}
    .step5 .box .progress_bar p span{font-size: 34px;}
    .step5 .box p.store{font-size: 20px;}

    /* #section06 */
    #section06{border-top-left-radius: 100px; border-top-right-radius: 100px;}
    .step6 .box{margin: 0 5px;}
    .step6 .box .txt h3{font-size: 30px;}

    /* #section07 */
    .step7 p.dsc{font-size: 30px;}
    .step7 .box .bubble{padding: 30px;}
    .step7 .box .bubble p{font-size: 18px;}

    /* #section08 */
    .step8 .box_wrap .m_wrap{width: auto;}
    .step8 .box .txt span{font-size: 18px;}
    .step8 .box .txt p{font-size: 24px;}

    /* #section09 */
    #section09{border-top-left-radius: 100px; border-top-right-radius: 100px;}
    .step9 .box .txt p{font-size: 24px;}

    /* #section10 */
    .step10 p.dsc{font-size: 18px;}
    .step10 h3{font-size: 20px;}
    .step10 table tr th{padding: 15px; font-size: 18px;}
	.step10 table tr th span{font-size: 14px; }
    .step10 table tr td{padding: 15px; font-size: 18px;}

    /* #section11 */
    .step11 p.dsc{font-size: 30px;}
    .step11 .form_box table tr th{width: 160px;}
    .step11 .form_box table tr td{width: calc(100% - 160px);}

	

}

@media screen and (max-width:768px){
    #visual ~ section{padding: 120px 0;}
    section .sec_tit{margin-bottom: 80px;}
    section .sec_tit .step span{padding-left: 14px; font-size: 16px;}
    section .sec_tit .tt h2{font-size: 34px;}
    /* on */
    section.on .sec_tit .step span{letter-spacing: 14px;}
    
	/* #sectionYT */
	#sectionYT .yt_slide_wrap{ padding:0px; padding-bottom:70px;}
	#sectionYT .yt_slide_wrap .yt_slider{padding:0px;}
	#sectionYT .yt_slide_wrap .yt_arr{top:auto; bottom:0px; margin-top:0px;}
	#sectionYT .yt_slide_wrap .yt_arr.yt_prev{left:50%; margin-left:-60px;}
	#sectionYT .yt_slide_wrap .yt_arr.yt_next{right:50%; margin-right:-60px;}
	#sectionYT .yt_slide_wrap .yt_slider li {padding:0 5px}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_img{margin-bottom:10px;}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.tit{font-size:17px;}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.day{font-size:14px; margin-top:7px;}

    /* #section01 */
    #section01{border-bottom-left-radius: 80px; border-bottom-right-radius: 80px;}
    .step1{display: block;}
    .step1 .box:nth-child(n){width: 360px; margin: 0 auto 20px;}
    .step1 .box:last-child{margin: 0 auto 0;}
    .step1 .box .txt_box .wrap{min-height: 120px;}
    .step1 .box .txt_box p{font-size: 16px;}
    .step1 .box .txt_box p span.sm{font-size: 14px;}

    /* #section02 */
    .step2{display: block; margin-top: -20px;}
    .step2 .box:nth-child(n){width: 360px; margin: 20px auto 0;}
    .step2 .box .txt_box{min-height: inherit; padding: 40px 15px 30px;}
    .step2 .box .txt_box h3{margin-bottom: 5px; font-size: 26px;}
    .step2 .box .txt_box p{font-size: 16px;}
    .step2 .box .txt_box span.num{top: -20px; width: 40px; height: 40px; font-size: 20px; line-height: 40px;}
    .step2 .box .txt_box p span.sm{font-size: 14px;}

    /* #section03 */
    .moving_logo{padding: 100px 0 30px;}
    .pic_rail li img{width: 320px; height: 320px;}
    .logo_rail li img{width: 260px; margin: 0 60px;}

    /* #section04 */
    .step4{display: block;}
    .step4 .box .list{min-height: inherit; padding: 30px 25px 40px;}
    .step4 .box .list h4{font-size: 34px;}
    .step4 .box .list ul li{font-size: 16px;}
    .step4 .box .list ul li.check{font-size: 18px;}
    .step4 .box .list ul li.check span::before{left: -30px; width: 20px; height: 16px;}
    .step4 .box p.dsc{font-size: 26px;}
    .step4 .box:nth-child(n){width: 90%; margin: 0 auto 40px;}
    .step4 .box:last-child{margin-bottom: 0;}
    .step4 .box .deco span.ico1{top: -100px; width: 30%;}
    .step4 .box .deco span.ico2{width: 16%;}
    .step4 .box .deco span.ico3{width: 20%;}

    /* #section05 */
    .step5 .box p.return{font-size: 22px;}
    .step5 .box p.return span{transform: translateY(3px); font-size: 34px;}
    .step5 .box .progress_bar p{font-size: 20px;}
    .step5 .box .progress_bar p span{transform: translateY(3px); font-size: 26px;}
    .step5 .box p.store{font-size: 18px;}
    .step5.on .box .bar1.sales1{
        background: 
            radial-gradient(closest-side, #ffffff 80%, transparent 81% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }
    .step5.on .box .bar2.sales2{
        background: 
            radial-gradient(closest-side, #ffffff 80%, transparent 81% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }
    .step5.on .box .bar3.sales3{
        background: 
            radial-gradient(closest-side, #ffffff 80%, transparent 81% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }

    /* #section06 */
    #section06{border-top-left-radius: 80px; border-top-right-radius: 80px;}
    .step6 .box .circ .moo{right: 0; top: 0; width: 36%;}
    .step6 .box .txt h3{font-size: 24px;}

    /* #section07 */
    .step7 p.dsc{font-size: 24px;}
    .step7 .box{display: block;}
    .step7 .box .bubble{padding: 25px;}
    .step7 .box .bubble p{font-size: 16px;}
    .step7 .box .l_box{width: 100%;}
    .step7 .box .l_box .bubble{width: 100%;}
    .step7 .box .r_box{width: 100%; margin-top: 40px;}

    /* #section08 */
    .step8 .box_wrap{display: block; margin-bottom: 40px;}
    .step8 .box_wrap .m_wrap{justify-content: center; margin-bottom: 40px;}
    .step8 .box_wrap .m_wrap:last-child{margin-bottom: 0;}
    .step8 .step_arr{margin: 0 20px;}
    .step8 .step_arr.m_off{display: none;}
    .step8 .box .txt span{font-size: 16px;}
    .step8 .box .txt p{font-size: 22px;}

    /* #section09 */
    #section09{border-top-left-radius: 80px; border-top-right-radius: 80px;}
    .step9 .box:nth-child(n){width: 48%; margin: 1%;}
    .step9 .box .txt{bottom: 15px;}
    .step9 .box .txt p{font-size: 20px;}

    /* #section10 */
	.step10{margin-bottom: 80px;}
    .step10 p.dsc{font-size: 16px;}
    .step10 h3{font-size: 18px;}
    .step10 table tr th{font-size: 16px;}
    .step10 table tr td{font-size: 16px;}

	.step10 p{font-size: 15px }
	.step10 ul{margin-top:14px;}
	.step10 ul li{font-size:14px;  padding-left:22px;}

    /* #section11 */
    .step11 p.dsc{padding-bottom: 100px; font-size: 24px;}
    .step11 p.dsc::after{height: 80px;}
    .step11 .form_box{margin-top: 30px;}
    .step11 .form_box table tr.half{display: block; width: 100%;}
    .step11 .form_box table tr th{width: 140px; padding-left: 20px; font-size: 16px;}
    .step11 .form_box table tr td{width: calc(100% - 140px);}
    .step11 .form_box table tr.mg th{padding-top: 0;}
    .step11 .form_box table tr.mg td{padding-top: 0;}
    .step11 .form_box table tr:first-child th{padding-top: 10px;}
    .step11 .form_box table tr:first-child td{padding-top: 10px;}
}

@media screen and (max-width:480px){
    #visual ~ section{padding: 60px 0;}
    section .sec_tit{margin-bottom: 40px;}
    section .sec_tit .symbol img{width: 41px;}
    section .sec_tit .step{margin: 5px 0 10px;}
    section .sec_tit .step span{padding-left: 10px; font-size: 14px;}
    section .sec_tit .tt h2{font-size: 26px;}
    section .sec_tit .tt h2 br{display: block;}
    /* on */
    section.on .sec_tit .step span{letter-spacing: 10px;}

	  
	/* #sectionYT */
	#sectionYT .yt_slide_wrap{ padding:0px; padding-bottom:50px;}
	#sectionYT .yt_slide_wrap .yt_slider{padding:0px;}
	#sectionYT .yt_slide_wrap .yt_arr{width:35px; height:35px;}
	#sectionYT .yt_slide_wrap .yt_arr img{width:12px;}
	#sectionYT .yt_slide_wrap .yt_arr.yt_prev{ margin-left:-40px;}
	#sectionYT .yt_slide_wrap .yt_arr.yt_next{ margin-right:-40px;}
	#sectionYT .yt_slide_wrap .yt_slider li{padding:0 5px;}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_img{margin-bottom:7px;}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.tit{font-size:14px;}
	#sectionYT .yt_slide_wrap .yt_slider li .yt_text p.day{font-size:13px; margin-top:5px;}

    /* #section01 */
    #section01{border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;}
    .step1 .box:nth-child(n){width: 80%;}
    .step1 .box .txt_box .wrap{min-height: 100px;}
    .step1 .box .txt_box p{font-size: 14px;}
    .step1 .box .txt_box p br{display: none;}
    .step1 .box .txt_box p span.sm{font-size: 12px;}

    /* #section02 */
    .step2 .box:nth-child(n){width: 80%;}
    .step2 .box .txt_box span.num{font-size: 18px;}
    .step2 .box .txt_box h3{font-size: 20px;}
    .step2 .box .txt_box p{font-size: 14px;}
    .step2 .box .txt_box p br.m_on{display: block;}
    .step2 .box .txt_box p span.sm{font-size: 12px;}

    /* #section03 */
    .moving_logo{padding: 60px 0 12px;}
    .pic_rail li img{width: 260px; height: 260px;}
    .logo_rail li img{width: 200px; margin: 0 40px;}

    /* #section04 */
    #section04{border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;}
    .step4 .box{padding: 15px;}
    .step4 .box .list{padding: 20px 15px 30px;}
    .step4 .box .list h4{font-size: 26px;}
    .step4 .box .list ul{margin-bottom: 12px;}
    .step4 .box .list ul li{padding: 8px; font-size: 14px;}
    .step4 .box .list ul li.check{font-size: 16px;}
    .step4 .box .list ul li.check span::before{left: -18px; top: 5px; width: 14px; height: 10px;}
    .step4 .box p.dsc{margin-top: 14px; font-size: 22px;}
    .step4 .box .deco span.ico1{top: -50px; right: -25px;}
    .step4 .box .deco span.ico2{left: -20px;}
    .step4 .box .deco span.ico3{right: -15px;}

    /* #section05 */
    .step5 .box{margin: 0 5px;}
    .step5 .box p.return{font-size: 16px;}
    .step5 .box p.return span{transform: translateY(1px); font-size: 24px;}
    .step5 .box .progress_bar{margin: 16px 0 15px;}
    .step5 .box .progress_bar p{font-size: 14px;}
    .step5 .box .progress_bar p span{transform: translateY(1px); font-size: 20px;}
    .step5 .box p.store{font-size: 14px;}
    .step5.on .box .bar1.sales1{
        background: 
            radial-gradient(closest-side, #ffffff 85%, transparent 86% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }
    .step5.on .box .bar2.sales2{
        background: 
            radial-gradient(closest-side, #ffffff 85%, transparent 86% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }
    .step5.on .box .bar3.sales3{
        background: 
            radial-gradient(closest-side, #ffffff 85%, transparent 86% 100%),
            conic-gradient(#555555 calc(var(--progress-value) * 1%), #c60911 0);
    }

    /* #section06 */
    #section06{border-top-left-radius: 40px; border-top-right-radius: 40px;}
    .step6 .box .txt{margin-top: 10px;}
    .step6 .box .txt h3{font-size: 14px;}

    /* #section07 */
    .step7 p.dsc{font-size: 18px;}
    .step7 .box{margin-bottom: 20px;}
    .step7 .box .bubble{padding: 20px;}
    .step7 .box .bubble p{font-size: 14px;}
    .step7 .box .r_box{margin-top: 20px;}
    .step7 .box .r_box .bubble p br{display: none;}
    .step7 .box .l_box img{width: 140px;}

    /* #section08 */
    .step8 .box_wrap{margin-bottom: 20px;}
    .step8 .box_wrap .m_wrap{margin-bottom: 20px; padding: 0 10px;}
    .step8 .step_arr{margin: 0;}
    .step8 .box .ico{margin-bottom: 10px; padding: 0 10px;}
    .step8 .box .txt span{margin-bottom: 5px; font-size: 14px;}
    .step8 .box .txt p{font-size: 16px;}

    /* #section09 */
    #section09{border-top-left-radius: 40px; border-top-right-radius: 40px;}
    .step9 .box .txt{bottom: 10px; padding: 0 10px;}
    .step9 .box .txt p{font-size: 14px;}

    /* #section10 */
	.step10{margin-bottom: 40px;}
    .step10 p.dsc{font-size: 14px;}
    .step10 h3{margin-bottom: 10px; font-size: 16px;}
    .step10 table tr th{padding: 12px 6px; font-size: 12px; line-height: 1.2;}
	.step10 table tr th span{font-size: 10px; }
	.step10 table tr th b{display: block;}
    .step10 table tr th br{display: none;}
    .step10 table.table_01 tr th:nth-child(1){width: 55px;}
    .step10 table tr td{padding: 12px 6px; font-size: 12px; line-height: 1.2;}
    .step10 table tr td br{display: block;}
	.step10 table tr th.last{word-break:break-all; width:80px;}
	.step10 p{font-size: 13px }
	.step10 ul{margin-top:12px;}
	.step10 ul li{font-size:12px;  padding-left:18px;}

    /* #section11 */
    .step11 p.dsc{padding-bottom: 70px; font-size: 18px;}
    .step11 p.dsc::after{height: 50px;}
    .step11 p.dsc br.m_on{display: block;}
    .step11 .form_box{margin-top: 20px;}
    .step11 .form_box table tr th{width: 100px; padding-left: 10px; font-size: 14px; line-height: 45px;}
    .step11 .form_box table tr td{width: calc(100% - 100px); padding: 0 10px; line-height: 45px;}
    .step11 .form_box table tr:first-child th{padding-top: 5px;}
    .step11 .form_box table tr:first-child td{padding-top: 5px;}
    .step11 .form_box table tr:last-child td{padding: 4px 10px 8px;}
    .step11 .form_box table tr td span{font-size: 14px;}
    .step11 .form_box table tr td input{font-size: 14px; line-height: 35px;}
    .step11 .form_box .agree{margin: 15px 0 30px;}
    .step11 .form_box .agree label span.txt{font-size: 14px;}
    .step11 .form_box .agree a{font-size: 14px;}
    .step11 .form_box .apply{width: 160px;}
    .step11 .form_box .apply a{font-size: 16px; line-height: 50px;}
}


/* :::::::::::::::::::::::::::::::::::::::::::::::: #oth_footer :::::::::::::::::::::::::::::::::::::::::::::::: */
/* fix_box */
.fix_box{display: none; position: sticky; left: 0; bottom: 0; width: 100%; margin-top: 100px;}
.fix_box.on{}

/* #quick */
#quick{position: absolute; right: 0; top: -140px; z-index: 1000;}
#quick ul{}
#quick ul li{}
#quick ul li button{display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: #3a260e; 
border-bottom-left-radius: 10px; border-top-left-radius: 10px; cursor: pointer;}
#quick ul li button img{display: block;}

/* .m_clse */
.m_clse{position: absolute; right: 0; top: -42px; display: none; justify-content: center; align-items: center; width: 42px; height: 42px; 
background-color: #3a260e; border-top-left-radius: 6px; border-top-right-radius: 6px; cursor: pointer;}
.m_clse img{display: block; width: 16px;}
/* on */
.m_clse.on img{transform: rotate(180deg);}

/* mv_form */
#mv_form{width: 1500px; margin: 0 auto; padding: 6px 6px 0; background-color: #3a260e; z-index: 1000; 
border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);}
#mv_form .wrap{display: flex; justify-content: center; align-items: center; padding: 15px;
border: 1px solid #77644e; border-bottom: 0; border-top-left-radius: 15px; border-top-right-radius: 15px;}
#mv_form .call_box{margin-right: 60px;}
#mv_form .call_box a{display: flex; align-items: center; flex-flow: row wrap;}
#mv_form .call_box a span{display: inline-block; margin-right: 5px;}
#mv_form .call_box a span.ico{margin-right: 10px;}
#mv_form .call_box a span.ico img{display: block;}
#mv_form .call_box a span.txt{font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #ffffff; font-size: 30px;}
#mv_form .form_box{display: flex;}
#mv_form .form_box .input_box{width: calc(100% - 200px); margin-right: 30px; font-size: 0;}
#mv_form .form_box .input_box .form{margin-bottom: 10px;}
#mv_form .form_box .input_box .form dl{}
#mv_form .form_box .input_box .form dl dd{display: inline-block; vertical-align: middle; width: 200px; margin-right: 10px;}
#mv_form .form_box .input_box .form dl dd:last-child{margin-right: 0;}
#mv_form .form_box .input_box .form dl dd input{display: block; width: 100%; padding: 0 15px; color: #333333; font-weight: 500; font-size: 16px; line-height: 40px; 
border-radius: 4px;}
#mv_form .form_box .input_box .form dl dd input::placeholder{color: #333333; font-weight: 500;}
#mv_form .form_box .input_box .agree label{display: inline-block; vertical-align: middle;}
#mv_form .form_box .input_box .agree label .check{display: inline-block; vertical-align: middle; position: relative; width: 14px; height: 14px;}
#mv_form .form_box .input_box .agree label .check input{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; z-index: -10;}
#mv_form .form_box .input_box .agree label .check span.ck_box{position: relative; display: block; height: 100%; background-color: #ffffff; border: 1px solid #ddd; border-radius: 4px;}
#mv_form .form_box .input_box .agree label .check span.ck_box::after{display: none; content: ''; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-45deg); width: 6px; height: 4px; 
border-left: 2px solid #333; border-bottom: 2px solid #333;}
#mv_form .form_box .input_box .agree label span.txt{display: inline-block; vertical-align: middle; padding: 0 4px; color: #ffffff; font-weight: 300; font-size: 15px;}
#mv_form .form_box .input_box .agree label .check input:checked ~ span.ck_box{background-color: #fdf1e3; border: 1px solid #fdf1e3;}
#mv_form .form_box .input_box .agree label .check input:checked ~ span.ck_box::after{display: block;}
#mv_form .form_box .input_box .agree a{display: inline-block; vertical-align: middle; color: #ffffff; font-weight: 300; font-size: 15px;}
#mv_form .form_box .apply{width: 200px; line-height: 60px;}
#mv_form .form_box .apply a{display: block; font-family: 'KBIZHanmaumMyungjo', sans-serif; color: #333333; font-weight: 900; font-size: 20px; text-align: center; 
text-shadow: 0px 0px 0px #333; background-color: #fef2e4; border-radius: 10px;}


#oth_footer{padding: 40px 0; background-color: #333333;}
#oth_footer .fx_box{justify-content: space-between;}
#oth_footer .prvc{width: 140px; margin-bottom: 20px; border: 1px solid #fff;}
#oth_footer .prvc a{display: block; color: #ffffff; font-weight: 300; font-size: 15px; line-height: 40px; text-align: center;}
#oth_footer .prvc a:hover{color: #333333; font-weight: 500; background-color: #ffffff;}
#oth_footer .info{margin-bottom: 30px;}
#oth_footer .info li{display: flex; margin-bottom: 5px;}
#oth_footer .info li:last-child{margin-bottom: 0;}
#oth_footer .info li span{display: block; margin-right: 20px; color: #ffffff; font-weight: 300; font-size: 15px; line-height: 1.6;}
#oth_footer .info li span:last-child{margin-right: 0;}
#oth_footer .copy{color: #999999; font-weight: 300; font-size: 15px;}
#oth_footer .copy a{color: #999999; font-weight: 300; font-size: 15px;}
#oth_footer .copy br{display: none;}
#oth_footer .f_sns{}
#oth_footer .f_sns ul{display: flex;}
#oth_footer .f_sns ul li{margin-right: 10px;}
#oth_footer .f_sns ul li:last-child{margin-right: 0;}
#oth_footer .f_sns ul li a{display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border: 1px solid #fff; border-radius: 50%;}
#oth_footer .f_sns ul li a img{display: block;}
/* hover */
#oth_footer .f_sns ul li:nth-child(1) a:hover{background-color: #435e99; border: 0;}
#oth_footer .f_sns ul li:nth-child(2) a:hover{background: url('../images/ico/sns_bg.jpg') 50% 50% no-repeat; background-size: cover; border: 0;}
#oth_footer .f_sns ul li:nth-child(3) a:hover{background-color: #009345; border: 0;}


/* :::::::: RESPONSIVE :::::::: */
@media screen and (max-width:1600px){
    #mv_form{width: 1260px;}
    #mv_form .call_box{margin-right: 20px;}
    #mv_form .form_box .input_box{margin-right: 10px;}
}

@media screen and (max-width:1260px){
    #quick{position: absolute;}

    #mv_form{width: 100%; border-radius: 0;}
    #mv_form .wrap{display: block; border-radius: 0;}
    #mv_form .call_box{display: inline-block; width: auto; margin-right: 0; margin-bottom: 20px;}
    #mv_form form{width: 100%;}
    #mv_form .form_box .input_box{width: calc(100% - 210px);}
    #mv_form .form_box .input_box .form dl dd{width: 32.666%; margin-right: 1%;}
    #mv_form .form_box .input_box .form dl dd:last-child{margin-right: 0;}
}

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

@media screen and (max-width:768px){
    #quick ul li button{width: 50px; height: 50px;}

    #mv_form .wrap{display: block;}
    #mv_form .call_box a span.txt{margin-right: 5px; font-size: 26px;}
    #mv_form .call_box a span.txt:last-child{width: auto;}
    #mv_form .form_box .input_box{width: calc(100% - 170px);}
    #mv_form .form_box .input_box .form dl dd input{padding: 0 12px; font-size: 14px;}
    #mv_form .form_box .apply{width: 160px; line-height: 55px;}
    #mv_form .form_box .apply a{font-size: 18px;}
    #mv_form .form_box .input_box .agree label span.txt{font-size: 14px;}
    #mv_form .form_box .input_box .agree a{font-size: 14px;}

    #oth_footer .fx_box{flex-flow: column wrap;}
    #oth_footer .f_info{width: 100%; order: 1;}
    #oth_footer .info li{display: block;}
    #oth_footer .info li span{display: block; margin-right: 0; margin-bottom: 5px;}
    #oth_footer .f_sns{width: 100%;}
    #oth_footer .f_sns ul{justify-content: flex-end;}
}

@media screen and (max-width:480px){
    #quick{top: -104px;}
    #quick ul li button{width: 42px; height: 42px; border-bottom-left-radius: 6px; border-top-left-radius: 6px;}

    .m_clse{display: flex;}

    #mv_form .wrap{padding: 10px;}
    #mv_form .call_box{margin-bottom: 15px;}
    #mv_form .call_box a span.txt{font-size: 24px;}
    #mv_form .form_box{display: block;}
    #mv_form .form_box .input_box{width: 100%; margin-right: 0; margin-bottom: 15px;}
    #mv_form .form_box .input_box .form dl dd input{padding: 0 8px; font-size: 12px; line-height: 36px;}
    #mv_form .form_box .input_box .agree label span.txt{font-size: 12px;}
    #mv_form .form_box .input_box .agree a{font-size: 12px;}
    #mv_form .form_box .apply{width: 100%; line-height: 46px;}
    #mv_form .form_box .apply a{font-size: 16px;}

    #oth_footer .prvc{width: 110px;}
    #oth_footer .prvc a{font-size: 12px; line-height: 35px;}
    #oth_footer .info{margin-bottom: 20px;}
    #oth_footer .info li span{font-size: 12px;}
    #oth_footer .f_sns{margin-bottom: 20px;}
    #oth_footer .f_sns ul li{margin-right: 8px;}
    #oth_footer .f_sns ul li a{width: 38px; height: 38px;}
    #oth_footer .copy{font-size: 12px;}
    #oth_footer .copy a{font-size: 12px;}
    #oth_footer .copy br{display: block;}
}

/* ===== GBK 톤앤매너 (uniform ivory + white cards, 2026-07-14) ===== */
body{background:#f6f1e8 !important;}
#section01,#section02,#section03,#section04,#section05,#section06,#section07,#section08,#section09,#section10,#section11{background-image:none !important; background-color:transparent !important;}
.step1 .box .txt_box,.step2 .box .txt_box{background:#fff !important; box-shadow:0 8px 26px rgba(150,115,45,.12) !important; border:1px solid #efe6d3 !important; border-radius:0 0 14px 14px !important;}
.step2 .box{border-radius:14px !important; overflow:hidden; box-shadow:0 8px 26px rgba(150,115,45,.12) !important;}
.step4 .box .list,.step7 .box .l_box .bubble,.step7 .box .r_box .bubble{background:#fff !important;}
.step10 table tr th{background:#efe1c6 !important; color:#5a4325 !important;}
.step10 table tr td{background:#fffdf9 !important;}
.gbk-location{background:transparent !important;}
.tt h2{color:#2e2114 !important;}
img[src*="step4_deco1"]{display:none !important;}
.sec_tit .symbol,.symbol{display:none !important;}

/* === GBK reveal fail-safe: content always visible (GSAP timing was leaving sections hidden -> broken gaps) === */
section .sec_tit .step,
section .sec_tit .tt,
#section05 .mc05_img,.section05 .mc05_img,.mc05_img,
.step1 .box1,.step1 .box2,.step1 .box3,
.step2 .box,.step2 .box1,.step2 .box2,.step2 .box3,.step2 .box4,
.step4 .box1,.step4 .box2,
.step5 .box1,.step5 .box2,.step5 .box3,
.step6 .box,.step6 .box1,.step6 .box2,.step6 .box3,.step6 .box .circ .moo,
.step7,.step7 .box,.step7 .box1,.step7 .box2,.step7 .box .l_box img,
.step8 .box,.step8 .wrap1,.step8 .wrap2,.step8 .step_arr,
.step9,.step9 .box,
.step10,.step10 p.dsc,.step10 h3,.step10 table,.step10 ul,
.step11,.step11 .form_box{opacity:1 !important;transform:none !important;}