/* 공통 */ #c3_wrap .c_inner { width: 100%; max-width: 1500px; margin:0 auto; position: relative; padding:0 50px;} #c3_wrap .c_tit h3 { font-weight: 700; color:#6f1685; line-height: 1.1; font-family: 'GmarketSans'; margin-bottom: 25px;} /* font size */ #c3_wrap .fs_65 {font-size: 65px; font-weight :700; line-height: 1.1; letter-spacing: -1.3px; font-family: 'GmarketSans';} #c3_wrap .fs_60 {font-size: 60px; font-weight :700; line-height: 1.1; letter-spacing: -1.2px;} #c3_wrap .fs_55 {font-size: 55px; font-weight :700; line-height: 1.1; letter-spacing: -1.1px; } #c3_wrap .fs_50 {font-size: 50px; font-weight :700; line-height: 1.1; } #c3_wrap .fs_45 {font-size: 45px; font-weight :700; line-height: 1.1; letter-spacing: -.9px; } #c3_wrap .fs_40 {font-size: 40px; font-weight :700; line-height: 1.3; letter-spacing: -.8px; } #c3_wrap .fs_39 {font-size: 40px; font-weight :700; line-height: 1.3;} #c3_wrap .fs_37 {font-size: 37px; font-weight :700; line-height: 1.3;} #c3_wrap .fs_36 {font-size: 36px; font-weight :700; line-height: 1.3;} #c3_wrap .fs_34 {font-size: 34px; font-weight:500; line-height: 1.3; } #c3_wrap .fs_33 {font-size: 33px; font-weight:700; line-height: 1.3; } #c3_wrap .fs_32 {font-size: 32px; font-weight:700; line-height: 1.3; } #c3_wrap .fs_30 {font-size: 30px; font-weight:700; line-height: 1.3; letter-spacing: -.6px; } #c3_wrap .fs_28 {font-size: 28px; font-weight:800; line-height: 1.3; } #c3_wrap .fs_27 {font-size: 27px; font-weight:700; line-height: 1.3; } #c3_wrap .fs_26 {font-size: 26px; font-weight:700; line-height: 1.3; letter-spacing: -.52px; } #c3_wrap .fs_25 {font-size: 25px; font-weight:700; line-height: 1.3; letter-spacing: -.5px; } #c3_wrap .fs_24 {font-size: 24px; font-weight:700; line-height: 1.4;} #c3_wrap .fs_23 {font-size: 23px; font-weight:700; line-height: 1.4;} #c3_wrap .fs_22 {font-size: 22px; font-weight:600; line-height: 1.4; letter-spacing: -.44px; } #c3_wrap .fs_21 {font-size: 21px; font-weight:600; line-height: 1.67; } #c3_wrap .fs_20 {font-size: 20px; font-weight:400; line-height: 1.67; letter-spacing: -.4px; } #c3_wrap .fs_19 {font-size: 19px; font-weight: 400; line-height: 1.67; } #c3_wrap .fs_18 {font-size: 18px; font-weight: 400; line-height: 1.83; color: rgba(255, 255, 255, 0.8); letter-spacing: -.36px;} #c3_wrap .fs_17 {font-size: 17px; font-weight: 400; line-height: 1.72; } #c3_wrap .fs_16 {font-size: 16px; font-weight: 400; line-height: 1.72; } #c3_wrap .fs_15 {font-size: 15px; font-weight: 400; line-height: 1.72; } /* btn */ #c3_wrap .c_btn {display: inline-flex; align-items: center; font-size: 15px; font-weight:700; color:#000; font-family: 'NanumSquareRound'; transition: all .3s; white-space: nowrap;} #c3_wrap .c_btn i {transition: all .3s; display: block; width: 59px; height: 40px; background:url("../img/c_btn_arrow.png") 50%/contain no-repeat; flex-shrink: 0; margin-left: 14px; } #c3_wrap .c_btn:hover {color:#6f1685; } #c3_wrap .c_btn:hover i {background-image:url("../img/c_btn_arrow_hv.png");} #c3_wrap .c_btn.wh {color:#fff;} #c3_wrap .c_btn.wh i {background-image:url("../img/c_btn_wh_arrow.png");} #c3_wrap .c_btn.wh:hover i {background-image:url("../img/c_btn_wh_arrow_hv.png");} /*Content CSS*/ #c3_wrap {overflow: hidden; position: relative; padding: 115px 0 130px; z-index: 1; } #c3_wrap .c_inner {display: flex; } #c3_wrap .cont {width: 550px; position: relative; z-index: 2; flex-shrink: 0; background-color: #fff; z-index: 2; padding-top:30px; } #c3_wrap .cont p {color:#333; line-height: 1.71; font-weight: 400; margin: 45px 0 45px;} #c3_wrap .btn_wrap {margin-top: 100px;width: 100%;} #c3_wrap .btn_wrap .pagination_bullet {display: flex; width: 100%; white-space: nowrap;} #c3_wrap .btn_wrap .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 55px; } #c3_wrap .btn_wrap .swiper-pagination-bullet { display: flex; align-items: center; position: relative; color:#bebebe; font-size: 21px; font-weight: 700; transition: color .3s; background-color: transparent; opacity: 1; height: auto; outline: none; font-family: 'GmarketSans'; padding-left: 16px ; width: auto; } #c3_wrap .btn_wrap .swiper-pagination-bullet::before { content: ''; position: absolute; top: 11px; left: 0; width: 8px; height: 11px; background:url("../img/c3_pagination.png") 50%/cover no-repeat; transition: background-image .3s; } #c3_wrap .btn_wrap .swiper-pagination-bullet:hover {color:#000; } #c3_wrap .btn_wrap .swiper-pagination-bullet:hover::before {background-image: url('../img/c3_pagination_hv.png'); } #c3_wrap .btn_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {color:#000;} #c3_wrap .btn_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before {background-image: url('../img/c3_pagination_hv.png'); } #c3_wrap .slide a {display: block; overflow: hidden; width: 100%; transition: all .3s; border-radius: 20px; height: 100%;} #c3_wrap .slide .img {display: flex; justify-content: center; align-items: center; overflow: hidden; } #c3_wrap .slide .img img {transition: all .3s; max-width: 100%; width: 100%; height: 100%; object-fit: cover; } #c3_wrap .slide a:hover .img img {transform: scale(1.05);} /* slider */ #c3_wrap .slider_wrap {width: calc(100% - 550px); position: relative; z-index: 1; } #c3_wrap .slider { overflow: visible;} #c3_wrap .slider .swiper-slide {opacity: 0; pointer-events: none; } #c3_wrap .slider .swiper-slide-active, #c3_wrap .slider .swiper-slide-next, #c3_wrap .slider .swiper-slide-next + .swiper-slide {opacity: 1; pointer-events: auto;} /* arrow */ #c3_wrap .arrow {height: 25px; cursor: pointer; outline: none; font-size: 14px; font-weight: 400; color:#fff; display: flex; align-items: center; font-family: "Montserrat", sans-serif; transition: all .3s; } #c3_wrap .arrow.prev {background:url('../img/prev.png') no-repeat left center; padding-left: 31px;} #c3_wrap .arrow.prev::before {content: 'Prev';} #c3_wrap .arrow.next {background:url('../img/next.png') no-repeat right center; padding-right: 31px; } #c3_wrap .arrow.next::before {content: 'Next';} #c3_wrap .arrow.prev.disabled, #c3_wrap .arrow.next.disabled { pointer-events: none; opacity: .6; } /* progress_bar */ #c3_wrap .pagination_wrap {display: flex; align-items: center; position: absolute; top:138px; left: 505px; z-index: 2;} #c3_wrap .pagination_progress {width: 190px; height: 2px; background: rgba(255,255,255,.3); position: relative; margin: 0 24px; flex-shrink: 0;} #c3_wrap .pagination_progress > span {display: block; transition: all .3s; background: #fff; height: 100%; } /* dots */ #c3_wrap .dots {position: absolute; left: 80px; top:210px; z-index: 2;} #c3_wrap .dots > span {cursor: pointer; display: block; width: 9px; height: 9px; background: #ddd; opacity: 1; margin:0 0 28px; transition: background-color .3s ease;} #c3_wrap .dots > span:last-child {margin: 0;} #c3_wrap .dots > span.swiper-pagination-bullet-active {background-color: #1b1b7f; } @media screen and (max-width: 1500px) { /* 공통 */ /* content */ }