/* :::::::::::::::: 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('/assets/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('/assets/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: none 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: none 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('/assets/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: none 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('/assets/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('/assets/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: none 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('/assets/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 로 옮기면서 더한 것 ─────────────────────── */

/* 사진이 들어갈 자리. 사진이 오면 이 span 을 img 로 바꿔 끼우면 된다. */
.ph-img{display:block;width:100%;min-height:120px;
  background:repeating-linear-gradient(45deg,#f4ece1 0 10px,#faf5ee 10px 20px);
  border:1px dashed #ddc9ae;border-radius:10px;
  position:relative;aspect-ratio:4/3}
.ph-img i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;font-weight:600;color:#b39a76;letter-spacing:.04em}

/* simplyscroll 대신 쓰는 순수 CSS 흐름. 내용을 두 벌 두고 절반만큼 밀면 이어져 보인다. */
.pic_rail,.logo_rail{display:flex;overflow:hidden}
.pic_rail>*,.logo_rail>*{flex:0 0 auto}
@keyframes gbk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pic_rail{animation:gbk-marquee 60s linear infinite}
.logo_rail{animation:gbk-marquee 40s linear infinite}

/* swiper 대신 쓰는 순수 CSS 가로 슬라이더.
   원본 마크업이 .swiper-wrapper > .swiper-slide 라서 그 구조를 그대로 쓴다
   (마크업을 안 건드려야 나중에 원본과 대조하기 쉽다) */
.yt_slider{overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:10px}
.yt_slider .swiper-wrapper{display:flex;gap:16px;list-style:none;margin:0;padding:0;width:max-content}
.yt_slider .swiper-slide{flex:0 0 clamp(230px,26vw,320px);scroll-snap-align:start}
.yt_slider .yt_img{aspect-ratio:16/9;overflow:hidden;border-radius:10px}
.yt_slider .yt_img .ph-img{aspect-ratio:16/9;height:100%}

/* GBK 워드마크 — velagold 로고 그림을 대신한다 */
.gbk-wordmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.gbk-wordmark b{font-family:Montserrat,'Pretendard',sans-serif;font-size:1.45em;font-weight:700;
  letter-spacing:.18em;text-indent:.18em;color:inherit}
.gbk-wordmark i{font-family:Montserrat,'Pretendard',sans-serif;font-style:normal;
  font-size:.52em;font-weight:500;letter-spacing:.14em;text-indent:.14em;opacity:.85}

/* 브랜드 영상 자리.
   원본 iframe 은 .vd_area(padding-bottom:56.25%) 안에 절대배치로 들어간다.
   같은 방식으로 깔지 않으면 자기 높이가 더해져 화면이 두 배로 길어진다(실제로 그랬다). */
#visual .vd_area .ph-video{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:0}
.ph-video{width:100%;aspect-ratio:16/9;
  background:repeating-linear-gradient(45deg,#241d15 0 12px,#2b231a 12px 24px);
  display:flex;align-items:center;justify-content:center;border-radius:12px}
.ph-video-sm{aspect-ratio:16/9;min-height:0}
.ph-video span{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:#b39a76;text-align:center;padding:0 16px}
.ph-video em{font-style:normal;font-size:12.5px;font-weight:500;opacity:.7}

/* 소개영상 목록을 비웠으므로 한 칸이 넓게 자리 잡도록 */
.yt_slider .swiper-slide.yt-empty{flex:0 0 min(560px,86vw)}

/* 섹션 머리의 워드마크 — 원본 symbol.png 자리 */
.gbk-sym{color:#c8a063;font-size:15px;gap:2px}
.gbk-sym b{font-size:1.5em}
.sec_tit .symbol{display:flex;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .pic_rail,.logo_rail{animation:none}
}

/* ── GBK 실물 소재를 채우며 필요해진 것 (fill-content.mjs) ───────────── */
/* 히어로 배경 영상 — 원본 유튜브 iframe 과 같은 자리를 그대로 쓴다 */
#visual .vd_area .gbk-hero-vd{position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#161310;transform:none;max-width:none}
/* 상단 메뉴는 흰 글씨다. 히어로 영상에는 금색이 화면을 가득 채우는 장면이 있어
   그때 글자가 안 읽힌다. 원본에 이미 있는 ::before 덮개에 위쪽만 어둡게 깐다. */
#visual .vd_area::before{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,
  rgba(0,0,0,.34) 14%,rgba(0,0,0,.10) 28%,rgba(0,0,0,0) 44%);pointer-events:none}
/* 소개영상 두 편을 나란히 — .yt_slider 가 overflow:hidden 이라 넘치면 잘린다 */
#sectionYT .yt_slider .swiper-wrapper{display:flex;gap:24px;flex-wrap:wrap;
  justify-content:center;width:100%;box-sizing:border-box;padding:0 10px}
#sectionYT .yt_slider li.gbk-vd-slide{flex:1 1 420px;max-width:600px;min-width:0;
  list-style:none;padding:0;box-sizing:border-box}
.gbk-vd{margin:0}
.gbk-vd video{width:100%;height:auto;display:block;border-radius:14px;background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.14)}
.gbk-vd figcaption{margin-top:12px;text-align:center;font-size:15px;font-weight:600;opacity:.72}
/* 골드바 마퀴 — 원본은 480x480 매장 사진을 cover 로 잘라 넣던 자리다.
   골드바는 투명 PNG 에 세로로 길어서 그 규칙을 그대로 쓰면 바가 잘리고 두세 개밖에 안 보인다.
   높이만 잡고 폭은 비율대로 두어 한 화면에 여러 개가 흐르게 한다. */
#section03 .moving_pic{position:relative;z-index:1}
/* 마퀴 버그 — 레일 자신이 overflow:hidden 이라 잘라내는 상자까지 같이 밀린다.
   그래서 오른쪽 끝에 빈칸이 생겼다(레일 x=-190, 폭 1440 -> 1250 에서 끊김).
   잘라내는 일은 부모가 하고, 레일은 내용만큼 넓어지게 둔다. */
#section03 .moving_pic,#section03 .moving_logo{overflow:hidden}
#section03 .pic_rail,#section03 .logo_rail{overflow:visible;width:max-content;min-width:100%}
.pic_rail li.gbk-bar{display:flex;flex-direction:column;align-items:center}
.pic_rail li.gbk-bar img{width:auto;height:270px;margin:0 14px;object-fit:contain;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28))}
.pic_rail li.gbk-bar b{display:block;margin-top:14px;font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:#fff}
/* 갈색 띠는 원래 사진 뒤에 절대배치로 깔려 있었다. 여기서는 바 아래로 흐르게 두고
   위로 조금만 물려 무게 글자가 띠 위에 얹히도록 한다. */
#section03 .moving_logo{position:relative;left:auto;bottom:auto;z-index:0;
  padding:74px 0 32px;margin-top:-72px}
.logo_rail li.gbk-card img{width:250px;height:auto;margin:0 18px;border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.22)}
/* #section07 은 원래 어두운 사진을 배경으로 깔고 그 위에 흰 글씨를 얹는 절이다.
   이식할 때 배경 사진을 걷어내면서 흰 글씨가 흰 바탕에 놓여 제목·소제목이 통째로
   안 보였다(2026-09-01). 우리 제조 사진을 어둡게 깔아 원래 의도대로 되돌린다. */
#section07{background-image:linear-gradient(rgba(26,19,13,.74),rgba(26,19,13,.86)),
  url("/assets/img/gbk/shop-premium.webp")!important;
  background-size:cover!important;background-position:50% 50%!important}
#section07 .step7 .l_box .gbk-wordmark{color:#e6d3b4}
/* 계열사 3칸 — 원본은 세 사진이 같은 크기라 칸 크기를 사진에 맡겨도 됐다.
   우리 사진은 비율이 제각각(2.28:1 / 1.22:1 / 1.19:1)이라 칸이 592x260, 271x222,
   276x232 로 어긋났다. 같은 상자에 담고 잘라 맞춘다. */
.step6{align-items:flex-start;gap:24px}
.step6 .box{flex:1 1 0;min-width:0;margin:0}
.step6 .box .circ{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:16px}
.step6 .box .circ img{width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0}
/* 제조 공정 8칸 — .step8 .box 에 폭이 없어서 아래 글자 길이가 칸 크기를 정하고 있었다.
   "원료 입고"(4자)는 104px, "용해"(2자)는 78px 이 되어 아이콘 크기와 세로 위치,
   화살표 자리까지 전부 어긋났다(원본은 사진이 같은 크기라 문제가 없었다).
   칸과 아이콘을 고정 크기로 못 박고 위쪽 기준으로 줄을 맞춘다. */
.step8 .box_wrap,.step8 .box_wrap .m_wrap{align-items:flex-start}
.step8 .box{width:160px;display:flex;flex-direction:column;align-items:center}
.step8 .box .ico{width:104px;height:104px;margin:0 0 22px;flex:0 0 auto}
.step8 .box .ico .gbk-step-ico{width:104px;height:104px;aspect-ratio:auto}
.step8 .box .txt{width:100%}
.step8 .step_arr{align-self:flex-start;margin-top:42px}
/* 차별성 4칸 — 사진은 2.28:1 인데 아이콘 타일만 1.6:1 이라 네 칸 높이가 안 맞았다 */
.step2 .box .img_box{aspect-ratio:1200/526;overflow:hidden}
.step2 .box .img_box img{width:100%;height:100%;max-width:none;object-fit:cover}
/* 계열사 칸의 無 도장은 velagold 의 "무(無) 가맹비" 표시였다. 뜻이 없어져 지운다. */
#section06 .gbk-moo{display:none}
/* CSS 배경으로 부르던 아이콘 4개도 404 였다. 파일 대신 그려 넣는다. */
/* 체크표시 */
.step4 .box .list ul li.check span::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 21'%3E%3Cpath d='M2 11l6 6L23 3' fill='none' stroke='%2339250d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:contain!important}
/* 원형 화살표(더 보기) */
.mv_btn a::after,.go_arrow{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:14px!important}
/* 말풍선 꼬리 — 그림 대신 삼각형으로 그린다 */
.step7 .box .l_box .bubble::before,.step7 .box .r_box .bubble::before{
  background:none!important;width:0!important;height:0!important;border-style:solid}
.step7 .box .l_box .bubble::before{border-width:0 20px 20px 0;
  border-color:transparent #fff transparent transparent}
.step7 .box .r_box .bubble::before{border-width:0 0 20px 20px;
  border-color:transparent transparent transparent #fff}
/* 절차·과목 칸의 아이콘. 원래 사진이 들어가던 자리라 그 크기를 그대로 쓰되
   가운데에 기호만 놓고 옅은 금색 바탕을 깐다. */
.gbk-step-ico{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:1/1;color:#8a6b45;background:#f7f2ea;border-radius:16px;
  border:1px solid #e8ddcc;box-sizing:border-box}
.gbk-step-ico svg{width:38%;height:38%;max-width:76px;max-height:76px}
/* 교육 프로그램 칸은 원래 사진 위에 흰 글씨를 얹는 구조다. .box 에 폭이 없어서
   사진의 원래 크기가 칸 크기를 정하고 있었다 — 아이콘으로 바꾸면 폭이 0 이 된다.
   폭을 직접 주고, 흰 글씨가 읽히도록 타일을 어둡게 깐다.
   2026-09-11 대표님 지적("옹졸하다") — 정사각 칸에 작은 아이콘 하나라 빈 공간이 너무 컸다.
   칸을 낮추고(380->214) 아이콘을 3배로 키우고 제목 밑에 한 줄 설명을 넣는다. */
.step9 .box{width:380px}
.step9 .box .pic{border-radius:14px;box-shadow:0 6px 20px rgba(58,44,28,.14)}
.step9 .box .pic .gbk-step-ico{aspect-ratio:auto;height:232px;border:1px solid rgba(226,199,156,.22);
  border-radius:14px;background:linear-gradient(160deg,#43331f,#2c2116);color:#e5c89b;
  align-items:center;padding:0 0 78px;box-sizing:border-box}
.step9 .box .pic .gbk-step-ico svg{width:auto;height:92px;max-width:none;max-height:none;stroke-width:1.2}
.step9 .box .txt{bottom:22px}
.step9 .box .txt p{font-size:23px;letter-spacing:-.2px;margin-bottom:6px}
.step9 .box .txt .s{display:block;font-size:14px;line-height:1.45;color:rgba(255,255,255,.68);
  font-weight:400;text-align:center;word-break:keep-all;letter-spacing:-.2px}
@media (max-width:1440px){.step9 .box{width:31%;min-width:250px}}
@media (max-width:768px){.step9 .box{width:46%;min-width:0;margin:6px}
  .step9 .box .pic .gbk-step-ico{height:190px;padding-bottom:84px}
  .step9 .box .pic .gbk-step-ico svg{height:66px}
  .step9 .box .txt{bottom:16px;padding:0 10px}
  .step9 .box .txt p{font-size:16px;margin-bottom:4px}
  .step9 .box .txt .s{font-size:13px;line-height:1.35}}
.step2 .box .img_box .gbk-step-ico{aspect-ratio:auto;height:100%;border:0;border-radius:0}
@media (max-width:768px){.gbk-step-ico{border-radius:12px}}
/* 404 나던 아이콘 자리를 글자·SVG 로 대신한 것 */
.gbk-ico{display:inline-block;width:22px;height:22px;color:currentColor;vertical-align:middle}
.gbk-moo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:30px;font-weight:700;color:#fff;line-height:1}
.gbk-close{font-size:30px;line-height:1;font-weight:400}
.gbk-sub{margin-top:8px;font-size:16px;line-height:1.5;opacity:.7;font-weight:500}
@media (max-width:1440px){
  .pic_rail li.gbk-bar img{height:230px}
  .pic_rail li.gbk-bar b{font-size:17px}
  .logo_rail li.gbk-card img{width:210px;margin:0 14px}
  #section03 .moving_logo{padding:64px 0 28px;margin-top:-62px}
}
@media (max-width:1024px){
  .step8 .box{width:130px}
  .step8 .box .ico,.step8 .box .ico .gbk-step-ico{width:84px;height:84px}
  .step8 .step_arr{margin-top:32px}
}
@media (max-width:768px){
  .step6{gap:14px}
  .step8 .box{width:96px}
  .step8 .box .ico,.step8 .box .ico .gbk-step-ico{width:64px;height:64px;margin-bottom:14px}
  .step8 .step_arr{margin-top:22px}
  #sectionYT .yt_slider .swiper-wrapper{gap:18px}
  .pic_rail li.gbk-bar img{height:160px;margin:0 9px}
  .pic_rail li.gbk-bar b{font-size:14px;margin-top:10px}
  .logo_rail li.gbk-card img{width:150px;margin:0 10px}
  #section03 .moving_logo{padding:48px 0 22px;margin-top:-46px}
  .gbk-sub{font-size:14px}
}
/* 자주 묻는 질문 — /faq/ 페이지를 내리면서 본 사이트로 옮겨 온 것 */
.gbk-faq{max-width:900px;margin:72px auto 0}
.gbk-faq h3{font-family:"KBIZHanmaumMyungjo",sans-serif;font-weight:900;font-size:30px;
  color:#3a271c;text-align:center;margin:0 0 28px}
.gbk-faq details{border-top:1px solid #e6dacb}
.gbk-faq details:last-child{border-bottom:1px solid #e6dacb}
.gbk-faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 4px;position:relative;
  font-size:18px;font-weight:700;color:#2f2119;word-break:keep-all}
.gbk-faq summary::-webkit-details-marker{display:none}
.gbk-faq summary::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid #8a6b45;border-bottom:2px solid #8a6b45;
  transform:rotate(45deg);transition:transform .25s}
.gbk-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.gbk-faq details p{margin:0 0 22px;padding-right:44px;font-size:16px;line-height:1.7;
  color:#5e4a39;word-break:keep-all}
@media (max-width:768px){
  .gbk-faq{margin-top:48px}
  .gbk-faq h3{font-size:23px;margin-bottom:18px}
  .gbk-faq summary{font-size:16px;padding:16px 36px 16px 2px}
  .gbk-faq details p{font-size:14.5px;padding-right:36px;margin-bottom:18px}
}
/* 특허·상표·인증 — Step4 안에 붙는다 */
.gbk-cred{display:flex;gap:28px;margin-top:64px;align-items:stretch;flex-wrap:wrap}
.gbk-cred-col{flex:1 1 300px;min-width:0;padding:32px 28px;background:#fbf7f1;
  border:1px solid #ece0cf;border-radius:18px;box-sizing:border-box}
.gbk-cred-col h3{font-family:"KBIZHanmaumMyungjo",sans-serif;font-weight:900;
  font-size:28px;color:#3a271c;text-align:center;margin:0}
.gbk-cred-sub{margin:8px 0 22px;font-size:14px;color:#8a7460;text-align:center;
  line-height:1.5;word-break:keep-all}
.gbk-cred-col ul{list-style:none;margin:0;padding:0}
.gbk-cred-col li{padding:14px 0;border-top:1px solid #eadfd0}
.gbk-cred-col li:first-child{border-top:0;padding-top:0}
.gbk-cred-col li b{display:block;font-size:17px;font-weight:700;color:#2f2119;
  line-height:1.4;word-break:keep-all}
.gbk-cred-col li span{display:block;margin-top:4px;font-family:Montserrat,sans-serif;
  font-size:15px;color:#6e4837;letter-spacing:.01em}
.gbk-cred-col li i{display:block;margin-top:2px;font-style:normal;font-size:13.5px;color:#96826d}
.gbk-cred-note{margin-top:26px;text-align:center;font-size:14.5px;color:#8a7460}
.gbk-cred-note b{font-weight:700;color:#6e4837}
/* 계열사 칸에 붙는 근거 한 줄 */
.gbk-cred-tag{display:block;margin-top:8px;font-style:normal;font-size:13px;
  font-weight:600;color:#8a6b45;letter-spacing:.01em;word-break:keep-all}
@media (max-width:480px){.gbk-cred-tag{font-size:11.5px;margin-top:6px}}
@media (max-width:1024px){
  .gbk-cred{gap:20px;margin-top:48px}
  .gbk-cred-col{padding:26px 22px;flex:1 1 260px}
  .gbk-cred-col h3{font-size:24px}
}
@media (max-width:768px){
  .gbk-cred{gap:14px;margin-top:36px}
  .gbk-cred-col{flex:1 1 100%;padding:22px 18px;border-radius:14px}
  .gbk-cred-col h3{font-size:21px}
  .gbk-cred-sub{margin-bottom:16px;font-size:13px}
  .gbk-cred-col li{padding:12px 0}
  .gbk-cred-col li b{font-size:15.5px}
  .gbk-cred-col li span{font-size:14px}
  .gbk-cred-note{font-size:13px;margin-top:20px;word-break:keep-all}
}
/* ── 로고 그림 (글자 로고를 대체) ─────────────────────────────────── */
/* 헤더는 히어로 영상 위에서 시작해 스크롤하면 흰 배경(.solid)으로 바뀐다.
   흰 로고 한 장만 두고, 흰 배경일 때는 색을 뒤집어 쓴다. */
/* velagold 는 이 자리들에 폭이 박힌 그림을 쓰고 있어서(.symbol img{width:41px} 등)
   로고를 끼우면 눌린다. 로고는 어떤 경우에도 비율이 틀어지면 안 되므로 폭을 풀어 준다. */
.gbk-logo{display:block;width:auto!important;height:auto;max-width:100%;object-fit:contain}
.gbk-logo-main{height:44px}
.vg-gnb .vg-logo img.gbk-logo-main{height:48px;filter:none}
/* 밝은 판/어두운 판 바꿔 보이기 */
.vg-gnb .vg-logo img.gbk-logo-on-light{display:none}
.vg-gnb.solid .vg-logo img.gbk-logo-on-dark{display:none}
.vg-gnb.solid .vg-logo img.gbk-logo-on-light{display:block}
/* 섹션 머리 심볼 — 마크만, 짙은 색 */
.gbk-logo-sym{height:54px;margin:0 auto}
section .sec_tit .symbol img.gbk-logo-sym{height:54px}
/* 어두운 절(#section07)에서는 흰 로고가 필요하다 */
#section07 .gbk-logo-sym{filter:invert(1) brightness(1.6)}
#section07 .step7 .l_box .gbk-logo-main{height:56px;margin:0 auto}
@media (max-width:1024px){.gbk-logo-sym,section .sec_tit .symbol img.gbk-logo-sym{height:46px}
  .vg-gnb .vg-logo img.gbk-logo-main{height:40px}}
@media (max-width:768px){.gbk-logo-sym,section .sec_tit .symbol img.gbk-logo-sym{height:38px}
  .gbk-logo-main{height:34px}.vg-gnb .vg-logo img.gbk-logo-main{height:34px}}
/* 폼 버튼 안내 문구 */
.gbk-notice{margin:16px auto 0;max-width:520px;padding:12px 16px;border-radius:10px;
  background:#f4ece0;border:1px solid #e0d0b8;color:#5a4128;font-size:15px;
  line-height:1.5;text-align:center;word-break:keep-all}
.gbk-notice.ok{background:#eaf4ea;border-color:#c9e0c9;color:#2f5233}
/* 좁은 화면에서 글자가 지나치게 작아지던 곳 (실측 12~14px) */
@media (max-width:480px){
  /* 계열사 이름이 14px 이었다. 원본 라벨은 "자체 공장 보유" 처럼 짧았지만
     회사 이름은 그 크기로는 읽히지 않는다. */
  .step6 .box .txt h3{font-size:19px}
  .step6 .box .circ{aspect-ratio:4/3}
  .gbk-sub{font-size:12.5px;line-height:1.45}
  /* 푸터 회사정보와 개인정보 링크가 12px 이었다.
     원본 규칙이 #id + class 라 선택자를 같은 깊이로 맞춰야 이긴다. */
  #oth_footer .info li span{font-size:13px}
  #oth_footer .prvc a{font-size:13px}
  #oth_footer .copy,#oth_footer .copy a{font-size:12.5px}
  .step1 .box .txt_box p span.sm{font-size:13px}
}