/* BASIC css start */
/***********¸ÞÀκñÁê¾ó À̹ÌÁö º¯°æ**************/

#content{
    width:100%; 
    margin:0 auto;
    padding-bottom:0px;
    text-align:left;
}
/* ********************************************************************************************************************************* */


/*section common*/
.section{
    position:relative;
    margin-top:40px;
}
.section > .inner{
    position:relative;
    width:100%;
    max-width:85%;
    margin:0 auto;
}
.section > .inner.full{
    width:100%;
}
.section-title{
    line-height:30px;
    font-size:11px;
    font-weight:normal;
    color:#333333;
    letter-spacing:1px;
    text-align:left;
    text-decoration:underline;
    margin-bottom:18px;
    padding-left:15px;
}
.more-btn-wrap{
    text-align:center;
    margin-top:7px;
    margin-bottom:17px;
}
.more-btn-wrap a.more-btn{
    display:inline-block;
    width:204px;
    height:49px;
    line-height:49px;
    text-align:center;
    border-top:1px solid #e7e3de;
    border-bottom:1px solid #e7e3de;
    font-size:13px;
    font-weight:normal;
    color:#222222;
    letter-spacing:1px;
    transition:all 0.3s ease-in-out;
    text-transform: none;
}
.more-btn-wrap a.more-btn:hover{
    border-top:1px solid #222;
    border-bottom:1px solid #222;
}

/* section-main-visual */
.section-main-visual{
    left:0; right:0; margin-left:auto; margin-right:auto;
    position:relative;    
    width:100%;
    max-width:60%;
    font-size:0px;
    height:auto;
}
.section-main-visual > .swiper-container > ul {
    font-size:0px;
}
.section-main-visual > .swiper-container > ul > li a {
    display:block;
}
.section-main-visual > .swiper-container > ul > li a img{
    width:100%;
    vertical-align:top;
    <!--border:1px solid #FF164F;-->
}
.section-main-visual .txtBox {position:absolute;color:#fff;left:0%;top:90%;width:100%;}
.section-main-visual .txtBox .tit {position:relative;left:0px;  font-weight:normal; font-size:20px; line-height:1.2; margin-bottom:7px; }
.section-main-visual .txtBox .txt {position:relative;left:0px;  font-weight:normal; font-size:18px; line-height:1.2; text-decoration:underline; }
.section-main-visual .txtbox .active{background:linear-gradient(0deg, rgba(0, 0, 0, 0) 48.09%, rgba(0,0,0,0.5) 81.39%);}
.section-main-visual .txtbox .active{opacity:1; top:55px;}

/*¸ÞÀÎ ºñÁê¾ó ÄÁÆ®·Ñ*/
.section-main-visual .mv-pn{
    position:absolute;
    top:50%;
    width:30px;
    height:37px;
    margin-top:-18.5px;
    z-index:2;
    cursor:pointer;
}
.section-main-visual .mv-pn.mv-pn-prev{
    left:45px;
    background:url('/design/saerashop/2021_renew/pc/mv_pn_prev.png')no-repeat center center;
}
.section-main-visual .mv-pn.mv-pn-next{
    right:45px;
    background:url('/design/saerashop/2021_renew/pc/mv_pn_next.png')no-repeat center center;
}

/*¸ÞÀÎ ºñÁê¾ó ÆäÀÌÁö³×À̼Ç*/
.section-main-visual .swiper-pagination{
    z-index:2;   
    left:0;
    bottom:10px;
    width:100%;
}
.section-main-visual .swiper-pagination-bullet{
    opacity:1 !important;
    transition:0.3s all ease-in-out;
}
.section-main-visual > .swiper-pagination-bullets .swiper-pagination-bullet{
    width:4px !important;
    height:4px !important;
    border-radius:2px !important;
    background:#a8a8a8 !important;
    margin:0 5px !important;
}
.section-main-visual > .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
    background:#fff !important;
    color: #fff !important;
    width:30px !important;
}
.main_banner{position:relative;}
.main_banner li .img{font-size:0;}
.main_banner li .img img{width:100%;}
.main_banner li .txt{position:absolute; background:rgba(255,255,255,0.3); top:0; left:0; width:100%; height:100%; transition:all 0.3s;}
.main_banner li .txt .txt_all{position:absolute; top:50; left:2%; width:100%; padding:0 40px; box-sizing:border-box; transition:all 0.5s; opacity:0; font-family:'Ubuntu', 'NanumbarumGothic', sans-serif;}
.main_banner li .txt h6{font-size:15px; font-family:'Ubuntu', 'NanumbarumGothic', sans-serif; padding-bottom:7px; font-weight:normal; color:#fff; letter-spacing:1px;}
.main_banner li .txt h1{font-size:40px; font-family:'Ubuntu', 'NanumbarumGothic', sans-serif; font-weight:500; color:#fff; letter-spacing:1px; line-height:1.3;}
.main_banner li .txt p{font-size:15px; font-family:'Ubuntu', 'NanumbarumGothic', sans-serif; color:#fff; letter-spacing:1px; padding-top:20px;}
.main_banner li.swiper-slide-active .txt{background:linear-gradient(0deg, rgba(0, 0, 0, 0) 48.09%, rgba(0,0,0,0.5) 81.39%);}
.main_banner li.swiper-slide-active .txt .txt_all{opacity:1; top:55px;}
.main_banner .swiper-arrow{width:80px; height:80px; top:50%; margin-top:-40px; opacity:1;}
.main_banner .swiper-button-prev{left:40px; background:url('/design/saerashop/2021_renew/pc/mv_pn_prev.png')no-repeat 50% 50%;}
.main_banner .swiper-button-next{right:40px; background:url('/design/saerashop/2021_renew/pc/mv_pn_next.png')no-repeat 50% 50%;}



/*section-01 HOT DEAL*/

.swiper-pn{
    position:absolute;
    top:50%;
    width:34px;
    height:47px;
    margin-top:-28.5px;
    z-index:2;
    cursor:pointer;
}
.swiper-pn-prev{
    left:-54px;
    background:url('/design/saerashop/2021_renew/pc/swiper_pn_prev.png')no-repeat center center;
}
.swiper-pn-next{
    right:-54px;
    background:url('/design/saerashop/2021_renew/pc/swiper_pn_next.png')no-repeat center center;
}

/*section-02*/
.swiper-pn-prev2{
    transform: rotate(180deg);
    top:-11px;
    right:100px;
}
.swiper-pn-next2{
    top:0px;
    right:40px;
}
.section-title2{
   position: relative;
    top:-22px;
    left:50px;
    font-size:17px;
    font-weight:normal;
    color: #333333;
    text-align:left;
    letter-spacing:1px;
    text-decoration:underline;
    margin-bottom: 19px;
}



/*¼½¼Ç02*/


/*¼½¼Ç03*/


/*¼½¼Ç04*/
.section-04{
    position:relative;
    width:100%;
    margin:0 auto;
}
.section-04 .item-list-container{
    max-width:98.5%;
}
.section-04 .section-tabs {
    text-align:center;
    font-size:0px;
    margin-top:8px;
    margin-bottom:21px;
}
.section-04 .section-tabs > li{
    display:inline-block;
    margin:0 5px;
}
.section-04 .section-tabs > li > a{
    display:inline-block;
    height:45px;
    line-height:45px;
    padding:0 25px;
    text-align:center;
    font-size:14px;
    font-weight:normal;
    color:#223777;
    letter-spacing:1px;
    border:1px solid #e7e3de;
    border-radius:23px;
    transition:all 0.3s ease-in-out;
}
.section-04 .section-tabs > li > a.active{
    border:1px solid #222222;
    background:#222222;
    color:#fff;
}
.section-04 .section-tabs > li > a:hover{
    border:1px solid #222222;
    background:#222222;
    color:#fff;
}
.section-04 .item-list-container .item-list .item .item-title{
    line-height:22px;
    font-size:11px;
    color:#262324;
    overflow: hidden; 
    text-overflow: ellipsis;
    text-align:center;
    letter-spacing:1px;
    white-space: normal;
    display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}
.section-04 .item-list-container .item-list .item .item-title > strike{
    text-decoration:line-through;
    color:#a7a9ac;
}
.section-04 .item-list-container .item-list .item .item-subtitle{
    line-height:19px;
    font-size:11px;
    color:#000000 ;
    overflow: hidden; 
    text-overflow: ellipsis;
    text-align:center;
    letter-spacing:1px;
    white-space: nowrap;
    margin-top:14px;
}
.section-tab-con{
    display:none;
}
.section-tab-con.active{
    display:block;
}
.section-04 .swiper-pn-next{
    right:50%;
    margin-right: -41%;
    margin-top: -5%;
}
.section-04 .swiper-pn-prev{
    left:50%;
    margin-left: -47%;
    margin-top: -5%;
}
/*item-list swiper*/
.section-04 .item-list-container.swiper-container .item-list > li.item{
    width:325px;
    height:auto;
    margin:0 21px;
}  

.section-04 .more-btn-wrap{
    text-align:center;
    margin-top:7px;
    margin-bottom:17px;
}
.section-04 .more-btn-wrap a.more-btn{
    display:inline-block;
    width:204px;
    height:49px;
    line-height:49px;
    text-align:center;
    border-top:1px solid #e7e3de;
    border-bottom:1px solid #e7e3de;
    font-size:11px;
    font-weight:normal;
    color:#222222;
    letter-spacing:1px;
    transition:all 0.3s ease-in-out;
    text-transform: none;
}
.section-04 .more-btn-wrap a.more-btn:hover{
    border-top:1px solid #222;
    border-bottom:1px solid #222;
}


/*¼½¼Ç05*/
.section-05{}

/*¼½¼Ç06*/
.section-06{}
.section-06::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:300px;
    background:#f9f8f8;
}
.section-06 .left{
    position:absolute;
    top:0;
    left:0;
    width:361px;
    padding-top:81px;
}
.section-06 .left .md-title-wrap .md-theme{
    line-height:21px;
    font-size:15px;
    font-weight:500;
    color:#070d59;
    letter-spacing:1px;
}
.section-06 .left .md-title-wrap .md-title{
    margin-top:18px;
}
.section-06 .left .md-title-wrap .md-title > p{
    line-height:36px;
    font-family:'Ubuntu', 'NanumbarumGothic';
    font-size:29px;
    font-weight:bold;
    letter-spacing:1px;
}
.section-06 .left .md-title-wrap .md-title > h3{
    line-height:36px;
    font-family:'Ubuntu', 'NanumbarumGothic';
    font-size:29px;
    font-weight:bold;
    letter-spacing:1px;
}
.section-06 .left .section-tabs {
    margin-top:178px;
}
.section-06 .left .section-tabs li{
    margin-bottom:14px;
}
.section-06 .left .section-tabs li a{
    position:relative;
    display:inline-block;
    line-height:25px;
    font-size:17px;
    font-family:'Ubuntu', 'NanumbarumGothic';
    color:#888888;
    letter-spacing:1px;
}
.section-06 .left .section-tabs li a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #000000;
    z-index: 1;
    display: inline-block;
    transition:all 0.3s ease-in-out;
}
.section-06 .left .section-tabs li a:hover::after{
    width: 100%;
}
.section-06 .left .section-tabs li a.active::after{
    width: 100%;
}
.section-06 .left .section-tabs li a.active{
    line-height:27px;
    font-size:18px;
    font-weight:bold;
    color:#000;
}
.section-06 .right{
    padding-top:81px;
    padding-left:361px;
    min-height:630px;
    box-sizing:border-box;
}
.section-06 .item-list-container .item-list .item .item-info{
    line-height:23px;
}
.section-06 .item-list-container .item-list .item .item-info .price{
    font-size:14px;
}
.section-06 .item-list-container .item-list .item .item-info .colors-wrap{
    line-height:23px;
}
.section-06 .md-tab-controller{
    margin-top:50px;
    font-size:0px;
}
.section-06 .md-tab-controller .mt-prev,
.section-06 .md-tab-controller .mt-next
{
   display:inline-block;
   vertical-align:top;
   width:14px;
   height:21px;
   cursor:pointer;
}
.section-06 .md-tab-controller .mt-prev{
    background:url('/design/saerashop/2021_renew/pc/mt_prev.png')no-repeat center center;
}
.section-06 .md-tab-controller .mt-next{
    margin-left:14px;
    background:url('/design/saerashop/2021_renew/pc/mt_next.png')no-repeat center center;
}
/*¼½¼Ç07*/
.section-07 {
    padding-top:56px;
}
.section-07 .about-video{
    position:relative;
    padding-left:25%;
    margin-bottom:20px;
}

.section-07 .about-video .about{
    position:absolute;
    top:0;
    left:0;
}
.section-07 .about-video .video{
    position:relative;
    display:inline-block;
    width:770px;
    height:530px;
}
.section-07 .about-video .video .video-noclick{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background:transparent;
    z-index:10;
}
.section-07 .about-video .txt{
    position:absolute;
    top:0;
    right:30px;
    width:386px;
    padding-top:80px;
}
.section-07 .about-video .txt > h4{
    line-height:58px;
    font-size:45px;
    color:#000000;
    margin-bottom:27px;
    font-weight:400;
}
.section-07 .about-video .txt > p{
    line-height:27px;
    color:#000;
    font-size:18px;
    font-weight:300;
    letter-spacing:1px;
}
/*¼½¼Ç08*/
.section-08{
    position:relative;
    margin:40px;
}


.item-subtitle2{
    line-height:19px;
    font-size:11px;
    color:#000000 ;
    font-weight:normal;
    letter-spacing:1px;
    overflow: hidden; 
    text-overflow: ellipsis;
    text-align:center;
    white-space: nowrap;
    margin-top:14px;
}


/*¼½¼Ç09*/
.section-09 .insta-title{
    line-height:47px;
    text-align:center;
    font-size:0px;
    margin-bottom:26px;
}
.section-09 .insta-title > h4{
    line-height:1em;
    font-size:23px;
    font-weight:500;
    color:#333333;
    display:inline-block;
    vertical-align:middle;
}
.section-09 .insta-title > a{
    line-height:initial;
    font-size:14px;
    font-weight:300;
    color:#333333;
    display:inline-block;
    vertical-align:middle;
}
.section-09 .insta-con-wrap{
    font-size:0px;
    display:flex;
    flex-wrap:wrap;
}
.section-09 .insta-con-wrap > li{
    display:inline-block;
    width:20%;
    padding:0.5px;
    box-sizing:border-box;
    vertical-align:top;
    overflow:hidden;
}
.section-09 .insta-con-wrap > li a{
    display:inline-block;
    width:100%;
    overflow:hidden;
}
.section-09 .insta-con-wrap > li:hover a > img{
    
    transform: scale(1);
}
.section-09 .insta-con-wrap > li  a > img{
    width:100%;
    vertical-align:top;
    transition:all 0.3s ease-in-out;
}
#fp-nav ul li a > span {display:none;}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.txtBox {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.txtBox {
	display: block;
	margin: 0;
	font-size: 4rem;
	line-height: 1;
	transform: translateY(6rem);
	animation: up 500ms linear forwards;
	z-index: 1;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
	
	&::before,
	&::after {
		position: absolute;
		content: '';
		width: 0px;
		height: 1px;
		left: 0;
		background-color: rgba(0,0,0,0.2);
		z-index: -1;
	}
	
	&::before {
		top: 1.4rem;
		animation: draw 500ms linear 1s forwards;
	}
	
	&::after {
		bottom: 0.4rem;
		animation: draw 500ms linear 1s forwards;
	}
	
}

.txtBox {
	font-size: 0;
	position: relative;
	overflow: hidden;
	padding-bottom: 0.4rem;
}

@keyframes up {
	
	100% {
		transform: translateY(0);
	}
	
}

@keyframes draw {
	
	100% {
		width: 100%;
	}
	
}


/*¼­ºêº£³Ê*/
.sub_banner ul{width:100%;; position:relative;left:50%; transform: translateX(-50%);top:50px;}
.sub_banner ul{font-size:0; padding:50px 50px 12px 50px;}
.sub_banner ul li{display:inline-block; vertical-align:top; width:calc(50% - 50px); margin-left: 25px; margin-right:50px;}
.sub_banner ul li:last-child{margin:0;}
.sub_banner ul li .img_box{font-size:0; overflow:hidden; font-size:0;}
.sub_banner ul li .img_box a{display:block; font-size:0;}
.sub_banner ul li .img_box img{width:100%; transition:all 0.5s;}
.sub_banner ul li .txt_box{position:absolute;bottom:0px}
.sub_banner ul li .txt_box h1{position:relative;text-align:center;bottom:300px;font-size:35px;line-height:35px;color:#ffffff;font-weight:bold;font-family:'Ubuntu', 'NanumbarumGothic', sans-serif;}
.sub_banner ul li .txt_box h2{position:relative;font-size:20px; font-weight:normal; letter-spacing:1px; padding:20px 0 17px 0; font-family:'Ubuntu', 'NanumbarumGothic', sans-serif;}
.sub_banner ul li .txt_box p{position:relative;font-size:15px; color:#949494; letter-spacing:1px; line-height:1.5;}
.sub_banner ul li .txt_box .more_btn:before{content:''; display:block; width:0; height:50%; background:#E9616E; position:absolute; bottom:0; left:0; transition:all 0.3s; z-index:-1; opacity:0.2;}
.sub_banner ul li .txt_box .more_btn:hover:before{width:100%;}
.sub_banner ul li .txt_box2{position:relative; text-align:center; bottom:310px; font-size:70px;line-height:70px;color:#ffffff;font-weight:bold;font-family:'Ubuntu', 'NanumbarumGothic', sans-serif;}
.sub_banner ul li .img1{height:800px; background: url(/design/saerashop/wizdesign/midbanner/midbanner_01.jpg);background-repeat:no-repeat;background-size:cover;<!--border:1px solid #FF164F;-->}/*1¹ø*/
.sub_banner ul li .img2{height:800px; background: url(/design/saerashop/wizdesign/midbanner/midbanner_02.jpg);background-repeat:no-repeat;background-size:cover;<!--border:1px solid #FF164F;-->}/*2¹ø*/
.sub_banner ul li .txt_box2 .center{display:block;top: 50%;margin-top: -100px;}





/* BASIC css end */