/* BASIC css start */ #footer{margin-top:0 !important;} /* 메인 섹션 공통 */ .section:not(#sec1,#sec11){margin-bottom: 100px;} .sec_inner{width: 1400px; margin: 0 auto;} .section .sec_cate{margin-bottom: 35px; display: flex; align-items: flex-end; justify-content: space-between;} .section h2{font-family: 'Noto Sans KR', sans-serif; font-size: 34px; color: #000; font-weight: 600;} .section .sec_cate ul{display:flex; justify-content:center ; gap: 30px;} .section .sec_cate ul li{} .section .sec_cate ul li a{font-family: 'Noto Sans KR', sans-serif; display:block; width:100%; color:#aaaaaa; font-size: 15px; font-weight:500; letter-spacing: -.3px;transition: all .3s; position:relative; display:block;} .section .sec_cate ul li.on>a{ color: #000 !important; } .section .sec_prd>div{display: none; position:relative;} .section .sec_prd>div ul.item_cont{display:flex; flex-wrap:wrap} .section .sec_prd>div.show{display: block;} .section .prd_more_btn{text-align:center; margin-top:40px;} .section .prd_more_btn>a {display:inline-block;font-family: 'Noto Sans KR', sans-serif; color:#000; font-size:16px; display:inline-block; border:1px solid #000; padding:15px 70px; font-weight:500; } .txt_area p.sub{color: #fff; line-height: 1.6;font-family: 'Noto Sans KR', sans-serif; font-weight: 400;transition: all .4s; } .txt_area p.big{ color: #fff; font-weight: 500;line-height: 1.3; font-family: 'Noto Sans KR', sans-serif; transition: all .5s; } .txt_area a.more{font-family: 'Montserrat', sans-serif;display: inline-block; transition: all .4s;border: 1px solid #fff;color: #fff; margin-top: 8px;font-weight: 400;padding: 6px 20px; } .txt_area1 p.sub {color: #fff; line-height: 1.6;font-family: 'Noto Sans KR', sans-serif; font-weight: 400;transition: all .4s; } .txt_area1 p.big { color: #fff; font-weight: 500;line-height: 1.3; font-family: 'Noto Sans KR', sans-serif; transition: all .5s; } .txt_area1 a.more {font-family: 'Montserrat', sans-serif;display: inline-block; transition: all .4s;border: 1px solid #fff;color: #fff; margin-top: 8px;font-weight: 400;padding: 6px 20px; } /* sec1 */ #sec1{margin-bottom: 100px;} #sec1 .swiper{} #sec1 .swiper ul{} #sec1 .swiper ul li{width: 75%;} #sec1 .swiper ul li>a{display: block; width: 100%;} #sec1 .swiper ul li>a>img{width: 100%; } #sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); padding-left: 100px; max-width: 50%;} #sec1 .swiper ul li .txt_area p{opacity: 0;} #sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(25px); opacity: 1;} #sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(35px); opacity: 1;} #sec1 .swiper ul li .txt_area p.sub{ font-size: 19px; font-weight: 400; transition: all .4s; margin-bottom: 10px; transition-delay: .3s;} #sec1 .swiper ul li .txt_area p.big{font-size: 45px;transition: all .5s;transition-delay: .55s;} #sec1 .swiper ul li .txt_area a.more{ font-size: clamp(13px, 4vw, 17px); /* 화면 폭에 따라 13px ~ 17px 가변 */ display: inline-block; /* 여백 및 패딩 적용을 위한 블록화 */ padding: 10px 22px; /* 모바일 터치 영역 확보 */ margin-top: 14px; /* 상단 문구와의 여백 확보 */ color: #ffffff !important; /* 버튼 글자색 흰색 */ font-weight: 600; /* 버튼 문구 강조 */ border: none; /* 기존 흰 테두리 제거로 시인성 제고 */ border-radius: 4px; /* 모서리 라운딩 */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* 버튼 입체감 그림자 */ text-decoration: none; opacity: 1; /* 화면 진입 시 가시성 확보 */ transition: all .3s; transition-delay: .98s; animation: btnColorLoop 3s ease-in-out infinite; /* 배경색 순환 애니메이션 */ } /* 초록 → 빨강 → 주황 순서로 배경색이 자동 전환되는 키프레임 */ @keyframes btnColorLoop { 0%, 27% { background-color: #138A48; } /* 녹색 구간 */ 33%, 60% { background-color: #ff0000; } /* 빨간색 구간 */ 66%, 93% { background-color: #FF6B00; } /* 주황색 구간 */ 100% { background-color: #138A48; } /* 다시 녹색으로 자연스럽게 순환 */ } #sec1 .swiper-pagination{bottom: 70px; z-index: 10;} #sec1 .swiper-pagination-bullet{background-color: #fff;transition: all .2s;} #sec1 .swiper-pagination-bullet-active{width: 25px; border-radius: 8px;} /* sec4 */ #sec4{} #sec4 a{display: block;width: 100%;} #sec4 a img{width: 100%;} /* sec5 */ #sec5{} #sec5 .sec_inner{} #sec5 .sec_inner .sec5_prd>div .sec5_wrap{display: flex;justify-content: space-between;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap ul.item_cont{width: 640px;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban{width: 710px;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper{} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul{} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li{} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li>a{display: block;width: 100%;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li>a img{width: 100%;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li .txt_area{overflow: visible; position: absolute; left: 0%;bottom: 50px; padding-left: 50px; max-width: 80%;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li .txt_area p{opacity: 0;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(-25px); opacity: 1;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(-35px); opacity: 1;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li .txt_area p.big{font-size: 48px; font-family: 'Montserrat', sans-serif; transition-delay: .4s;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li .txt_area p.sub{ font-size: 24px; margin-bottom: 40px; transition-delay: .56s;} #sec5 .sec_inner .sec5_prd>div .sec5_wrap .sec5_ban .swiper ul li .txt_area a.more{opacity: 0; transition-delay: .7s; font-size: 16px;} #sec5 .swiper-pagination{bottom: 40px; z-index: 10;} #sec5 .swiper-pagination-bullet{background-color: #fff;transition: all .2s;} #sec5 .swiper-pagination-bullet-active{width: 25px; border-radius: 8px;} #sec5 :is(.swiper-button-next, .swiper-button-prev){color: #fff; font-size: 30px;} #sec5 .swiper-button-next{right: 48px;} #sec5 .swiper-button-prev{left: 48px;} /* sec8 */ #sec8{} #sec8 a{display: block;width: 100%;} #sec8 a img{width: 100%;} /* sec9 */ #sec9{} #sec9 .sec_inner{} #sec9 .sec_inner .sec_cate{} #sec9 .sec_inner .sec_cate h2{} #sec9 .sec_inner .sec9_wrap{display: flex; justify-content: space-between;} #sec9 .sec_inner .sec9_wrap .video_area{width: 1050px;} #sec9 .sec_inner .sec9_wrap .video_area>ul{} #sec9 .sec_inner .sec9_wrap .video_area>ul>li{display: none;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li iframe{width:1050px !important; height:605px !important; } #sec9 .sec_inner .sec9_wrap .video_area>ul>li.show{display: block;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info{padding: 30px 0; display: flex; flex-direction: column; gap: 11px;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info h3{font-family: 'Noto Sans KR', sans-serif; font-size: 24px; font-weight: 600;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info p{font-family: 'Noto Sans KR', sans-serif;color: #aaaaaa; font-size: 18px; font-weight: 400;} #sec9 .sec_inner .sec9_wrap .thumbnail_area{width: 335px;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul{display: flex; flex-direction: column; height:605px; justify-content:space-between;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li{width: 100%;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li>a{display: block;width: 100%; position: relative;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li>a>img{width: 100%;filter: brightness(.9);transition: all .2s;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li>a p{font-family: 'Montserrat', sans-serif; position: absolute; max-width: 90%; z-index: 10; color: #fff; font-size: 18px; font-weight: 400; bottom: 20px; left: 18px;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li>a span.now{position: absolute; top: 12px; left: 2px;opacity: 0; transition: all .2s; z-index: 10;} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li.on>a>img{filter: brightness(1);} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li.on>a span.now{opacity: 1; left: 12px} #sec9 .sec_inner .sec9_wrap .thumbnail_area>ul>li>a span.now img{} #sec10{} #sec10 .sec_inner{} #sec10 .sec_inner ul{display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px;} #sec10 .sec_inner ul li{position: relative;flex-grow: 1;} #sec10 .sec_inner ul li>a{display: block;width: 100%;} #sec10 .sec_inner ul li>a>img{width: 100%;} #sec10 .sec_inner ul li .txt_area{position: absolute; top: 56%;transform: translateY(-50%); left: 31%; max-width: 47%; } #sec10 .sec_inner ul li .txt_area p{opacity: 0;} #sec10 .sec_inner ul li .txt_area p.big{font-size: 26px; font-weight: 600; margin-bottom: 15px;transition-delay: .1s;} #sec10 .sec_inner ul li .txt_area p.sub{font-size: 16px; margin-bottom: 20px;transition-delay: .37s;} #sec10 .sec_inner ul li .txt_area a.more{font-size: 16px;opacity: 0; transition-delay: .58s; } #sec10 .sec_inner ul li .txt_area1 {position: absolute; top: 53%;transform: translateY(-50%); left: 22%; max-width: 47%; } #sec10 .sec_inner ul li .txt_area1 p{opacity: 0;} #sec10 .sec_inner ul li .txt_area1 p.big{font-size: 26px; font-weight: 600; margin-bottom: 15px;transition-delay: .1s; width:255px; } #sec10 .sec_inner ul li .txt_area1 p.sub{font-size: 16px; margin-bottom: 20px;transition-delay: .37s;} #sec10 .sec_inner ul li .txt_area1 a.more{font-size: 16px;opacity: 0; transition-delay: .58s; } #sec10.act .sec_inner ul li .txt_area p{transform: translateY(-25px); opacity: 1;} #sec10.act .sec_inner ul li .txt_area a.more{transform: translateY(-35px); opacity: 1;} #sec10.act .sec_inner ul li .txt_area1 p{transform: translateY(-25px); opacity: 1;} #sec10.act .sec_inner ul li .txt_area1 a.more{transform: translateY(-35px); opacity: 1;} /* =================================================== sec10 배너 마우스 롤오버 어둡게 효과 (MakeShop 전용) =================================================== */ /* 1. 기본 이미지 상태 및 전환 애니메이션 설정 */ #sec10 ul li a img { display: block; width: 100%; height: auto; /* 마우스를 올리거나 뗄 때 0.3초 동안 부드럽게 변화시킵니다 */ transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; will-change: filter, transform; /* 리렌더링 성능 최적화 */ } /* 2. 마우스 롤오버(Hover) 시 이미지 어둡게 처리 */ #sec10 ul li:hover a img { /* brightness(1)이 기본값이며, 0.75는 밝기를 75% 수준으로 낮춰 어둡게 만듭니다 */ filter: brightness(0.35); } /* (선택 사항) 롤오버 시 이미지가 살짝 확대되는 미세 효과 추가 시 주석 해제 */ /* #sec10 ul li:hover a img { filter: brightness(0.75); transform: scale(1.03); /* 3% 살짝 확대 */ } */ /* sec11 수정 코드 */ #sec11 {} #sec11 .sec11_wrap { background-repeat: no-repeat; background-position: center center; /* 이미지를 중앙에 정렬 */ background-size: contain; /* 1905x552 비율을 깨뜨리지 않고 전체 노출 */ background-attachment: scroll; /* fixed 속성을 해제하여 과도한 확대 방지 */ width: 100%; max-width: 1905px; /* 원본 가로 크기 제한 */ height: 552px; /* 원본 세로 높이 고정 */ margin: 0 auto; /* 중앙 배치 */ position: relative; } #sec11 .sec11_wrap .txt_area { position: absolute; top: 50%; transform: translateY(-50%); left: 50%; padding-left: 190px; } #sec11 .sec11_wrap .txt_area p { color: #fff; font-family: 'Kumbh Sans', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2; } #sec11 .sec11_wrap .txt_area a { color: #fff; font-family: 'Montserrat', sans-serif; margin-top: 25px; transition: all .4s; display: inline-block; transition-delay: .7s; border: 1px solid #fff; padding: 8px 20px; font-size: 16px; font-weight: 400; } /* BASIC css end */