/* common */
.tit-area strong{ font-size: 1rem; font-weight:600; color:#e84493; text-transform: uppercase;}
.tit-area h3{ font-size: 2.5rem; font-weight:700; color:#000; line-height:1.1;}
.btn-more{ display: inline-block; border-radius:2rem; border:1px solid #ccc; line-height:1.5rem; padding:0 0.5rem; font-size: 0.7rem; transition: all 0.2s;}
.btn-more:hover,
.btn-more:focus{ color:#fff; background:#e84493; border-color:#e84493;}

.visual{ width:100%; max-width:1920px; height:40rem; margin:0 auto; overflow:hidden;}

.section1{ padding:5rem 0;}
.section2{ padding:5rem 0; background:#f8f8f8;}
.section3{ padding:4.5rem 0 5rem; display: flex; gap: 5rem;}
.section3 .inner{ flex: 1;}

/* 메인비주얼 */
.visual{ position: relative; border-radius: 0 0 11rem 11rem; overflow: hidden;}
.visual .swiper-pagination{ bottom:1.5rem;}
.visual .swiper-pagination .swiper-pagination-bullet{ width:0.4rem; height:0.4rem; background: transparent; border:2px solid #fff; border-radius: 0.2rem; opacity: 1; transition: 0.2s;} 
.visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:1rem; background:#fff;}
#mainSlide .swiper-slide{ display: flex; align-items: center; justify-content: center; overflow: hidden;}

/* 패션플랫폼 */
.link-wrap ul{ display: flex; min-width: 0px; gap: 5rem; margin-top:2rem;}
.link-wrap li{ flex:1; min-width: 0px;}
.link-wrap li a{ position:relative; display: block; min-height:27.5rem; border-radius: 5rem 0; overflow: hidden;}
.link-wrap li a h3{ position: absolute; left: 2.25rem; bottom:1.5rem; }
.link-wrap li a h3,
.link-wrap li a strong{ color:#fff; font-size:1.5rem;}
.link-wrap li .img{ position:absolute; left:0; top:0; width:100%; height:100%; display: flex; align-items: center; justify-content: center; z-index: -1;}
.link-wrap li .cont{ position:absolute; left:0; top:0; width:100%; height:100%; padding:2.5rem 2.25rem; background:#e84493; color:#fff; z-index: 1; transform: translateY(100%); opacity: 0; transition: all 0.3s;}
.link-wrap li .cont:before{ content:""; position:absolute; left:0rem; bottom:2.5rem; width:6.1rem; height:1.5rem; background:url('../images/main/ico_arrow_hover.png') no-repeat center right/contain; opacity: 0; transition: all 0.3s 0.2s;}
.link-wrap li .cont p{ font-size:0.8rem; padding:1.5rem 0 0.8rem;}
.link-wrap li .cont span{ font-size:0.8rem;}
.link-wrap li a:hover .cont,
.link-wrap li a:focus .cont{ transform: translateY(0); opacity: 1;}
.link-wrap li a:hover .cont:before,
.link-wrap li a:focus .cont:before{ left:2.25rem; opacity: 1;}

/* 플랫폼 이벤트 */
.gallery{ position:relative; min-height:20rem;}
.gallery .tit-area{ width: 18rem;}
.gallery .tit-area span{ display: block; width:12.5rem; margin-top:2rem; word-break: keep-all; }
.gallery .slide-btn{ position: absolute; left:0; bottom:4.5rem;}
.gallery .slide-btn a{display: inline-block; border: 2px solid #999; height:1.3rem; line-height:1.1rem; vertical-align: top; margin: 0 2px; transition: all 0.2s;}
.gallery .slide-btn .btn-more{ margin-left:5px;}
.gallery .slide-btn .prev,
.gallery .slide-btn .next{ width: 1.3rem; line-height:1.2rem; font-size: 0.75rem; text-align: center; border-radius:50%;  color:#999;}
.gallery .slide-btn a:hover,
.gallery .slide-btn a:focus{ background:#e84493; color:#fff; border-color:#e84493;}
#gallerySlide{ position:absolute; left:18rem; top:0; width:75rem; height:100%;}
#gallerySlide .swiper-slide{ width:25rem;}
#gallerySlide .swiper-slide a{ display: block; margin:0 2.5rem;}
#gallerySlide .img{ width:100%; height:15rem; display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,0.1); border-radius: 5rem 0; margin-bottom:0.5rem; overflow: hidden;}
#gallerySlide .img img{ width:auto; height:100%; transition: all 0.2s;}
#gallerySlide strong{ display: block; line-height:1.5rem; font-weight: 600; margin-bottom:0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  transition: all 0.2s;}
#gallerySlide span{ display: block; line-height:1rem; color:#999; font-size:0.7rem; transition: all 0.2s;}
#gallerySlide span:before{ content:"\f133"; display: inline-block; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right:5px;}
#gallerySlide .swiper-slide a:hover img,
#gallerySlide .swiper-slide a:focus img{ transform: scale(1.1);}
#gallerySlide .swiper-slide a:hover strong,
#gallerySlide .swiper-slide a:focus strong{ color:#e84493; text-decoration: underline;}
#gallerySlide .swiper-slide a:hover span,
#gallerySlide .swiper-slide a:focus span{ color:#111;}

/* 공지사항 */
.notice{ position:relative;}
.notice ul{ margin-top:2rem; border-top:2px solid #e84493;}
.notice li{ display: flex; height:3rem; align-items: center; border-bottom:1px solid #999;}
.notice li.new:before{ content:"NEW"; display: inline-block; line-height:18px; width:40px; font-size: 13px; color:#e84493; border: 1px solid #e84493; text-align: center; margin-right: 0.5rem; }
.notice li a{ display: flex; flex: 1; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.2s;}
.notice li a span{ font-size: 0.7rem; color:#666;}
.notice .btn-more{ position:absolute; right: 0; top:0;}
.notice li a:hover,
.notice li a:focus{ color:#e84493; text-decoration: underline;}

/* SNS채널 */
.sns-link{ padding:2.5rem; border-radius:5rem 0; border:1px solid #e84493;}
.sns-link h3{ font-size:1.5rem; font-weight: 600; word-break: keep-all;}
.sns-link h3 span{ color:#e84493;}
.sns-link ul{ display: flex; margin-top:2.5rem;}
.sns-link li{ flex:1; text-align: center;}
.sns-link li a{ display: inline-block; font-weight: 600;}
.sns-link li a p{ width:5.15rem; height:5.15rem; display: flex; align-items: center; justify-content: center; margin-bottom:1rem; border-radius:50%;}
.sns-link li.sns-blog a p{ background:#00c300;}
.sns-link li.sns-insta a p{ background:linear-gradient(45deg, #ffb64e 0%,#d43d91 100%); background-repeat: no-repeat; background-position: center;}
.sns-link li.sns-facebook a p{ background:#3a5ca9;}
.sns-link li.sns-blog a:hover,
.sns-link li.sns-blog a:focus{ color:#00c300; text-decoration: underline;}
.sns-link li.sns-insta a:hover,
.sns-link li.sns-insta a:focus{ color:#d43d91; text-decoration: underline;}
.sns-link li.sns-facebook a:hover,
.sns-link li.sns-facebook a:focus{ color:#3a5ca9; text-decoration: underline;}
.sns-link a{ transition: all 0.2s;}


@media screen and (max-width: 1420px) {

    .section1{ padding:5rem 1rem;}
    .section3{ padding:4.5rem 1rem 5rem; }

    /* 패션플랫폼 */
    .link-wrap ul{ gap: 2rem;}
    .link-wrap li a{ min-height:20rem;}

}

@media screen and (max-width: 1240px) {
    .section3{ gap: 3rem;}

    /* common */
    .tit-area h3{ font-size: 2rem; }

    /* 패션플랫폼 */
    .link-wrap li a{  border-radius: 3rem 0;}
    .link-wrap li a:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:30%; background: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,0.5) 100%); }
    .link-wrap li a h3, .link-wrap li a strong{ font-size:1.25rem;}

    .sns-link li a p{width:4rem; height:4rem;}
    .sns-link li a p img{width:2rem; height:auto;}

}

@media screen and (max-width: 1024px) {

    .section3{ display: block;}

    /* 메인비주얼 */
    .visual{ height:auto; border-radius:0 0 6rem 6rem;}
    .visual .swiper-pagination{ bottom:3%;}
    #mainSlide .swiper-slide img{ width:150%; height:auto;}

    /* 패션플랫폼 */
    .link-wrap ul{ gap: 1rem;}
    .link-wrap li a{ min-height:16rem; border-radius: 2rem 0;}
    .link-wrap li a h3{ left:2rem;}
    .link-wrap li a h3, .link-wrap li a strong{ font-size:1.25rem;}
    .link-wrap li .cont{ padding: 1.75rem 2rem;}
    .link-wrap li .cont:before{ width:5rem; height:0.75rem; bottom:1.75rem;}
    .link-wrap li a:hover .cont:before, .link-wrap li a:focus .cont:before{ left:2rem;}

    /* 플랫폼 이벤트 */
    .gallery .tit-area{ width:13rem;}
    #gallerySlide{ left:13rem;}
    #gallerySlide .swiper-slide a{ margin:0 1.5rem;}

    .notice ul{ margin-top:1rem;}

    /* SNS채널 */
    .sns-link{ display: flex; padding:2rem; border-radius: 3rem 0; margin-top:2rem;}
    .sns-link h3{ flex: 1; font-size:1.3rem;}
    .sns-link ul{ margin-top:0;}
    .sns-link li a p{ margin-bottom:0;}
    .sns-link li + li{ margin-left:1rem;}
    .sns-link li a span{ display: none;}
}
  
@media screen and (max-width: 860px) {

    /* common */
    .tit-area strong{ font-size:0.8rem;}
    .tit-area h3{ font-size: 1.75rem; }

    .section1{ padding:3rem 1rem;}
    .section2{ padding:3rem 0;}
    .section3{ padding:3rem 1rem;}

    /* 패션플랫폼 */
    .link-wrap ul{ display: block; margin-top:1rem;}
    .link-wrap li + li{ margin-top:1rem;}
    .link-wrap li a{ min-height:10rem;}
    .link-wrap li .img img{ width:100%; height:auto;}
    .link-wrap li .cont p{ padding:0.5rem 0; font-size: 0.7rem;}
    .link-wrap li .cont p br{ display: none;}
    .link-wrap li .cont:before{ right:3rem; left:auto;}
    .link-wrap li a:hover .cont:before, .link-wrap li a:focus .cont:before{ left:auto; right:2rem;}
}
  
@media screen and (max-width: 768px) {

    /* 플랫폼 이벤트 */
    .gallery .tit-area{ width:100%;}
    .gallery .tit-area span{ width:100%; margin-top:0.5rem; font-size:0.8rem;}
    .gallery .tit-area span br{ display: none;}
    .gallery .slide-btn{ right:1rem; top:1.6rem; left:auto; bottom:auto;}
    #gallerySlide{ position:relative; left:auto; top:auto; width:100%; margin-top:1rem;}
    #gallerySlide .swiper-slide a{ margin:0;}
    #gallerySlide .img{ width:auto; height:10rem; border-radius:2rem 0;}
    #gallerySlide .img img{ width:100%; height:auto;}
    


    /* SNS채널 */
    .sns-link li a p{ width:3rem; height:3rem;}
    .sns-link li a p img{ width:1.5rem; }
}
  
@media screen and (max-width: 640px) {

    .section1{ padding:2rem 1rem;}
    .section2{ padding:2rem 0;}
    .section3{ padding:2rem 1rem;}

    /* common */
    .tit-area strong{ font-size:0.7rem;}
    .tit-area h3{ font-size: 1.25rem; }

    .link-wrap li a h3, .link-wrap li a strong{ font-size: 1rem;}

    /* SNS채널 */
    .sns-link{ display: block; padding:1.5rem; border-radius: 2rem 0;}
    .sns-link ul{ margin-top:1rem;}
    .sns-link h3{ font-size:1.25rem;}
}
  
  
  

@media screen and (max-width: 560px) {

    /* 메인비주얼 */
    .visual{ border-radius:0 0 3rem 3rem;}
    #mainSlide .swiper-slide img{ width:180%; height:auto;}
}