*{font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; margin: 0; padding: 0; letter-spacing: -.3px;}
body{overflow-x: hidden;}
li{list-style: none;}
a{text-decoration: none;}
table{border-spacing: 0px; border-style: none; padding: 0px;}

/* 포커스 아웃라인 리셋 */
input:focus{outline: none!important;}
button:focus{outline: none!important;}
a:focus{outline: none!important;}
area:focus{outline: none!important;}

/* 헤드 */
.head_v2{width: 100%;}
.head_v2 *{transition: ease-in all 0.3s;}
.head_in{max-width: 1360px; position: relative; height: 110px; margin: 0 auto;}
.head_in .logo{position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}
.head_in .logo a{display: block;}
.head_in .search{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.head_in .search form{display: block; width: 400px; height: 60px; border-radius: 30px; border: 1px solid #08bdfa; position: relative;}
.head_in .search form input{width: calc(100% - 90px); border: none; font-size: 15px; color: #999; position: absolute; top: 50%; left: 30px; transform: translate(0,-50%);}
.head_in .search form button{position: absolute; top: 50%; right: 10px; transform: translate(0,-50%); border: none; background: none;}
.head_in .head_li{position: absolute; top: 50%; right: 0; transform: translate(0,-50%);}
.head_in .head_li ul{width: auto;}
.head_in .head_li ul::after{display: block; content: ''; clear: both;}
.head_in .head_li ul li{float: left; width: 90px; height: 40px; border-radius: 20px; background: #f3f4f6; margin-right: 10px;}
.head_in .head_li ul li:last-of-type{margin-right: 0;}
.head_in .head_li ul li a{width: 100%; height: 100%; line-height: 40px; color: #777; font-size: 15px; display: block; text-align: center;}
.head_in .head_li ul li a span{display: inline-block; color: #08bdfa; font-weight: 600; margin-left: 3px; vertical-align: middle;}

.head_menu{width: 100%; border-top: 1px solid #e9f1f4; border-bottom: 1px solid #e9f1f4; background: #f7fdff;}
.head_menu ul{max-width: 1360px; margin: 0 auto; border-right: 1px solid #e9f1f4; border-left: 1px solid #e9f1f4; height: 55px;}
.head_menu ul::after{display: block; content: ''; clear: both;}
.head_menu ul li{width: calc(100% / 6); border-right: 1px solid #e9f1f4; height: 100%; float: left;}
.head_menu ul li:last-of-type{margin-right: 0;}
.head_menu ul li a{display: block; width: 100%; height: 100%; font-size: 16px; color: #282828; text-align: center; line-height: 55px;}

.wrap{width: 100%;}
.wrap_in{max-width: 1360px; margin: 0 auto;}

/* 퀵메뉴 */
.quick{position: fixed; top: 0; right: 0; height: 100vh; background: #fff; border-left: 1px solid #e9f1f4; z-index: 99; transition: all 0.5s;}
.quick .arrow_btn{cursor: pointer; position: absolute; top: 50%; left: -29px; transform: translateY(-50%); width: 30px; height: 50px; border-radius: 60px 0 0 60px; border: 1px solid #e9f1f4; border-right: none; background: #fff; z-index: -1;}
.quick .arrow_btn img{max-width: 60%; opacity: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%);}
.quick .quick_list{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 70px; height: 100%;}
.quick .quick_list li{position: relative;}
.quick .quick_list li::before{content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: #e9f1f4;}
.quick .quick_list li:first-child::before{display: none;}
.quick .quick_list li+li{margin-top: 60px;}
.quick .quick_list li a{display: block;}
.quick .quick_list img{max-width: 60%; display: block; margin: auto; transition: 0.4s;}
.quick .quick_list li:nth-child(2) img{max-width: 35%;}
.quick .quick_list li:nth-child(3) img{max-width: 35%;}
.quick .quick_list li:nth-child(4) img{max-width: 35%;}
.quick .quick_list p{text-align: center; font-size: 12px; color: #777; font-weight: 500; margin-top: 10px;}
.quick .top_btn{position: absolute; bottom: 0; left: 0; text-align: center; color: #fff; background: #333; width: 100%; height: 30px; font-size: 11px; line-height: 33px; font-weight: 600; cursor: pointer;}

.quick.off{right: -70px;}
.quick.off .arrow_btn img{transform: translate(-35%, -50%) rotate(180deg);}

.quick .quick_list li:hover img{opacity: 0.5;}
.quick .quick_list li:hover p{color: #08bdfa;}

/* 메인 슬라이드 */
.swiper.mySwiper{position: relative; padding: 40px 0;}
.mySwiper .swiper-slide{max-width: 1360px; border-radius: 100px; overflow: hidden;}
.mySwiper .swiper-slide-active{box-shadow: 0 0 20px rgba(0,0,0,0.15);}
.mySwiper .swiper-slide a{display: block; width: 100%; height: 100%;}
.mySwiper .swiper-slide img{width: 100%;}

.mySwiper .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 60px!important;}
.mySwiper .swiper-pagination-bullet{width: 15px!important; height: 15px!important; background: #ededed!important;}
.mySwiper .swiper-pagination-bullet-active{background: #08bdfa!important;}

.mySwiper .swiper-button-prev, .swiper-button-next{width: 20px!important; height: 36px!important; background-size: 20px 36px!important;}
.mySwiper .swiper-button-prev{left: 12%!important; background-image: url(/img/main/de_prev.png)!important;}
.mySwiper .swiper-button-next{right: 12%!important; background-image: url(/img/main/de_next.png)!important;}

/* 브랜드 슬라이드 */
.brand{width: 100%; margin: 100px 0 120px;}
.brand *{transition: ease-in all 0.3s;}
.brand_in{max-width: 1520px; margin: 0 auto; overflow: hidden; position: relative;}

.brand_tt{text-align: center; position: relative; max-width: 1360px; margin: 0 auto 50px;}
.brand_tt h1{font-size: 46px; font-weight: 700; position: relative; display: inline-block;}
.brand_tt h1::after{display: block; content: ''; position: absolute; width: 20px; height: 11px; background: url(/img/main/tt_icon.png) no-repeat; right: -20px; top: 0;}
.brand_tt h1 span{color: #0084b0;}
.brand_tt a{position: absolute; bottom: 0; right: 0; font-size: 16px; font-weight: 600; color: #999;}

.subSwiper{position: relative; width: 100%; max-width: 1360px; margin: 0 auto; overflow: hidden; padding: 0 10px 10px;}

.br_in{border: 1px solid #ccc; border-radius: 30px; text-align: center; padding: 0 30px;}
.br_logo{width: 100%; height: 170px; position: relative; border-bottom: 1px solid #08bdfa; display: inline-block; overflow: hidden}
.br_logo img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 80%;}
.br_name{padding: 30px 0;}
.br_name p{font-size: 19px; font-weight: 600;}

.brand_in .swiper-button-next, .brand_in .swiper-button-prev{width: 32px!important; height: 32px!important; background-size: 32px 32px!important; margin-top: 30px!important;}
.brand_in .swiper-button-prev{left: 0!important; background-image: url(/img/main/sub_de_prev.png)!important;}
.brand_in .swiper-button-next{right: 0!important; background-image: url(/img/main/sub_de_next.png)!important;}

/* banner */
.banner{width: 100%;}
.banner ul{max-width: 1360px; margin: 0 auto;}
.banner ul li{width: calc(100% / 2 - 25px); display: inline-block;}
.banner ul li:first-of-type{margin-right: 46px;}
.banner ul li a{display: block; width: 100%;}
.banner ul li img{width: 100%;}

/* product */
.product{width: 100%; height: auto; position: relative; padding-top: 110px;}
.product *{transition: ease-in all 0.3s;}
.product_in{max-width: 1360px; margin: 0 auto; position: relative; z-index: 10;}
.product_tt{display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px;}
.product_tt h1{font-size: 46px; font-weight: 700; position: relative; display: inline-block;}
.product_tt h1::after{display: block; content: ''; position: absolute; width: 20px; height: 11px; background: url(/img/main/tt_icon.png) no-repeat; right: -20px; top: 0;}
.product_tt h1 span{color: #0084b0;}
.product_tt .tabs{padding: 10px; border: 1px solid #08bdfa; border-radius: 30px; background: #fff;}
.product_tt .tabs::after{display: block; content: ''; clear: both;}
.product_tt .tabs li{float: left;}
.product_tt .tabs li a{width: 100px; height: 40px; line-height: 40px; border-radius: 20px; display: block; border: 1px solid transparent; font-size: 16px; font-weight: 600; text-align: center;}

.product_tt .tabs li.active a{background: #08bdfa; color: #fff;}

.tab_content{width: 100%;}
.tab_content ul{width: 100%; display: flex; flex-wrap: wrap;}
.tab_content ul li{width: calc(100% / 5 - 24px); margin-right: 30px; margin-bottom: 80px;}
.tab_content ul li:nth-of-type(5n){margin-right: 0;}
.tab_content ul li:nth-of-type(16), .tab_content ul li:nth-of-type(17), .tab_content ul li:nth-of-type(18), .tab_content ul li:nth-of-type(19), .tab_content ul li:nth-of-type(20){margin-bottom: 0;}
.tab_content ul li a{width: 100%; height: auto; display: block;}

.pro_img{width: 100%; padding-top: 100%; border: 1px solid #ccc; border-radius: 30px; position: relative; margin-bottom: 30px; background: #fff; overflow: hidden;}
.pro_img img{max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1);}
.pro_name span{color: #08bdfa; font-size: 18px; font-weight: 600; margin-bottom: 12px; display: none;}
.pro_name p{font-size: 16px; color: #282828; word-break: keep-all;}

.more_btn{width: 100%; text-align: center; padding: 80px 0 120px;}
.more_btn a{display: inline-block; width: 230px; height: 80px; border: 1px solid #08bdfa; color: #08bdfa; text-align: center; line-height: 80px; font-size: 20px; font-weight: 600; border-radius: 40px;}

.bg_cc{width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}

.bg_cc .cc_01{position: absolute; top: 55px; right: 192px;}
.bg_cc .cc_02{position: absolute; top: 375px; left: 120px;}
.bg_cc .cc_03{position: absolute; top: 1000px; left: 750px;}
.bg_cc .cc_04{position: absolute; top: 860px; right: -160px;}
.bg_cc .cc_05{position: absolute; bottom: -135px; left: 500px;}

/* shop by brand */
.sh_brand{width: 100%; padding-top: 130px; background: url(/img/main/sh_bg.jpg) no-repeat; background-size: contain;}
.sh_brand *{transition: ease-in all 0.3s;}
.sh_in{max-width: 1720px; margin: 0 auto;}

.sh_in .brand_tt{max-width: 1720px;}
.sh_list{width: 100%;}
.sh_list ul{display: flex; flex-wrap: wrap;}
.sh_list ul li{width: calc(100% / 7 - 26px); margin-right: 30px; border: 1px solid #ccc; border-radius: 30px; background: #fff;}
.sh_list ul li:nth-of-type(1), .sh_list ul li:nth-of-type(2), .sh_list ul li:nth-of-type(3), .sh_list ul li:nth-of-type(4), .sh_list ul li:nth-of-type(5), .sh_list ul li:nth-of-type(6), .sh_list ul li:nth-of-type(7){margin-bottom: 30px;}
.sh_list ul li:nth-of-type(7n){margin-right: 0;}
.sh_list ul li a{display: block; padding: 0 25px; width: 100%;}

.br_name{text-align: center;}

.cart-layer{opacity: 0;}

/* 하단 */
.ft_v2{width: 100%; padding: 50px 0; background: #f5f5f5; margin-top: 150px;}
.ft_in{max-width: 1360px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.ft_info{margin-bottom: 10px;}
.ft_info:last-of-type{margin-bottom: 0;}
.ft_info p{font-size: 16px; color: #777; display: inline-block;}
.ft_info p span{font-weight: 600;}

.mg_r{margin-right: 10px;}
.copy{margin-top: 50px;}
.copy p{color: #0084b0; font-size: 16px;}
.copy p a{color: #0084b0; font-size: 16px;}

/* top btn */
#top_btn{position: fixed; bottom:20px; right:40px; left: auto; width:50px; height:50px; line-height:46px; color:#fff; text-align:center; font-size:15px; z-index: 999; background:#08bdfa; border: none; border-radius: 30px;}
#top_btn:hover {background:#0084b0;color:#fff; border-radius: none; box-shadow: 0 0 10px rgba(0,0,0,0.2);}


/* 마우스 오버 스타일 (모바일 방지) */
@media screen and (min-width:1000px) and (max-width:3000px){
    .head_in .head_li ul li:hover{background: #08bdfa; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
    .head_in .head_li ul li:hover a{color: #fff;}
    .head_in .head_li ul li:hover a span{color: #fff;}
    .head_menu ul li:hover a{color: #08bdfa;}
    
    .swiper-button-prev:hover{left: 12%!important; background-image: url(/img/main/ho_prev.png)!important;}
    .swiper-button-next:hover{right: 12%!important; background-image: url(/img/main/ho_next.png)!important;}
    
    .brand_tt a:hover{color: #0084b0;}
    
    .br_in:hover{border: 1px solid #08bdfa; box-shadow: 0 0 10px rgba(0,0,0,0.15);}
    .br_in:hover p{color: #08bdfa;}
    .brand_in .swiper-button-prev:hover{left: 0!important; background-image: url(/img/main/sub_ho_prev.png)!important;}
    .brand_in .swiper-button-next:hover{right: 0!important; background-image: url(/img/main/sub_ho_next.png)!important;}
    
    .tab_content ul li:hover .pro_img{border: 1px solid #08bdfa; box-shadow: 0 0 30px rgba(0,0,0,0.2);}
    
    .more_btn a:hover{background: #08bdfa; color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.15);}
    
    .sh_list ul li:hover{border: 1px solid #08bdfa; box-shadow: 0 0 30px rgba(0,0,0,0.2);}

}