/* 서브 공통 */
#header{ transition: padding .3s, background .3s; }
#header #gnb > ul > li > a{ transition: color .3s; }
#header #logo{ transition: top .3s; }
#header.s_header{ border-bottom: 1px solid #FF2929; }
#header.s_header.on{ border-color: rgba(255,255,255,0); }

.st_wrap{ overflow: hidden; }
.st_wrap strong{ font-size: 120px; font-weight: 900; color: #370D00; display: block; letter-spacing: -0.05em; }

#sub .tag{display: flex;margin-bottom: 25px;}
#sub .tag .tag_in i img{display: block;margin: 0 auto}
#sub .tag .tag_in strong{display: flex;padding: 0 35px;height: 50px;background: #FF2929;border-radius: 30px;align-items: center;font-size: 24px;color: #FFFFFF;margin-top: -1px;}

#sub .tag .tag_in{animation: tag 2s infinite linear;transform-origin: center top}


/* 게시판 공통 */
#sub .inner{ width: 100%; padding: 0 80px; }
#header.b_header #gnb > ul > li > a{ color: #370D00; }
#sub.board #smoother-content{ background-color: #F8F5EE; }
#sub .board_visual{ height: 600px; position: relative; }
#sub .board_visual .wrap{ width: 100%; height: 100%; position: relative; }
#sub .board_visual .wrap .s_tit{ position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); overflow: hidden; width: 100%; display:flex; justify-content: center; }
#sub .board_visual .wrap .s_tit strong{ display: block; font-size: 120px; letter-spacing: -0.05em; color:#370D00; font-weight: 900; line-height: 1em; }
#sub .board_visual .wrap .s_tit_kr strong{ font-size: 80px; }
#sub .board_visual .wrap .s_tit strong div{ transform: translateY(100%); transition: transform 1s; }
#sub .board_visual.on .wrap .s_tit strong div{ transform: translateY(0); }

#sub .board_visual .wrap .s_tit strong div:nth-child(2){ transition-delay: .1s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(3){ transition-delay: .2s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(4){ transition-delay: .3s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(5){ transition-delay: .4s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(6){ transition-delay: .5s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(7){ transition-delay: .6s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(8){ transition-delay: .7s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(9){ transition-delay: .8s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(10){ transition-delay: .9s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(11){ transition-delay: 1s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(12){ transition-delay: 1.1s; }
#sub .board_visual .wrap .s_tit strong div:nth-child(13){ transition-delay: 1.2s; }

#sub .board_visual .s_tab{ position: absolute; left: 0; bottom: 0; padding: 0 80px; width: 100%; }
#sub .board_visual .s_tab button{ display: none; }
#sub .board_visual .s_tab ul{ display: flex; justify-content: center; gap: 80px; width: 100%; border-bottom: 2px solid #370D00; }
#sub .board_visual .s_tab ul li a{ padding-bottom: 20px; display: block; position: relative; font-size: 24px; font-weight: 800; color:#370D00; }
#sub .board_visual .s_tab ul li.on a{ color: #C10808; }
#sub .board_visual .s_tab ul li.on a:after{ content:""; display: block; width: calc(100% + 8px); box-sizing: border-box; height: 12px; border-radius: 12px; background-color: #C10808; border: 4px solid #F8F5EE; position: absolute; left: 50%; bottom: -7px; transform: translate(-50%,0); }
#sub .board_visual .s_tab ul li.on a:after{ content:""; display: block; width: calc(100% + 8px); box-sizing: border-box; height: 12px; border-radius: 12px; background-color: #C10808; border: 4px solid #F8F5EE; position: absolute; left: 50%; bottom: -7px; transform: translate(-50%,0); }
#sub .board_visual .s_tab ul li.on a:before{ content:""; display: block; width: 14px; height: 7px; background: url('/img/sub/s_tab_arrow.png') center center no-repeat; position: absolute; left: 50%; top: -10px; transform: translate(-50%,-100%); animation: arrows .8s ease-in-out infinite; }
#sub.board .sub_con{ padding-top: 80px; padding-bottom: 200px; }


#sub.board .paging{ margin-top: 120px; display: flex; justify-content: center; }
#sub.board .paging ul{ display: flex; gap: 10px; }
#sub.board .paging ul li a{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: relative; }
#sub.board .paging ul li.prev a:after, #sub.board .paging ul li.next a:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 3px solid #E6E0D3; border-radius: 10px; box-sizing: border-box; }
#sub.board .paging ul li.first a:after, #sub.board .paging ul li.last a:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 3px solid #ECE2DF; border-radius: 10px; box-sizing: border-box; }
#sub.board .paging ul li.num a{ font-size: 24px; font-weight: 900; color: #370d00; }
#sub.board .paging ul li.num.on a{ color: #C10808 }
#sub.board .paging ul li.num.on a:after{ content:""; display: block; width: 30px; height: 3px; background-color: #C10808; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); border-radius: 2px; }

#sub_pop{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(35,14,7,0.75); z-index: 9999999; display: none; }
#sub_pop .wrap{ display: flex; align-items: center; justify-content: center; height: calc(100% - 120px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#sub_pop .wrap .close_b{ position: absolute; right: -10px; top: 0; transform: translate(100%,0); }
#sub_pop .wrap .close_b button{ width: 90px; height: 90px; border-radius: 10px; background-color: rgba(255,255,255,0.1); transition: background .3s; display: flex; align-items: center; justify-content: center; }
#sub_pop .wrap .close_b button:hover{ background-color: #C10808; }
#sub_pop .wrap .close_b button svg{ display: block; }
#sub_pop .wrap .box{ width: 1000px; height: 100%; border-radius: 20px; overflow-y: scroll; }






/* 메뉴 */
#sub.board .p_list ul{ display: flex; flex-flow: wrap; gap: 120px 25px; }
#sub.board .p_list ul li{width: calc(33.3333333% - 16.66666666666667px)}
#sub.board .p_list ul li a{ display: block; }
#sub.board .p_list ul li a .img{ overflow: hidden; border-radius: 10px; background-color: #EFE9DC; position: relative; }
#sub.board .p_list ul li a .img:before{ content:""; display: block; width: 200%; height: 200%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.1); border-radius: 50%; background-color: #C10808;transition: transform 1s; }
#sub.board .p_list ul li a .img img{ width: 100%; display: block; }
#sub.board .p_list ul li a .img > img{ position: relative; z-index: 1; }
#sub.board .p_list ul li a .img .hover{ position: absolute; left: 50%; top: 0; transform: translate(-50%,100%) scale(.5); width: 100%; height: 100%; transition: transform .5s; }
#sub.board .p_list ul li a .txt{ padding: 40px; padding-bottom: 0; }
#sub.board .p_list ul li a .txt .t_info{ display: flex; flex-flow: column; gap:20px; text-align: center; }
#sub.board .p_list ul li a .txt .t_info strong{ font-size: 30px; font-weight: 700; color:#370D00; }
#sub.board .p_list ul li a .txt .t_info p{ font-size: 18px; line-height: 1.5em; color:#370D00; }


#sub.board .p_list ul li a:hover .img:before{ transform: translate(-50%,-50%) scale(1); }
#sub.board .p_list ul li a:hover .img .hover{ transform: translate(-50%,0) scale(1); }

#sub.board .size{ display: flex; justify-content: center; align-items: center; gap: 60px; margin-top: 40px; position: relative; margin-bottom: 20px; }
#sub.board .size:after{ content:""; display: block; width: 1px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #DED7CA; }
#sub.board .size > div{ display: flex; align-items: center; gap: 16px; }
#sub.board .size i{ display: flex; align-items: center; justify-content: center; border-radius: 8px; width: 46px; height: 46px; font-size: 24px; font-weight: 700; color:#FFFFFF; }
#sub.board .size .regular{ background-color: #F58B00; }
#sub.board .size .large{ background-color: #C10808; }
#sub.board .size p{ color: #370D00; font-size: 24px; font-weight: 700; }
#sub.board .size p span{ font-size: 18px; font-weight: 500; }
#sub.board .p_list ul li .btn{ padding-top: 10px; border-top: 1px solid #DED7CA; display: flex; gap: 10px; justify-content: center; position: relative; z-index: 1; }
#sub.board .p_list ul li .btn button{ padding: 0 30px; height: 52px; border-radius: 10px; border: 3px solid #DED7CA; font-size: 20px; font-weight: 700; color:#370D00; position: relative; }
#sub.board .p_list ul li .btn button:after{ content:""; display: block; width: 100%; height: 100%; border: 3px solid #370d00; border-radius: 10px; position: absolute; left: -3px; top: -3px; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path .5s; }
#sub.board .p_list ul li .btn button:hover:after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

#sub.board .p_list .side .size{ gap: 0 !important; }
#sub.board .p_list .side .size:after{ display: none !important; }

#sub .menu_view{ height: 100vh; position: relative; display: flex; align-items: flex-end; padding-bottom: 40px; padding-top: 40px; }
#sub .menu_view .img{ position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); z-index: 1; }
#sub .menu_view .img > img{ display: block; position: relative; z-index: 1; max-height: 80vh; }
#sub .menu_view .img .dou img{ max-height: 80vh; }
#sub .menu_view .img .dou{ position: absolute; left: 0; top: 0; }
#sub .menu_view .txt{ width: 100%; }
#sub .menu_view .txt .inner{ display: flex;  width: 100%; position: relative; }
#sub .menu_view .txt .inner .m_txt{ background-color: #EFE9DC; padding: 80px; width: 50%; }
#sub .menu_view .txt .inner .m_tit{ padding-right: 260px; }
#sub .menu_view .txt .m_tit .cate{ display: flex; gap: 10px; margin-bottom: 20px; }
#sub .menu_view .txt .m_tit .cate span{ height: 51px; display: flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 10px; border: 1px solid #370D00; font-size: 30px; letter-spacing: -0.05em; color:#370D00; font-weight: 900;  }
#sub .menu_view .txt .m_tit .cate .best{ border-color: #FF1313; background-color: #FF1313; color: #fff; }
#sub .menu_view .txt .m_tit > strong{ font-size: 40px; font-weight: 800; color: #370D00; word-break: keep-all; line-height: 1.5em; }
#sub .menu_view .size{ margin-bottom: 0; justify-content: flex-start; }
#sub .menu_view .size:after{ display: none; }
#sub .menu_view .m_info .wrap{ width: 100%; display: flex; flex-flow: column; align-items: flex-end; gap: 60px; }
#sub .menu_view .m_info dl{ display: flex; gap: 10px; flex-flow: column; width: 400px; }
#sub .menu_view .m_info dl dt{ font-size: 22px; font-weight: 700; color:#370D00; font-weight: 700; }
#sub .menu_view .m_info dl dd{ font-size: 20px; line-height: 1.5em; color:#370D00; }

#sub .menu_view .txt .scrolls{ position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); }
#sub .menu_view .txt .scrolls strong{ font-size: 22px; font-weight: 700; color:#370D00;  border-bottom: 2px solid rgba(55,13,0,0.2); display: block; padding: 0 10px; padding-bottom: 10px; position: relative; }
#sub .menu_view .txt .scrolls strong:after{ content:""; display: block; position: absolute; left: 50%; bottom: -2px; transform: translate(-50%,0); width: 0; height: 2px; background-color: #370D00; border-radius: 50px; animation: acc 3s ease-in-out infinite; }
#sub .menu_view .txt .scrolls:before{content:""; display: block; width: 14px; height: 7px; background: url('/img/sub/m_view_arrow.png') center center no-repeat; position: absolute; left: 50%; bottom: -10px; transform: translate(-50%,100%); animation: arrows2 .8s ease-in-out infinite; }

#sub .st01{ display: block; text-align: center; font-size: 60px; line-height: 1em; font-weight: 900; letter-spacing: -0.05em; color:#370D00; }

#sub.side .menu_view .txt .scrolls{ display: none !important; }

#sub.m_view .sub_con{ padding-top: 160px; }
#sub.m_view .con01 .list{ margin-top: 80px; display: flex; gap: 30px; }
#sub.m_view .con01 .list li .img img{ display: block; width: 100%; border-radius: 10px; }
#sub.m_view .con01 .list li .img{ position: relative; }
#sub.m_view .con01 .list li .img .cate{ position: absolute; left: 20px; top: 20px; height: 50px; display: flex; padding: 0 20px; border-radius: 10px; align-items: center; background-color: #670000; }
#sub.m_view .con01 .list li .img .cate p{ font-size: 20px; font-weight: 500; color:#FFFFFF; }
#sub.m_view .con01 .list li { border-radius: 10px; padding: 3px; }
#sub.m_view .con01 .list li.news{ background-color: #fff; box-shadow: 0 0 60px rgba(201,26,26,0.5);}
#sub.m_view .con01 .list li .txt{ padding: 30px; position: relative; }
#sub.m_view .con01 .list li .txt strong{ display: block; font-size: 30px; line-height: 1.3em; font-weight: 800; color: #370D00; margin-bottom: 12px;  }
#sub.m_view .con01 .list li .txt p{ font-size: 20px; line-height: 1.5em; color:#370D00; }
#sub.m_view .con01 .list li .txt span{ display: block; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; color:#FF2929; letter-spacing: -0.05em; border-radius: 10px; border: 3px solid #FF2929; position: absolute; right: 30px; top: 50%; transform: translate(0,-50%); }

#sub.view.m_view .sub_con{ padding-top: 160px !important; }


/* 프로모션 */
#sub.board .g_list ul{ display: flex; flex-flow: wrap; gap: 34px; }
#sub.board .g_list ul li{ width: calc(33.333333333% - 22.66666666666667px); }
#sub.board .g_list ul li a{ display: block; position: relative; width: 100%; padding: 30px; }
#sub.board .g_list ul li a .img img{ display: block; width: 100%; border-radius: 10px; }
#sub.board .g_list ul li a:after{ content:""; display: block; width: 100%; height: 147px; border: 4px solid #E6E0D3; border-radius: 10px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: -1; transition: height .5s, border .5s; }
#sub.board .g_list ul li a .txt{ display: flex; flex-flow: column; margin-bottom: 30px; }
#sub.board .g_list ul li a .txt .cate{ margin-bottom: 30px; }
#sub.board .g_list ul li a .txt .cate span{ display: flex; width: 116px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color:#FFFFFF; border-radius: 10px; transition: width .5s; }
#sub.board .g_list ul li a .txt .cate .state01{ background-color: #C10808; }
#sub.board .g_list ul li a .txt .cate .state02{ background-color: #370D00; }
#sub.board .g_list ul li a .txt strong{ font-size: 22px; font-weight: 700; color:#370D00; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }
#sub.board .g_list ul li a .txt p{ font-size: 18px; font-weight: 300; color: #370D00; }
#sub.board .g_list ul li a:hover:after{ height: 100%; border-color: #c10808; }
#sub.board .g_list ul li a:hover .txt .cate span{ width: 100%; }

#sub.board .v_inner{ width: 1400px; margin: 0 auto; }
#sub.board.view .v_tit{ border-top: 3px solid #370d00; }
#sub.board.view .v_tit{ height: 190px; display: flex; align-items: center; flex-flow: row-reverse; justify-content: space-between; padding: 60px; }
#sub.board.view .v_tit .txt strong{ display: block; font-size: 30px; font-weight: 800; color:#370D00; margin-bottom: 16px; }
#sub.board.view .v_tit .txt p{ font-size: 18px; color:#370D00; }
#sub.board.view .v_tit .cate p{ width: 120px; height: 60px; border-radius: 6px;  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color:#FFFFFF; }
#sub.board.view .v_tit .state01 p{ background-color: #C10808; }
#sub.board.view .v_tit .state02 p{ background-color: #370D00; }
#sub.board.view .v_con{ padding: 60px; border: 3px solid #E6E0D3; border-radius: 10px; min-height: 500px; }
#sub.board.view .v_con img{ max-width: 100%; }
#sub.promotion.view .sub_con{ padding-top: 0  }
#sub.board.view .sub_con{ padding-top: 0; }
#sub.board.view .v_tit .txt ul{ display: flex; gap: 20px; }
#sub.board.view .v_tit .txt ul li{ font-size: 18px; color:#370D00; gap: 20px; display: flex; align-items: center; }
#sub.board.view .v_tit .txt ul li:after{ content:""; display: block; width: 1px; height: 14px; background-color: #D9D3C4; }
#sub.board.view .v_tit .txt ul li:last-child:after{ display: none; }

#sub.promotion.view .v_inner{ width: 1200px; }


#sub .go_btn{ display: flex; justify-content: center; margin-top: 60px; }
#sub .go_btn a{ display: flex; align-items: center; justify-content: space-between; height: 90px; padding: 0 40px; width: 320px; position: relative; }
#sub .go_btn a:before{ content:""; display: block; width: 100%; height: 100%; border: 3px solid #370D00; border-radius: 10px; position: absolute; left: 0; top: 0; box-sizing: border-box; transition: border .5s; }
#sub .go_btn a strong{ font-size: 40px; font-weight: 900; color: #370D00; letter-spacing: -0.05em; position: relative; z-index: 1; }
#sub .go_btn a svg{ display: block; transition: transform .5s; position: relative; z-index: 1; }
#sub .go_btn a:hover svg{ transform: translateX(10px); }
#sub .go_btn a:after{ content:""; display: block; width: 100%; height: 100%; background-color: #C10808;  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path .5s; position: absolute; left: 0; top: 0; transition: clip-path .5s; border-radius: 10px; }
#sub .go_btn a:hover:after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
#sub .go_btn a:hover:before{ border-color: #c70808; }

#sub .go_btn a:hover svg path{ fill: #fff; }
#sub .go_btn a:hover strong{ color: #fff; }
#sub .go_btn a svg path{ transition: fill .5s; }
#sub .go_btn a strong{ transition: color .5s; }




/* STORE */
#sub.store .board_visual{ background-color: #C10808; border-radius: 0 0 30px 30px; overflow: hidden; }
#sub.store .board_visual .s_tit strong{ color: #fff; }
#sub.store .board_visual .labels{ position: absolute; left: 0; bottom: 0; height: 60px; background-color: #AC0808; width: 100%; }
#sub.store .board_visual .labels ul{ position: absolute; left: 0; top: 0; height: 60px; display: flex; animation: loops 40s linear infinite; }
#sub.store .board_visual .labels ul li{ height: 60px; display: flex; align-items: center; }
#sub.store .sub_con .inner{ display: flex; flex-flow: row-reverse; padding: 0; }
#sub.store .sub_con .inner > div{ width: 50%; }
#sub.store .sub_con .inner{ border-top: 1px solid #D9D3C4; border-bottom: 1px solid #D9D3C4; }
#sub.store .sub_con .maps{ padding: 40px; }
/*#sub.store .sub_con .maps img{ display: block; width: 100%; border-radius:10px; border: 2px solid #370D00; }*/
#sub.store .sub_con .m_sh{ border-right: 1px solid #d9d3c4; }
#sub.store .sub_con .m_sh .m_top ul{ display: flex; flex-flow: wrap; gap: 10px;  padding: 40px; border-bottom: 1px solid #D9D3C4; }
#sub.store .sub_con .m_sh .m_top ul li{ width: calc(50% - 5px); display: flex; gap: 10px; }

#sub.board .b_select{ height: 80px; border-radius: 10px; border: 2px solid #370D00; padding: 0 40px; font-size: 20px; font-weight: 700; color:#370D00;
-webkit-appearance: none;  /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none;  /* 화살표 없애기 */
    background : url('/img/sub/select_arrow.png') right 40px center no-repeat;
     background-color: transparent;
}
#sub.board .b_input{ height: 80px; border-radius: 10px; border: 2px solid #370d00; width: 100%; padding-left: 40px; font-size: 20px; font-weight: 700; color: #370d00; background-color: rgba(255,255,255,0);  }

#sub.board .b_input::placeholder {
 	color: #370d00;
}

#sub.board .b_input::-webkit-input-placeholder{
 	color: #370d00;
}

#sub.board .b_input:-ms-input-placeholder{
 	color: #370d00;
}

#sub.board .b_btn{ display: flex; align-items: center; justify-content: center; height: 80px; border-radius: 10px; color:#fff; background-color: #370D00; font-size: 20px; font-weight: 700; color:#FFFFFF; transition: background .3s; }
#sub.board .b_btn:hover{ background-color: #531B0A; }

#sub.store .sub_con .m_sh .m_top ul li .line{ display: block; width: 1px; height: 80px; background-color: #D9D3C4 }
#sub.store .sub_con .m_sh .m_top ul li .b_btn1{ width: 35%; }
#sub.store .sub_con .m_sh .m_top ul li .b_btn2{ width: 65%; }
#sub.store .sub_con .m_list { height: 580px; overflow-y: scroll; }
#sub.store .sub_con .m_list > ul{ display:flex; flex-flow: column; }
#sub.store .sub_con .m_list > ul > li{ display: flex; align-items: center; height: 240px; border-bottom: 1px solid #D9D3C4; position: relative; cursor: pointer; }
#sub.store .sub_con .m_list > ul > li > div{ width: 50%; padding-left: 40px; position: relative; z-index: 1; }
#sub.store .sub_con .m_list > ul > li .txt{ display: flex; flex-flow: column; height: 100%; justify-content: center; position: relative; }
#sub.store .sub_con .m_list > ul > li .txt:after{ content:""; display: block; width: 1px; height: 20px; background-color: #D9D3C4; position: absolute; right: 0; top: 0; }
#sub.store .sub_con .m_list > ul > li .txt:before{ content:""; display: block; width: 1px; height: 20px; background-color: #D9D3C4; position: absolute; right: 0; bottom: 0; }
#sub.store .sub_con .m_list > ul > li .txt .tit{ display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
#sub.store .sub_con .m_list > ul > li .txt .tit strong{ font-size: 28px; font-weight: 800; color: #370D00;  }
#sub.store .sub_con .m_list > ul > li .txt .tit a{ display: flex; align-items: center; gap: 4px; border-radius: 6px; background-color: #03C75A; height: 36px; width: 128px; padding-left: 6px; font-size: 16px; color: #fff; }
#sub.store .sub_con .m_list > ul > li .s_info ul{ display: flex; flex-flow: column; gap: 12px; }
#sub.store .sub_con .m_list > ul > li .s_info ul li{display: flex;  gap: 4px; }
#sub.store .sub_con .m_list > ul > li .s_info ul li p{ font-size: 18px; color: #370D00; }
#sub.store .sub_con .cate > ul{ display: flex; gap: 6px; flex-flow: wrap; }
#sub.store .sub_con .cate > ul > li{ display: flex; align-items: center; gap: 8px; height: 42px; padding-left: 10px; padding-right: 14px; border-radius: 6px; background-color: #C10808; }
#sub.store .sub_con .cate > ul > li > p{ font-size: 16px; color:#FFFFFF; }
#sub.store .sub_con .cate > ul > li svg{ display: block; }
#sub.store .sub_con .cate{ padding-right: 40px; }
#sub.store .sub_con .m_list > ul > li:after{ content:""; display: block; width: 100%; height: 100%; background-color: #C10808; position: absolute; left: 0; top: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);  }
#sub.store .sub_con .m_list > ul > li:hover:after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .5s; }
#sub.store .sub_con .m_list > ul > li:hover .txt .tit strong{ color: #Fff; }
#sub.store .sub_con .m_list > ul > li:hover .s_info ul li p{ color: #fff; }
#sub.store .sub_con .m_list > ul > li:hover .s_info ul li svg path{ fill: #FF4444; }
#sub.store .sub_con .m_list > ul > li:hover .cate > ul > li{ background-color: #370D00; }

#sub.store .sub_con .m_list > ul > li.on:after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .5s; }
#sub.store .sub_con .m_list > ul > li.on .txt .tit strong{ color: #Fff; }
#sub.store .sub_con .m_list > ul > li.on .s_info ul li p{ color: #fff; }
#sub.store .sub_con .m_list > ul > li.on .s_info ul li svg path{ fill: #FF4444; }
#sub.store .sub_con .m_list > ul > li.on .cate > ul > li{ background-color: #370D00; }
/*

#sub.store .sub_con .m_list > ul > li:before{ content:""; display: block; width: 20px; height: 100px; background: url('/img/sub/store_arrow.png') center center no-repeat; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); }
*/

#sub.store .sub_con .m_list::-webkit-scrollbar{ width: 14px; }
#sub.store .sub_con .m_list::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255); /* 스크롤바 색상 */
    border-radius: 14px;
border: 5px solid rgba(55, 14, 0, .2);

}
#sub.store .sub_con .m_list::-webkit-scrollbar-track {
    background: rgba(55, 14, 0, .2);  /*스크롤바 뒷 배경 색상*/
    border-radius: 14px; 
}



/* VIDEO */

#sub.video .g_list ul li a:after{ bottom: auto; top: 0; }
#sub.video .g_list ul li a .txt{ margin-bottom: 0; padding-bottom: 10px;padding-top: 30px;  }
#sub.video .g_list ul li a .txt strong{ margin-bottom: 0; }
#sub.video .g_list ul li a .img{ position: relative; }
#sub.video .g_list ul li a .img .hover{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity .5s; }
#sub.video .g_list ul li a .img .hover .play{ display: flex; align-items: center; justify-content: center; transform: rotate(180deg); transition: width .5s, height .5s; position: relative; }
#sub.video .g_list ul li a .img .hover .play:after{ border-radius: 50%; background-color: #C10808; width: 160px; height: 160px; content:""; display: block; transform: translate(-50%,-50%) scale(.5); transition: transform .5s; position: absolute; left: 50%; top: 50%; }
#sub.video .g_list ul li a .img .hover .play svg{ display: block; position: relative; z-index: 1; transition: transform .5s; }
#sub.video .g_list ul li a:hover .img .hover .play:after{ transform: translate(-50%,-50%) scale(1); }
#sub.video .g_list ul li a:hover .img .hover .play svg{ transform: rotate(180deg); }
#sub.video .g_list ul li a:hover .hover{ opacity: 1; }

.video_pop .p_con{ height: 0; position: relative; padding-bottom: 56.25%; border-radius: 20px; overflow: hidden; }
.video_pop .p_con iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#sub_pop.video_pop .wrap .box{ height: auto; }
#sub_pop.video_pop .wrap{ height: auto; }
#sub_pop.video_pop .box{ width: 1200px; }
#sub_pop.video_pop .box > strong{ display: block; margin-top: 20px; font-size: 30px; font-weight: 700; color:#FFFFFF; }

#sub.sns .g_list ul li a .txt p{ margin-top: 10px; }
#sub_pop.video_pop .box{ overflow-y: visible; }


/* news */
#sub.board .n_list{ width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
#sub.board .n_list ul{ display: flex; flex-flow: column; gap: 10px; }
#sub.board .n_list ul li a{ height: 120px; display: flex; align-items: center; border-radius: 10px; border: 3px solid #E6E0D3; transition: background .4s, border .4s; padding-right: 60px; }
#sub.board .n_list ul li a:hover{ background-color: #C10808; border-color: #C10808; }
#sub.board .n_list ul li a .num{ width: 160px; display: flex; align-items: center; justify-content: center; }
#sub.board .n_list ul li a .num span{ font-size: 50px; font-weight: 900; color: #370D00; transition: color .4s; }
#sub.board .n_list ul li a .tit{ display: flex; align-items: center; gap: 24px; width: calc(100% - 360px);}
#sub.board .n_list ul li a .tit .cate{ display: flex; align-items: center; width: 86px; text-align: center; justify-content: center; border-radius: 6px; background-color: #370D00; font-size: 18px; font-weight: 600; color:#FFFFFF; height: 32px; transition: background .4s; }
#sub.board .n_list ul li a .tit strong{ font-size: 24px; font-weight: 800; color:#370D00; transition: color .4s; }
#sub.board .n_list ul li a .info{ display: flex; gap: 30px; align-items: center; width: 230px; }
#sub.board .n_list ul li a .info .line{ width: 1px; height: 14px; background-color: #D9D3C4; display: block; transition: background .4s; }
#sub.board .n_list ul li a .info p{ font-size: 18px; color:#370D00; transition: color .4s; white-space: nowrap }

#sub.board .n_list ul li a:hover .tit .cate{background-color: #FF2929; }
#sub.board .n_list ul li a:hover .tit strong{ color: #fff; }
#sub.board .n_list ul li a:hover .num span{ color: #fff; }
#sub.board .n_list ul li a:hover .info .line{ background-color: #FF2929; }
#sub.board .n_list ul li a:hover .info p{ color: #fff; }




/* faq */
#sub.faq .f_list ul{ display: flex; flex-flow: column; gap: 10px; }
#sub.faq .f_list ul li a { display: block; border-radius: 10px; border: 3px solid #E6E0D3; padding: 0 60px; transition: background .4s, border .4s; }
#sub.faq .f_list ul li a .qt{ display: flex; align-items: center; height: 130px; gap: 20px; position: relative; border-bottom: 1px solid rgba(255,255,255,0); transition: border .4s; }
#sub.faq .f_list ul li a .en span{ display: block; font-size: 50px; font-weight: 800; color:#370D00; }
#sub.faq .f_list ul li a .qt .tit strong{ color:#370D00; font-size: 26px; font-weight: 800;  }
#sub.faq .f_list ul li a .qt .arrow{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); }
#sub.faq .f_list ul li a .an{ display: none; }
#sub.faq .f_list ul li a .an .wrap{ display: flex; gap: 20px; padding-top: 60px; padding-bottom: 60px;width: 100%}
#sub.faq .f_list ul li a .an .en span{ color: #FF5858; }
#sub.faq .f_list ul li a .an .a_info{ margin-top: 10px; width: 100%}
#sub.faq .f_list ul li a .an .a_info p{ color: #fff; font-size: 20px; line-height: 1.5em;  }
#sub.faq .f_list ul li.on a{ background-color: #C10808; border-color: #C10808; }
#sub.faq .f_list ul li.on a .qt{ border-color: #FF2929 }
#sub.faq .f_list ul li.on a .qt .en span{ color: #fff; }
#sub.faq .f_list ul li.on a .qt .tit strong{ color: #fff; }
#sub.faq .f_list ul li.on a .qt .arrow svg path{ fill :#fff; }
#sub.faq .f_list ul li.on a .qt .arrow svg{ transform: rotate(180deg); }




/* 문의하기 */
#sub.fm .sub_con{ margin-top: -200px; }
#sub.fm .go_list{ display: flex; background-color: #F1ECE1; border-radius: 10px; position: relative; z-index: 1; }
#sub.fm .go_list .nt{ width: 60%; display: flex; align-items: center; padding: 30px; gap: 30px; border-radius: 10px; background-color: #C10808; }
#sub.fm .go_list .nt svg{ display: block; }
#sub.fm .go_list .nt strong{  font-size: 22px; line-height: 1.5em; color:#FFFFFF; font-weight: 600; }
#sub.fm .go_list .v_btn{ display: flex; align-items: center; justify-content: center; width:40%; }
#sub.fm .go_list .v_btn a{ display: flex; width: 210px; height: 70px; background-color: #370D00; border-radius: 10px; font-size: 18px; font-weight: 700; color:#FFFFFF; align-items: center; justify-content: center; transition: background .3s; }
#sub.fm .go_list .v_btn a:hover{ background-color: #531B0A; }
#sub.fm .priv_inp{display: flex;align-items: center;justify-content: center;gap: 0 16px;margin-top: 30px; }
#sub.fm .priv_inp input{position: relative;width:  40px;height: 40px;display: block;}
#sub.fm .priv_inp input:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(/img/sub/chk.jpg);background-size: 100% 100%}
#sub.fm .priv_inp input:checked:after{background: url(/img/sub/chk_on.jpg);background-size: 100% 100%}
#sub.fm .priv_inp p{font-size: 20px; font-weight: 700; color: #370D00;}
#sub.fm .person{ margin-top: 100px; }
#sub.fm .person .per_p .per_box{ height: 200px; border-radius: 10px; background-color: #FFFFFF; padding: 40px; overflow-y: scroll; font-size: 18px; line-height: 1.5em; color:#370D00; display: flex; flex-flow: column; gap: 20px; }
#sub.fm .person .per_p .per_box h1{ font-size: 24px; }
#sub.fm .person .per_p .per_box h2{ font-size: 18px; }
#sub.fm .person .per_p .per_box h3{ font-size: 16px; }
#sub.fm .person .per_p .per_box *{ color: #370D00; }
#sub.fm .person .per_p .per_box .p_con{ display: flex; gap: 12px; flex-flow: column; }
#sub.fm .person .per_p .per_box ul{ display: flex; flex-flow: column; gap: 8px; }
#sub.fm .person .per_p .per_box ul li{ font-size: 14px; line-height: 1.5em; }
#sub.fm .person .per_p .per_box table{ width: 100%; border-top: 2px solid #370d00; }
#sub.fm .person .per_p .per_box table th{ height: 40px; border-bottom: 1px solid #DED7CA; vertical-align: middle; text-align: center; font-size: 14px; }
#sub.fm .person .per_p .per_box table td{ border-bottom: 1px solid #DED7CA; vertical-align: middle; text-align: center; padding: 8px; font-size: 14px; }



#sub.fm .box{ margin-top: 60px; border-radius: 10px; background-color: #FFFFFF; padding: 60px; display:flex; flex-flow: column; gap: 40px; }
#sub.fm .box .f_top{ display: flex; flex-flow: wrap; gap: 40px 120px; position: relative; }
#sub.fm .box .f_top:after{ content:""; display: block; width: 1px; height: 100%; background-color: #D9D3C4; position: absolute; left: 50%; top: 0; }
#sub.fm .box .f_top > div{ width: calc(50% - 60px); }
#sub.fm .box .f_box{ display:flex; flex-flow: column; gap: 10px; }
#sub.fm .box .f_box > label{ font-size: 20px; font-weight: 700; color:#370D00; }
#sub.fm .box .f_box > label > span{ color: #C10808; }
#sub.fm .box .f_box .fm_input{ height: 70px; padding-left: 30px; border-radius: 10px; border: 2px solid #E6E0D3; font-size: 18px; color:#78645E; transition: border .3s; }
#sub.fm .box .f_box .fm_input:focus{ border-color: #C10808; }
#sub.fm .box .f_box .wrap{ display: flex; gap: 10px; }
#sub.fm .box .f_box .wrap .fm_input{ width: calc(100% - 130px); }
#sub.fm .box .f_box .fm_btn{ width: 120px; height: 70px; border-radius: 10px; font-size: 18px; font-weight: 700; color:#FFFFFF;  background-color: #370D00; transition: background .3s; }
#sub.fm .box .f_box .fm_btn.pc{display: block}
#sub.fm .box .f_box .fm_btn.mo{display: none}
#sub.fm .box .f_box .fm_btn:hover{ background-color: #531B0A; }
#sub.fm .box .f_box .fm_select{ height: 70px; padding-left: 30px; border-radius: 10px; border: 2px solid #E6E0D3; font-size: 18px; color:#78645E; transition: border .3s;
-webkit-appearance: none;  /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none;  /* 화살표 없애기 */
    background : url('/img/sub/select_arrow2.png') right 30px center no-repeat;
     background-color: transparent;
}
#sub.fm .box .f_box .fm_select:focus{ border-color: #c10808; }

#sub.fm .box .f_box .fm_text{ height: 200px; padding: 30px; border-radius: 10px; border: 2px solid #E6E0D3; font-size: 18px; line-height: 1.5em; color:#78645E; transition: border .3s; }
#sub.fm .box .f_box .fm_text:focus{ border-color: #c10808; }

#sub.fm .box .files{ margin: 20px 0; }
#sub.fm .box .files > strong{ font-size: 18px; line-height: 1.5em; color:#78645E; margin-bottom: 20px; display: block; font-weight: 400; }


#sub.fm .box .files .file{position: relative; display:flex; gap: 10px; }
#sub.fm .box .files .file input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0}
#sub.fm .box .files .file > *{display: inline-block;vertical-align: middle}
#sub.fm .box .files .file label{height: 70px; text-align: center;font-size: 18px;color: #FFFFFF;width: 140px; font-weight: 700; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #370D00; cursor: pointer; transition: background .3s; position: relative; z-index: 1; }
#sub.fm .box .files .file p{ height: 70px; width: calc(100% - 150px); font-size: 18px;color: #78645E; padding-left: 30px; border: 2px solid #E6E0D3; border-radius: 10px; display: flex; align-items: center; }
#sub.fm .box .files .file label:hover{ background-color: #531b0a; }

#sub.fm .box .files ul{ display: flex; flex-flow: column; gap: 10px; }
#sub.fm .box .files ul li{ position: relative; display: flex; flex-flow: column; gap: 10px; }
#sub.fm .box .files ul li:after{ content:""; display: block; width: 100%; height: 1px; background-color: #D9D3C4;
}
#sub.fm .box .files ul li:last-child:after{ display: none; }
#sub.fm .box .f_box2 > ul{ display: flex; gap: 10px; }
#sub.fm .box .f_box2 > ul > li{  }
#sub.fm .box .priv_inp{ justify-content: flex-start; margin-top: 0; width: 285px; height: 70px; padding: 0 15px; border-radius: 10px; border: 2px solid #E6E0D3;  gap: 30px; }
#sub.fm .box .f_box2 > ul > li{ }
#sub.fm .box .f_box2 > ul > li label{ font-size: 20px; font-weight: 500; color:#370D00; }



/* 문의내역 */
#sub.m_inquiry .n_list ul li a .info{ width: auto; }
#sub.m_inquiry .n_list ul li a .tit{ width :calc(100% - 90px); }
#sub.m_inquiry .n_title{ display:flex; padding-bottom: 20px; border-bottom: 3px solid #370D00; margin-bottom: 20px; }
#sub.m_inquiry .n_title strong{ display: block; font-size: 20px; font-weight: 800; color:#370D00; text-align: center; }
#sub.m_inquiry .n_title strong:nth-child(1), #sub.m_inquiry .n_title strong:nth-child(3){ width: 160px; }
#sub.m_inquiry .n_title strong:nth-child(2){ width: calc(100% - 320px); }

#sub.m_inquiry .v_cons{ display: flex; flex-flow: wrap; border-top: 3px solid #370D00; }
#sub.m_inquiry .v_cons > dl{ width: 50%; height: 90px; border-bottom: 1px solid #D9D3C4; border-right: 1px solid #D9D3C4; display: flex; align-items: center; padding: 0 40px; }
#sub.m_inquiry .v_cons > dl:nth-child(2n+0){ border-right: none; }
#sub.m_inquiry .v_cons > dl dt{ width: 120px; font-size: 20px; font-weight: 800; color: #370D00; }
#sub.m_inquiry .v_cons > dl dd{ font-size: 20px; font-weight: 400; color:#370D00; width: calc(100% - 120px); }
#sub.m_inquiry .v_cons .dl2{ width: 100%; border-right: none; }
#sub.m_inquiry .v_cons .dl3{ min-height: 300px; align-items: flex-start; padding: 40px; height: auto}

#sub.m_inquiry .v_an{ margin-top: 20px; }
#sub.m_inquiry .v_an:before{ content:""; display: block; width: 80px; height: 20px; background: url('/img/sub/v_an.png') center center no-repeat; margin-left: 40px; }
#sub.m_inquiry .v_an dl{ border-radius: 10px; background-color: #EEE9DF; padding: 40px; min-height: 200px; display: flex; }
#sub.m_inquiry .v_an dl dt{ font-size: 20px; font-weight: 800; color:#370D00; width: 120px; line-height: 1.5em; }
#sub.m_inquiry .v_an dl dd{ font-size: 20px; line-height: 1.5em; color:#370D00; width: calc(100% - 120px);}


#sub.f_inquiry .person{ margin-top: 0; }


#sub.fm .box .f_box .wrap ul{ display: flex; gap: 10px; }
#sub.fm .box .f_box .wrap li{ width: 50%; }
#sub.fm .box .f_box .wrap li label{ font-size: 20px; font-weight: 500; color:#370D00; }


/* 브랜드 */
#sub.brand .fix_img{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; clip-path: inset(300px calc(50% - 660px) calc(50vh - 278px)  calc(50% - 660px) round 278px); transition: clip-path 1.2s; }
#sub.brand .fix_img img{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.1); transition: transform 1.2s; }

#sub.brand .fix_img.on{ clip-path: inset(0px); }
#sub.brand .fix_img.on img{ transform: translate(-50%,-50%) scale(1); }

#sub.brand .sub_visual{ height: 1060px; width: 100%; position: relative; }
#sub.brand .sub_visual:after{ content:""; display: block; width: 500px; height: 500px; border-radius: 500px; border: 4px solid #FFFFFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; }
#sub.brand .sub_visual:after{ width: calc(100% - 80px); height: calc(100% - 280px); border-radius: 20px; opacity: 1; }
#sub.brand .sub_visual .wrap{ display: flex; flex-flow: column; align-items: center; justify-content: center; height: 100%; gap: 40px; }
#sub.brand .sub_visual .txt{ overflow: hidden; }
#sub.brand .sub_visual .txt svg{ transform: translateY(110%); transition: transform 1.2s; }
#sub.brand .sub_visual.on .txt svg{ transform: translateY(0); }

#sub.brand .sub_visual.on .txt .txt2{ transition-delay: .2s; }
#sub.brand .sub_visual.on .txt .txt3{ transition-delay: .4s; }
#sub.brand .sub_visual.on .txt .txt4{ transition-delay: .6s; }

#sub.brand .sub_visual .txt svg #line{ transform: translate(0,0); transition: transform .5s; }
#sub.brand .sub_visual.on2 .txt svg #line{ transform: translate(0,10px); }

#sub.brand .sub_visual .txt2 svg #line{ transform: translate(0,-10px); }
#sub.brand .sub_visual.on2 .txt2 svg #line{ transform: translate(0,0); }
#sub.brand .sub_visual .scroll_down{ position: absolute; left: 50%; bottom: 170px; transform: translate(-50%,0); display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 6px; }
#sub.brand .sub_visual .scroll_down strong{ font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.05em; }
#sub.brand .sub_visual .scroll_down svg{ animation: arrows3 1s ease-in-out infinite; }


#sub.brand .main_con03{ position: relative; overflow: hidden; width: 100%; height: 100vh; }
#sub.brand .main_con03 .step02{background: #C10808;position: absolute;width: 100%;height: 100vh;top: 0;left: 0}
#sub.brand .main_con03 .step02 .bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: screen}
#sub.brand .main_con03 .step02 .img_wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#sub.brand .main_con03 .step02 .img_wrap .after_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#sub.brand .main_con03 .step02 .img_wrap .after_img div{transform: scale(0.53) rotate(180deg);}
#sub.brand .main_con03 .step02 .img_wrap .after_img div img{opacity: 0;}
#sub.brand .main_con03 .step02 .txt_wrap{position: absolute;bottom: 0;left: 0;padding: 40px;width: 100%;display: flex;justify-content: space-between;align-items: flex-end;}
#sub.brand .main_con03 .step02 .txt_wrap > div >strong{font-size: 120px;color: #FFFFFF;font-weight: 900;letter-spacing: -0.7px;line-height: 120px;display: block;}
#sub.brand .main_con03 .step02 .txt_wrap .more_btn a .btn_w{background-color: #E50A0A;}
#sub.brand .main_con03 .step02 .txt_wrap .more_btn a .btn_w:before{background-color: #fff;}
#sub.brand .main_con03 .step02 .txt_wrap .more_btn a .btn_w div{background-color: #C10808;}
#sub.brand .main_con03 .step02 .txt_wrap .more_btn a .btn_w div strong{color: #fff}
#sub.brand .main_con03 .step02 .txt_wrap .more_btn a .btn_w div path{fill: #fff;}

#sub.brand .main_con03 .cover{mix-blend-mode: screen;position: absolute;top: 0;left: 0;z-index: 3;pointer-events: none;}
#sub.brand .main_con03 .cover2{background: #fff;position: absolute;top: 0;left: 0;background: #fff; z-#sub.brand: 3;pointer-events: none;width: 100%;height: 100%}
#sub.brand .main_con03 .step02 .point{position: absolute;left: 50%;margin-left: 280px;top: 50%;transform: translateY(-59%); opacity: 0; }
#sub.brand .main_con03 .step02 .point .point_list ul{display: flex;flex-direction: column;gap: 200px;}
#sub.brand .main_con03 .step02 .point .point_list ul li .title{display: flex;align-items: flex-end;gap:0 25px;padding-bottom: 20px;margin-bottom: 20px;position: relative}
#sub.brand .main_con03 .step02 .point .point_list ul li .title .line{position: absolute;right: 0}
#sub.brand .main_con03 .step02 .point .point_list ul li:nth-child(1) .title .line{bottom: 0;transform: translateY(100%)} 
#sub.brand .main_con03 .step02 .point .point_list ul li:nth-child(2) .title .line{bottom: 0} 
#sub.brand .main_con03 .step02 .point .point_list ul li .title strong{font-size: 40px;color: #FFFFFF;font-weight: 900;letter-spacing: -1px}
#sub.brand .main_con03 .step02 .point .point_list ul li .title strong span{font-weight: inherit;font-size: 50px;}
#sub.brand .main_con03 .step02 .point .point_list ul li p{font-size: 22px;color: #FFFFFF;font-weight: 500;line-height: 30px;}

#sub.brand .main_con03 .con_w{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#sub.brand .con02{ padding-top: 160px; padding-bottom: 200px; background-color: #C10808; z-index: 1; position: relative; margin-top: -1px; }

#sub.brand .con02 .inner{ display: flex; flex-flow: column; align-items: flex-end; gap: 40px; }
#sub.brand .con02 .tit{ text-align: right;  }
#sub.brand .con02 .tit strong{ font-size: 60px; font-weight: 700; color:#FFFFFF; }
#sub.brand .con02 .line{ width: 100%; height: 2px; background-color: #fff;  }
#sub.brand .con02 .info{ display: flex; gap: 160px; width: 100%; position: relative; }
#sub.brand .con02 .info:after{ content:""; display: block; width: 1px; height: 100px; background-color: #FFFFFF; position: absolute; left: 50%; top: 50%; transform: translate(0,-50%); }
#sub.brand .con02 .info dl{ width: 50%; display: flex; align-items: center; gap: 40px; }
#sub.brand .con02 .info dl dt{ display: flex; align-items: center; font-size: 120px; font-weight: 900; color:#FFFFFF; letter-spacing: -0.05em; gap: 20px; }
#sub.brand .con02 .info dl dt:after{ content:""; display: block; width: 7px; height: 14px; background: url('/img/sub/brand_arrow.png') center center no-repeat; }
#sub.brand .con02 .info dl dd{ font-size: 24px; line-height: 1.5em; color:#FFFFFF; font-weight: 500; }

#sub.brand .con03{ padding: 140px 0; background-color: #AC0808; position: relative; }
#sub.brand .con03 .bg{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); }
#sub.brand .con03 .bg .wrap{ display: flex; animation: bgs 50s linear infinite; }
#sub.brand .con03 .bg .wrap div img{ display: block; }
#sub.brand .con03 .inner{ display: flex; align-items: center; gap: 180px; z-index: 1; position: relative; }

@keyframes bgs {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}


#sub.brand .con03 .txt{  }

#sub.brand .con03 .tit{ display: flex; flex-flow: column; }
#sub.brand .con03 .tit .wrap{ overflow: hidden; }
#sub.brand .con03 .tit .wrap strong{ display: block; font-size: 120px; line-height: 1em; color: #fff; letter-spacing: -0.05em; font-weight: 900; }

#sub.brand .con03 .txt .control{ display: flex; align-items: center; gap: 20px; margin-top: 20px; }
#sub.brand .con03 .txt .control .swiper-button-prev:after, #sub.brand .con03 .txt .control .swiper-button-next:after{ display: none; }
#sub.brand .con03 .txt .control .swiper-button-prev{ position: static; margin: 0; width: 80px; height: 80px; transition: transform .5s; }
#sub.brand .con03 .txt .control .swiper-button-next{ position: static; margin: 0; width: 80px; height: 80px; transition: transform .5s;  }

#sub.brand .con03 .txt .control .swiper-button-prev svg path, #sub.brand .con03 .txt .control .swiper-button-next svg path{ transition: fill .3s; }

#sub.brand .con03 .txt .control .swiper-pagination{ position: static; width: auto; display: flex; gap: 6px; }
#sub.brand .con03 .txt .control .swiper-pagination .swiper-pagination-bullet{ margin: 0; width: 6px; height: 6px; background-color: #FF1010; opacity: 1; border-radius: 50px; transition: width .3s, background .3s; }
#sub.brand .con03 .txt .control .swiper-pagination .swiper-pagination-bullet-active{ width: 60px; background-color: #FFFFFF; }

#sub.brand .con03 .txt .control .swiper-button-prev:hover{ transform: translateX(-10px); }
#sub.brand .con03 .txt .control .swiper-button-prev:hover svg path{ fill: #fff; }

#sub.brand .con03 .txt .control .swiper-button-next:hover{ transform: translateX(10px); }
#sub.brand .con03 .txt .control .swiper-button-next:hover svg path{ fill: #fff; }

#sub.brand .con03 .taste{ width: 700px; }
#sub.brand .con03 .taste .swiper-slide{ position: relative; opacity: 0; transition: opacity .3s; }
#sub.brand .con03 .taste .swiper-slide-active, #sub.brand .con03 .taste .swiper-slide-next{ opacity: 1; }

#sub.brand .con03 .taste .img img{ display: block; width: 100%; border-radius: 20px; border: 4px solid #FFFFFF; }
#sub.brand .con03 .taste .txt{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 60px; padding-top: 0; display: flex; flex-flow: column; gap: 20px; }
#sub.brand .con03 .taste .txt span{ width: 80px; height: 80px;  border-radius: 10px; display: flex; align-items: center; justify-content: center;font-size: 30px; font-weight: 900; color:#FFFFFF; letter-spacing: -0.05em; border: 2px solid #fff;
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
#sub.brand .con03 .taste .txt strong{ font-size: 40px; line-height: 50px; color: #FFFFFF; font-weight: 700; }
#sub.brand .con03 .taste .txt p{ font-size: 22px; line-height: 30px; color:#FFFFFF; font-weight: 500; }

#sub.brand .con04{ background-color: #C10808; padding: 200px 0; }
#sub.brand .con04 ul{ display: flex; gap: 40px; }
#sub.brand .con04 ul li{ width: 33.3333333%; display: flex; flex-flow: column; align-items: center; gap: 34px; }
#sub.brand .con04 ul li .img img{ display: block; width: 100%; border-radius: 20px; border: 4px solid #FFFFFF; }
#sub.brand .con04 ul li .txt{ position: relative; padding: 40px; border-radius: 10px; background-color: #AC0808; width: calc(100% - 80px); display: flex; flex-flow: column; gap: 20px; }
#sub.brand .con04 ul li .txt .dot{ position: absolute; left: 20px; top: -18px; }
#sub.brand .con04 ul li .txt strong{ font-size: 28px; line-height: 38px; color:#FFFFFF; font-weight: 700; }
#sub.brand .con04 ul li .txt p{ font-size: 20px; line-height: 1.5em; color: #fff; font-weight: 300; }

#sub.brand .con05{ background-color: #F8F5EE; padding: 170px 0; }
#sub.brand .con05{ position: relative; }
#sub.brand .con05 .st_wrap{ display: flex; justify-content: center; margin-bottom: 120px; }
#sub.brand .con05 .con_w{ display:flex; flex-flow: column; align-items: center; gap: 120px; }
#sub.brand .con05 .con_w .h_box{ display: flex; flex-flow: column; align-items: center; gap: 30px; }
#sub.brand .con05 .con_w .h_box .y_box{ display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 10px; background-color: #C10808; width: 290px; position: relative; }
#sub.brand .con05 .con_w .h_box .y_box:after{ content:""; display: block; width: 60px; height: 10px; background: url('/img/sub/brand_arrow2.png') center center no-repeat; position: absolute; left: 50%; transform: translate(-50%,100%); bottom: 0; }
#sub.brand .con05 .con_w .h_box .y_box strong{ font-size: 60px; font-weight: 900; color: #fff; letter-spacing: -0.05em; }
#sub.brand .con05 .con_w .h_box .y_list{ display:flex; flex-flow: column; gap: 10px; width: 1000px; }
#sub.brand .con05 .con_w .h_box .y_list .wrap{ width: 100%; position: relative; }
#sub.brand .con05 .con_w .h_box .y_list .wrap dl{ display: flex; width: 100%; border-radius: 20px; border: 3px solid #E6E0D3; padding: 40px; padding-left: 0; }
#sub.brand .con05 .con_w .h_box .y_list .wrap dl dt{ width: 160px; font-size: 30px; font-weight: 700; color: #370D00; letter-spacing: -0.05em; text-align: center; }
#sub.brand .con05 .con_w .h_box .y_list .wrap dl dd{ width: calc(100% - 160px); padding-left: 40px; border-left: 1px solid #D5CEBE; }
#sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul{ display: flex; flex-flow: column; gap: 12px; }
#sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul li{ position: relative; padding-left: 12px; font-size: 22px; line-height: 1.5em; color:#370D00; font-weight: 600}
#sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #370d00; position: absolute; left: 0; top: 14px; }

#sub.brand .con05 .con_w .h_box .y_list .wrap .pz_img{ position: absolute; }
#sub.brand .con05 .con_w .h_box .y_list .wrap .pz_img.right{ right: -40px; top: 50%; transform: translate(100%,-50%); }
#sub.brand .con05 .con_w .h_box .y_list .wrap .pz_img.left{ left: -40px; top: 50%; transform: translate(-100%,-50%); }

#sub.brand .con05 .his_nav{ position: absolute; left: 80px; top: 0; height: 100vh; display: flex; align-items: center; }
#sub.brand .con05 .his_nav ul:after{ content:""; display: block; width: 4px; height: 100%; border-radius: 10px; background-color: #E6E0D3; position: absolute; left: 0; top: 0; }

#sub.brand .con05 .his_nav ul{ display: flex; flex-flow: column; gap: 16px; position: relative;  padding-left: 15px; margin-top: 80px; }
#sub.brand .con05 .his_nav ul li a{ font-size: 22px; font-weight: 900; color:#370D00; letter-spacing: -0.05em; transition: padding .4s; position: relative; }
#sub.brand .con05 .his_nav ul li.on a{ color: #C10808; padding-left: 15px; }
#sub.brand .con05 .his_nav ul li a:after{ content:""; display: block; width: 7px; height: 14px; background: url('/img/sub/his_arrow.png') center center no-repeat; position: absolute; left: 0; top: 50%; transform: translate(-15px,-50%); transition: transform .4s, opacity .4s; opacity: 0; }
#sub.brand .con05 .his_nav ul li.on a:after{ transform: translate(0px,-50%); opacity: 1; }


/* 앱다운로드 */

#sub.app .sub_visual{ width: 100%; height: 100vh; position: relative; background-color: #C10808; padding-top: 100px; overflow: hidden;  }
#sub.app .sub_visual .inner{ height: 100%; display: flex; align-items: center; flex-flow: row-reverse; }
#sub.app .sub_visual .txt { width: 50%; position: relative; z-index: 2; }
#sub.app .sub_visual .txt > strong{ font-size: 60px; font-weight: 700; color:#FFFFFF; line-height: 80px; }
#sub.app .sub_visual .txt .sns_go{ margin-top: 80px; display:flex; gap: 20px; }
#sub.app .sub_visual .txt .sns_go a{ display: flex; align-items: center; padding: 10px 20px; gap: 10px; width: 320px;border-radius: 10px; border: 2px solid #fff; position: relative;}
#sub.app .sub_visual .txt .sns_go a strong{ font-size: 22px; font-weight: 600; color: #000000; position: relative; z-index: 1; transition: color .4s; }
#sub.app .sub_visual .txt .sns_go a:after{ content:""; display: block; width: 100%; height: calc(100% + 2px); background-color: #fff; position: absolute; left: 0; top: 0; border-radius: 6px; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path .4s; }
#sub.app .sub_visual .img{ width: 50%; position: relative; z-index: 1; height: 100%; }
#sub.app .sub_visual .img:after{ content:""; width: 150%; height: 100%; position: absolute; right: 0; top: 1px; display: block; background: rgba(193, 8, 8, 0.1);
background: linear-gradient(180deg, rgba(193, 8, 8, 0) 0%, rgba(193, 8, 8, 1) 100%); }
#sub.app .sub_visual .img img{ position: relative; z-index: 1; }
#sub.app .sub_visual .txt .sns_go a svg{ position: relative; z-index: 1; }
#sub.app .sub_visual .txt .sns_go a svg path{ transition: fill .4s; }
#sub.app .sub_visual .txt .sns_go a:hover:after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

#sub.app .sub_visual .txt .sns_go a.on strong{ color: #fff; }
#sub.app .sub_visual .txt .sns_go a.on svg path{ fill: #fff; }

#sub.app .sub_visual .txt > strong{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; display: block; }
#sub.app .sub_visual .txt .sns_go{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; }

#sub.app .sub_visual.on .txt > strong{ transform: translateY(0); opacity: 1; }
#sub.app .sub_visual.on .sns_go{ transform: translateY(0); opacity: 1; }

#sub.app .sub_visual .img img{ animation: dons 3s ease-in-out infinite; }


@keyframes dons{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0);
    }
}


#sub.app .sub_visual .bg{ position: absolute; }
#sub.app .sub_visual .bg1{ transform: rotate(32deg); left: 1%; top: 50%; z-index: 1;  }
#sub.app .sub_visual .bg1 ul{ animation: loops2 40s linear infinite; }
#sub.app .sub_visual .bg2 ul{ transform: translateX(0); animation: loops3 40s linear infinite; }
#sub.app .sub_visual .bg2{ left: -54%; top: 50%; transform: rotate(-45deg);  }
#sub.app .sub_visual .bg img{ display:block; }
#sub.app .sub_visual .bg ul{ display:flex; }

#sub.app .sub_con{ background-color: #C10808; padding-top: 40px; padding-bottom: 40px; margin-top: -1px; position: relative; z-index: 1; display: flex; flex-flow: column; gap: 40px; }
#sub.app .sub_con .wrap{ padding: 0 40px; }
#sub.app .sub_con .box{ border-radius: 20px; background-color: #F8F5EE; padding: 40px; display: flex; flex-flow: wrap; gap: 80px; }
#sub.app .sub_con .con01 .box > dl{ display: flex; width: calc(50% - 40px); align-items: center; gap: 30px; }
#sub.app .sub_con .con01 .box > dl > dt{ width: 244px; height: 244px; border-radius: 20px; border: 4px solid #F1EBDF; position: relative ;display: flex; align-items: center; justify-content: center; }
#sub.app .sub_con .con01 .box > dl > dt:after{ content:""; display: block; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 10px; box-shadow: 0 0 40px rgba(55,13,0,0.1); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#sub.app .sub_con .con01 .box > dl > dd{ padding-left: 30px; position: relative; }
#sub.app .sub_con .con01 .box > dl > dd > p{ font-size: 20px; font-weight: 700; color:#D2C0BA; margin-bottom: 20px; }
#sub.app .sub_con .con01 .box > dl > dd > strong{ font-size: 28px; line-height: 40px; font-weight: 800; color:#370D00; }
#sub.app .sub_con .con01 .box > dl > dd:after{ content:""; display: block; width: 1px; height: 40px; background-color: #DED7CA; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); }

#sub.app .sub_con .con02 .box{ flex-flow: row-reverse; align-items: center; justify-content: center; padding: 160px 20px; } 
#sub.app .sub_con .con02 .boxs{ position: relative; }
#sub.app .sub_con .con02 .box .a_slide{ width: 344px; overflow: hidden; }
#sub.app .sub_con .con02 .box .txt{ width: 712px; }
#sub.app .sub_con .con02 .box .txt .st_wrap{ margin-bottom: 80px; }
#sub.app .sub_con .con02 .box .txt .swiper-pagination{ position: static; display: flex; gap: 30px; margin-bottom: 20px; }

#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet{ width: auto; height: auto; border-radius: 0; background-color: transparent !important; opacity: 1; }
#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet span{ font-size: 30px; font-weight: 800; letter-spacing: -0.05em; color:#DBD3C1; display: flex; align-items: center; gap: 10px; transition: color .3s; }

#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet-active span{ color: #C10808;  }
#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet span:after{ content:""; display: block; width: 7px; height: 14px; background: url('/img/sub/use_arrow01.png') center center no-repeat; transition: background .3s; }
#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet-active span:after{ background-image: url('/img/sub/use_arrow02.png'); }
#sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet:last-child span:after{ display: none; }
#sub.app .sub_con .con02 .box .txt .steps{ width: 612px; overflow: hidden; }
#sub.app .sub_con .con02 .box .txt .steps dl{ height: 200px; border-radius: 10px; border: 3px solid #370D00; width: calc(100% - 12px); position: relative; display: flex; padding: 40px; align-items: center; gap: 20px; }
#sub.app .sub_con .con02 .box .txt .steps dl:after{ content:""; display: block; width: 12px; height: 78px; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); background: url('/img/sub/use_arrow.png') center center no-repeat; }
#sub.app .sub_con .con02 .box .txt .steps dl dt{ width: 100px; height: 100px; border-radius: 15px; border: 2px solid #F1EBDF; padding: 4px; }
#sub.app .sub_con .con02 .box .txt .steps dl dt i{ display: block;  }
#sub.app .sub_con .con02 .box .txt .steps dl dt i img{ display: block; filter: drop-shadow(0 0 20px rgba(55,13,0,0.25)); }
#sub.app .sub_con .con02 .box .txt .steps dl dd{ font-size: 36px; font-weight: 800; color: #370D00; }

#sub.app .sub_con .con02 .box .swiper-button-next{ width: 80px; height: 80px; top: var(--swiper-navigation-top-offset,54%); transition: transform .4s; }
#sub.app .sub_con .con02 .box .swiper-button-next:after{ display: none; }

#sub.app .sub_con .con02 .box .swiper-button-next svg path{ transition: fill .4s; }
#sub.app .sub_con .con02 .box .swiper-button-next:hover svg path{ fill: #C10808; }
#sub.app .sub_con .con02 .box .swiper-button-next:hover { transform: translateX(10px); }

#sub.fran .sub_visual{ background-color: #C10808; height: 100vh; width: 100%; }
#sub.fran .sub_visual .inner{ display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; }
#sub.fran .sub_visual .tit{ text-align: center; position: relative; z-index: 1; }
#sub.fran .sub_visual .tit strong{ font-size: 80px; font-weight: 700; color: #fff; line-height: 1.2em; }
#sub.fran .sub_visual .txt{ display: flex; align-items: center; flex-flow: column; }
#sub.fran .sub_visual .tit .hide span{ position: relative; display: inline-block; }
#sub.fran .sub_visual .tit .hide span:before{ content:""; display: block; width: calc(100% + 20px); height: 100%; border-radius: 10px; border: 3px solid #fff; background-color: #DE0909; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; }


#sub.fran .sub_visual .tit .hide{ overflow: hidden; }
#sub.fran .sub_visual .tit strong{ transform: translateY(110%); display: block; transition: transform 1s; line-height: 1.2em; }
#sub.fran .sub_visual .tit .hide span:before{ box-sizing: border-box; }
#sub.fran .sub_visual .tit .hide:nth-child(2) strong{ transition-delay: .3s; }
#sub.fran .sub_visual.on .tit strong{ transform: translateY(0); }

#sub.fran .sub_visual .bg{ margin-top: 20px; }
#sub.fran .sub_visual .bg ul{ display: flex; }
#sub.fran .sub_visual .bg ul li img{ display: block; }
#sub.fran .sub_visual .bg ul{ animation: loops 40s linear infinite; }

#sub.fran #smoother-content{background-color: #F8F5EE;  }

#sub.fran .sub_con{ padding-top: 0; margin-top: -300px; }
#sub.fran .con01 .wrap{ width: 1200px; margin: 0 auto; }
#sub.fran .con01 .video{ width: 100%; height: 0; padding-bottom: 56.25%; position: relative; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 40px 80px rgba(55,13,0,0.3); overflow: hidden; }
#sub.fran .con01 .video iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#sub.fran .sub_con .title{ display: flex; align-items: center; flex-flow: column; position: relative; z-index: 1; }
#sub.fran .sub_con .title > strong{ font-size: 60px; font-weight: 800; color: #370D00; }
#sub.fran .sub_con .title > strong .line{ position: relative; display: inline-block; }
#sub.fran .sub_con .title > strong .line:before{ content:""; display: block; width: 0; height: 16px; background-color: #FB3838; position: absolute; left: 0; bottom: 0; z-index: -1; }
#sub.fran .sub_con .title > strong b{ position: relative; display: inline-block; font-weight: 800; }
#sub.fran .sub_con .title > strong b:after{ content:""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #370D00; position: absolute; left: 50%; top: -5px; transform: translate(0,-50%); }

#sub.fran .con02{ padding-top: 160px; padding-bottom: 240px; position: relative;  }
#sub.fran .con02:after{ content:""; display: block; width: 1000px; height: 110%; border-radius: 500px 500px 0 0; position: absolute; left: 50%; bottom: 0; z-index: -1; transform: translate(-50%,0); background-color: #ECE6D8; }
#sub.fran .sub_con .title > strong .line:before{ transition: width 1s; }
#sub.fran .sub_con .on .title > strong .line:before{ width: 100%; }

#sub.fran .con02 .box .left{ transform: translate(-50px, -50%); opacity: 0; transition: transform 1s, opacity 1s; }
#sub.fran .con02 .box .right{ transform: translate(50px, -50%); opacity: 0; transition: transform 1s, opacity 1s; }

#sub.fran .con02.on .box .left{ transform: translate(0, -50%); opacity: 1;  }
#sub.fran .con02.on .box .right{ transform: translate(0, -50%); opacity: 1;  }

#sub.fran .con03 .graph .img img{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .3s; }
#sub.fran .con03.on .graph .img img{ transform: translateY(0); opacity: 1; }


#sub.fran .sub_con .title > strong{ display: block; transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; }
#sub.fran .sub_con .on .title > strong{ transform: translateY(0); opacity: 1;  }

#sub.fran .con03 .title p{ display: block; transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; }
#sub.fran .con03.on .title p{ transform: translateY(0); opacity: 1;  }

#sub.fran .con03 .title strong{ transition-delay: .3s; }

#sub.fran .con02 .box {  position: relative; width: 1500px; margin: 0 auto; margin-top: 140px; }
#sub.fran .con02 .box .img{ position: relative; z-index: 1; }
#sub.fran .con02 .box .img svg{ position: absolute; left: 50%; top: 40px; transform: translate(-50%,-50%); z-index: -1; }
#sub.fran .con02 .box .img img{ display: block; max-width: 100%; margin: 0 auto; }
#sub.fran .con02 .box .txt{ display: flex; flex-flow: column; align-items: flex-start; gap: 120px; }
#sub.fran .con02 .box .left{ position: absolute; left: 0; top: 40%; z-index: 1; }
#sub.fran .con02 .box .right{ position: absolute; right: 0; top: 40%; z-index: 1; align-items: flex-end; }
#sub.fran .con02 .box .txt dl{ position: relative; }
#sub.fran .con02 .box .txt dl:after{ content:""; display: block; width: 404px; height: 14px; background: url('/img/sub/fran_line.png') left top no-repeat; position: absolute; left: 0; bottom: -5px; transform: translate(0,100%); }

#sub.fran .con02 .box .right dl:after{ content:""; display: block; width: 404px; height: 14px; background: url('/img/sub/fran_line2.png') left top no-repeat; position: absolute; right: 0; left: auto; bottom: -5px; transform: translate(0,100%); }

#sub.fran .con02 .box .txt dl dt{ padding: 0 30px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #BE0707; border: 3px solid #370D00; box-shadow: 4px 4px 0px #370D00; font-size: 22px; font-weight: 700; color: #Fff; }
#sub.fran .con02 .box .txt dl dd{ margin-top: 15px; font-size: 30px; line-height: 1.5em; color:#370D00; font-weight: 800; }

#sub.fran .con02 .box .right dl dd{ text-align: right; }
#sub.fran .con03 .title { background: url('/img/sub/title_bg.jpg') center center no-repeat; background-size: cover; padding: 130px 0; }
#sub.fran .con03 .title p{ font-size: 30px; font-weight: 500; color: #fff; margin-bottom: 20px; }
#sub.fran .con03 .title strong{ color: #fff; }
#sub.fran .con03 .title strong span{ display: inline-block; position: relative; }
#sub.fran .con03 .title strong span:after{ content:""; display: block; width: 460px; height: 137px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url('/img/sub/brush.png') center center no-repeat; z-index: -1; mix-blend-mode: overlay; -webkit-mix-blend-mode: overlay; opacity: .1; }

#sub.fran .con03 .graph{ background: url('/img/sub/fran_bg02.jpg') center center no-repeat; background-size: cover; padding: 80px; padding-bottom: 10px; position: relative; margin-top: -1px; }
#sub.fran .con03 .graph .img img{ width: 100%; display: block; }
#sub.fran .con03 .graph .txt{ position: absolute; left: 80px; top: 80px; }
#sub.fran .con03 .graph .txt p{ font-size: 20px; font-weight: 800; color:#FFFFFF; margin-bottom: 17px; }
#sub.fran .con03 .graph .txt strong{ font-size: 50px; font-weight: 800; color:#FFFFFF; line-height: 60px; }
#sub.fran .con03 .graph .txt strong b{ display:inline-block; position: relative; font-weight: 800; }
#sub.fran .con03 .graph .txt strong b:after{ content:""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #FFFFFF; position: absolute; left: 50%; top: 0; transform: translate(-50%,-100%); }

#sub.fran .con02 .tag .tag_in strong{ background-color: #370D00; }

#sub.fran .con04{ padding-top: 80px; padding-bottom: 160px; }
#sub.fran .con04 .inner{ display: flex; flex-flow: column; gap: 20px; }
#sub.fran .con04 .stop{ border-radius: 20px; background-color: #C10808; padding: 100px 0; position: relative; }
#sub.fran .con04 .tag{ margin-top: -50px }
#sub.fran .con04 .title > strong{ font-size: 60px; line-height: 80px; color:#FFFFFF; text-align: center; }
#sub.fran .con04 .stop:after{ content:""; display: block; width: 716px; height: 60px; position: absolute; left: 50%; bottom: 1px; transform: translate(-50%,100%); background: url('/img/sub/fran_arrows.png') center center no-repeat;}

#sub.fran .con04 .p_box{ border-radius: 20px; background-color: #FFFFFF; box-shadow: 0 40px 60px rgba(55,13,0,0.1); padding: 115px 40px; padding-bottom: 40px; }

#sub.fran .con04 .p_box .p_tit{ display: flex; flex-flow: column; align-items: center; text-align: center; margin-bottom: 60px; }
#sub.fran .con04 .p_box .p_tit .st1{ font-size: 120px; font-weight: 900; color:#C10808; letter-spacing: -0.05em; margin-bottom: 20px; display: block; }
#sub.fran .con04 .p_box .p_tit .st2{ font-size: 40px; line-height: 50px; color:#370D00; font-weight: 700}
#sub.fran .con04 .p_box .p_tit .st2 b{ font-size: 60px; color:#C10808; font-weight: 800; }
#sub.fran .con04 .p_box .p_tit > p{ font-size: 20px; line-height: 1.5em; color:#370D00; margin-top: 10px; }
#sub.fran .con04 .p_box .color_box{ width: 750px; border-radius: 10px; background-color: #F8F5EE; margin: 0 auto; margin-top: 30px; padding: 30px 20px; }
#sub.fran .con04 .p_box .color_box p{ font-size: 22px; line-height: 1.5em; color:#370D00; font-weight: 700; text-align: center; }

#sub.fran .con04 .p_box .list{ display: flex; gap: 40px; margin-top: 180px; }
#sub.fran .con04 .p_box .list > div{ width: 33.33333333%; border-radius: 20px; border: 3px solid #370D00; padding: 60px 40px; }
#sub.fran .con04 .p_box .list .img { margin-top: -180px; }
#sub.fran .con04 .p_box .list .img img{ display: block; margin: 0 auto; max-width: 100%; border-radius: 50%; border: 3px solid #370D00; box-shadow: 0 20px 40px rgba(55,13,0,0.25); }
#sub.fran .con04 .p_box .list .txt{ margin-top: 40px; position: relative; z-index: 1; }
#sub.fran .con04 .p_box .list .txt strong:after{ content:""; display: block; width: 60%; height: 1px; background-color:#E6E0D3; margin: 20px 0;  }

#sub.fran .con04 .p_box .list .txt p{ font-size: 22px; line-height: 1.5em; color:#370D00; font-weight: 500; }
#sub.fran .con04 .p_box .list .txt p b{ font-weight: 800; color: #c10808; }
#sub.fran .con04 .p_box .list .txt .icon{ display: flex; position: relative; }
#sub.fran .con04 .p_box .list .txt .icon p{ display: inline-block; position: relative; }
#sub.fran .con04 .p_box .list .txt .icon img{ position: absolute; right: -10px; top: 0; transform: translate(100%,0); }

#sub.fran .st3{ display: block; font-size: 36px; line-height: 50px; color: #370D00; font-weight: 800; }
#sub.fran .st3 span{ display: inline-block; position: relative; color: #fff; }
#sub.fran .st3 span:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #C10808; z-index: -1; }


#sub.fran .prize{ margin-top: 40px; border-radius: 20px; border: 3px solid #370D00; padding: 60px; overflow: hidden; }
#sub.fran .prize .tit{ position: relative; z-index: 1; }
#sub.fran .prize .tit:after{ content:""; display: block; width: 100%; height: 1px; background-color: #E6E0D3; margin: 40px 0; }
#sub.fran .prize .tit strong{ text-align: center; }

#sub.fran .prize .p_slide{ }
#sub.fran .prize .p_slide .swiper-wrapper{ -webkit-transition-timing-function:linear!important;
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; }
#sub.fran .prize .p_slide .swiper-slide{ width: 300px; border-radius: 20px; background-color: #370D00; border: 2px solid #FFA200; min-height: 335px; box-shadow: 0 40px 40px rgba(55,13,0,0.25); }
#sub.fran .prize .p_slide .swiper-slide:nth-child(odd){ margin-top: 60px; }
#sub.fran .prize .p_slide .swiper-slide .img img{ display: block ;width: 100%; }
#sub.fran .prize .p_slide .swiper-slide .txt{ padding-top: 20px; text-align: center; padding-bottom: 30px; }
#sub.fran .prize .p_slide .swiper-slide .txt strong{ font-size: 20px; line-height: 1.5em; color: #fff;font-weight: 400; word-break: keep-all; }
#sub.fran .prize .p_slide .swiper-slide .txt strong b{ font-weight: 800; }

#sub.fran .review{ display: flex; gap: 70px; padding: 0 30px; padding-bottom: 80px;  }
#sub.fran .review > div{ border-radius: 10px; background-color: #F8F6F1; position: relative; width: 50%; padding: 70px; }
#sub.fran .review > div:after{ content:""; display: block ;width: 60px; height: 60px; background: url('/img/sub/review_gf.jpg') center center no-repeat; position: absolute; right: 0; bottom: 0; }
#sub.fran .review > div .type{ display:flex; justify-content: center; margin-top: -120px; }
#sub.fran .review > div .name{ border-radius: 10px; height: 80px; display: flex; align-items: center; background-color: #ECE9E0; }
#sub.fran .review > div .name i{ display: block; margin-left: -25px; margin-right: 13px; }
#sub.fran .review > div .name i img{ display: block; }
#sub.fran .review > div .name strong{ font-size: 24px; font-weight: 800; color:#370D00; }
#sub.fran .review > div dl{ margin-top: 24px;  }
#sub.fran .review > div dl dt{ padding: 0 48px; padding-right: 20px; padding-bottom: 24px; border-bottom: 1px solid #E6E0D3; font-size: 20px; line-height: 1.5em; color:#370D00; font-weight: 700; }
#sub.fran .review > div dl dd{ font-size: 20px; line-height: 1.5em; color:#370D00; padding: 0 48px; padding-right: 20px; padding-top: 24px; position: relative; }
#sub.fran .review > div dl dd:after{ content:""; display: block; width: 51px; height: 38px; background: url('/img/sub/anw.png') center center no-repeat; position: absolute; left: -20px; top: 0; transform: translate(0,-30%); }

#sub.fran .con05 .title > strong{ text-align: center; }
#sub.fran .con05 .title .tag strong{ background-color: #370D00; }

#sub.fran .con05 { padding-bottom: 160px; background-color: #fff; padding-top: 160px; }

#sub.fran .p_table{ margin-top: 80px; position: relative; }
#sub.fran .p_table:after{ content:""; display: block; width: 100%; height: 74px; border-radius: 10px; border: 3px solid #370D00; box-sizing: border-box; position: absolute; left: 0; bottom: 0; }
#sub.fran .p_table table{ width: 100%; }
#sub.fran .p_table table th:nth-child(2){ width: 50%; }
#sub.fran .p_table table th{ background-color: #F8F5EE; height: 70px; vertical-align: middle; text-align: center; border-bottom: 2px solid #370D00; font-size: 22px; font-weight: 800; color:#370D00; }
#sub.fran .p_table table td{ border-bottom: 1px solid #D9D3C4; border-right: 1px solid #D9D3C4; padding: 20px; text-align: center; vertical-align: middle; font-size: 22px; line-height: 1.5em; color:#370D00; }
#sub.fran .p_table table td:last-child{ border-right: none; }
#sub.fran .p_table table td:first-child{ font-weight: 800; }
#sub.fran .p_table table td span{ font-weight: 400; }
#sub.fran .p_table table td b{ font-weight: 800; color: #c10808; }
#sub.fran .p_table table tr:last-child{ background-color: #FCF2F2; }

#sub.fran .benefit{ background-color: #C10808; border-radius: 500px; margin-top: 80px; padding: 50px; height: 460px; }
#sub.fran .benefit ul{ display:flex; height: 100%; position: relative; z-index: 1; }
#sub.fran .benefit ul li{ width: 33.333333333%; display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid #FF2929; position: relative; }
#sub.fran .benefit ul li p{ font-size: 20px; font-weight: 600; color:#FFFFFF; margin-bottom: 20px;  }
#sub.fran .benefit ul li strong{ font-size: 50px; font-weight: 700; color:#FFFFFF; }
#sub.fran .benefit ul li em{ font-size: 30px; font-weight: 700; color: #Fff; }
#sub.fran .benefit ul li:nth-child(2) em{ margin-bottom: 10px; }
#sub.fran .benefit ul li:nth-child(1){ text-align: left; align-items: flex-start; padding-left: 90px; }
#sub.fran .benefit ul li:last-child{ border-right: none; }

#sub.fran .benefit ul li .bg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; }

#sub.fran .info_p{ margin-top: 40px; display: flex; justify-content: center; }
#sub.fran .info_p p{ font-size: 18px; line-height: 1.5em;color:#370D00; }
#sub.fran .con06{ padding-bottom: 200px; padding-top: 160px; }
#sub.fran .con06 .tag strong{ background-color: #370D00; }
#sub.fran .con06 .title{ align-items: flex-start; }
#sub.fran .con06 .tops{ display:flex; align-items: center;justify-content: space-between; }
#sub.fran .con06 .tops .used{ border-radius: 10px; padding: 40px; background-color: #EEE9DD; display: flex; flex-flow: column; gap: 20px; }
#sub.fran .con06 .tops .used .line{ width: 100%; height: 1px; background-color:#D9D3C4;}
#sub.fran .con06 .tops .used dl{ display:flex; gap: 20px; }
#sub.fran .con06 .tops .used dl dt{ width: 150px; font-size: 24px; font-weight: 800; color:#370D00; border-right: 1px solid #D9D3C4; line-height: 1em; }
#sub.fran .con06 .tops .used dl dd{
font-size: 20px; colro:#370D00; line-height: 24px;  }
#sub.fran .step{ margin-top: 105px; display: flex; flex-flow: wrap; gap: 140px 50px; position: relative; z-index: 1; }
#sub.fran .step:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url('/img/sub/step_line.png') center center no-repeat; z-index: -1; }
#sub.fran .step > div{ width: calc(25% - 37.5px); padding: 45px; border-radius: 10px; border: 2px solid #370D00; background-color: #F8F5EE; position: relative; }
#sub.fran .step > div:after{ content:""; display: block; width: 20px; height: 80px; background: url('/img/sub/step_arrow.png') center center no-repeat; position: absolute; right: 6px; top: 50%; transform: translate(100%,-50%); }
#sub.fran .step i{ display: block; width: 120px; height: 120px; padding: 6px; border-radius: 20px; border: 4px solid #F1EBDF; margin-top: -105px; background-color: #F8F5EE; }
#sub.fran .step i img{ display: block; box-shadow: 0 0 40px rgba(55,13,0,0.1); border-radius: 10px; }
#sub.fran .step .txt{ margin-top: 20px; display:flex; flex-flow: column; gap: 14px; }
#sub.fran .step .txt em{ font-size: 30px; font-weight: 900; color:#370D00; }
#sub.fran .step .txt strong{ font-size: 24px; font-weight: 800; color:#370D00 }
#sub.fran .step .txt p{ font-size: 20px; line-height: 1.5em; color: #370D00; }
@keyframes tag{
    0%{transform: rotate(0deg)}
    25%{transform: rotate(2deg)}
    50%{transform: rotate(0deg)}
    75%{transform: rotate(-2deg)}
    100%{transform: rotate(0deg)}
}

@keyframes loops { 
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(-50%)
    }
}

@keyframes loops2 { 
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(-50%)
    }
}

@keyframes loops3 { 
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(50%)
    }
}


@keyframes acc {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}

@keyframes arrows {
    0%{
        top: -10px;
    }
    50%{
        top: -15px;
    }
    100%{
        top: -10px;
    }
}

@keyframes arrows2 {
    0%{
        bottom: -10px;
    }
    50%{
        bottom: -15px;
    }
    100%{
        bottom: -10px;
    }
}

@keyframes arrows3 {
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(10px);
    }
    100%{
         transform: translateY(0);
    }
}



@media (max-width: 1800px) {
    #sub.m_view .con01 .list li .txt span{ width: 60px; height: 60px; font-size: 18px; line-height: 1.5em; }
    #sub .menu_view .m_info dl{ width: calc(100% - 260px); }
        #sub.fran .review > div dl dd br{ display: none; }
    #sub.fran .review > div dl dd{ word-break: keep-all; }
}

@media (max-width: 1680px) {
    #sub.board .p_list ul li .btn button{ padding: 0 20px; font-size: 16px; }
    #sub.app .sub_visual .bg1{ left: -17%; }
    #sub.app .sub_visual .bg2{left: -70%; }
    #sub.app .sub_con .con01 .box > dl > dd > strong br{ display: none; }
    #sub.app .sub_con .con01 .box > dl > dd{ width: calc(100% - 284px); }
}


@media (max-width: 1580px) {
    #sub .menu_view .txt .m_tit > strong{ font-size: 30px;  }
    #sub .menu_view .txt .m_tit .cate span { height:34px; padding: 0 10px; font-size: 18px; } 
    #sub .menu_view .txt .m_tit .cate{ margin-bottom: 10px; gap :4px; }
    #sub .menu_view .txt .inner .m_txt{ padding: 40px; }
    #sub.board .size { gap:20px; margin-top: 20px; } 
	#sub .menu_view .txt .m_tit > strong{padding-right: 240px}
    #sub.board .size i{ width: 30px; height: 30px; font-size: 18px; } 
    #sub.board .size > div{ gap: 8px; }
    #sub.board .size p{ font-size: 16px; }
    #sub.board .size p span{ font-size: 16px; }
    #sub .menu_view .m_info dl dt{ font-size: 18px; }
    #sub .menu_view .m_info dl dd{ font-size: 16px; }
    #sub .menu_view .m_info .wrap{gap: 30px; }
    #sub .menu_view .txt .scrolls strong{ font-size: 16px; }
    #sub.m_view .con01 .list li .txt strong{ font-size: 20px; margin-bottom: 8px; }
    #sub.m_view .con01 .list li .txt p{ font-size: 16px; }
    #sub.m_view .con01 .list li .txt{ padding: 20px; }
    #sub.m_view .con01 .list li .txt span{ right: 20px; }
    #sub.m_view .con01 .list li .img .cate{ left: 10px; top:10px; padding: 0 10px; border-radius: 6px; height: 32px; }
    #sub.m_view .con01 .list li .img .cate p{ font-size: 14px; }
    #sub.m_view .con01 .list{ gap: 20px; }
    #sub.m_view .con01 .list li{ width: 25%; }
    #sub.board .b_select{ height: 60px; padding: 0 20px; background-position: right 20px center; }
    #sub.board .b_input{ height: 60px; padding: 0 20px; }
    #sub.board .b_btn{ height: 60px; font-size: 16px; }
    #sub.store .sub_con .m_sh .m_top ul li .line{ height: 60px; }
    #sub.store .sub_con .m_sh .m_top ul{ padding: 20px; }
    #sub.store .sub_con .m_list > ul > li > div{ padding-left: 20px; }
    #sub.store .sub_con .m_list > ul > li .txt .tit strong{ font-size: 20px; }
    #sub.store .sub_con .m_list > ul > li .txt .tit a{height: 32px; gap: 2px; width: 100px;font-size: 14px; }
    #sub.store .sub_con .m_list > ul > li .txt .tit a svg{ width: 22px; height: auto; }
    #sub.store .sub_con .m_list > ul > li .s_info ul li p{ font-size: 14px; }
    #sub.store .sub_con .m_list > ul > li .s_info ul li i{ display: block; }
    #sub.store .sub_con .m_list > ul > li .s_info ul li i svg{ width: 18px; height: auto; }
    #sub.store .sub_con .m_list > ul > li .s_info ul{ gap: 4px; }
    #sub.store .sub_con .m_list > ul > li{ height: 180px; }
    #sub.store .sub_con .m_list > ul > li .txt:after{ height: 10px; }
    #sub.store .sub_con .m_list > ul > li .txt:before{ height: 10px; }
    #sub.store .sub_con .cate > ul > li i{ display: block; }
    #sub.store .sub_con .cate > ul > li i img{ display: block; width: 22px; }
    #sub.store .sub_con .cate > ul > li > p{ font-size: 13px; }
    #sub.store .sub_con .cate > ul > li{ gap: 4px; height: 34px;padding-left: 8px; padding-right: 10px; }
    #sub.store .sub_con .maps{ padding: 20px; }
    #sub.brand .main_con03 .step02 .img_wrap .after_img div img{ width: 500px; }
    #sub.brand .main_con03 .step02 .point{ margin-left: 180px; }
    #sub.brand .main_con03 .step02 .point .point_list ul{ gap: 100px; }
    #sub.brand .con02 .info dl dd br{ display: none; }
    #sub.brand .con03 .inner{ gap: 60px; }
    #sub.brand .con03 .tit .wrap strong { font-size: 70px; } 
    #sub .tag .tag_in strong{ padding: 0 20px; height: 40px; font-size: 18px; }
    #sub.brand .con03 .txt .control .swiper-button-prev{ width: 50px; height: 50px; }
    #sub.brand .con03 .txt .control .swiper-button-next{ width: 50px; height: 50px; }
    #sub.brand .con03 .txt .control .swiper-pagination .swiper-pagination-bullet-active{ width: 40px; }
    #sub.brand .con03 .taste{ width: 600px; }
    #sub.brand .con03 .txt{ width: calc(100% - 660px); }
    #sub.brand .con03 .taste .txt strong{ font-size: 28px; line-height: 1.5em; }
    #sub.brand .con03 .taste .txt p{ font-size: 18px; }
    #sub.brand .con03 .taste .txt{ gap: 8px; }
    #sub.brand .con03 .bg .wrap img{ height: 400px; }
    #sub.brand .con03 .taste .txt span{ width: 60px; height: 60px; font-size: 20px; }
    #sub.brand .con03 .taste .txt p br{ display: none; }
    #sub.brand .con03 .taste .txt{ padding: 40px; }
    #sub.brand .con02 .inner{ gap: 20px; }
    #sub.brand .con02 .tit strong{ font-size: 40px; }
    #sub.brand .con02 .info dl{ gap: 20px; }
    #sub.brand .con02 .info dl dt{ font-size: 80px; gap: 10px; }
    #sub.brand .con02 .info dl dd{ font-size: 18px; } 
    #sub.brand .main_con03 .step02 .txt_wrap > div >strong{ font-size: 80px; line-height: 1em; }
    #sub.brand .con04 ul li .txt{ width: 100%; gap: 10px;padding: 30px 20px; }
    #sub.brand .con04 ul li .txt strong{ font-size: 20px; line-height: 1.5em; }
    #sub.brand .con04 ul li .txt p{ font-size: 16px; }
    #sub.brand .con05 .his_nav{ z-index: 10; }
    #sub.brand .con05 .his_nav ul li a{ font-size: 16px; }
    #sub.brand .con05 .his_nav ul{ gap: 8px;  }
    #sub.brand .con05 .con_w .h_box .y_box strong{ font-size: 40px; }
    #sub.brand .con05 .con_w .h_box .y_box{ height: 80px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl{ padding: 20px; padding-left: 0; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dt{ width: 100px; font-size: 20px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul li{ font-size: 16px; padding-left: 8px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul li:after{ top: 10px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul{ gap: 4px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dd{ padding-left: 20px; width: calc(100% - 120px); }
    #sub.brand .con05 .con_w .h_box .y_list .wrap .pz_img img{ width: 100px; }
    #sub.app .sub_con .con01 .box > dl > dd > p{ font-size: 16px; margin-bottom: 10px; }
    #sub.app .sub_con .con01 .box > dl > dd > strong{font-size: 20px; line-height: 1.5em; }
    #sub.app .sub_con .con01 .box > dl{ gap: 20px; }
    #sub.app .sub_con .con01 .box > dl > dt{ width: 160px; height: 160px; }
    #sub.app .sub_con .con01 .box > dl > dt svg{ width: 60%; height: auto; }
    #sub.app .sub_visual .img img{ width: 100%; }
/*    #sub.fran .con02 .box .img img{ width: 500px; }*/
    #sub.fran .con02 .box{ width: 100%; }
    #sub.fran .con04 .p_box .list .txt p br{ display: none; }
    #sub.fran .review > div dl dd{ font-size: 16px; }
}


@media (max-width: 1460px) {
    #sub.board .v_inner{ width: 100%; padding: 0 20px; } 
    #sub.board .n_list{ width: 100%; padding: 0 20px; } 
    #sub.fm .box .priv_inp{ width: 100%; }
    #sub.fm .box .f_box .wrap ul{ width: 100%; }
    #sub.brand .sub_visual:after{ width: calc(100% - 40px); }
    #sub.brand .sub_visual .txt svg{ height: 90px; width: auto; }
    #sub.brand .sub_visual .wrap{ gap: 20px; }
    #sub.app .sub_visual .img:after{ left: -170px; }
    #sub.fran .sub_visual .tit strong{ font-size: 50px; }
    #sub.fran .sub_visual .bg ul li img { height: 100px; } 
    #sub.fran .con01 .wrap{ width: 900px; }
    #sub.fran .sub_con .title > strong{ font-size: 40px; line-height: 1.5em; }
    #sub.fran .con02 .box .txt dl dd{ font-size: 20px; margin-top: 8px; }
    #sub.fran .con02 .box .txt dl dt{ padding: 0 20px; height: 48px; font-size: 16px; }
    #sub.fran .con02 .box .txt dl dd{ align-items: center; display: flex; gap: 4px; }
    #sub.fran .con02 .box .img svg{ height: 60px; width: auto; }
    #sub.fran .con04 .inner{ padding: 0 20px; }
    #sub.fran .st3 br{display: none; }
    #sub.fran .st3{ word-break: keep-all; font-size: 24px; line-height: 1.5em; }
    #sub.fran .con04 .p_box .list .txt p{ font-size: 16px;  word-break: keep-all; }
    #sub.fran .con04 .p_box .list > div{ padding: 30px; }
    #sub.fran .con04 .p_box .list .img img{ width: 80%; }
    #sub.fran .con04 .p_box .p_tit .st1{ font-size: 80px; }
    #sub.fran .review > div{ padding: 40px; }
    #sub.fran .review > div .type{ margin-top: -70px; }
    #sub.fran .review > div .type svg{ width: 100px; height: auto; }
    #sub.fran .p_table{ margin-top: 40px; }
    #sub.fran .p_table table th{ height: 50px; font-size: 16px; }
    #sub.fran .p_table table td{ font-size: 16px; padding: 12px; }
    #sub.fran .p_table:after{ height: 50px; }
    #sub.fran .con06 .tops{ flex-flow: column;  }
    #sub.fran .con06 .tops .used{ margin-top: 20px; width: 100%; }
    #sub.fran .step .txt p{ font-size: 16px; line-height: 1.5em; }
    #sub.fran .step .txt p br{ display: none; }
    #sub.fran .step .txt em{ font-size: 18px; }
    #sub.fran .step .txt{ gap: 6px; }
    #sub.fran .step .txt strong{ font-size: 18px; }
    #sub.fran .step > div{ padding: 20px; }
    #sub.fran .step > div:after{ width: 10px; height: 40px; background-size: 100% 100%; }
    #sub.fran .step:after{ display: none; }
    #sub.fran .step i{ width: 70px; height: 70px; margin-top: -60px; }
    #sub.fran .step i img{ width: 100%; }
    #sub.fran .benefit ul li:nth-child(1){ padding-left: 40px; }
    #sub.fran .benefit ul li p{ font-size: 14px; margin-bottom: 8px; }
    
    #sub.fran .benefit ul li strong{ font-size: 30px; }
    #sub.fran .benefit ul li em{ font-size: 20px; }
    #sub.fran .benefit ul li .bg img{ width: 200px; }
    #sub.fran .benefit{ height: 300px; margin-top: 40px; padding: 20px; }
}

@media (max-width: 1400px) {
    #sub.board .p_list ul li a .txt{ padding-left: 0; padding-right: 0; }
    #sub .inner{ padding: 0 20px; }
    #sub .board_visual .s_tab ul{ gap: 40px; }
    #sub .board_visual .s_tab ul li a{ padding-bottom: 12px; font-size: 20px; }
    #sub.board .p_list ul li a .txt .t_info strong{ font-size: 22px; }
    #sub.board .p_list ul li a .txt .t_info p{ font-size: 15px; }
    #sub.board .p_list ul li a .txt .t_info{ gap: 10px; }
    #sub.board .p_list ul li a .txt{ padding: 20px 0; }
    #sub.board .size{ gap: 20px; margin-top: 20px; margin-bottom: 0; }
    #sub.board .size > div{ gap: 8px; }
    #sub.board .size i{ width: 28px; height: 28px; font-size: 16px; }
    #sub.board .size p{ font-size: 18px; }
    #sub.board .p_list ul li .btn button{ padding: 0 15px; height: 42px; font-size: 14px; }
    #sub_pop .wrap .box{ width: 600px; }
    #sub_pop .wrap .box .p_con img{ width: 100%; display: block; }
    #sub_pop .wrap .close_b button{ width: 50px; height: 50px; }
    #sub_pop .wrap .close_b button svg{ width:24px; height: auto; }
    #sub.promotion.view .v_inner{ width: 100%; }
}

@media (max-width: 1250px) {
    #sub .menu_view .img{ width: 50%; }
    #sub .menu_view .img > img{ width: 100%; } 
    #sub .menu_view .dou{ width: 100%; }
    #sub .menu_view .dou img{ width: 100%;}
    #sub.view.m_view .sub_con{ padding-top: 80px !important; }
    #sub .st01{ font-size: 32px; }
    #sub.m_view .con01 .list{ margin-top: 30px; }
    #sub.m_view .con01 .list{ flex-flow: wrap; }
    #sub.m_view .con01 .list{ flex-flow: wrap; gap: 20px; }
    #sub.m_view .con01 .list li{ width: calc(50% - 10px); }
    #sub.m_view .con01 .list li .txt strong{ font-size: 16px; line-height: 1.5em; }
    #sub.m_view .con01 .list li .txt p{ font-size: 13px; }
    #sub.m_view .con01 .list li .txt{ padding: 15px; }
    #sub.m_view .con01 .list li .txt span{ font-size: 13px; width: 42px; height: 42px; }
    #sub.app .sub_visual .txt > strong{ font-size: 40px; line-height: 1.5em; }
    #sub.app .sub_visual .img { display: flex; align-items: center; }
    #sub.app .sub_visual .bg1{ left: 50%; }
    #sub.app .sub_visual .bg img{ height: 40px; }
    #sub.app .sub_visual .bg2{ left: -22%; top: 88%; }
    #sub.app .sub_visual .txt .sns_go{ margin-top: 30px; }
    #sub.app .sub_visual .txt .sns_go a{ width: 200px; padding: 6px 15px; gap: 4px; }
    #sub.app .sub_visual .txt .sns_go a strong{ font-size: 16px; }
    #sub.app .sub_visual .txt .sns_go a svg{ width: 40px; height: auto; }
    #sub.app .sub_con .box{ gap: 30px; padding: 30px; }
    #sub.app .sub_con .con01 .box > dl{ width: 100%; }
    #sub.app .sub_con .con01 .box > dl > dt{ width: 100px; height: 100px; }
    #sub.app .sub_con .con01 .box > dl > dd{ padding-left: 20px; width: calc(100% - 120px); }
    #sub.app .sub_con .con01 .box > dl > dd > p{ font-size: 14px; margin-bottom: 4px; }
    #sub.app .sub_con .con01 .box > dl > dd > strong{ font-size: 16px; }
    #sub.app .sub_con .con01 .box > dl > dt:after{ width: calc(100% - 10px); height: calc(100% - 10px); }
    #sub.app .sub_con{ gap: 20px; padding-top: 20px; padding-bottom: 20px; }
    #sub.app .sub_con .wrap{ padding: 0 20px; }
    #sub.app .sub_con .con02 .box .txt .st_wrap{ margin-bottom: 30px; }
    .st_wrap strong{ font-size: 60px; }
    #sub.app .sub_con .con02 .box .txt .swiper-pagination .swiper-pagination-bullet span{ font-size: 16px; }
    #sub.app .sub_con .con02 .box .txt .swiper-pagination{ gap: 10px; }
    #sub.app .sub_con .con02 .box .txt .steps dl dt{ width: 60px; height: 60px; }
    #sub.app .sub_con .con02 .box .txt .steps dl dt i img{ width: 100%; }
    #sub.app .sub_con .con02 .box .txt .steps dl{ height: auto; padding: 20px; }
    #sub.app .sub_con .con02 .box .txt .steps dl dd{ font-size: 18px; }
    #sub.app .sub_con .con02 .box .txt .steps dl{ gap: 10px; }
    #sub.app .sub_con .con02 .box .swiper-button-next{ width: 50px; height: 50px; }
    #sub.app .sub_con .con02 .box .swiper-button-next{ top: var(--swiper-navigation-top-offset,62%) }
    #sub.app .sub_con .con02 .box .a_slide{ width: 240px; height: auto; }
    #sub.app .sub_con .con02 .box .a_slide img{ width: 100%; }
    #sub.app .sub_con .con02 .box .txt{ width: 50%; }
    #sub.app .sub_con .con02 .box .txt .steps{ width: 100%; }
    #sub.app .sub_con .con02 .box .swiper-button-next{ display: none; }
    #sub.fran .con02 .box .img img{ width: 60%; }
}

@media (max-width: 1100px) {
    #sub.board .p_list ul{ gap: 70px 20px; }
    #sub.board .p_list ul li{ width: calc(50% - 10px); }
    #sub .board_visual .s_tab{ padding: 0 20px; }
    #sub .board_visual .s_tab ul{ flex-flow: wrap; gap: 30px; }
    #sub .board_visual .s_tab ul li a{ font-size: 16px; }
    #sub .board_visual{ height: 400px; }
    #sub .board_visual .wrap .s_tit strong{ font-size: 80px; }
    #sub.board .size{ margin-top: 10px; }
    #sub.board .g_list ul li a{ padding: 20px; }
    #sub.board .g_list ul li a .txt .cate span{ height: 44px;  font-size: 18px; }
    #sub.board .g_list ul li a .txt .cate{ margin-bottom: 12px; }
    #sub.board .g_list ul li a .txt strong{ font-size: 18px; margin-bottom: 4px; }
    #sub.board .g_list ul li a .txt p{ font-size: 14px; }
    #sub.board .g_list ul li a .txt{ margin-bottom: 20px; }
    #sub.store .sub_con .m_list > ul > li{ flex-flow: column; align-items: flex-start; gap: 12px; }
    #sub.store .sub_con .m_list > ul > li .txt:before{ display: none; }
    #sub.store .sub_con .m_list > ul > li .txt:after{ display: none; }
    #sub.store .sub_con .m_list > ul > li > div{ width: 100%; }
    #sub.store .sub_con .cate{ padding-right: 20px; }
    #sub.store .sub_con .m_list > ul > li{ gap: 6px; height: auto; padding: 20px 0; }
    #sub.board .b_select{ height: 44px; font-size: 15px; }
    #sub.board .b_input{ height: 44px; font-size: 15px; }
    #sub.board .b_btn{ height: 44px; font-size: 15px; }
    #sub.store .sub_con .m_sh .m_top ul li .line{ height: 44px; }
    #sub.store .sub_con .inner > div{ width: 100%; }
    #sub.store .sub_con .inner { flex-flow: column; }
    #sub.store .sub_con .maps{ height: 400px; }
    #sub.faq .f_list ul li a .en span{ font-size: 30px; }
    #sub.faq .f_list ul li a .qt .tit strong{ font-size: 20px; }
    #sub.faq .f_list ul li a{ padding: 0 30px; }
    #sub.faq .f_list ul li a .qt{ height: 80px; }
    #sub.faq .f_list ul li a .an .wrap{ padding-top: 30px; padding-bottom: 30px; }
    #sub.faq .f_list ul li a .an .a_info p{ font-size: 16px; }
    #sub.faq .f_list ul li a .an .a_info p br{ display: none; }
    #sub.board .n_list ul li a .num{ width: 60px; }
    #sub.board .n_list ul li a .num span{ font-size: 20px; }
    #sub.board .n_list ul li a .tit{ gap: 10px; }
    #sub.board .n_list ul li a .tit .cate{ width: 70px; height:28px; font-size: 14px; }
    #sub.board .n_list ul li a .tit strong{ font-size: 18px; }
    #sub.board .n_list ul li a{ height:80px; padding-right: 20px; }
    #sub.board .n_list ul li a .info{ gap: 10px; width: 130px; }
    #sub.board .n_list ul li a .info p{ font-size: 14px; }
    #sub.board .n_list ul li a .tit{ width: calc(100% - 190px); }
    #sub.board .n_list{ padding: 0; }
    #sub.fm .go_list .nt strong{ font-size: 16px; }
    #sub.fm .go_list .nt{ gap:15px; padding: 20px; }
    #sub.fm .go_list .nt svg{ width: 60px; height: auto; }
    #sub.fm .go_list .v_btn a{width: 160px; height: 50px; font-size: 16px; }
    #sub.fm .sub_con{ margin-top: -100px; }
    #sub.fm .person{ margin-top: 40px; }
    #sub.fm .person .per_p p{ padding: 20px; font-size: 16px; height: 140px; }
    #sub.fm .priv_inp{ gap: 0 8px; margin-top: 15px; }
    #sub.fm .priv_inp p{ font-size: 16px; }
    #sub.fm .priv_inp input{ width :24px; height: 24px; }
    #sub.fm .box .f_top{ gap: 20px 40px; }
    #sub.fm .box .f_top > div{ width :calc(50% - 20px); }
    #sub.fm .box .f_top:after{ display: none; }
    #sub.fm .box{ padding: 30px; gap: 30px; }
    #sub.fm .box .f_box .fm_input{ height: 50px; padding-left: 20px; font-size: 16px; }
    #sub.fm .box .f_box > label{ font-size: 16px; }
    #sub.fm .box .f_box .fm_btn{ height: 50px; font-size: 16px;width: 100px; }
    #sub.fm .box .f_box .wrap .fm_input{ width: calc(100% - 106px); }
    #sub.fm .box .f_box .wrap{ gap: 6px; }
    #sub.fm .box .f_box .fm_select{ height: 50px; font-size: 16px;width: 100%; padding-left: 20px; background-position: right 20px center; }
    #sub.fm .box .f_box .fm_text{ height: 160px; padding: 20px; font-size: 16px; }
    #sub.fm .box .files > strong{ font-size: 14px; }
    #sub.fm .box .files .file{ gap: 6px; }
    #sub.fm .box .files .file label{ font-size: 16px; height: 50px; width: 120px; }
    #sub.fm .box .files .file p{ width: calc(100% - 126px); height: 50px; padding-left: 20px; font-size: 16px; }
    #sub.fm .box .files > strong{margin-bottom: 10px; }
        #sub.fm .box .files{ margin: 0; }
    #sub.fm .box .priv_inp{width: 200px; height: 50px; gap: 10px; }
    #sub.fm .box .f_box2 > ul > li label{ font-size: 16px; }
    #sub.brand .con05 .con_w .h_box{ width: 100%; }
    #sub.brand .con05 .con_w .h_box .y_list{ width: 100%; }
    #sub.brand .con05 .his_nav{ display: none; }
    .st_wrap strong{ font-size: 40px; }
    #sub.brand .con05{ padding: 100px 0; }
    #sub.brand .con05 .st_wrap{ margin-bottom: 60px; }
    #sub.brand .con05 .con_w{ gap: 80px; }
    #sub.fran .con02 .box .txt{ gap: 60px; }
    #sub.fran .con02 .box .txt dl:after{ display: none; }
    #sub.fran .con02{ padding-bottom: 100px; padding-top: 100px; }
    #sub.fran .con01 .wrap{ width: 80%; }
    #sub.fran .con03 .graph .txt{ left: 20px; top: 20px; }
    #sub.fran .con03 .graph .txt p{ font-size: 14px; margin-bottom: 10px; }
    #sub.fran .con03 .graph .txt strong{ font-size: 20px; line-height: 1.5em; }
    #sub.fran .con03 .graph .txt strong b:after{ width: 4px; height: 4px; }
    #sub.fran .con03 .graph{ padding: 30px; padding-bottom: 10px; }
    #sub.fran .sub_con .title > strong{ font-size: 20px; }
    #sub.fran .sub_con .title > p{ font-size: 16px; margin-bottom: 8px; }
    #sub.fran .con03 .title strong span:after{ width: 200px; height: 60px; background-size: 100% 100%;  }
}

@media (max-width: 1050px) {
	#sub .menu_view .txt .m_tit > strong{padding-right: 0}
    #sub .menu_view .img{ position: static; transform: translate(0,0); }
    #sub .menu_view{ flex-flow: column; align-items: center; justify-content: flex-start; }
    #sub .menu_view{ padding-top:120px; }
    #sub .menu_view .txt .inner{ flex-flow: column; }
    #sub .menu_view .txt .inner .m_txt{ align-items: center; }
    #sub .menu_view .m_info .wrap{ justify-content: flex-start; align-items: flex-start; }
    #sub .menu_view .txt .inner .m_txt{ width: 100%; }
    #sub .menu_view .txt .m_tit .cate{ justify-content: center; }
    #sub .menu_view .txt .inner .m_tit{ padding-bottom: 0; }
    #sub .menu_view .size{ justify-content: center; }
    #sub .menu_view .txt .m_tit > strong{ text-align: center; display: block; } 
    #sub .menu_view .m_info dl{ align-items: center; text-align: center; }
    #sub .menu_view .m_info .wrap{ align-items: center; }
    #sub .menu_view .txt .inner .m_info{ padding-bottom: 80px; }
    #sub .menu_view{ height: auto; }
    #sub.board .g_list ul{ gap: 30px 20px; }
    #sub.board .g_list ul li{ width: calc(50% - 10px); }
    #sub.board.view .v_tit{ height: auto; padding: 30px; }
    #sub.board.view .v_tit .txt strong{ font-size: 20px; margin-bottom: 8px; }
    #sub.board.view .v_tit .txt p{ font-size: 14px; }
    #sub.board.view .v_tit .cate p{ width: 90px; height: 44px; font-size: 14px; }
    #sub.board.view .v_con{ padding:20px; }
    #sub .go_btn a{ width:200px; height: 60px; padding: 0 20px; }
    #sub .go_btn a strong{ font-size: 22px; }
    #sub .go_btn a svg{ width: 28px; height: auto; }
    #sub .go_btn{ margin-top: 20px; }
    #sub.brand .con04 ul{ gap: 20px; }
    #sub.brand .con04 ul li .txt strong{ font-size: 18px; }
    #sub.brand .main_con03 .step02 .img_wrap .before_img img{ width: 300px; }
    #sub.brand .main_con03 .step02 .img_wrap .after_img div img{ width: 400px; }
    #sub.brand .main_con03 .step02 .txt_wrap > div >strong{ font-size: 40px; }
    #sub.brand .main_con03 .step02 .point{ margin-left: 0; }
    #sub.brand .main_con03 .step02 .bg_img img{ width: 700px; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title strong span{ font-size: 20px; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title strong{ font-size: 18px; }
    #sub.brand .main_con03 .step02 .point .point_list ul li p{ font-size: 14px; line-height: 1.5em; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title i img{ width: 50px; display: block; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title .line svg{ width:200px; height: auto; }
    #sub.brand .main_con03 .step02 .point{ left: 65%; }
    #sub.brand .con02{ padding: 40px 0; padding-bottom: 60px; }
    #sub.brand .con02 .info { gap: 40px;flex-flow: column; }
    #sub.brand .con02 .info dl{ width: 100%; }
    #sub.brand .con02 .info dl dt{ font-size: 30px; }
    #sub.brand .con02 .tit strong{ font-size: 24px; }
    #sub.brand .con02 .info dl dd{ font-size: 14px; }
    #sub.brand .con02 .info:after{ width: 100%; height: 1px; transform: translate(-50%,-50%); }
    #sub.brand .main_con03 .step02 .txt_wrap{ padding: 20px; }
    #sub.brand .con03 .taste{ width: 400px; }
    #sub.brand .con03 .taste .txt{ padding: 30px; }
    #sub.brand .con03 .taste .txt strong{ font-size: 16px; }
    #sub.brand .con03 .taste .txt p{ font-size: 14px; line-height: 1.5em; }
    #sub.brand .con03 .taste .txt span{ width: 40px; height: 40px; font-size: 14px; }
    #sub.brand .con03 .tit .wrap strong{ font-size: 30px; }
    #sub .tag .tag_in strong{ padding: 0 15px; height: 32px; font-size: 14px; }
    #sub.brand .con03 .txt{ width: calc(100% - 460px); }
    #sub.brand .con04{ padding: 100px 0; }
    #sub.brand .con03{ padding: 100px 0; }
    #sub.fran .sub_visual .tit strong{ font-size: 30px; line-height: 1.7em; }
    #sub.fran .sub_visual .tit .hide span{ margin: 0 7px;  }
    #sub.fran .sub_visual .bg ul li img{ height: 60px; }
    #sub.fran .con02 .box .txt_box{ display: flex; }
    #sub.fran .con02 .box .left{ position: static; width: 50%; transform: translate(-50px,0); }
    #sub.fran .con02 .box .right{ position: static; width: 50%;transform: translate(50px,0); }
    #sub.fran .con02.on .box .left{ transform: translate(0,0); align-items: center;text-align: center !important; }
    #sub.fran .con02.on .box .right{ transform: translate(0,0); align-items: center;text-align: center !important; }
    #sub.fran .con02 .box .txt dl dd{ justify-content: center; text-align: center; }
    #sub.fran .con02 .box{ margin-top: 30px; }
    #sub.fran .sub_con .title > strong b:after{ width: 4px; height: 4px; }
    #sub.fran .sub_con .title > strong .line:before{ height: 8px; }
    #sub.fran .sub_con .title svg{ height: 40px; width: auto; }
    #sub.fran .con04 .tag{ margin-top: -14px; }
    #sub.fran .con04 .stop{ padding: 40px 0; }
    #sub.fran .con04 .stop:after{ width: 200px; height: 40px; background-size: 100% 100%; }
    #sub.fran .con04 .p_box{ padding: 40px 20px; }
    #sub.fran .con04 .p_box .p_tit .st1{ font-size: 30px; line-height: 1.5em; }
    #sub.fran .con04 .p_box .p_tit .st2{ font-size: 20px; line-height: 1.5em;}
    #sub.fran .con04 .p_box .p_tit .st2 b{ font-size: 24px; }
    #sub.fran .con04 .p_box .p_tit > p{ font-size: 14px; margin-top: 4px; }
    #sub.fran .con04 .p_box .color_box{width: 100%; padding: 15px; margin-top: 15px; }
    #sub.fran .con04 .p_box .color_box p{ font-size: 14px; }
    #sub.fran .con04 .p_box .list{ flex-flow: column;gap: 30px; }
    #sub.fran .con04 .p_box .list > div{ width: 100%; }
    #sub.fran .con04 .p_box .list .img img{ width: 200px; }
    #sub.fran .con04 .p_box .list .img{ margin-top: -130px; }
    #sub.fran .con04 .p_box .list{ gap: 130px; }
    #sub.fran .prize .p_slide .swiper-slide .txt{ padding-top: 12px; padding-bottom: 12px;  }
    #sub.fran .prize .p_slide .swiper-slide .txt strong{ font-size: 14px; }
    #sub.fran .prize .p_slide .swiper-slide{ width: 200px; min-height: 240px; }
    #sub.fran .con04 .p_box .list{ margin-top: 130px; }
    #sub.fran .con04 .p_box .list .txt .icon img{ width: 24px; }
    #sub.fran .review{ flex-flow: column; gap: 30px; }
    #sub.fran .review > div{ width: 100%; }
    #sub.fran .review > div .name strong{ font-size: 18px; }
    #sub.fran .review > div .name{ height: 50px; }
    #sub.fran .review > div .name img{ height: 40px; }
    #sub.fran .review{ padding-bottom: 0; }
    #sub.fran .review > div dl dt{ padding: 20px; padding-top: 0; font-size: 14px; }
    #sub.fran .con04 .p_box .p_tit .st1{ margin-bottom: 7px; }
    #sub.fran .p_table table th{ font-size: 13px; }
    #sub.fran .p_table table td{ font-size: 13px; line-height: 1.5em; word-break: keep-all; }
    #sub.fran .p_table table td br{ display: none; }
    #sub.fran .p_table:after{ height: 46px; }
    #sub.fran .benefit{ height: auto; border-radius: 20px; }
    #sub.fran .benefit ul{ flex-flow: column; }
    #sub.fran .benefit ul li{ width: 100%; height: 240px; border-right: none; border-bottom: 1px solid #ff2929; }
    #sub.fran .benefit ul li:last-child{ border-bottom: none; }
    #sub.fran .benefit ul li:nth-child(1){ align-items: center; text-align: center; padding-left: 0; }
    #sub.fran .benefit ul li .bg img{ width: 120px; }
    #sub.fran .benefit ul li strong{ font-size: 20px; }
    #sub.fran .benefit ul li p{ font-size: 14px; }
    #sub.fran .info_p p{ font-size: 14px; }
    #sub.fran .con06{ padding: 80px 0; }
    #sub .tag{ margin-bottom: 10px; }
    #sub.fran .sub_con .title > strong{ display: block; text-align: center; }
    #sub.fran .con06 .title{ align-items: center; }
    #sub.fran .con06 .tops .used dl { flex-flow: column; }
    #sub.fran .con06 .tops .used dl{ gap: 4px; }
    #sub.fran .con06 .tops .used dl dt{ font-size: 14px; width: 100%; border-right: none; }
    #sub.fran .con06 .tops .used dl dd{ font-size: 14px; width: 100%; }
    #sub.fran .con06 .tops .used{ gap: 12px; padding: 20px; }
    #sub.fran .step{ gap: 50px 30px; }
    #sub.fran .step .txt p{ font-size: 14px; }
    #sub.fran .step .txt strong{ font-size: 16px; }
    #sub.fran .step .txt em{ font-size: 16px; }
    #sub.fran .step > div{ width: calc(50% - 15px); }
    #sub.fran .step .txt{ margin-top: 10px;gap: 4px; }
    #sub.fran .review{ padding: 0; }
    #sub.fran .con02 .box .txt dl dd{ min-height: 60px; }
    #sub.fran .con02 .box .txt dl dd{ font-size: 14px; }
    #sub.fran .con02 .box .txt{ gap: 20px; }
    #sub.fran .con02 .box .txt dl dt{ font-size: 34px; font-size: 14px; padding: 0 12px; }
    #sub.fran .con02 .box .img svg{ height: 20px; }
    #sub.fran .sub_visual .tit strong{ font-size: 20px; }
    #sub .menu_view .m_info dl{ width: 100%; }
    #sub.fran .review > div dl dd:after{ display: none; }
    #sub.fran .review > div dl dd{ padding: 20px; padding-bottom: 0; padding-top: 25px; font-size: 14px; }
}


@media (max-width: 800px) {
    #sub.board .p_list ul li a .txt .t_info strong{ font-size: 16px; }
    #sub.board .p_list ul li a .txt .t_info p{ font-size: 13px; }
    #sub.board .p_list ul li a .txt .t_info{ gap: 4px; }
    #sub.board .size p{ font-size: 13px; }
    #sub.board .size p span{ font-size: 13px; }
    #sub.board .size i{ font-size: 13px; border-radius: 6px; }
    #sub.board .p_list ul li .btn button{ padding: 0 10px; font-size: 13px; height: 34px; }
    #sub.board .p_list ul li .btn{ gap: 4px; }
    #sub.board .paging{ margin-top: 40px; }
    #sub.board .paging ul{ gap: 4px; }
    #sub.board .paging ul li a{ width:32px; height: 32px; }
    #sub.board .paging ul li a svg{ display: block ;width: 100%; height: auto; }
    #sub.board .paging ul li.num a{ font-size: 14px; }
    #sub.board .sub_con{ padding-top: 60px; padding-bottom: 80px; }
    #sub .board_visual .s_tab ul{ gap: 12px 20px; }
    #sub .board_visual .s_tab ul li a{ padding-bottom: 0; line-height: 3em; }
    #sub .board_visual .wrap .s_tit strong{ font-size: 60px; }
    #sub .board_visual{ height: 320px; }
    #sub.board .p_list ul{ gap: 30px; flex-flow: column; }
    #sub.board .p_list ul li{ width: 100%; }
    #sub_pop .wrap .close_b{ right: 20px; top: 20px; transform: translate(0,0); z-index: 99999; }
    #sub_pop .wrap .close_b button{ width: 40px; height: 40px; background-color: #c10808; }
    #sub_pop.video_pop .box > strong{ font-size: 15px; margin-top: 15px; }
    #sub_pop .wrap .close_b button svg{ width: 18px; }
    #sub .menu_view .txt .m_tit > strong{ font-size: 20px; }
    #sub .menu_view .txt .m_tit .cate span{ padding: 0 8px; font-size: 14px; border-radius: 4px; height: 26px; }
    #sub .menu_view .size{ gap: 10px; }
    #sub .menu_view .txt .inner .m_txt{padding: 20px; }
    #sub .menu_view .m_info dl dt{ font-size: 15px; }
    #sub .menu_view .m_info dl dd{ font-size: 13px; }
    #sub .menu_view .m_info .wrap{ gap: 20px; }
    #sub .menu_view .txt .inner .m_info{ padding-bottom: 60px; }
    #sub .menu_view .txt .scrolls strong{ font-size: 13px; }
    #sub .menu_view{ padding-top: 90px; }
    #sub.store .board_visual .labels ul{ height: 40px; }
    #sub.store .board_visual .labels ul li{ height: 40px; }
    #sub.store .board_visual .labels{ height: 40px; }
    #sub.store .sub_con .maps{ height: 320px; }
    #sub.store .sub_con .m_sh .m_top ul{ flex-flow: column; gap: 4px; }
    #sub.store .sub_con .m_sh .m_top ul > li{ width: 100%; }
    #sub.store .sub_con .m_sh .m_top ul li{ gap: 4px; }
    #sub.store .sub_con .m_list{ height: 380px; }
    #sub.faq .f_list ul li a{ padding: 0 15px; }
    #sub.faq .f_list ul li a .qt{ gap: 8px;height: auto; padding: 8px 0; }
    #sub.faq .f_list ul li a .qt .tit strong{ font-size: 15px; }
    #sub.faq .f_list ul li a .en span{ font-size: 20px; }
    #sub.faq .f_list ul li a .qt .arrow svg{ width: 12px; height: auto; }
    #sub.faq .f_list ul li a .an .a_info p{ font-size: 13px; }
    #sub.faq .f_list ul li a .an .a_info{ margin-top: 3px; }
    #sub.faq .f_list ul li a .an .wrap{ padding: 15px 0; }
      
    #sub.faq .f_list ul{ gap: 6px; }
    #sub.board .n_list ul li a{ flex-flow: column; align-items: flex-start; justify-content: center; padding: 15px; height: auto; }
    #sub.board .n_list ul li a .num{ display: none; }
    #sub.board .n_list ul li a .tit{ width: 100%; }
    #sub.board .n_list ul li a .info{ width :100%; margin-top: 8px; }
    #sub.board .n_list ul{ gap: 6px; }
    #sub.board .n_list ul li a .tit strong{ font-size: 16px; line-height: 1.5em; }
    #sub.board .n_list ul li a .tit{ gap :5px; }
    #sub.sns .g_list ul li a .txt p{ margin-top: 4px; }
    #sub.video .g_list ul li a .txt{ padding-top: 15px; }
    #sub.video .g_list ul li a .txt{ margin-bottom: 0; }
    #sub.board.view .v_inner{ padding: 0; }
    #sub.fm .box .f_top{ gap: 20px; flex-flow: column; }
    #sub.fm .box .f_top > div{ width: 100%; }
    #sub.fm .box{ gap: 20px; padding: 20px; }
    #sub.fm .person .per_p p{ font-size: 14px; }
    #sub.fm .priv_inp p{ font-size: 14px; }
    #sub.fm .go_list .nt{ width: 100%; }
    #sub.fm .go_list .v_btn a{ width: 120px; height: 42px; font-size: 14px; }
    #sub.fm .go_list .v_btn{ width: 100%; padding: 12px 0; }
    #sub.fm .go_list { flex-flow: column; }
    #sub.fm .go_list .nt strong{font-size: 14px; }
    #sub.fm .go_list .nt{ gap: 10px; }
    #sub.fm .go_list .nt svg{ width: 40px; height: auto; }
    #sub.fm .person { margin-top: 20px; } 
    #sub.fm .box .f_box .fm_text{ font-size: 14px; }
    #sub.fm .box .f_box .fm_input{font-size: 14px; }
    #sub.fm .box .f_box .fm_select{font-size: 14px; }
    #sub.fm .box .files .file label{ font-size: 13px;  }
    #sub.fm .box .files .file p { font-size: 14px; } 
    #sub.fm .box .priv_inp{ width: 100%; }
    #sub.fm .box .f_box2 > ul{ width: 100%; }
    #sub.fm .box .f_box2 > ul > li{ width: 50%; }
    #sub.fm .box .f_box > label{ font-size: 15px; }
    #sub.fm .box .f_box{ gap: 4px; }
    #sub.fm .box .files .file label{ width: 90px; }
    #sub.fm .box .files .file p{ width: calc(100% - 96px); }
    #sub.fm .box .f_box2 > ul > li label{ font-size: 14px; }
    #sub.fm .box .f_box .wrap li label{ font-size: 14px; }
    #sub.brand .sub_visual .txt svg{ height: 40px; }
    #sub.brand .sub_visual .scroll_down strong{ font-size: 14px; }
    #sub.brand .sub_visual .scroll_down strong svg{ width: 10px; height: auto; }
    #sub.brand .con04 ul{ flex-flow: column; }
    #sub.brand .con04 ul li{ width: 100%; }
    #sub.brand .con04 ul li .txt p{ font-size: 14px; line-height: 1.5em; }
    #sub.brand .con04 ul li .txt p{ word-break: keep-all; }
    #sub.brand .con04 ul li .txt strong{ font-size: 16px; }
    #sub.brand .con04 ul li .txt .dot svg{ width: 30px; height: auto; }
    #sub.brand .con05 .con_w{ gap: 40px; }
    #sub.brand .con05 .con_w .h_box .y_box{ height: 50px; }
    #sub.brand .con05 .con_w .h_box .y_box strong{ font-size: 22px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl{ padding: 15px; padding-left: 0;  }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dt{ font-size: 16px; width: 80px; }
    #sub.brand .con05 .con_w .h_box .y_list .wrap dl dd ul li{ font-size: 14px; }
    #sub.brand .con03 .txt{ width: 100%; }
    #sub.brand .con03 .inner{ gap: 20px; }
    #sub.brand .con03 .taste{ width: 100%; }
    #sub.brand .con03 .inner{ flex-flow: column; }
    #sub.app .sub_visual .inner{ width: 100%; flex-flow: column; }
    #sub.app .sub_visual .txt { width: 100%; }
    #sub.app .sub_visual .txt > strong{ font-size: 20px;  }
    #sub.app .sub_visual .img{ width: 100%; justify-content: center; height: auto; }
    #sub.app .sub_visual .img img{ height: 400px; width: auto; }
    #sub.app .sub_visual .txt{ flex-flow: column; display: flex; align-items: center; text-align: center; }
    #sub .tag { margin-bottom: 12px; } 
    #sub.app .sub_visual .txt .sns_go{ gap: 10px; margin-top: 15px; }
    #sub.app .sub_visual .txt .sns_go a{ width: 160px;  }
    #sub.app .sub_visual .txt .sns_go a strong{ font-size: 13px; }
    #sub.app .sub_visual .txt .sns_go a svg{ width: 28px; }
    #sub.app .sub_visual .bg1{ left: 30%; }
    #sub.app .sub_visual .bg2{ display: none;}
    #sub.app .sub_con .con02 .box{flex-flow: column; gap: 20px; }
    #sub.app .sub_con .con02 .box .txt{ width: 100%; }
    #sub.app .sub_con .con02 .box .txt .st_wrap{ margin-bottom: 12px; }
    #sub.app .sub_con .con02 .box{ padding: 40px 20px; }
    #sub.app .sub_con .con01 .box > dl{ flex-flow: column; align-items: center; text-align: center; }
    #sub.app .sub_con .con01 .box > dl > dd{ padding-left: 0; }
    #sub.app .sub_con .con01 .box > dl > dd:after { display: none; } 
    #sub.video .g_list ul li a .img .hover .play svg{ width: 20px; height: auto; }
    #sub.video .g_list ul li a .img .hover .play:after{ width: 60px; height: 60px; }
    
    #sub.fm .person .per_p .per_box{ height: 120px; padding: 20px; gap: 10px; }
#sub.fm .person .per_p .per_box h1{ font-size: 16px; }
#sub.fm .person .per_p .per_box h2{ font-size: 14px; }
#sub.fm .person .per_p .per_box h3{ font-size: 14px; }
#sub.fm .person .per_p .per_box *{ color: #370D00; }
#sub.fm .person .per_p .per_box .p_con{ display: flex; gap: 12px; flex-flow: column; }
#sub.fm .person .per_p .per_box ul{ display: flex; flex-flow: column; gap: 8px; }
#sub.fm .person .per_p .per_box ul li{ font-size: 14px; line-height: 1.5em; }
#sub.fm .person .per_p .per_box table{ width: 100%; border-top: 2px solid #370d00; }
#sub.fm .person .per_p .per_box table th{ height: 40px; border-bottom: 1px solid #DED7CA; vertical-align: middle; text-align: center; font-size: 12px; }
#sub.fm .person .per_p .per_box table td{ border-bottom: 1px solid #DED7CA; vertical-align: middle; text-align: center; padding: 8px; font-size: 12px; }
    #sub .menu_view .img{ width: 80%; }
    #sub.m_inquiry .v_cons > dl{width: 100%;height: 50px;padding: 0 20px}
    #sub.m_inquiry .v_cons > dl dt, #sub.m_inquiry .v_an dl dt{font-size: 14px;width: 90px}
    #sub.m_inquiry .v_cons .dl3{padding: 20px}
    #sub.m_inquiry .v_cons > dl dd{font-size: 13px;line-height: 1.5}
    #sub.m_inquiry .v_cons > dl.none{display: none}
    #sub.m_inquiry .v_cons > dl{border-right: none}
    #sub.m_inquiry .v_an dl dd{font-size: 13px}
    #sub.m_inquiry .v_an dl dd, #sub.m_inquiry .v_cons > dl dd{width: calc(100% - 90px)}
    #sub.m_inquiry .v_an dl{padding: 20px}
    
}


@media (max-width: 640px) {
    #sub.fm .box .f_box .fm_btn.pc{display: none}
    #sub.fm .box .f_box .fm_btn.mo{display: block}
    #sub_pop .wrap{ width: 100%; }
    #sub_pop .wrap .box{ width: calc(100% - 40px); }
    #sub_pop .wrap .close_b{ right: 40px; }
    #sub.m_view .con01 .list li{ width: 100%; }
    #sub.m_view .con01 .list li .txt strong{ margin-bottom: 4px; }
    #sub.view.m_view .sub_con{padding-top: 60px !important; }
    #sub .st01{ font-size: 22px; }
    #sub.m_view .con01 .list{ margin-top: 20px; }
    #sub.board .sub_con{ padding-bottom: 60px; }
    #sub .board_visual .wrap .s_tit strong{ font-size: 40px; }
    #sub.board .g_list ul li a .txt .cate span{ font-size: 14px; height:34px; }
    #sub.board .g_list ul li a{ padding: 15px; }
    #sub.board .g_list ul li a .txt strong{ font-size: 15px; }
    #sub.board .g_list ul li a .txt p{ font-size: 13px; }
    #sub.board .g_list ul li{ width: 100%; gap: 20px; }
    #sub .board_visual .s_tab ul li a{ font-size: 14px; }
    #sub.board.view .v_tit{ padding:20px; flex-flow: column; justify-content: flex-start; align-items: flex-start; }
    #sub.board.view .v_tit .cate{ position: static; transform: translate(0,0); margin-bottom: 10px; }
    #sub.board.view .v_tit .cate p{ width: 60px; height: 32px; font-size: 13px; }
    #sub.board.view .v_tit .txt strong{ font-size: 18px; }
    #sub .go_btn a{ width:140px; height:48px; }
    #sub .go_btn a strong{ font-size: 16px; }
    #sub.brand .sub_visual .wrap{ gap: 10px; }
    #sub.brand .main_con03 .step02 .img_wrap .after_img div img{ width: 250px; }
    #sub.brand .main_con03 .step02 .img_wrap .before_img img{ width: 200px; }
    #sub.brand .main_con03 .step02 .txt_wrap > div >strong{ font-size: 30px; }
    #sub.brand .main_con03 .step02 .point .point_list ul{ gap: 50px; }   
    #sub.brand .main_con03 .step02 .point{ left: 45%; }
    #sub.brand .main_con03 .step02 .bg_img img{ width: 500px; }
    #sub.brand .main_con03 .step02 .point .point_list ul{ gap: 250px; }
    #sub.brand .main_con03 .step02 .point{ left: 30%; }
    #sub.brand .main_con03 .step02 .point{ top: 54%; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title .line{ display: none; }
    #sub.brand .main_con03 .step02 .point .point_list ul li .title{ padding-bottom: 8px; margin-bottom: 8px;}
    #sub.app .sub_visual .bg1{ left: -12%; } 
    #sub.fran .sub_con{ margin-top: -175px; }
    #sub.fran .con03 .graph{ padding-top: 70px; }
    #sub.fran .st3{ font-size: 16px; }
    #sub.fran .con04 .p_box .list .txt p{ font-size: 14px; }
    #sub.fran .con04 .p_box .list > div{ padding: 20px; }
    #sub.fran .con04{ padding-bottom: 80px; }
    #sub.fran .con05{ padding: 80px 0; }
    #sub.fran .p_table table td{ font-size: 10px; word-break: break-all; }
    #sub.fran .p_table:after{ display:none; }
    #sub.fran .review > div dl dt{ padding-left: 0; padding-right: 0; word-break: keep-all; }
    #sub.fran .review > div dl dt br{display:none;}
    #sub_pop.ppop .box{ padding: 20px; }
    #sub_pop.ppop .box h1{ font-size: 16px; }
    #sub_pop.ppop .box h2{ font-size: 14px; }
    #sub_pop.ppop .box h3{ font-size: 12px; }
    #sub_pop.ppop .box p{ font-size: 12px; }
    #sub_pop.ppop .box ul li{ font-size: 12px; }
    #sub_pop.ppop .box table th{ font-size: 12px }
    #sub_pop.ppop .box table td{ font-size: 12px; }
    #sub.board .n_list ul li a .tit{ flex-flow: column; align-items: flex-start; }
    #sub.fran .review > div dl dd{ padding: 0; padding-top: 20px; }
}