@charset "utf-8";
@import url('/css/reset.css'); /* 폰트와 기초값 */

:root {--main-color1: #EA5C32;}
:root {--main-color2: #4CA87A;}
:root {--sub-color: #066AAB;}
:root {
    --bg-color: #FAF3E7;
    --font-pre : "Pretendard", serif;
    --font-rub : "Rubik", sans-serif;
    --font-roz : "Rozha One", serif;
    --font-pop : "Poppins", sans-serif;
    --font-size : 14px;
}

* {font-family: var(--font-pre);}

/* common */
.inner {width: calc(100% - (110px*2)); margin: auto;}
.flex{display: flex;}
.flex-ac {display: flex; align-items: center;}
.flex-js {display: flex; align-items: center; justify-content: space-between;}
.flex-jb{display: flex; align-items: center; justify-content: space-between;}
.flex-jc{display: flex; align-items: center; justify-content: center;}
.fd-c{display: flex; flex-direction: column;}
.gap20{gap: 20px;}
.ta-c{text-align: center;}
.ta-l{text-align: left;}
.ta-r{text-align: right;}
.pc {display: block;}
.mob {display: none;}

/* 상단 */
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99; transition: all .3s; border-bottom: 1px solid #000;}
header .inner {width: calc(100% - (38px*2));}
header.active .header {background: #fff;}
.hd_banner {background: #000;}
.hd_banner .inner {position: relative;}
.hd_banner .swiper {height: 100%; height: 40px; background: #000;}
.hd_banner .swiper-slide {width: 100%; height: 100%;}
.hd_banner .swiper-slide a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size); font-weight: 500; color: #fff; letter-spacing: -.4px;}
.hd_banner .close {cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 1;}
.hd_banner .close img {width: 18px;}
.header .inner {height: 90px; position: relative;}
.header .allMenu {gap: 10px; font-size: var(--font-size); font-weight: 400; font-family: var(--font-rub); letter-spacing: -.4px; cursor: pointer;}
.header .allMenu img {width: 24px;}
.header .allMenu img.close {display: none;}
.header .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.header .logo img {width: 138.78px;}
.header .user_menu {gap: 20px;}
.header .user_menu img {width: 24px;}
.header .user_menu .cart {position: relative;}
.header .user_menu .searchBtn {cursor: pointer;}
.header .user_menu .cart .count {position: absolute; right: -4px; bottom: -2.5px; text-align: center; line-height: 15px; width: 15px; height: 15px; border-radius: 100%; background: #000; color: #fff; font-size: calc(var(--font-size) - 4px); font-weight: 500;}

.hd_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: all .5s ease; z-index: 99; visibility: hidden;}
.hd_bg.show {opacity: .6; visibility: visible;}
/* allmenu */
.hd_allMenu {visibility: hidden; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100;}
.hd_allMenu .menu_container {width: 320px; position: relative; z-index: 1; background: #fff; height: 100%; padding: 40px 30px 56px; transform: translateX(-100%); transition: all .5s ease; opacity: 0;}
.hd_allMenu.show {visibility: visible;}
.hd_allMenu.show .menu_container {transform: translate(0); opacity: 1;}
.hd_allMenu .close {gap: 4px; font-size: var(--font-size); font-weight: 500; color: #555; letter-spacing: -.4px; cursor: pointer; display: inline-flex;}
.hd_allMenu .close img {width: 12px; filter: invert(1);}
.hd_allMenu .cont {margin-top: 48px; padding-right: 32px; overflow: hidden; overflow-y: scroll; height: calc(100% - 65px);}
.hd_allMenu .cont::-webkit-scrollbar {width: 2px;}
.hd_allMenu .cont::-webkit-scrollbar-thumb {background: #888; border-radius: 10px;}
.hd_allMenu .cont::-webkit-scrollbar-track {background: #ddd; border-radius: 10px;}
.hd_allMenu .cont .scroll > ul > li + li {margin-top: 15px;}
.hd_allMenu .cont .dep1 {display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--font-size) + 8px); font-weight: 300; color: #555; letter-spacing: -1px; cursor: pointer;}
.hd_allMenu .cont .dep1 span {position: relative; transition: all .3s; display: inline-block; line-height: 1.3; letter-spacing: -1px;}
.hd_allMenu .cont .dep1 span::after {content: ""; width: 0; height: 1px; background: #000; position: absolute; left: 0; bottom: 0; transition: all .3s;}
.hd_allMenu .cont .dep1 img {width: 20px; opacity: 0; transition: all .3s;}
.hd_allMenu .cont .dep2 {opacity: 0; visibility: hidden; position: absolute; top: 0; left: 100%; width: 320px; height: 100%; padding: 100px 30px; background: #fff; border-left: 1px solid #E3E3E3;}
.hd_allMenu .cont .dep2 a {position: relative; font-size: calc(var(--font-size) + 6px); font-weight: 300; color: #555; letter-spacing: -1px; line-height: 1.2; display: block;}
.hd_allMenu .cont .dep2 a + a {padding-top: 20px;}
.hd_allMenu .cont .dep2 span {position: relative; opacity: 0; display: inline-block; transition: opacity .5s ease;}
.hd_allMenu .cont .dep2 a:nth-child(2) span {transition-delay: .05s;}
.hd_allMenu .cont .dep2 a:nth-child(3) span {transition-delay: .1s;}
.hd_allMenu .cont .dep2 a:nth-child(4) span {transition-delay: .15s;}
.hd_allMenu .cont .dep2 a:nth-child(5) span {transition-delay: .2s;}
.hd_allMenu .cont .dep2 a:nth-child(6) span {transition-delay: .25s;}
.hd_allMenu .cont .dep2 a:nth-child(7) span {transition-delay: .3s;}
.hd_allMenu .cont .dep2 a:nth-child(8) span {transition-delay: .35s;}
.hd_allMenu .cont .dep2 a:nth-child(9) span {transition-delay: .4s;}
.hd_allMenu .cont .dep2 a:nth-child(10) span {transition-delay: .45s;}
.hd_allMenu .cont .dep2 span::after {content: ""; width: 0; height: 1px; background: #000; position: absolute; left: 0; bottom: 0; transition: all .3s;}
.hd_allMenu .other {margin: 30px auto; padding: 30px 0; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3;}
.hd_allMenu .other a {display: block; font-size: calc(var(--font-size) + 2px); font-weight: 300; color: #555; letter-spacing: -.8px; line-height: 1.25;}
.hd_allMenu .other a + a {margin-top: 10px;}
.hd_allMenu .sns strong {font-size: calc(var(--font-size) + 2px); font-weight: 700; color: #555; letter-spacing: -.8px;}
.hd_allMenu .sns .icon {gap: 10px;}
.hd_allMenu .sns .icon img {width: 35px;}
.hd_allMenu.show {display: flex; height: 100%;}
.hd_allMenu .cont .dep2.show {opacity: 1; visibility: visible;}
.hd_allMenu .cont .dep2.show span {opacity: 1;}
.hd_allMenu .cont .dep1:hover span {color: #000;}
.hd_allMenu .cont .dep1:hover span::after,
.hd_allMenu .cont .dep2 a:hover span::after {width: 100%;}
.hd_allMenu .cont .dep1:hover img {opacity: 1;}

/* quick */
.quick {position: fixed; z-index: 100; right: 40px; bottom: 50px;}
.quick ul{display: flex; flex-direction: column; align-items: flex-end;}
.quick ul li + li{margin-top:10px;}
.quick ul li a{display:block; width: 50px; height: 50px; border-radius:50%; background: #fff;}
.quick ul li.q_btn a{display:flex; justify-content:center; align-items:center; transition:all 0.5s;}
.quick ul li.q_btn span{display:none; font-size:0; transition:all 0.5s;}
.quick ul li.q_btn:hover a{width: 150px; border-radius: 80px; justify-content:space-between; padding: 0 0 0 25px;}
.quick ul li.q_btn:hover span{display:block; font-size: calc(var(--font-size) + 2px); font-weight: 700; color:#FFF; animation: opacity 0.5s linear;}
.quick ul li.q_hide_btn{display:none;}
.quick ul li.q_hide_btn a{display:flex; justify-content:center; align-items:center; transition:all 0.5s; position: relative; box-shadow: 0px 7px 29px 0px #64646F33;}
.quick ul li.q_hide_btn span{display:none; font-size:0; transition:all 0.5s;}
.quick ul li.q_plus_btn a{background:#fff url("/img/main/q_plus_ic.svg") no-repeat center / 20px; box-shadow: 0px 7px 29px 0px #64646F33 !important;}
.quick ul li.q_plus_btn.on a{background:#000 url("/img/main/q_close_ic.svg") no-repeat center / 20px; box-shadow: none !important;}
.quick ul li.q_top_btn a{background:#000 url("/img/main/q_top_ic.svg") no-repeat center / 20px;}
.quick ul li i{display:inline-block; width:20px; height:20px; position: relative; z-index: 1;}
.quick ul li .q_ic1{background:url("/img/main/q_ic1.svg") no-repeat center / contain;}
.quick ul li .q_ic2{background:url("/img/main/q_ic2.svg") no-repeat center / contain;}
.quick ul li .q_ic3{background:url("/img/main/q_ic3.svg") no-repeat center / contain;}
.quick ul li .q_ic4{background:url("/img/main/q_ic4.svg") no-repeat center / contain;}
.quick ul li.q_hide_btn:hover a{width: 150px; border-radius: 80px; justify-content:space-between; padding: 0 18px 0 25px;}
.quick ul li.q_hide_btn:hover a::after {content: ""; width: 50px; height: 50px; border-radius: 100%; background: #fff; box-shadow: 0px 7px 29px 0px #64646F33; position: absolute; right: 3px; top: 0;}
.quick ul li.q_hide_btn:hover span{display:block; font-size: calc(var(--font-size) - 2px); font-weight: 500; animation: opacity 0.5s linear;}
@keyframes opacity{
	0%{opacity:0}
	100%{opacity:1}
}

/* footer */
.footer {margin-top: 150px; border-top: 1px solid #E7E7E7;}
.footer .ft_inner {padding: 0 160px; display: flex; justify-content: space-between;}
.footer .link {padding: 30px 0;}
.footer .link li,
.footer .info .ft_inner > div {width: calc(100%/4); padding: 0 70px;}
.footer .link .tit {display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--font-size) + 4px); font-weight: 800; color: #000000B2; cursor: pointer;}
.footer .link .tit img {width: 16px;}
.footer .link .cont {margin-top: 30px; display: none;}
.footer .link .cont a {display: block; font-size: var(--font-size); font-weight: 500; letter-spacing: -.3px; line-height: 1.5;}
.footer .link .cont a + a {margin-top: 5px;}
.footer .lk_cont .top p {font-size: var(--font-size); font-weight: 500; color: #000000B2; letter-spacing: -.3px;}
.footer .lk_cont .top p + p {margin-top: 5px;}
.footer .lk_cont .top p strong {color: #000; font-weight: 500;}
.footer .lk_cont .bot {margin-top: 30px; display: flex; align-items: flex-start; gap: 20px;}
.footer .lk_cont .bot img {width: 50px;}
.footer .lk_cont .bot p {font-size: calc(var(--font-size) - 1px); font-weight: 400; letter-spacing: -.4px; color: #00000066; line-height: 1.4;}
.footer .lk_cont .bot p strong {font-weight: 600;}
.footer .info {border-top: 1px solid #E7E7E7; padding: 50px 0 70px;}
.footer .info .logo img {width: 50px;}
.footer .info .tit {font-size: calc(var(--font-size) + 2px); font-weight: 700; letter-spacing: -.4px; line-height: 1.3; margin-bottom: 10px;}
.footer .info p {font-size: var(--font-size); font-weight: 400; color: #000000B2; line-height: 1.5; letter-spacing: -.4px;}
.footer .info p + p {margin-top: 5px;}
.footer .info p span {color: #000; font-weight: 600; font-size: calc(var(--font-size) + 2px);}
.footer .info p strong {font-size: calc(var(--font-size) + 6px); font-weight: 700; color: #000; letter-spacing: -.6px; font-family: var(--font-rub);}
.footer .copy {text-align: center; background: #000; color: #fff; font-size: var(--font-size); font-weight: 400; letter-spacing: -.3px; font-family: var(--font-pop); padding: 8px 0;}

/* search */
.hd_search {visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; padding: 55px 0 50px; z-index: 100; background: #fff; opacity: 0; transition: all .5s ease;}
.hd_search.show {visibility: visible; opacity: 1;}
/* .hd_search.show {height: auto !important;} */
.hd_search .close {display: flex; justify-content: flex-end;}
.hd_search .close span {display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: #555; cursor: pointer;}
.hd_search .close span img {width: 12px;}
.hd_search .input {margin-top: 23px; width: 100%; position: relative;}
.hd_search .input input {width: 100%; border-bottom: 1px solid #000; height: 50px; font-size: calc(var(--font-size) - 2px); font-weight: 400; color: #000; padding-right: 30px;}
.hd_search .input input:focus {outline: none; border: 0 !important; border-bottom: 1px solid #000 !important;}
.hd_search .input input::placeholder {color: #000;}
.hd_search .input .search_btn {position: absolute; top: 50%; transform: translateY(-50%); right: 0; cursor: pointer;}
.hd_search .input .search_btn img {width: 20px;}
.hd_search .recent {margin-top: 30px;}
.hd_search .keyword {display: flex; align-items: center; gap: 25px;}
.hd_search .keyword .tit {width: 85px; font-size: calc(var(--font-size) - 2px); font-weight: 600; color: #000; letter-spacing: -.5px;}
.hd_search .keyword .cont {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.hd_search .keyword .cont a {display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 15px 7px; font-size: calc(var(--font-size) - 2px); font-weight: 500; letter-spacing: -.4px; border-radius: 30px; border: 1px solid #000; line-height: 1;}
.hd_search .keyword .cont img {position: relative; z-index: 1; cursor: pointer; width: 12px;}
.hd_search .trend {margin-top: 15px;}


/* 반응형 */
@media screen and (max-width: 1740px){
    :root {
        --font-size : 14px;
    }
    
    /* common */
    .inner {width: calc(100% - (6.32vw*2));}
    
    /* 상단 */
    header .inner {width: calc(100% - (2.18vw*2));}
    .hd_banner .swiper {height: 40px;}
    .hd_banner .close img {width: 18px;}
    .header .inner {height: 90px;}
    .header .allMenu {gap: 10px; }
    .header .allMenu img {width: 24px;}
    .header .logo img {width: 139px;}
    .header .user_menu {gap: 20px;}
    .header .user_menu img {width: 24px;}
    .header .user_menu .cart .count {right: -4px; bottom: -3px; line-height: 15px; width: 15px; height: 15px; font-size: calc(var(--font-size) - 4px);}
    
    /* allmenu */
    .hd_allMenu {height: 100vh;}
    .hd_allMenu .menu_container {width: 320px; padding: 40px 30px 56px;}
    .hd_allMenu .close {gap: 4px; }
    .hd_allMenu .close img {width: 12px;}
    .hd_allMenu .cont {margin-top: 48px; padding-right: 32px; height: calc(100% - 65px);}
    .hd_allMenu .cont::-webkit-scrollbar-thumb {border-radius: 10px;}
    .hd_allMenu .cont::-webkit-scrollbar-track {border-radius: 10px;}
    .hd_allMenu .cont .scroll > ul > li + li {margin-top: 15px;}
    .hd_allMenu .cont .dep1 {font-size: calc(var(--font-size) + 8px); letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span {letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span::after {height: 1px;}
    .hd_allMenu .cont .dep1 img {width: 20px;}
    .hd_allMenu .cont .dep2 {width: 320px; padding: 100px 30px;}
    .hd_allMenu .cont .dep2 a {font-size: calc(var(--font-size) + 6px); letter-spacing: -1px;}
    .hd_allMenu .cont .dep2 a + a {padding-top: 20px;}
    .hd_allMenu .cont .dep2 span::after {height: 1px;}
    .hd_allMenu .other {margin: 30px auto; padding: 30px 0;}
    .hd_allMenu .other a {font-size: calc(var(--font-size) + 2px); letter-spacing: -1px;}
    .hd_allMenu .other a + a {margin-top: 10px;}
    .hd_allMenu .sns strong {font-size: calc(var(--font-size) + 2px); letter-spacing: -1px;}
    .hd_allMenu .sns .icon {gap: 10px;}
    .hd_allMenu .sns .icon img {width: 35px;}
    
    /* quick */
    .quick {right: 40px; bottom: 50px;}
    .quick ul li + li{margin-top:10px;}
    .quick ul li a{ width: 50px; height: 50px;}
    .quick ul li.q_btn:hover a{width: 150px; border-radius: 80px; padding: 0 0 0 25px;}
    .quick ul li.q_btn:hover span{ font-size: calc(var(--font-size) + 2px);}
    .quick ul li.q_plus_btn a{background-size: 20px; box-shadow: 0px 7px 29px 0px #64646F33;}
    .quick ul li.q_plus_btn.on a{background-size: 20px;}
    .quick ul li.q_top_btn a{background-size: 20px;}
    .quick ul li i{ width:20px; height:20px;}
    .quick ul li.q_hide_btn:hover a{width: 150px; border-radius: 80px; padding: 0 18px 0 25px;}
    .quick ul li.q_hide_btn:hover a::after {width: 50px; height: 50px; box-shadow: 0px 7px 29px 0px #64646F33; right: 3px;}
    .quick ul li.q_hide_btn:hover span{ font-size: calc(var(--font-size) - 2px);}
    
    /* footer */
    .footer {margin-top: 10.15%;}
    .footer .ft_inner {padding: 0 6vw;}
    .footer .info .ft_inner .logo,
    .footer .link li:first-child {padding-left: 0;}
    .footer .link li:last-child {padding-right: 0;}
    .footer .link {padding: 30px 0;}
    .footer .link li,
    .footer .info .ft_inner > div {width: calc(100%/4); padding: 0 2.02vw;}
    .footer .link .tit {font-size: calc(var(--font-size) + 4px);}
    .footer .link .tit img {width: 16px;}
    .footer .link .cont {margin-top: 30px;}
    .footer .link .cont a + a {margin-top: 5px;}
    .footer .lk_cont .top p + p {margin-top: 5px;}
    .footer .lk_cont .bot {margin-top: 30px; gap: 15px;/*  flex-direction: column; align-items: flex-start; */}
    .footer .lk_cont .bot img {width: 50px;}
    .footer .lk_cont .bot p {font-size: calc(var(--font-size) - 1px); }
    .footer .lk_cont .bot p strong {display: inline-block;}
    /* .footer .lk_cont strong {display: block; margin-top: 5px;} */
    .footer .info {padding: 50px 0 70px;}
    .footer .info .logo img {width: 50px;}
    .footer .info .tit {font-size: calc(var(--font-size) + 2px);  margin-bottom: 10px;}
    .footer .info p + p {margin-top: 5px;}
    .footer .info p span {font-size: calc(var(--font-size) + 2px);}
    .footer .info p strong {font-size: calc(var(--font-size) + 6px); letter-spacing: -1px;}
    .footer .copy { padding: 8px 0;}
    
    /* search */
    .hd_search {padding: 55px 0 50px;}
    .hd_search .close span {gap: 4px; font-size: 14px;}
    .hd_search .close span img {width: 12px;}
    .hd_search .input {margin-top: 23px;}
    .hd_search .input input {height: 50px; font-size: calc(var(--font-size) - 2px); padding-right: 30px;}
    .hd_search .input .search_btn img {width: 20px;}
    .hd_search .recent {margin-top: 30px;}
    .hd_search .keyword {gap: 25px;}
    .hd_search .keyword .tit {width: 85px; font-size: calc(var(--font-size) - 2px); letter-spacing: -1px;}
    .hd_search .keyword .cont {gap: 10px;}
    .hd_search .keyword .cont a {gap: 10px; padding: 8px 15px 7px; font-size: calc(var(--font-size) - 2px);  border-radius: 30px;}
    .hd_search .keyword .cont img {width: 12px;}
    .hd_search .trend {margin-top: 15px;}

}
@media screen and (max-width: 1280px){
    :root {
        --font-size : 12px;
    }
    
    /* common */
    .inner {width: calc(100% - (40px*2));}
    
    /* 상단 */
    header .inner {width: calc(100% - (40px*2));}
    .hd_banner .swiper {height: 28px;}
    .hd_banner .swiper-slide a {letter-spacing: -0.28px;}
    .hd_banner .close img {width: 14.11px;}
    .header .inner {height: 64px;}
    .header .allMenu {gap: 8px; letter-spacing: -0.28px; font-size: calc(var(--font-size) + 2px);}
    .header .allMenu img {width: 19.23px;}
    .header .logo img {width: 97.96px;}
    .header .user_menu {gap: 16px;}
    .header .user_menu img {width: 20px;}
    .header .user_menu .cart .count {right: -4px; bottom: -3px; line-height: 12px; width: 14px; height: 14px; font-size: calc(var(--font-size) - 2px);}
    
    /* allmenu */
    .hd_allMenu {height: 100vh;}
    .hd_allMenu .menu_container {width: 320px; padding: 40px 30px 56px;}
    .hd_allMenu .close {gap: 4px; letter-spacing: -0px;}
    .hd_allMenu .close img {width: 12px;}
    .hd_allMenu .cont {margin-top: 48px; padding-right: 32px; height: calc(100% - 65px);}
    .hd_allMenu .cont::-webkit-scrollbar-thumb {border-radius: 10px;}
    .hd_allMenu .cont::-webkit-scrollbar-track {border-radius: 10px;}
    .hd_allMenu .cont .scroll > ul > li + li {margin-top: 15px;}
    .hd_allMenu .cont .dep1 {font-size: calc(var(--font-size) + 8px); letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span {letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span::after {height: 1px;}
    .hd_allMenu .cont .dep1 img {width: 20px;}
    .hd_allMenu .cont .dep2 {width: 320px; padding: 100px 30px;}
    .hd_allMenu .cont .dep2 a {font-size: calc(var(--font-size) + 6px); letter-spacing: -1px;}
    .hd_allMenu .cont .dep2 a + a {padding-top: 20px;}
    .hd_allMenu .cont .dep2 span::after {height: 1px;}
    .hd_allMenu .other {margin: 30px auto; padding: 30px 0;}
    .hd_allMenu .other a {font-size: calc(var(--font-size) + 2px); letter-spacing: -1px;}
    .hd_allMenu .other a + a {margin-top: 10px;}
    .hd_allMenu .sns strong {font-size: calc(var(--font-size) + 2px); letter-spacing: -1px;}
    .hd_allMenu .sns .icon {gap: 10px;}
    .hd_allMenu .sns .icon img {width: 35px;}
    
    /* quick */
    .quick {right: 40px; bottom: 50px;}
    .quick ul li + li{margin-top:10px;}
    .quick ul li a{ width: 35.29px; height: 35.29px;}
    .quick ul li.q_btn:hover a{width: 35.29px; border-radius: 80px; padding: 0 0 0 25px;}
    .quick ul li.q_btn:hover span{ font-size: calc(var(--font-size) + 2px);}
    .quick ul li.q_plus_btn a{background-size: 13.55px; box-shadow: 0px 7px 29px 0px #64646F33;}
    .quick ul li.q_plus_btn.on a{background-size: 13.55px;}
    .quick ul li.q_top_btn a{background-size: 13.55px;}
    .quick ul li i{ width:20px; height:20px;}
    .quick ul li.q_hide_btn:hover a{width: 120px; border-radius: 80px; padding: 0 10px 0 20px;}
    .quick ul li.q_hide_btn:hover a::after {width: 35.29px; height: 35.29px; box-shadow: 0px 7px 29px 0px #64646F33; right: 3px;}
    .quick ul li.q_hide_btn:hover span{ font-size: calc(var(--font-size) - 2px);}
    
    /* footer */
    .footer {margin-top: 6.7%;}
    .footer .ft_inner {padding: 0 40px;}
    .footer .link {padding: 20px 0;}
    .footer .link li,
    .footer .info .ft_inner > div {width: calc(100%/4); padding: 0 20px;}
    .footer .link .tit {font-size: calc(var(--font-size) + 1px);}
    .footer .link .tit img {width: 11.29px;}
    .footer .link .cont {margin-top: 21px;}
    .footer .link .cont a {letter-spacing: -0.21px; font-size: calc(var(--font-size) - 2px);}
    .footer .link .cont a + a {margin-top: 5px;}
    .footer .lk_cont .top p {letter-spacing: -0.21px; font-size: calc(var(--font-size) - 2px);}
    .footer .lk_cont .top p + p {margin-top: 5px;}
    .footer .lk_cont .bot {margin-top: 21px; gap: 14px; flex-direction: row;}
    .footer .lk_cont .bot img {width: 35px;}
    .footer .lk_cont .bot p {font-size: calc(var(--font-size) - 2px); letter-spacing: -0.28px; width: calc(100% - 49px);}
    .footer .lk_cont strong {margin-top: 0; display: inline-block;}
    .footer .info {padding: 34px 0 44px;}
    .footer .info .logo img {width: 35.29px;}
    .footer .info .tit {font-size: calc(var(--font-size) - 1px); letter-spacing: -0.28px; margin-bottom: 7px;}
    .footer .info p {letter-spacing: -0.28px; font-size: calc(var(--font-size) - 2px); line-height: 1.2;}
    .footer .info p + p {margin-top: 4px;}
    .footer .info p span {font-size: calc(var(--font-size) - 1px);}
    .footer .info p strong {font-size: calc(var(--font-size) - 2px); letter-spacing: -0.28px;}
    .footer .info .addr p span,
    .footer .info .cs p span {font-size: calc(var(--font-size) - 2px);}
    .footer .copy {letter-spacing: -0.21px; padding: 6px 0; font-size: calc(var(--font-size) - 2px);}
    
    /* search */
    .hd_search {padding: 55px 0 50px;}
    .hd_search .close span {gap: 4px; font-size: 14px;}
    .hd_search .close span img {width: 12px;}
    .hd_search .input {margin-top: 23px;}
    .hd_search .input input {height: 50px; font-size: calc(var(--font-size) - 2px); padding-right: 30px;}
    .hd_search .input .search_btn img {width: 20px;}
    .hd_search .recent {margin-top: 30px;}
    .hd_search .keyword {gap: 25px;}
    .hd_search .keyword .tit {width: 85px; font-size: calc(var(--font-size) - 2px); letter-spacing: -1px;}
    .hd_search .keyword .cont {gap: 10px;}
    .hd_search .keyword .cont a {gap: 10px; padding: 8px 15px 7px; font-size: calc(var(--font-size) - 2px); letter-spacing: -0px; border-radius: 30px;}
    .hd_search .keyword .cont img {width: 12px;}
    .hd_search .trend {margin-top: 15px;}
}
@media screen and (max-width: 1007px){
    .footer .lk_cont .bot p br {display: none;}
}
@media screen and (max-width: 1000px){
    
    /* footer */
    .footer {margin-top: 60px; border-top: 0;}
    .footer .ft_inner {padding: 0 40px;}
    .footer .link {padding: 0;}
    .footer .link .ft_inner {display: block;}
    .footer .link li,
    .footer .info .ft_inner > div {width: auto; padding: 0 0; gap: 0 15px;}
    .footer .link li:first-child {border-top: 1px solid #E7E7E7;}
    .footer .link li {width: 100%; padding: 16px 0; border-bottom: 1px solid #E7E7E7;}
    .footer .link .tit {font-size: calc(var(--font-size) + 2px); color: #000;}
    .footer .link .tit img {width: 16px;}
    .footer .link .cont {margin-top: 10px;}
    .footer .link .cont a {letter-spacing: -0.3px; font-size: calc(var(--font-size) + 1px);}
    .footer .link .cont a + a {margin-top: 5px;}
    .footer .lk_cont .top p {letter-spacing: -0.3px; font-size: calc(var(--font-size) + 1px);}
    .footer .lk_cont .top p + p {margin-top: 5px;}
    .footer .lk_cont .bot {margin-top: 10px; gap: 20px; flex-direction: row;}
    .footer .lk_cont .bot img {width: 50px;}
    .footer .lk_cont .bot p {font-size: calc(var(--font-size) + 1px); letter-spacing: -0.4px;}
    .footer .lk_cont strong {display: inline-block; margin-top: 0;}
    .footer .lk_cont .bot p br {display: block;}
    .footer .info {padding: 35px 0 40px; border-top: 0;}
    .footer .info .ft_inner {flex-wrap: wrap;}
    .footer .info .logo {width: 100% !important; margin-bottom: 35px;}
    .footer .info .logo img {width: 25px;}
    .footer .info .tit {font-size: calc(var(--font-size) + 2px); letter-spacing: -0.4px; margin-bottom: 5px; font-weight: 600;}
    .footer .info p {letter-spacing: -0.4px; font-size: calc(var(--font-size) + 1px); line-height: 1.3;}
    .footer .info p + p {margin-top: 5px;}
    .footer .info p span {font-size: calc(var(--font-size) + 1px);}
    .footer .info p strong {font-size: calc(var(--font-size) + 3px); letter-spacing: -0.4px;}
    .footer .info .addr p span {font-size: calc(var(--font-size) + 1px); font-weight: 700;}
    .footer .info .cs {width: 45% !important;}
    .footer .info .cs p span {font-size: calc(var(--font-size) + 1px);}
    .footer .info .bank {width: 55% !important;}
    .footer .info .bank p span {font-size: calc(var(--font-size) + 3px);}
    .footer .info .addr {margin-top: 20px; padding-top: 20px !important; border-top: 1px solid #E7E7E7; width: 100% !important;}
    .footer .copy {letter-spacing: -0.3px; padding: 8px 0;}

}
@media screen and (max-width: 768px){
    
    :root {
        --font-size : 12px;
    }
    
    /* common */
    .inner {width: calc(100% - (20px*2));}
    .pc {display: none !important;}
    .mob {display: block !important;}
    
    /* 상단 */
    header {transition: all .5s ease;}
    header .inner {width: calc(100% - (20px*2));}
    header.show {background: #fff;}
    .hd_banner .swiper {height: 40px;}
    .hd_banner .swiper-slide a {letter-spacing: -0.4px; font-size: calc(var(--font-size) + 2px);}
    .hd_banner .close img {width: 14px;}
    .header .inner {height: 70px; position: relative;}
    .header .mob_menu {gap: 8px;}
    .header .mob_menu .searchBtn {opacity: 0; transition: all .3s; visibility: hidden;}
    header.active .mob_menu .searchBtn {opacity: 1; visibility: visible;}
    .header .mob_menu .searchBtn img {width: 20px;}
    .header .allMenu {font-size: 0; width: 24px; display: flex; align-items: center; justify-content: center;}
    .header .allMenu img {width: 24px;}
    .header .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
    .header .logo img {width: 100px;}
    .header .user_menu {gap: 8px;}
    .header .user_menu img {width: 20px;}
    .header .user_menu .cart .count {right: -4px; bottom: -3px; line-height: 12px; width: 12px; height: 12px; font-size: calc(var(--font-size) - 4px);}
    
    /* hd_bg */
    .hd_bg {top: 111px;}
    .hd_bg.no_hdBanner {top: 70px;}

    /* allmenu */
    header.mob_active .allMenu img {width: 20px;}
    .hd_allMenu {height: 100vh; width: 100%; height: 0; overflow: hidden; transition: all .3s ease; top: 111px;}
    .hd_allMenu.show {height: 100% !important;}
    .hd_allMenu.no_hdBanner {top: 70px;}
    .hd_allMenu .menu_container {width: 100%; padding: 37px 0 37px 20px; transform: translateX(0%);}
    .hd_allMenu .close {gap: 4px; letter-spacing: -0px;}
    .hd_allMenu .close img {width: 12px;}
    .hd_allMenu .cont {margin-top: 0; padding-right: 24px; height: 100%;}
    .hd_allMenu .cont::-webkit-scrollbar-thumb {border-radius: 10px;}
    .hd_allMenu .cont::-webkit-scrollbar-track {border-radius: 10px;}
    .hd_allMenu .cont .scroll > ul > li + li {margin-top: 15px;}
    .hd_allMenu .cont .dep1 {font-size: calc(var(--font-size) + 9px); letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span {letter-spacing: -1px;}
    .hd_allMenu .cont .dep1 span::after {height: 1px;}
    .hd_allMenu .cont .dep1 img {width: 20px;}
    .hd_allMenu .cont .dep2 {width: 100%; padding: 0; transition: all .3s; background: #fff; z-index: 1;}
    .hd_allMenu .cont .dep2.show {opacity: 1; visibility: visible; left: 0;}
    .hd_allMenu .cont .dep2 .closeBtn {padding: 22px 20px 21px; display: flex !important; align-self: center; gap: 6.5px; font-size: calc(var(--font-size) + 9px); font-weight: 300; letter-spacing: -1px; border-bottom: 1px solid #000; margin-bottom: 31px;}
    .hd_allMenu .cont .dep2 .closeBtn img {width: 12px;}
    .hd_allMenu .cont .dep2 a {font-size: calc(var(--font-size) + 6px); letter-spacing: -1px; padding: 0 20px;}
    .hd_allMenu .cont .dep2 a + a {padding-top: 20px;}
    .hd_allMenu .cont .dep2 span::after {height: 1px;}
    .hd_allMenu .other {margin: 30px 0; padding: 30px 0; width: 250px;}
    .hd_allMenu .other a {font-size: calc(var(--font-size) + 4px); letter-spacing: -0.8px;}
    .hd_allMenu .other a + a {margin-top: 10px;}
    .hd_allMenu .sns {width: 250px;}
    .hd_allMenu .sns strong {font-size: calc(var(--font-size) + 4px); letter-spacing: -0.8px;}
    .hd_allMenu .sns .icon {gap: 10px;}
    .hd_allMenu .sns .icon img {width: 35px;}
    
    /* quick */
    .quick {right: 10px; bottom: 100px;}
    .quick ul li.q_plus_btn {display: none;}
    .quick ul li.q_top_btn a{background-size: 15.36px;}
    .quick ul li i{ width:40px; height:40px;}

    /* ft_quick */
    .ft_quick {position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; padding: 8px 12px; display: flex; align-items: center; height: 65px; z-index: 99;}
    .ft_quick li {width: calc(100%/5); text-align: center; height: 100%; opacity: .3;}
    .ft_quick li.on {opacity: 1;}
    .ft_quick li a {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px;  height: 100%;}
    .ft_quick li img {width: 19px;}
    .ft_quick li p {font-size: var(--font-size); font-weight: 500;}
    
    /* search */
    .hd_search {padding: 0 0 50px; height: 100%; overflow: hidden; transition: all .3s ease; transform: translateX(100%);}
    .hd_search.show {transform: translateX(0);}
    .hd_search .inner {width: 100%;}
    .hd_search .top {position: relative; height: 70px; border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px;}
    .hd_search .top .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px;}
    .hd_search .close span {font-size: 0;}
    .hd_search .close span img {width: 20px;}
    .hd_search .input {margin: 23px auto 0; width: calc(100% - 40px);}
    .hd_search .input input {height: 50px; font-size: var(--font-size); padding-right: 30px; letter-spacing: 0.3px;}
    .hd_search .input .search_btn img {width: 20px;}
    .hd_search .recent {margin-top: 30px;}
    .hd_search .keyword {gap: 10px; flex-direction: column; align-items: flex-start; padding: 0 20px;}
    .hd_search .keyword .tit {width: 85px; font-size: var(--font-size); letter-spacing: -0.5px;}
    .hd_search .keyword .cont {gap: 8px;}
    .hd_search .keyword .cont a {gap: 8px; padding: 8px 14px 7px; font-size: var(--font-size); letter-spacing: -0.4px; border-radius: 30px;}
    .hd_search .keyword .cont img {width: 12px;}
    .hd_search .trend {margin-top: 20px;}

    /* footer */
    .footer {margin-bottom: 65px; margin-top: 60px;}
    .footer .ft_inner {padding: 0 20px;}
    
}


/********** main **********/
/* common */
#main .swiper-button-next,
#main .swiper-button-prev {position: relative; top: auto; left: auto; right: auto; margin: 0; display: block; width: auto; height: auto;}
#main .swiper-button-next::after,
#main .swiper-button-prev::after {display: none;}
/* title */
.sec_tit {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px;}
.sec_tit p {font-size: var(--font-size); font-weight: 500; color: #555; letter-spacing: -.4px;}
.sec_tit h2 {margin-top: 10px; font-size: calc(var(--font-size) + 38px); font-weight: 400; letter-spacing: -2px; font-family: var(--font-roz); line-height: 1.03;}
.sec_tit a {display: flex; align-items: center; gap: 8px; font-size: var(--font-size); font-weight: 500; letter-spacing: -.4px; font-family: var(--font-rub);}
.sec_tit a img {width: 16px;}
/* prdList */
#main .prdList_layout .icon span {font-size: calc(var(--font-size) - 2px); padding: 6px 12px 5px;}
#main .prdList_layout .brand {font-size: var(--font-size);}
#main .prdList_layout .name {font-size: var(--font-size); margin-top: 8px;}
#main .prdList_layout .priceArea * {font-size: var(--font-size);}
#main .prdList_layout .priceArea.flex-jb{align-items: flex-end;}
#main .prdList_layout .priceArea .prdDown_btn{font-size: calc(var(--font-size) - 2px); letter-spacing: -0.6px; font-weight: 500; line-height: 1.16; color: #FFF; padding: 8px; padding-left: 12px; background: #DF001A; display: inline-flex; align-items: center; font-family: var(--font-pre); cursor: pointer;}
#main .prdList_layout .priceArea .prdDown_btn i{width: 12px; aspect-ratio: 1/1; display: block; background: url(/img/main/prdDown_btn_arrow.svg) no-repeat center / contain; margin-top: -2px;}
#main .prdList_layout .swiper-pagination.mob {display: none !important;}


/* visual */
#main .visual {position: relative;}
#main .visual .fp-overflow {overflow: hidden;}
#main .visual .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
#main .visual .text {position: absolute; bottom:200px; left: 50%; transform: translateX(-50%); z-index: 10; text-align: left; color: #fff;}
#main .visual .info_cont {position: absolute; bottom:110px; left: 50%; transform: translateX(-50%); z-index: 10;}
#main .visual .desc {font-weight: 500; font-size: calc(var(--font-size) + 2px); font-family: var(--font-rub);}
#main .visual h2 {margin-top: 12px; font-weight: 600; font-size: calc(var(--font-size) + 26px); letter-spacing: -1px;}
#main .visual .info {margin-top: 12px; font-size: calc(var(--font-size) + 2px); font-weight: 500; letter-spacing: -.4px;}
#main .visual .bot {display: flex; align-items: center;}
#main .visual .arrow {margin: 1px 0 0; display: block;}
#main .visual .arrow img {width: 16px;}
#main .visual .swiper-button-next {margin-right: 15px;}
#main .visual .paginatio_cont {position: relative; margin: 0 15px; width: 182px;}
#main .visual .swiper-pagination-progressbar {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 2px; background: #FFFFFF80;}
#main .visual .swiper-pagination-progressbar span {background: #FFFFFF;}
#main .visual .swiper-pagination-fraction {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 0;}
#main .visual .swiper-pagination-fraction span {font-size: var(--font-size); font-weight: 700; color: #fff; letter-spacing: -.8px;}
#main .visual .pause {cursor: pointer;}
#main .visual .pause img {width: 25px;}
/* sec1 */
#main .sec1 {display: flex;}
#main .sec1 .item {width: calc(100%/3); border-bottom: 1px solid #000;}
#main .sec1 .item a {display: block; width: 100%; padding: 45px 50px; background: #fff; transition: all .3s;}
#main .sec1 .item:nth-child(2) {border-left: 1px solid #000; border-right: 1px solid #000;}
#main .sec1 .item a * {transition: all .3s;}
#main .sec1 .item p {font-size: calc(var(--font-size) - 2px); font-weight: 500; color: #555; letter-spacing: -.4px;}
#main .sec1 .item h3 {margin-top: 10px; font-size: calc(var(--font-size) + 26px); font-weight: 400; letter-spacing: -1px; font-family: var(--font-roz);}
#main .sec1 .item span {display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--font-size); font-weight: 500; letter-spacing: -.4px; font-family: var(--font-rub);}
#main .sec1 .item span img {width: 16px;}
#main .sec1 .item:hover a {background: #000;}
#main .sec1 .item:hover a * {color: #fff;}
#main .sec1 .item:hover img {filter: brightness(0) invert(1);}
/* sec2 */
#main .sec2 {margin-top: 100px;} 
#main .sec2 .tit {font-size: calc(var(--font-size) + 14px); font-weight: 400; letter-spacing: -1px; font-family: var(--font-roz);}
#main .sec2 .swiper {margin-top: 30px;}
#main .sec2 .swiper .swiper-slide {width: calc(100%/7 - 13px); height: 130px; line-height: 1.07; display: flex; align-items: center; justify-content: center; border: 1px solid #e3e3e3; transition: all .3s;; cursor: pointer; background: #fff; font-size: calc(var(--font-size) + 12px); font-weight: 400; font-family: var(--font-roz); letter-spacing: -1px; margin-right: 15px; text-align: center;}
#main .sec2 .swiper .swiper-slide:hover {border-color: #000;}
#main .sec2 .swiper .bot {position: relative; margin: 40px auto 0; display: flex; align-items: center; justify-content: center; gap: 50px;}
#main .sec2 .swiper .swiper-pagination {position: relative; top: auto; right: auto; left: auto; bottom: auto; margin: 0; width: 450px; height: 3px; background: #0000001A;}
#main .sec2 .swiper .swiper-pagination-progressbar-fill {background: #000;}
#main .sec2 .swiper .arrow {display: flex; align-items: center;} 
#main .sec2 .swiper .arrow img {width: 20px; filter: invert(1); transition: all .3s; opacity: .2;}
#main .sec2 .swiper .arrow img:hover {opacity: 1;}
/* sec3 & sec7*/
#main .swiper_prdlist {margin-top: 160px;} 
#main .swiper_prdlist .prdList_layout {flex-wrap: nowrap; gap: 0;}
#main .swiper_prdlist .prdList_layout > .swiper-slide {width: calc(100%/4 - 15px); margin-right: 20px;}
#main .swiper_prdlist .swiper .swiper-pagination {position: relative; top: auto; right: auto; left: auto; bottom: auto; margin: 40px auto 0; display: flex; align-items: center; justify-content: center; gap: 25px;}
#main .swiper_prdlist .swiper .swiper-pagination span {width: 5px; height: 5px; background: #6d6d6d; margin: 0; opacity: 1;}
#main .swiper_prdlist .swiper .swiper-pagination .swiper-pagination-bullet-active {width: 15px; height: 15px; background: #fff; border: 2px solid #6d6d6d;}
/* sec4 */
#main .sec4 {margin-top: 120px; padding-top: 120px; border-top: 1px solid #7a7a7a;} 
/* sec5 */
#main .sec5 {margin-top: 120px;}
/* sec6 */
#main .sec6 {margin-top: 160px; display: flex; align-items: center; justify-content: space-between; gap: 80px;}
#main .sec6 > div {width: calc(50% - 45px);}
#main .sec6 .img_cont {position: relative;}
#main .sec6 .img_cont .textCont {position: absolute; top: 69px; left: 110px;}
#main .sec6 .img_cont .textCont p {font-size: 14px; font-weight: 500; letter-spacing: -.4px; color: #fff;}
#main .sec6 .img_cont .textCont h3 {margin-top: 10px; font-size: 48px; font-weight: 400; letter-spacing: -2px; color: #fff; font-family: var(--font-roz);}
#main .sec6 .img_cont .img {display: none;}
#main .sec6 .img_cont .img.on {display: block;}
#main .sec6 .prd_cont {/* width: calc(100% - 920px - 80px); */ position: relative;}
#main .sec6 .prd_cont .inner {width: calc(100% - 110px); margin: 0;}
#main .sec6 .brand_tab {margin-top: 34px; display: flex; align-items: center; gap: 13px;}
#main .sec6 .brand_tab .arrow img {width: 20px; filter: invert(1);}
#main .sec6 .brand_tab .swiper {width: 725px; overflow: hidden; margin: 0;}
#main .sec6 .brand_tab .swiper-slide {position: relative; border-radius: 100%; width: calc(100%/7 - 9px); padding-top: 12.83%; border: .73px solid #d9d9d9; background: #fff; font-size: calc(var(--font-size) + 2px); font-weight: 400; letter-spacing: -1px; font-family: var(--font-pop); text-align: center; cursor: pointer; margin-right: 10px;}
#main .sec6 .brand_tab .swiper-slide.on {border-color: #000;}
#main .sec6 .brand_tab .swiper-slide span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
#main .sec6 .brand_tab_cont .bd_cont {display: none;}
#main .sec6 .brand_tab_cont .bd_cont.on {display: block;}
#main .sec6 .ct_cont {width: calc(100% + 110px); display: none;}
#main .sec6 .ct_cont.on {display: block;}
#main .sec6 .cate_tab {margin: 55px 0 49px; display: flex; align-items: center; gap: 10px;}
#main .sec6 .cate_tab li {border-radius: 30px; border: 1px solid #6d6d6d; padding: 9px 20px 7px; line-height: 1; font-size: calc(var(--font-size) + 2px); font-weight: 500; color: #555; letter-spacing: -1.4px; cursor: pointer;}
#main .sec6 .cate_tab li.on {background: #000; border-color: #000; color: #fff;}
#main .sec6 .ct_cont .swiper-pagination {position: relative; top: auto; right: auto; left: auto; bottom: auto; margin: 50px auto 0; display: flex; align-items: center; justify-content: center; gap: 25px;}
#main .sec6 .ct_cont .swiper-pagination span {width: 5px; height: 5px; background: #6d6d6d; margin: 0; opacity: 1;}
#main .sec6 .ct_cont .swiper-pagination .swiper-pagination-bullet-active {width: 15px; height: 15px; background: #fff; border: 2px solid #6d6d6d;}
#main .sec6 .ct_cont .prdList_layout {flex-wrap: nowrap; gap: 0;}
#main .sec6 .ct_cont > .prdList_layout > .swiper-slide {width: calc(100%/3.4 - 20px); margin-right: 20px;}
#main .sec6 .ct_cont .prdList_layout .wish img {width: 18px;}
#main .sec6 .ct_cont .prdList_layout .arrowBox {padding: 0 5px;}
#main .sec6 .ct_cont .prdList_layout .arrowBox img {width: 17px;}
/* sec8 */
#main .sec8 {margin-top: 160px; background: #000; padding: 120px 0 97px;}
#main .sec8 *:not(.percent, .new) {color: #fff;}
#main .sec8 .sec_tit img {filter: brightness(0) invert(1);}
#main .sec8 .swiper-pagination span {background: #fff !important;}
#main .sec8 .swiper-pagination .swiper-pagination-bullet-active {background: transparent !important; border-color: #fff !important;}
/* sec9 */
#main .sec9 {margin-top: 120px;}
/* sec10 */
#main .sec10 {margin-top: 120px; padding-bottom: 120px; border-bottom: 1px solid #7A7A7A;}
/* sec11 */
#main .sec11 {margin-top: 120px;}
#main .sec11 .tit {position: relative; display: flex; align-items: center; justify-content: center;}
#main .sec11 .tit > div {text-align: center;}
#main .sec11 .tit h2 {display: flex; align-items: center; gap: 20px; font-size: calc(var(--font-size) + 38px); font-weight: 400; letter-spacing: -2px; font-family: var(--font-roz);}
#main .sec11 .tit h2 img {width: 44px;}
#main .sec11 .tit p {margin-top: 10px; font-size: calc(var(--font-size) + 2px); font-weight: 400; color: #6D6D6D; letter-spacing: -.4px; font-family: var(--font-rub);}
#main .sec11 .tit a {position: absolute; top: 50%; right: 0; transform: translateY(-50%); text-align: center; display: flex; align-items: center; gap: 8px; font-size: calc(var(--font-size) + 2px); font-weight: 600; letter-spacing: -.4px;}
#main .sec11 .tit a img {width: 16px;}
#main .sec11 .insta_cont {margin-top: 40px; position: relative;}
#main .sec11 .insta_cont .swiper-slide {width: calc(100%/5 - 20px); margin-right: 25px;}
#main .sec11 .insta_cont .swiper-slide img {width: 100%;}
#main .sec11 .insta_cont .arrow {top: 50%; transform: translateY(-50%); position: absolute;}
#main .sec11 .insta_cont .arrow img {filter: invert(1); width: 20px;}
#main .sec11 .insta_cont .swiper-button-prev {left: -30px;}
#main .sec11 .insta_cont .swiper-button-next {right: -30px;}

/* 반응형 */
@media screen and (max-width: 1740px){
    
    /********** main **********/
    /* common */
    /* title */
    .sec_tit {margin-bottom: 40px;}
    .sec_tit p {font-size: var(--font-size); letter-spacing: -0px;}
    .sec_tit h2 {margin-top: 10px; font-size: calc(var(--font-size) + 38px); letter-spacing: -2px;}
    .sec_tit a {gap: 8px; font-size: var(--font-size); letter-spacing: -0px;}
    .sec_tit a img {width: 16px;}
    /* prdList */
    #main .prdList_layout .icon span {font-size: calc(var(--font-size) - 2px); padding: 6px 12px 5px;}
    #main .prdList_layout .brand {font-size: var(--font-size);}
    #main .prdList_layout .name {font-size: var(--font-size); margin-top: 8px;}
    #main .prdList_layout .priceArea * {font-size: var(--font-size);}

    /* visual */
    #main .visual .info_cont {bottom:110px;}
    #main .visual .desc {font-size: calc(var(--font-size) + 2px);}
    #main .visual h2 {margin-top: 12px; font-size: calc(var(--font-size) + 26px); letter-spacing: -1px;}
    #main .visual .info {margin-top: 12px; font-size: calc(var(--font-size) + 2px); letter-spacing: -0px;}
    #main .visual .bot {margin-top: 66px;}
    #main .visual .arrow {margin: 1px 0 0;}
    #main .visual .arrow img {width: 16px;}
    #main .visual .swiper-button-next {margin-right: 15px;}
    #main .visual .paginatio_cont {margin: 0 15px; width: 182px;}
    #main .visual .swiper-pagination-progressbar {width: 100px; height: 2px;}
    #main .visual .swiper-pagination-fraction span {font-size: var(--font-size); letter-spacing: -1px;}
    #main .visual .pause img {width: 25px;}
    /* sec1 */
    #main .sec1 .item a {padding: 45px 50px;}
    #main .sec1 .item p {font-size: calc(var(--font-size) - 2px); letter-spacing: -0px;}
    #main .sec1 .item h3 {margin-top: 10px; font-size: calc(var(--font-size) + 26px); letter-spacing: -1px;}
    #main .sec1 .item span {gap: 8px; margin-top: 24px; font-size: var(--font-size); letter-spacing: -0px;}
    #main .sec1 .item span img {width: 16px;}
    /* sec2 */
    #main .sec2 {margin-top: 6.6%;} 
    #main .sec2 .tit {font-size: calc(var(--font-size) + 14px); letter-spacing: -1px;}
    #main .sec2 .swiper {margin-top: 30px;}
    #main .sec2 .swiper .swiper-slide {width: calc(100%/7 - 13px); height: 130px; font-size: calc(var(--font-size) + 12px); letter-spacing: -1px; margin-right: 15px;}
    #main .sec2 .swiper .bot {margin: 40px auto 0; gap: 50px;}
    #main .sec2 .swiper .swiper-pagination {width: 450px; height: 3px;}
    #main .sec2 .swiper .arrow img {width: 20px;}
    /* sec3 & sec7*/
    #main .swiper_prdlist {margin-top: 10.55%;} 
    #main .swiper_prdlist .prdList_layout > .swiper-slide {width: calc(100%/4 - 15px); margin-right: 20px;}
    #main .swiper_prdlist .swiper .swiper-pagination {margin: 40px auto 0; gap: 25px;}
    #main .swiper_prdlist .swiper .swiper-pagination span {width: 5px; height: 5px;}
    #main .swiper_prdlist .swiper .swiper-pagination .swiper-pagination-bullet-active {width: 15px; height: 15px;}
    /* sec4 */
    #main .sec4 {margin-top: 7.9%; padding-top: 7.9%;} 
    /* sec5 */
    #main .sec5 {margin-top: 7.9%;}
    /* sec6 */
    #main .sec6 {margin-top: 10.55%; gap: 4.02%;}
    #main .sec6 > div {width: calc(50% - 2.01%);}
    #main .sec6 .img_cont .textCont {top: 69px; left: 110px;}
    #main .sec6 .img_cont .textCont p {font-size: 14px; letter-spacing: -0px;}
    #main .sec6 .img_cont .textCont h3 {margin-top: 10px; font-size: 48px; letter-spacing: -2px;}
    #main .sec6 .prd_cont .inner {width: calc(100% - 6.32vw);}
    #main .sec6 .brand_tab {margin-top: 34px; gap: 13px;}
    #main .sec6 .brand_tab .arrow img {width: 20px;}
    #main .sec6 .brand_tab .swiper {width: 737px;}
    #main .sec6 .brand_tab .swiper-slide {border-radius: 100%; width: calc(100%/6 - 9px); padding-top: 14.7%; font-size: var(--font-size); letter-spacing: -1px; margin-right: 10px;}
    #main .sec6 .ct_cont {width: calc(100% + 6.32vw);}
    #main .sec6 .cate_tab {margin: 50px 0 40px; gap: 10px;}
    #main .sec6 .cate_tab li {border-radius: 30px; padding: 9px 20px 7px; font-size: calc(var(--font-size) + 2px); letter-spacing: -1px;}
    #main .sec6 .ct_cont .swiper-pagination {margin: 40px auto 0; gap: 25px;}
    #main .sec6 .ct_cont .swiper-pagination span {width: 5px; height: 5px;}
    #main .sec6 .ct_cont .swiper-pagination .swiper-pagination-bullet-active {width: 15px; height: 15px;}
    #main .sec6 .ct_cont > .prdList_layout > .swiper-slide {margin-right: 20px;}
    #main .sec6 .ct_cont .prdList_layout .wish img {width: 18px;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox {padding: 0 5px;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox img {width: 17px;}
    /* sec8 */
    #main .sec8 {margin-top: 10.55%; padding: 7.9% 0 97px;}
    /* sec9 */
    #main .sec9 {margin-top: 7.9%;}
    /* sec10 */
    #main .sec10 {margin-top: 7.9%; padding-bottom: 7.9%;}
    /* sec11 */
    #main .sec11 {margin-top: 7.9%;}
    #main .sec11 .tit h2 {gap: 20px; font-size: calc(var(--font-size) + 38px); letter-spacing: -2px;}
    #main .sec11 .tit h2 img {width: 44px;}
    #main .sec11 .tit p {margin-top: 10px; font-size: calc(var(--font-size) + 2px); letter-spacing: -0px;}
    #main .sec11 .tit a {gap: 8px; font-size: calc(var(--font-size) + 2px); letter-spacing: -0px;}
    #main .sec11 .tit a img {width: 16px;}
    #main .sec11 .insta_cont {margin-top: 40px;}
    #main .sec11 .insta_cont .swiper-slide {width: calc(100%/5 - 20px); margin-right: 25px;}
    #main .sec11 .insta_cont .arrow img {width: 20px;}
    #main .sec11 .insta_cont .swiper-button-prev {left: -30px;}
    #main .sec11 .insta_cont .swiper-button-next {right: -30px;}

}
@media screen and (max-width: 1280px){
    
    /********** main **********/
    /* common */
    /* title */
    .sec_tit {margin-bottom: 28px;}
    .sec_tit p {font-size: calc(var(--font-size) - 1px); letter-spacing: -0.28px;}
    .sec_tit h2 {margin-top: 7px; font-size: calc(var(--font-size) + 14px); letter-spacing: -1.41px;}
    .sec_tit a {gap: 7px; font-size: var(--font-size); letter-spacing: -0.28px;}
    .sec_tit a img {width: 11.29px;}
    /* prdList */
    #main .prdList_layout .icon span {font-size: calc(var(--font-size) - 2px); padding: 5px 8px 4px;}
    #main .prdList_layout .brand {font-size: var(--font-size);}
    #main .prdList_layout .name {font-size: var(--font-size); margin-top: 6px;}
    #main .prdList_layout .priceArea * {font-size: var(--font-size);}
    #main .prdList_layout .priceArea .prdDown_btn{font-size: calc(var(--font-size) - 2px); padding: 6px 4px; padding-left: 8px;}
    #main .prdList_layout .priceArea .prdDown_btn i{width: 12px; margin-top: -2px;}
    

    /* visual */
    #main .visual .info_cont {bottom:77px;}
    #main .visual .desc {font-size: var(--font-size);}
    #main .visual h2 {margin-top: 8px; font-size: 28px; letter-spacing: -0.71px;}
    #main .visual .info {margin-top: 8px; font-size: var(--font-size); letter-spacing: -0.28px;}
    #main .visual .bot {margin-top: 46px;}
    #main .visual .arrow {margin: 1px 0 0;}
    #main .visual .arrow img {width: 11.29px;}
    #main .visual .swiper-button-next {margin-right: 11px;}
    #main .visual .paginatio_cont {margin: 0 15px; width: 128.47px;}
    #main .visual .swiper-pagination-progressbar {width: 70.59px; height: 1.41px;}
    #main .visual .swiper-pagination-fraction span {font-size: calc(var(--font-size) - 2px); letter-spacing: -0.56px;}
    #main .visual .pause img {width: 17.65px;}
    /* sec1 */
    #main .sec1 .item a {padding: 30px 33px;}
    #main .sec1 .item p {font-size: calc(var(--font-size) - 2px); letter-spacing: -0.27px;}
    #main .sec1 .item h3 {margin-top: 7px; font-size: calc(var(--font-size) + 14px); letter-spacing: -0.67px;}
    #main .sec1 .item span {gap: 5px; margin-top: 15px; font-size: var(--font-size); letter-spacing: -0.27px;}
    #main .sec1 .item span img {width: 14px;}
    /* sec2 */
    #main .sec2 {margin-top: 6.1%;} 
    #main .sec2 .tit {font-size: calc(var(--font-size) + 8px); letter-spacing: -0.71px;}
    #main .sec2 .swiper {margin-top: 21px;}
    #main .sec2 .swiper .swiper-slide {width: calc(100%/7 - 9px); height: 91.76px; font-size: calc(var(--font-size) + 6px); letter-spacing: -0.71px; margin-right: 10px;}
    #main .sec2 .swiper .bot {margin: 28px auto 0; gap: 35px;}
    #main .sec2 .swiper .swiper-pagination {width: 317.65px; height: 3px;}
    #main .sec2 .swiper .arrow img {width: 14.12px;}
    /* sec3 & sec7*/
    #main .swiper_prdlist {margin-top: 9.35%;} 
    #main .swiper_prdlist .prdList_layout > .swiper-slide {width: calc(100%/4 - 11px); margin-right: 14px;}
    #main .swiper_prdlist .swiper .swiper-pagination {margin: 28px auto 0; gap: 18px;}
    #main .swiper_prdlist .swiper .swiper-pagination span {width: 3.53px; height: 3.53px;}
    #main .swiper_prdlist .swiper .swiper-pagination .swiper-pagination-bullet-active {width: 10.59px; height: 10.59px; border-width: 1.41px;}
    /* sec4 */
    #main .sec4 {margin-top: 7%; padding-top: 7%;} 
    /* sec5 */
    #main .sec5 {margin-top: 7%;}
    /* sec6 */
    #main .sec6 {margin-top: 8.75%; gap: 3.6%;}
    #main .sec6 > div {width: calc(50% - 1.8%);}
    #main .sec6 .img_cont .textCont {top: 49px; left: 40px;}
    #main .sec6 .img_cont .textCont p {font-size: 11px; letter-spacing: -0.28px;}
    #main .sec6 .img_cont .textCont h3 {margin-top: 7px; font-size: 34px; letter-spacing: -1.41px;}
    #main .sec6 .prd_cont .inner {width: calc(100% - 40px);}
    #main .sec6 .brand_tab {margin-top: 23px; gap: 8px;}
    #main .sec6 .brand_tab .arrow img {width: 14.12px;}
    #main .sec6 .brand_tab .swiper {width: 533px;}
    #main .sec6 .brand_tab .swiper-slide {width: calc(100%/7 - 7.5px); padding-top: 12.57%; font-size: calc(var(--font-size) - 1px); letter-spacing: -0.71px; margin-right: 8px;}
    #main .sec6 .ct_cont {width: calc(100% + 40px);}
    #main .sec6 .cate_tab {margin: 38px 0 35px; gap: 7px;}
    #main .sec6 .cate_tab li {border-radius: 21.18px; padding: 6px 14px 5px; font-size: var(--font-size); letter-spacing: -0.73px;}
    #main .sec6 .ct_cont .swiper-pagination {margin: 35px auto 0; gap: 18px;}
    #main .sec6 .ct_cont .swiper-pagination span {width: 3.53px; height: 3.53px;}
    #main .sec6 .ct_cont .swiper-pagination .swiper-pagination-bullet-active {width: 10.59px; height: 10.59px;}
    #main .sec6 .ct_cont > .prdList_layout > .swiper-slide {margin-right: 14px; width: calc(100%/3.2 - 14px);}
    #main .sec6 .ct_cont .prdList_layout .wish img {width: 12.71px;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox {padding: 0 5px;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox img {width: 11.76px;}
    /* sec7 */
    #main .sec7 {margin-top: 8.75%;}
    /* sec8 */
    #main .sec8 {margin-top: 8.75%; padding: 7% 0 7.6%;}
    /* sec9 */
    #main .sec9 {margin-top: 7%;}
    /* sec10 */
    #main .sec10 {margin-top: 7%; padding-bottom: 7%;}
    /* sec11 */
    #main .sec11 {margin-top: 7%;}
    #main .sec11 .tit h2 {gap: 14px; font-size: calc(var(--font-size) + 14px); letter-spacing: -1.41px;}
    #main .sec11 .tit h2 img {width: 31.06px;}
    #main .sec11 .tit p {margin-top: 7px; font-size: var(--font-size); letter-spacing: -0.28px;}
    #main .sec11 .tit a {gap: 6px; font-size: var(--font-size); letter-spacing: -0.28px;}
    #main .sec11 .tit a img {width: 11.29px;}
    #main .sec11 .insta_cont {margin-top: 28px;}
    #main .sec11 .insta_cont .swiper-slide {width: calc(100%/5 - 14px); margin-right: 18px;}
    #main .sec11 .insta_cont .arrow img {width: 14.12px;}
    #main .sec11 .insta_cont .swiper-button-prev {left: -26px;}
    #main .sec11 .insta_cont .swiper-button-next {right: -26px;}

}
@media screen and (max-width: 1200px){
    #main .sec6 .brand_tab .swiper-slide {width: calc(100%/6 - 7.5px); padding-top: 14.3%;}
    #main .sec6 .brand_tab .swiper-slide span {width: 90%;}
}
@media screen and (max-width: 1100px){
    #main .sec6 .brand_tab .swiper-slide {font-size: calc(var(--font-size) - 2px);}
    #main .prdList_layout .priceArea.flex-jb{flex-direction: column; align-items: flex-start; gap: 10px;}
    #main .prdList_layout .priceArea .prdDown_btn{font-size: calc(var(--font-size) - 1px); padding: 8px 4px; padding-left: 8px; width: 100%; justify-content: center; gap: 2px;}
    #main .prdList_layout .priceArea .prdDown_btn i{ margin-top: -3px;}
}
@media screen and (max-width: 900px){
    #main .sec6 .brand_tab .swiper-slide {width: calc(100%/5 - 7.5px); padding-top: 17.3%;}
}
@media screen and (max-width: 768px){
    
    /********** main **********/
    /* common */
    /* title */
    .sec_tit {margin: 0 0 30px;}
    .sec_tit p {font-size: var(--font-size); letter-spacing: -0.4px;}
    .sec_tit h2 {margin-top: 5px; font-size: calc(var(--font-size) + 16px); letter-spacing: -1px;}
    .sec_tit a {gap: 4px; font-size: var(--font-size); letter-spacing: -0.4px;}
    .sec_tit a img {width: 12px;}
    /* prdList */
    #main .prdList_layout li:nth-of-type(n + 7) {display: none;}
    #main .prdList_layout .icon span {font-size: calc(var(--font-size) - 2px); padding: 6px 8px 5px;}
    #main .prdList_layout .brand {font-size: var(--font-size);}
    #main .prdList_layout .name {font-size: 13px; margin-top: 3px;}
    #main .prdList_layout .priceArea * {font-size: var(--font-size);}
    #main .prdList_layout .swiper-pagination.mob {display: flex !important; margin: 0; position: absolute; left: 0; bottom: 0; width: 100% !important; gap: 0 !important; z-index: 1;}
    #main .prdList_layout .swiper-pagination.mob span {border-radius: 0; height: 3px !important; width: 100% !important; background: #00000020; margin: 0 !important; opacity: 1 !important;}
    #main .prdList_layout .swiper-pagination.mob .swiper-pagination-bullet-active {border: 0; background: #000;}
    #main .prdList_layout .thumb.hasProgress .swiper-pagination.mob {display: none !important;}

    /* visual */
    #main .visual .info_cont {bottom: 70px;}
    #main .visual .desc {font-size: var(--font-size);}
    #main .visual h2 {margin-top: 12px; font-size: calc(var(--font-size) + 14px); letter-spacing: -1px;}
    #main .visual .info {margin-top: 12px; font-size: calc(var(--font-size) + 2px); letter-spacing: -0.4px;}
    #main .visual .bot {margin-top: 78px;}
    #main .visual .arrow {margin: 1px 0 0;}
    #main .visual .arrow img {width: 16px;}
    #main .visual .swiper-button-next {margin-right: 15px;}
    #main .visual .paginatio_cont {margin: 0 15px; width: 182px;}
    #main .visual .swiper-pagination-progressbar {width: 100px; height: 2px;}
    #main .visual .swiper-pagination-fraction span {font-size: calc(var(--font-size) + 2px); letter-spacing: -0.8px;}
    #main .visual .pause img {width: 25px;}
    /* sec1 */
    #main .sec1 .item a {padding: 20px 0; text-align: center;}
    #main .sec1 .item p {font-size: calc(var(--font-size) - 2px); letter-spacing: -0.4px;}
    #main .sec1 .item p em {display: none;}
    #main .sec1 .item h3 {margin-top: 5px; font-size: calc(var(--font-size) + 5px); letter-spacing: -0.4px;}
    #main .sec1 .item span {display: none;}
    /* sec2 */
    #main .sec2 {margin-top: 15.63vw;}
    #main .sec2 .tit {font-size: calc(var(--font-size) + 4px); letter-spacing: -1px;}
    #main .sec2 .sec_tit {width: calc(100% - 40px);}
    #main .sec2 .swiper {margin-top: 10px;}
    #main .sec2 .swiper .swiper-slide {width: calc(100%/4 - 4px); height: 50px; font-size: calc(var(--font-size) + 2px); letter-spacing: -0.54px; margin-right: 5px; padding: 0 10px;}
    #main .sec2 .swiper .bot {margin: 10px auto 0; gap: 30px;}
    #main .sec2 .swiper .swiper-pagination {width: 170px; height: 2px;}
    #main .sec2 .swiper .arrow img {width: 16px;}
    /* sec3 & sec7*/
    #main .sec3 {width: calc(100% + 40px);}
    #main .sec3 .sec_tit {margin: 0 0 30px; width: calc(100% - 40px);}
    #main .sec3 .swiper .swiper-pagination {width: calc(100% - 40px);}
    #main .swiper_prdlist {margin-top: 15.63vw;} 
    #main .swiper_prdlist .prdList_layout > .swiper-slide {width: calc(100%/2.3 - 10px); margin-right: 10px;}
    #main .swiper_prdlist .swiper .swiper-pagination {margin: 25px 0 0; gap: 15px;}
    #main .swiper_prdlist .swiper .swiper-pagination span {width: 5px; height: 5px;}
    #main .swiper_prdlist .swiper .swiper-pagination .swiper-pagination-bullet-active {width: 13px; height: 13px; border-width: 2px;}
    /* sec4 */
    #main .sec4 {margin-top: 15.63vw; padding-top: 15.63vw;} 
    /* sec5 */
    #main .sec5 {margin-top: 15.63vw;}
    /* sec6 */
    #main .sec6 {margin-top: 15.63vw; gap: 40px; flex-direction: column;}
    #main .sec6 > div {width: 100%;}
    #main .sec6 .img_cont .textCont {top: 36px; left: 20px;}
    #main .sec6 .img_cont .textCont p {font-size: 12px; letter-spacing: -0.4px;}
    #main .sec6 .img_cont .textCont h3 {margin-top: 10px; font-size: 28px; letter-spacing: -1px;}
    #main .sec6 .prd_cont .inner {width: 100%;}
    #main .sec6 .sec_tit {width: calc(100% - (20px*2)); margin: 0 auto -10px;}
    #main .sec6 .brand_tab {margin: 0 auto; gap: 5px; width: calc(100% - (20px*2));}
    #main .sec6 .brand_tab .arrow img {width: 20px;}
    #main .sec6 .brand_tab .swiper {width: calc(100% - 50px);}
    #main .sec6 .brand_tab .swiper-slide {width: calc(100%/4 - 6px); padding-top: 22.3%; font-size: var(--font-size); letter-spacing: -0.74px; margin-right: 8px;}
    #main .sec6 .cate_tab {margin: 20px auto; gap: 8px; width: calc(100% - (20px*2)); overflow: hidden; overflow-x: scroll;}
    #main .sec6 .cate_tab li {border-radius: 30px; padding: 4px 16px; font-size: calc(var(--font-size) + 2px); letter-spacing: -1.04px;}
    #main .sec6 .ct_cont {margin-left: 20px;}
    #main .sec6 .ct_cont .swiper-pagination {margin: 20px 0 0; gap: 15px; width: calc(100% - 80px);}
    #main .sec6 .ct_cont .swiper-pagination span {width: 5px; height: 5px;}
    #main .sec6 .ct_cont .swiper-pagination .swiper-pagination-bullet-active {width: 13px; height: 13px;}
    #main .sec6 .ct_cont > .prdList_layout > .swiper-slide {margin-right: 8px; width: calc(100%/3.3 - 8px);}
    #main .sec6 .ct_cont .prdList_layout .wish img {width: 14px;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox {display: none;}
    #main .sec6 .ct_cont .prdList_layout .arrowBox
    /* sec7 */
    #main .sec7 {margin-top: 15.63vw;}
    /* sec8 */
    #main .sec8 {margin-top: 15.63vw; padding: 20.83vw 0;}
    #main .sec8 .inner {width: 100%;}
    #main .sec8 .sec_tit {width: calc(100% - 20px*2); margin: 0 auto 30px;}
    #main .sec8 .swiper_dep1 {margin-left: 20px;}
    #main .sec8 .swiper .swiper-pagination {width: calc(100% - 20px);}
    /* sec9 */
    #main .sec9 {margin-top: 15.63vw;}
    /* sec10 */
    #main .sec10 {margin-top: 15.63vw; padding-bottom: 15.63vw;}
    #main .sec10 .swiper_dep1 {width: calc(100% + 20px);}
    #main .sec10 .swiper_dep1 > .swiper-pagination {width: calc(100% - 20px);}
    /* sec11 */
    #main .sec11 {margin-top: 15.63vw;}
    #main .sec11 .tit {display: block; text-align: center;}
    #main .sec11 .tit h2 {gap: 10px; font-size: calc(var(--font-size) + 16px); letter-spacing: -1px; justify-content: center;}
    #main .sec11 .tit h2 img {width: 32px;}
    #main .sec11 .tit p {margin-top: 10px; font-size: var(--font-size); letter-spacing: -0.4px;}
    #main .sec11 .tit a {gap: 4px; font-size: var(--font-size); letter-spacing: -0.4px; position: relative; right: auto; top: auto; transform: none; justify-content: flex-end; margin-top: 20px;}
    #main .sec11 .tit a img {width: 12px;}
    #main .sec11 .insta_cont {margin-top: 20px; padding: 0 17px;}
    #main .sec11 .insta_cont .swiper-slide {width: calc(100%/3 - 5px); margin-right: 5px;}
    #main .sec11 .insta_cont .arrow img {width: 16.05px;}
    #main .sec11 .insta_cont .swiper-button-prev {left: -2px;}
    #main .sec11 .insta_cont .swiper-button-next {right: -2px;}

}