@charset "utf-8";

/* PC해상도일때 적용되는 서식 */

@media screen and (min-width:1025px) {
.h_top, .gnb > ul, .f_txt { width: 1200px; margin: 0px auto; } 

.x_btn, .t_btn { display:none; } 

header { width: 100%; height: 170px; position: absolute; z-index: 1000; background: #fff; } 
.h_top { width: 100%; position: relative; } 
.h_top h1 { position: absolute; left: 50%; top: 45px; transform: translateX(-50%); } 
.h_top h1 img { width: 210px; text-align: center; } 
.t_btn { left:auto; right:5px; top:110px; font-size:2rem; } 
.x_btn { font-size: 2rem; } 

.h_top > .lnb { position: absolute; right: 0px; top: 50px; width: 300px; } 
.lnb a { text-decoration: none; color: #000; padding-left: 10px; } 
 .o_search { color: #FF5006; font-size: 24px;} 
 
.lnb i.fa-regular { display: none; } 

.h_top > .lnb > ul { flex-wrap: nowrap; } 
.h_top > .lnb > ul >li { background:none; } 

/* 검색모달창 */
.search_modal { background-color: rgba(0,0,0,.7); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: 0.35s; top:-1050px} 
.search_modal.active { top: 0px; } 
.c_search { position: absolute; right: 30%; top: 30%; color: #fff; font-size: 2rem; cursor: pointer; } 
.search { width: 500px; } 
.search > .field { display: flex; position: relative; } 
.search > .field:before { content: '\e97a'; font-family:"xeicon"; position: absolute; color: #000; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.5em; } 
.search .field input[type=search],
.search .field input[type=bottom] { padding: 15px; border: none; outline: none; } 
 
.search .field input[type=search] { flex: 5; padding-left: 50px; } 

.search .field input[type=button] { flex: 1; background-color: #000; color: #fff; opacity: 0.9; cursor: pointer; } 
.search .field input[type=button]:hover { opacity: 1; } 
.search .field input[type=search]::placeholder { font-style: italic; } 
.search .field input[type=search]:focus::placeholder {opacity: 0;transition: 0.3s; } 
.hashtag { padding-top: 10px; font-size: 15px; color: #fff; display: none; } 


.h_bottom { width: 100%; height: 50px; position: absolute; top: 120px; left: 0px; overflow: hidden; transition: 0.5s; background: rgba(255,255,255,.8); display: block !important;}
.h_bottom:hover { height: 400px; } 

.gnb1 { position: static; width: 100%; height: 60px; left: 0px; top: 0px; background: rgba(255,255,255,.8); border-top: 2px solid #ccc;}
.gnb2{display:none;} 
.gnb1 a { text-decoration: none; color: #000;} 
.gnb1 > ul { transform: translateY(10px); padding: 0px 20px; line-height: 32px; display: flex; justify-content: center;} 
.gnb1 > ul > li { padding: 0px 10px; border:none; position:relative; width: 125px;}
.gnb1 > ul > li > a{width: 100%;}
.gnb1 > ul > li:first-child::after, .gnb > ul > li:last-child::after {display: block;content: "";width: 500px;height: 400px;position: absolute;background:rgba(255,255,255,.8);}
.gnb1 > ul > li:first-child::after { left: -400px; } 
.gnb1 > ul > li:last-child::after { left: 5px; } 

.gnb1 > ul > li:nth-child(5)::after, .gnb > ul > li:nth-child(6)::after, .gnb > ul > li:nth-child(7)::after {display: block;content: "";width: 150px;height: 400px;background: rgba(255,255,255,.8);position: absolute;left: 1px; } 

.h_bottom:hover { .sub { display: block; }} 

.sub { display:block; position:absolute; left:0px; top:50px; width:100%; height:400px; padding:10px 0px; z-index: 9000; background: rgba(255,255,255,.8); } 

.sub a { padding: 0px 7%; line-height:180%; font-size: 0.95rem; } 

.sub a:hover, .gnb a:hover, .lnb a:hover { font-weight: bold; color: #FF5006; } 

/* 메인영역 */
main { line-height: 50px; } 

section h2 { font-size: 2.6rem; font-family: 'short stack';} 
.m_banner { background: #FFF7B5; width: 100%; overflow: hidden; } 
.m_slide { height: 70vh; } 
.m_txt { font-size: 4rem; padding-left: 6%; transform: translateY(300px); position: absolute; } 
#more { position: absolute; top: 490px; left: 20%; padding: 10px; background-color: #fff; border: 1px solid #333; font-weight: bold; } 
#more:hover { background-color: #000; color: #fff; cursor: pointer; } 
.swiper-wrapper { display: flex; width: 100%; overflow:hidden; position: relative; } 
.swiper-wrapper .fa-solid { z-index: 10; font-size: 2rem; position: absolute; top: 570px; color: #333; cursor: pointer; } 
.fa-backward-step { right: 16%; } 
.fa-forward-step { right: 12%; } 
.swiper-slide { top: 130px; height: 600px; left: 630px; width: 100%; overflow:hidden; position: relative; } 
.slide { position: absolute; /* top: 0px; left: 0px; */
 display: flex; width:1600px; } 
.slide > li { width: 200px; } 
.slide img { width: 100%; } 
.ctrl { width: 15px; height: 15px; display: inline-block; border-radius: 50%; transform: translate(230px, 450px); background: #fff; } 
.act { background: #FF5006 !important; } 
.ctrl3_all { display: none; } 


section{padding-top: 50px;}
.new, .sale, .free, .event { padding: 100px 0px 100px 0px; } 
.new h2, .sale h2, .free h2, .event h2 { padding-bottom: 40px; } 
.new { padding-top: 80px; } 
.new1 img{height: 400px;}
.new2 { display: none; } 


.new, .free { text-align: center; } 
.free2 { display: none; } 
.new img { width: 1200px; } 
.sale { width: 100%; text-align: center; background: #DAF6FF; } 
.sale_all{ width: 1200px; margin: 0px auto; display: grid; grid-gap:20px; grid-template-rows: 350px 350px; grid-template-areas:
"p_01 p_02 p_03"
"p_04 p_05 p_06"
; } 
.sale figure img { width: 410px; height: 230px; display: block; transition: 0.2s; } 
.sale figure img:hover { filter: brightness(1.1); transform: scale(1.01); } 
.sale figure a:hover{text-decoration: none;}
.sale .p_01 { grid-area: p_01;} 
.sale .p_02 { grid-area: p_02;} 
.sale .p_03 { grid-area: p_03;} 
.sale .p_04 { grid-area: p_04;} 
.sale .p_05 { grid-area: p_05;} 
.sale .p_06 { grid-area: p_06;} 

.sale figcaption{padding: 15px 10px; text-align: left; line-height: 30px; background-color: #fff;}
.sale figcaption p:first-child{font-weight: bold; font-size: 20px;}
.sale figcaption p:nth-child(2){font-weight: bold;}
.sale figcaption p:nth-child(3){font-weight: bold; font-size: 14px; color: #a3a3a3;}
.point{color: rgb(255, 217, 3); font-size: 20px;}

.none { display: none; } 
.event { width: 100%; text-align: center; background: #DCFFDD; } 
.event_product { display: flex; justify-content: space-around; width: 1200px; margin: 0px auto; } 

.event img { width: 350px; height: 400px; padding: 20px; } 
.event img:hover { filter: brightness(1.05); } 
.event_imgs { display: flex; justify-content: center; } 
/* 탑버튼 */
#top { background: #000; border-radius: 50%; color: #fff; font-size: 1.3rem; padding: 10px; position: fixed; bottom: 40px; right: 40px; text-decoration: none; width: 40px; height: 40px; text-align: center; line-height: 40px; z-index: 9999; opacity: 0; } 
.act2{
    opacity: 1 !important;
    visibility: visible !important;
}

/* 푸터서식 */
footer { background: #333; color: #fff; font-size: 0.7rem; height: 210px; padding: 20px 0px; line-height: 20px; position: relative; } 
#b_logo { position: absolute; left: 5%; } 
#b_logo img { width: 60%;background-color: #fff;border-radius: 5px;padding: 10px; } 
footer a { color: #fff; } 
.f_bold { font-weight: bold; } 
.f_txt { padding-top: 70px; left: 5%; } 
.sns { position: absolute; right: 370px; bottom: 30px; } 
#insta, #youtube { font-size: 2rem; } 
#kakao img { width: 25px; } 
#insta, #youtube, #kakao { padding-left: 20px; } 
}

@media screen and (min-width:1025px) and (max-width:1200px) {
/* 세일 */
.sale_all{width: 100%}
.sale figure img {width: 100%;}
/* 피부상담 */
.free .free1{width: 100%;}
/* 이벤트 */
.event_product{width: 100%;}
.event img {width: 90%; padding-right: 10%;}
}