/* 공통 */ #c2_wrap .c_inner { width: 100%; max-width: 1600px; margin:0 auto; position: relative; padding:0 50px;} #c2_wrap .left_line {position: relative; padding-left:24px; } #c2_wrap .left_line::before {content: ''; display: block; width: 5px; height: 60px; background-color: #f7c806; left: 0; top: 5px; position: absolute; } /* btn */ #c2_wrap .c_btn {width: 180px; height: 45px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; padding:0 24px; font-weight: 500; overflow: hidden; z-index: 1; position: relative; pointer-events:auto; border:1px solid #fff; border-radius: 22.5px; transition: all .3s; } #c2_wrap .c_btn::before {content: ""; z-index: -1; position: absolute; background: #f7c806; transition: all .4s; left: 0; top: 0; width: 0; height: 100%;} #c2_wrap .c_btn .plus {display: block; width: 15px; height: 15px; transition: all .3s; background:url("../img/c_btn_plus.png") 50%/contain no-repeat;} #c2_wrap .c_btn:hover {border-color: #f7c806; color:#000; } #c2_wrap .c_btn:hover::before {width:100%;} #c2_wrap .c_btn:hover .plus {background-image:url("../img/c_btn_plus_hv.png");} /* font size */ #c2_wrap .fs_65 {font-size: 65px; font-weight :700; line-height: 1.1; letter-spacing: -1.3px;} #c2_wrap .fs_60 {font-size: 60px; font-weight :700; line-height: 1.1; letter-spacing: -1.2px;} #c2_wrap .fs_55 {font-size: 55px; font-weight :700; line-height: 1.1; letter-spacing: -1.1px; } #c2_wrap .fs_50 {font-size: 50px; font-weight :700; line-height: 1.1; } #c2_wrap .fs_45 {font-size: 45px; font-weight :700; line-height: 1.1; letter-spacing: -.9px; } #c2_wrap .fs_40 {font-size: 40px; font-weight :700; line-height: 1.3; letter-spacing: -.8px; } #c2_wrap .fs_39 {font-size: 40px; font-weight :700; line-height: 1.3;} #c2_wrap .fs_37 {font-size: 37px; font-weight :700; line-height: 1.3;} #c2_wrap .fs_36 {font-size: 36px; font-weight :700; line-height: 1.3;} #c2_wrap .fs_34 {font-size: 34px; font-weight:500; line-height: 1.3; } #c2_wrap .fs_33 {font-size: 33px; font-weight:700; line-height: 1.3; } #c2_wrap .fs_32 {font-size: 32px; font-weight:700; line-height: 1.3; } #c2_wrap .fs_30 {font-size: 30px; font-weight:700; line-height: 1.3; letter-spacing: -.6px; } #c2_wrap .fs_28 {font-size: 28px; font-weight:800; line-height: 1.3; } #c2_wrap .fs_27 {font-size: 27px; font-weight:700; line-height: 1.3; } #c2_wrap .fs_26 {font-size: 26px; font-weight:700; line-height: 1.3; letter-spacing: -.52px; } #c2_wrap .fs_25 {font-size: 25px; font-weight:700; line-height: 1.3; letter-spacing: -.5px; } #c2_wrap .fs_24 {font-size: 24px; font-weight:700; line-height: 1.4;} #c2_wrap .fs_23 {font-size: 23px; font-weight:700; line-height: 1.4;} #c2_wrap .fs_22 {font-size: 22px; font-weight:600; line-height: 1.4; letter-spacing: -.44px; } #c2_wrap .fs_21 {font-size: 21px; font-weight:600; line-height: 1.67; } #c2_wrap .fs_20 {font-size: 20px; font-weight:400; line-height: 1.67; letter-spacing: -.4px; } #c2_wrap .fs_19 {font-size: 19px; font-weight: 400; line-height: 1.67; } #c2_wrap .fs_18 {font-size: 18px; font-weight: 400; line-height: 1.83; color: rgba(255, 255, 255, 0.8); letter-spacing: -.36px;} #c2_wrap .fs_17 {font-size: 17px; font-weight: 400; line-height: 1.72; } #c2_wrap .fs_16 {font-size: 16px; font-weight: 400; line-height: 1.72; } #c2_wrap .fs_15 {font-size: 15px; font-weight: 400; line-height: 1.72; } /*Content CSS*/ #c2_wrap {overflow: hidden; position: relative; color:#fff; padding: 160px 0 0;} #c2_wrap .top_tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 45px; } #c2_wrap .top_tit .tit_wrap {display: flex; align-items: center;} #c2_wrap .tab_list {display: flex; margin-left: 60px; } #c2_wrap .tab_list li + li{margin-left: 37px;} #c2_wrap .tab_list li a {cursor: pointer; font-weight: 700; color: rgba(255, 255, 255, 0.3); line-height: 1.2; transition: .3s; display: block; position: relative; pointer-events:auto;} #c2_wrap .tab_list li a:hover, #c2_wrap .tab_list li a.active {color: #fff;} #c2_wrap .slide a {display: block; padding: 25px 25px 40px; transition: all .3s; border-radius: 30px; } #c2_wrap .slide a:hover {background-color: rgba(255,255,255,.1); } #c2_wrap .slide .txt { margin-top: 35px; transition: border-color .3s ease; text-align: left;} #c2_wrap .slide .cate {font-size: 13px; font-weight: 400; color:#fff; display: block; } #c2_wrap .slide h3 {position: relative; font-weight: 700; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;width: 100%; margin:20px 0 45px;} #c2_wrap .slide h4 {font-weight: 700; line-height: 1.4; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;width: 100%;} #c2_wrap .slide .img {overflow: hidden; display: flex ;align-items: center; justify-content: center; border-radius: 15px; } #c2_wrap .slide .img img {width: 100%; } /* slider */ #c2_wrap .slider_wrap {width: 100%; position: relative; z-index: 1; } #c2_wrap .tab_slider {display: none; height: auto; overflow: visible;} #c2_wrap .tab_slider.first {display: block;} @media screen and (min-width: 1025px) { #c2_wrap .tab_slider .swiper-slide {transition-property: opacity, transform; transition-duration: .3s, .3s; opacity: 0; pointer-events: none; } #c2_wrap .tab_slider .swiper-slide-active, #c2_wrap .tab_slider .swiper-slide-active ~ .swiper-slide {opacity: 1; pointer-events: auto;} } @media screen and (max-width: 1600px) { /* 공통 */ /* content */ } @media screen and (max-width: 1024px) { /* 공통 */ #c2_wrap {padding: 90px 0 0; text-align: center;} #c2_wrap .c_inner {padding:0 30px;} #c2_wrap .left_line {padding: 0;} #c2_wrap .left_line::before {width: 40px; height: 4px; position: static; margin: 0 auto 20px;} /* font size */ #c2_wrap .fs_65 {font-size:35px; } #c2_wrap .fs_60 {font-size:35px; } #c2_wrap .fs_55 {font-size:30px; } #c2_wrap .fs_50 {font-size:30px; } #c2_wrap .fs_45 {font-size:30px; } #c2_wrap .fs_40 {font-size:32px; } #c2_wrap .fs_39 {font-size:32px; } #c2_wrap .fs_37 {font-size:30px; } #c2_wrap .fs_36 {font-size:30px; } #c2_wrap .fs_34 {font-size: 27px;} #c2_wrap .fs_33 {font-size: 26px;} #c2_wrap .fs_32 {font-size: 26px;} #c2_wrap .fs_30 {font-size: 25px;} #c2_wrap .fs_28 {font-size: 22px;} #c2_wrap .fs_27 {font-size: 22px;} #c2_wrap .fs_26 {font-size: 21px;} #c2_wrap .fs_25 {font-size: 21px;} #c2_wrap .fs_24 {font-size: 20px;} #c2_wrap .fs_23 {font-size: 19px;} #c2_wrap .fs_22 {font-size: 19px;} #c2_wrap .fs_21 {font-size: 18px; line-height: 1.4;} #c2_wrap .fs_20 {font-size: 17px; line-height: 1.65;} #c2_wrap .fs_19 {font-size: 17px; line-height: 1.65;} #c2_wrap .fs_18 {font-size: 16px; line-height: 1.65;} #c2_wrap .fs_17 {font-size: 15px; line-height: 1.65;} #c2_wrap .fs_16 {font-size: 14px; line-height: 1.65;} #c2_wrap .fs_15 {font-size: 13px; line-height: 1.65;} /* content */ #c2_wrap .top_tit {display: block; } #c2_wrap .top_tit .tit_wrap {display: block;} #c2_wrap .tab_list {margin: 30px 0 40px; justify-content: center; } #c2_wrap .c_btn {margin: 0 auto; width: 100%; } #c2_wrap .slide h3 {margin: 15px 0 25px; } } @media screen and (max-width: 640px) { /* 공통*/ #c2_wrap {padding:70px 0 0;} #c2_wrap .c_inner { padding: 0 20px; } /* font size */ #c2_wrap .fs_65 {font-size:30px; } #c2_wrap .fs_60 {font-size:27px; } #c2_wrap .fs_55 {font-size:25px; } #c2_wrap .fs_50 {font-size:25px; } #c2_wrap .fs_45 {font-size:25px; } #c2_wrap .fs_40 {font-size:24px; } #c2_wrap .fs_39 {font-size:24px; } #c2_wrap .fs_37 {font-size:22px; } #c2_wrap .fs_36 {font-size:22px; } #c2_wrap .fs_34 {font-size: 21px;} #c2_wrap .fs_33 {font-size: 20px;} #c2_wrap .fs_32 {font-size: 20px;} #c2_wrap .fs_30 {font-size: 20px;} #c2_wrap .fs_28 {font-size: 19px;} #c2_wrap .fs_27 {font-size: 19px;} #c2_wrap .fs_26 {font-size: 18px;} #c2_wrap .fs_25 {font-size: 18px;} #c2_wrap .fs_24 {font-size: 17px;} #c2_wrap .fs_23 {font-size: 17px;} #c2_wrap .fs_22 {font-size: 17px;} #c2_wrap .fs_21 {font-size: 16px;} #c2_wrap .fs_20 {font-size: 15px;} #c2_wrap .fs_19 {font-size: 15px;} #c2_wrap .fs_18 {font-size: 14px;} #c2_wrap .fs_17 {font-size: 14px;} #c2_wrap .fs_16 {font-size: 13px;} #c2_wrap .fs_15 {font-size: 12px;} /* content */ #c2_wrap .top_tit {margin-bottom: 30px; } #c2_wrap .c_btn {height: 40px; font-size: 13px; } #c2_wrap .c_btn .plus {width: 13px;} #c2_wrap .slide a {border-radius: 20px; padding: 20px 20px 30px; } #c2_wrap .slide h3 {margin: 15px 0 20px; } } @media screen and (max-width: 480px) { /* 공통*/ }