/* 공용 */
@font-face {
  font-family: 'Freesentation-9Black';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}
* { margin:0; padding:0; box-sizing: border-box; }
a { text-decoration: none; color:#111; display: block; white-space: nowrap; font-family: 'Freesentation-9Black';}
li { list-style:none; }
img { width:100%; height:100%; object-fit: cover; }

body {
  font-family: 'Freesentation-9Black';
}

h1{ font-size: 30px; }
h2{ font-size: 24px; }
h3{ font-size: 20px; }
p { font-size: 16px; }
span { font-size:16px; }
i { font-style:normal; font-size: 14px; }
b { font-size: 14px; }
.fs12 {font-size:12px;}
.center { width:1200px; margin:0 auto; }
.flex { display: flex; flex-flow: row nowrap; justify-content:space-between; align-items: center; }
.flex2 { display: flex; flex-flow: column nowrap; justify-content: center; align-content: flex-start; }
.swiper-slide { cursor: pointer; }

html { overflow-x: hidden;}

.flex {
  display:flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
.wrap { width:100%;}
section {
  width: 100%;
}
/* View more버튼 */
/* rem단위 - root em이라는 뜻, 브라우저 가로길이가 기준이며 1rem은 16px정도임 > 상대크기 */
.more-btn {
  width: 10rem;
  height: 3rem;
  border: 1px solid #fff;
  margin-top: 48rem;
}
.more-btn a{
  display:flex;
}
.more-btn a .more {
  width: 70%;
  height: 3rem;
  /* text-align: center; */
  border-right: 1px solid #fff;
  position: relative;
}
.more-btn a .more span{
  position: absolute;
  background-color: #fff;
  width: 0;
  height: 100%;
  transition:width 0.4s ease-out;
}
.more-btn a .more p{
  position:absolute;
  width: 100%;
  height: 100%;
  /* 글자를 가운데로 정렬 */
  display:flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: color 0.4s ease-out;
}
.more-btn:hover a .more span {
  width: 100%;
}
.more-btn:hover a .more p{
  color:#222;
}
.more-btn a .arrow {
  padding: 0.6rem 0.8rem;
  width:30%;
}



header {
    width:100%;
    height:170px;
    display: flex;
    flex-flow:column nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    z-index: 100;
    background-color: white;
    transition: top 0.5s;
    position: fixed;
    top:0;
}
header .logo {
    width:120px;
    margin: 0 auto;
}
header .navi-area {
    width:100%;
    height:40px;
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
header .navi-area .menu-icon {
    display: flex;
    align-items: center;
}
header .navi-area .menu-btn {
    width: 28px;
    margin-right: 20px;
}
header .navi-area .logo2 {
    width: 90px;
    opacity: 0;
    transition: opacity 0.3s;
}
header .navi-area nav {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}
header .navi-area nav ul {
    display: flex;
}
header .navi-area nav ul li {
    margin:0 20px;
}
header .navi-area nav ul li a {
    font-size:18px;
    font-weight: bold;
}
header .navi-area nav ul li a:hover {
    color:#295F98;
}
header .navi-area .member ul {
    display: flex;
    align-items: center;
}
header .navi-area .member ul li {
    margin-left: 20px;
}
/* 아이디와 회원정보수정 동일 스타일 적용 */
header .navi-area .member ul li span.user-id,
header .navi-area .member ul li a.edit-link {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
header .navi-area .member ul li a.edit-link {
    color: #666;
    margin-left: 25px;
}
header .navi-area .member ul li a {
    font-size:14px;
}
header .navi-area .member ul li:last-child {
    width:30px;
    position: relative;
}
header .navi-area .member ul li:last-child span {
    bottom: -15px;
    position:absolute;
    display: block;
}
header .navi-area .member ul li:last-child .search-icon {
    display: block; /*보임*/
}
header .navi-area .member ul li:last-child .close-icon {
    display: none; /*안보임*/
}
/* 화면이 스크롤되면 header 높이가 작아지고 로고도 작아지고 header위치는 고정 */

header.sticky {
    top: -100px;
}
header.sticky .navi-area .logo2 {
    opacity: 1;
}
.sitemap {
    /* 안보임 */
    display: none;
    position: fixed;
    left:0; top:0;
    width:100%;
    height:100%;
    z-index: 200;
}
.sitemap .sitemap-in {
    width: 480px;
    height:100%;
    position: relative;
    background-color: white;
    padding:24px;
    padding-right: 10px;
}
.sitemap .sitemap-in .close-btn {
    width:28px;
}
.sitemap .sitemap-in .sitebox {
    width:80%;
    height:calc(100% - 30px);
    margin-top: 20px;
    float:right;
    overflow: auto;
    padding-right: 20%;
}
.sitemap .sitemap-in .sitebox .memberbox ul {
    display: flex;
    margin: 30px 0;
}
.sitemap .sitemap-in .sitebox .memberbox ul li {
    margin-right:20px;
}
.sitemap .sitemap-in .sitebox .memberbox ul li a {
    font-size:15px;
}
.sitemap .sitemap-in .sitebox .menu1 {
    padding-bottom: 40px;
    margin-bottom: 50px;
    border-bottom: 1px solid #ddd;
}
.sitemap .sitemap-in .sitebox .menu1 ul li a {
    font-size:24px;
    font-weight: bold;
    margin-bottom: 20px;
}
.sitemap .sitemap-in .sitebox .menu2 ul li a {
    font-size:16px;
    margin: 20px 0;
}
.sitemap .sitemap-in .sitebox .menu2>ul>li>a {
    font-size:24px;
    font-weight: bold;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}
.sitemap .sitemap-in .sitebox .menu2>ul>li>a i {
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
}
.sitemap .sitemap-in .sitebox .menu2>ul>li>a i span {
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #999;
}
.sitemap .sitemap-in .sitebox .menu2>ul>li>a i span.bar1 {
    transform: rotateZ(90deg);
}
.sitemap .sitemap-in .sitebox .menu2>ul>li>a i span.bar2 {
    display: none;
}
.sitemap .sitemap-in .sitebox .sns {
    margin-top: 60px;
    border-top:1px solid #ddd;
}
.sitemap .sitemap-in .sitebox .sns ul {
    display: flex;
    margin: 20% 0;
}
.sitemap .sitemap-in .sitebox .sns ul li {
    width:28px;
    margin-right: 20px;
}
/* .sitemap 영역의 .sitebox 스크롤바 수정하기 */
.sitemap .sitemap-in .sitebox::-webkit-scrollbar {
    position: relative;
    left:-5px;
    width:4px;
    height:4px;
}
.sitemap .sitemap-in .sitebox::-webkit-scrollbar-thumb {
    background-color: #295F98;
}
.sitemap .sitemap-in .sitebox::-webkit-scrollbar-track {
    background-color: #dbdbdb;
}
.sitemap .sitemap-bg {
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    right: 0;
    top: 0;
    width:calc(100% - 480px);
    height: 100%;
}
/*검색영역*/
.search-area {
    display: none;
    position: fixed;
    left: 0;
    top: 170px;
    z-index: 200;
    width: 100%;
    height: calc(100% - 130px); /*계산해주세요*/
}
.search-area.sticky {
    top: 100px;
    height: calc(100% - 80px);
}
.search-area .search-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.search-area .search-in {
    position: absolute;
    border-top: 1px solid #ddd;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
.search-area .search-in .input-area {
    width: 790px;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-area .search-in .input-area input {
    border: none; /*테두리 없음*/
    padding: 5px;
    width: 96%;
    font-size:15px;
    font-weight: bold;
    color: #666;
}
/* input창 안의 x버튼 커스텀 */
.search-area .search-in .input-area input[type=search]::-webkit-search-cancel-button {
    /* 원본 숨김 */
    -webkit-appearance: none;
    width: 16px; height: 16px;
    background: url(img/.close-icon) center center no-repeat;
    cursor: pointer;
}

/* 입력란을 클릭했을 때 테두리 없음 */
.search-area .search-in .input-area input:focus {
    outline: none;
}
.search-area .search-in .input-area button {
    cursor: pointer;
    width: 26px;
    border: none;
    margin-left: 10px;
    background-color: transparent;
}
.s1 .main {
    margin-top: 170px;
}
/* 메인 슬라이드 */
.s1 .main .swiper {
    width: 100%;
}
.s1 .main .swiper .swiper-slide {
    width: 100;
    height: 650px;
    position: relative;
    padding-top: 30px;
}
.s1 .main .swiper .swiper-slide div {
    position: absolute;
    width: 100%;
    height: 100%;
}
.s1 .main .swiper .swiper-slide .img-box{
    transform: scale(1, 1);
    transition: all 5s;
}
.s1 .main .swiper .swiper-slide-active .img-box {
    transform: scale(1.05, 1.05);
    position: relative;
}
.s1 .main .swiper .swiper-slide .img-box p {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.15));
}
.s1 .main .swiper .swiper-slide .txt-box {
    height: auto;
    padding: 30px;
    color: white;
    text-align: center;
    bottom: 0; left: 0;
}
.s1 .main .swiper .swiper-slide .txt-box h2 {
    font-size:40px;
    opacity: 0;
    transition: opacity 1s;
    transition-delay: 0.5s;
}
.s1 .main .swiper .swiper-slide .txt-box p{
    opacity: 0;
    transition: opacity 1s;
    transition-delay: 1s;
}
.s1 .main .swiper .swiper-slide-active .txt-box h2 {
    font-size: 40px;
    opacity: 1;
}
.s1 .main .swiper .swiper-slide-active .txt-box p {
    opacity: 1;
}
.s1 .main .swiper .swiper-button-prev:after {
    content: "";
    width: 30px;
    height: 60px;
    background: url(../img/ico_arrow02.svg) center center no-repeat;
    background-size: cover;
}
.s1 .main .swiper .swiper-button-next:after {
    content: "";
    width: 30px;
    height: 60px;
    background: url(../img/ico_arrow01.svg) center center no-repeat;
    background-size: cover;
}
.s1 .main .swiper .swiper-pagination {
    bottom: 20px;
}
.s1 .main .swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    position: relative;
    width: 40px;
    height:3px;
    border-radius: 1px;
    background-color: white;
}
.s1 .main .swiper .swiper-pagination-bullets .swiper-pagination-bullet i {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.25);
}
.s1 .main .swiper .swiper-pagination-bullets .swiper-pagination-bullet b {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 100%;
    background-color: rgba(255, 255, 255, 1);
}
.s1 .main .swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: transparent;
}
.s1 .main .swiper .swiper-pagination-bullets .swiper-pagination-bullet-active b {
    width:100%;
}
.s1 .main .swiper .swiper-pagination-bullets
.swiper-pagination-bullet-active b {
    width:100%;
    animation-name: countingBar;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
@keyframes countingBar {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
}
/* .main .swiper .swiper-pagination-bullets .swiper-pagination-progressbar {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.25);
}
.main .swiper .swiper-pagination-bullets .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: white;
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transform: scale(0);
    transform-origin: left top;
} */


/* section2 */
.s2 {
    margin-top: 100px;
}
/* 모든 제목 */
.title {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.title h1 {
    font-size: 36px;
    font-weight: normal;
    letter-spacing: -1px;
}
.title a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.title a i {
    height: 20px;
    margin-left: 5px;
}
.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
/* 직속 자식 선택자(>) */
.container > div {
    width: 588px;
    /* padding-top: 36px; */
}
.container .left-con {
    height: 884px;
}
.container .left-con .photo {
    border-radius: 30px;
    height: 800px;
}
.container .left-con .s1 .main {
    width: 100%;
    height: 780px;
}
.container .right-con {
    margin-left: 20px;
    height: 1640px;
    display: flex;
    flex-flow: column wrap; /* 열 기준 줄바꿈 허용 */
    align-content: space-between;
}
.container .right-con .photo-box {
    margin-bottom: 70px;
}
.container .right-con .photo {
    width: 282px;
    border-radius: 30px;
}
.container .right-con .short {
    height: 300px;
}
.close-btn.right-con .long {
    height: 400px;
}
/* 모든 사진은 마우스 오버했을 때 사진 커지고, 마우스 아웃하면 사진
원래 크기로 */
.container .photo {
    overflow: hidden;
}
.container .photo img {
    scale: 1;
    transition: scale 0.5s;
}
.container .photo:hover img {
    scale: 1.1;
}
.s3 {
    background-color: #f5f6f8;
    margin-top: 100px;
    padding: 80px 0 180px;
}
.swiper .swiper-wrapper .swiper-slide{
    border-radius: 15px;
}
.swiper .swiper-wrapper .swiper-slide a p {
    margin-top: 10px;
    margin-bottom: 10px;
}
.s5 {
    margin-top: 100px;
}
.container .swiper {
    width: 100%;
    overflow: visible;
}
.container .swiper .swiper-slide {
    width: 284px;
}
.container .swiper .swiper-slide .photo {
    height: 200px;
    border-radius: 6px;
    box-shadow: 5px 5px 5px #dedede;
}
.container .swiper .swiper-scrollbar {
    bottom: -60px;
}

.s4 {
    margin-top: 90px;
}
.s4 .flex > div {
    width: 50%;
}
.s4 .flex .mega-sale {
    padding: 50px;
    position: relative;
}
.s4 .flex .swiper {
    width: 430px;;
    height: 290px;
}
.s4 .flex .swiper .swiper-slide .swiper-slide-img {
    height: 220px;
}
.s4 .flex .swiper .swiper-slide .swiper-slide-img img {
    border-radius: 12px;
}
.s4 .swiper-button-prev {
    width: 30px;
    height: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
}
.s4 .swiper-button-prev:after {
    content:"";
    width: 30px;
    height: 30px;
    background-image:url(../imo/botton_left.png);
    background-size:cover;
}
.s4 .swiper-button-next {
    width: 30px;
    height: 30px;
    margin-right: 30px;
    padding-bottom: 30px;
}
.s4 .swiper-button-next:after {
    content:"";
    width: 30px;
    height: 30px;
    background-image:url(../imo/botton_right.png);
    background-size:cover;
}

















.s5 {
    background-color: #f5f6f8;
    margin-top: 100px;
    padding: 80px 0 180px;
}

/* s3 텍스트 영역 */
.text1 {
    margin-top: 150px;
}

/* 흐르는 글자 */
.text-ani .text-wrap{
    display:flex;
    white-space:nowrap;
    overflow:hidden;
    transition:0.3s;
    font-size: 10rem;
    color: #f8f8f8;
}
.text-ani .text-wrap p{
    animation:textAni 150s linear infinite;
    padding-right:0;
    font-weight: bold;
}
@keyframes textAni {
    0% {
        -webkit-animation: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    100% {
        -webkit-animation: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }
}


.s6{
    margin-top: 90px;
}
.s6 .photo-box{
    width: 282px;
}
.s6 .photo-box p{
    margin-top: 10px;
}
.s6 .photo-box .photo {
    height: 300px;
    border-radius: 30px;
}

.s7 {
    margin-top: 140px;
}
.s7 .container {
    width: 100%;
    height: 140px;
    background-color: #efefef;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
}
.s7 .container .logo-icon {
    width: 150px;
}
.s7 .container a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.s7 .container a i {
    height: 20px;
    margin-left: 5px;
}
footer {
    width: 100%;
    margin-top: 160px;
}
footer .footer-top {
    width: 100%;
    height: 65px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
footer div .center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    height: 100%;
}
footer .footer-top div ul {
    display: flex;
    flex-flow: row nowrap;
}
.footer .footer-top div ul li a {
    font-size: 15px;
}
footer .footer-top .info ul li {
    margin-right: 30px;
}
footer .footer-top .info ul li:nth-child(6) {
    font-weight: bold;
}
footer .footer-top .sns ul li {
    margin-left: 20px;
    width: 26px;
}
footer .footer-bottom{
    height: 180px;
}
footer .footer-bottom .footer-logo {
    width: 180px;
}
footer .footer-bottom address {
    font-size: 15px;
    color: #666;
    font-style: normal;
    line-height: 30px;
}
/* 패밀리 박스 전체 */
footer .footer-bottom .family {
    width: 180px;
    position: relative;
    z-index: 300;
    font-family: 'Freesentation-9Black'; /* 사용 폰트 일치 */
}

/* 닫힌 상태의 패밀리 버튼 (sub 항목과 같은 높이, 패딩) */
footer .footer-bottom .family > a {
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;  /* 수직 가운데 정렬 핵심 */
    background-color: white;
    border: 1px solid #666;
    padding: 0 12px;       /* 상하 여백 제거하고 좌우만 */
    height: 44px;          /* 드롭다운 항목 높이와 동일하게 */
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    z-index: 301;
}

/* "패밀리 사이트" 글자 */
footer .footer-bottom .family > a p {
    margin: 0;
    line-height: 1;
    font-size: 14px;
    display: flex;
    align-items: center;  /* 텍스트도 align */
}

/* ▼ 아이콘 */
footer .footer-bottom .family > a .arrow {
    font-size: 12px;
    margin-left: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* 아이콘 정렬 */
footer .footer-bottom .family > a span {
    display: flex;
    align-items: center;
}

/* 드롭다운 메뉴 */
footer .footer-bottom .family .sub {
    position: absolute;
    bottom: 100%; /* 위로 열림 */
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #666;
    border-bottom: none;
    z-index: 300;
    display: none;
    flex-direction: column;
}

/* 드롭다운 항목 스타일 (닫힌 항목과 동일한 높이) */
footer .footer-bottom .family .sub a {
    font-size: 14px;
    padding: 12px;
    height: 44px;
    line-height: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    background-color: white;
    text-align: left;
    display: flex;
    align-items: center;
}

footer .footer-bottom .family .sub a:last-child {
    border-bottom: none;
}

footer .footer-bottom .family .sub a:hover {
    background-color: #f1f1f1;
}
.footer-logo img {
    width: 110px;
}
.top {
    width: 50px;
    height: 50px;
    background-color: #111;
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 400;
    border-radius: 6px;
}
.top a {
    color: white;
    font-size: 14px;
}