/* common */ #c3_wrap .c_inner { width: 100%; max-width: 1600px; margin:0 auto; position: relative; padding:0 50px;} #c3_wrap .left_line {position: relative; padding-left:24px; } #c3_wrap .left_line::before {content: ''; display: block; width: 5px; height: 60px; background-color: #f7c806; left: 0; top: 5px; position: absolute; } /* font size */ #c3_wrap .fs_65 {font-size: 65px; font-weight :700; line-height: 1.1; letter-spacing: -1.3px;} #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 .plus_btn {display: flex; align-items: center; justify-content: center; width: 80px; height:80px; border-radius: 50%; background:rgba(247,247,247,.3); transition: all .3s;} #c3_wrap .plus_btn i {transition: transform .3s; display: block; width: 35px; height: 35px; background:url("../img/btn_plus.png") 50%/contain no-repeat; } #c3_wrap .plus_btn:hover i {transform: rotate(90deg);} /*Content CSS*/ #c3_wrap { color:#fff; position:relative; z-index: 2; padding:160px 0 70px; } #c3_wrap .list { display: flex; justify-content: space-between; margin-top: 45px;} #c3_wrap .list li { width:calc(50% - 15px); } #c3_wrap .list li a { position:relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; transition: all .3s; text-align: left; border-radius: 30px; } #c3_wrap .list li a::before {content: ''; display: block; width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top:0; transition: all .3s; opacity: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(to top, #f79f06, #f7c806); } #c3_wrap .list .txt { position: absolute; left: 0; bottom: 0; z-index: 2; padding:0 50px 45px; width: 100%;} #c3_wrap .list .txt h3 { color:#fff; font-weight: 700;} #c3_wrap .list .txt p { color:#fff; transition: all .3s; } #c3_wrap .list .plus_btn {z-index: 2; position: absolute; top:45px; right: 45px; } #c3_wrap .list .img {overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: inherit; } #c3_wrap .list .img img {transition: transform .3s; max-width: inherit; } /* hover */ #c3_wrap .list a:hover::before {opacity: .8; } #c3_wrap .list a:hover .img img {transform: scale(1.1);} @media screen and (min-width: 1025px) { #c3_wrap .list .txt p {max-height: 0; overflow: hidden;} #c3_wrap .list a:hover .txt p {margin-top:20px; max-height:50px;} } @media screen and (max-width:1600px) { /* common */ #c3_wrap br:not(.space) {display: none;} /* content */ } @media screen and (max-width: 1024px) { /* common */ #c3_wrap {padding: 90px 0 70px; text-align: center;} #c3_wrap .c_inner {padding:0 30px;} #c3_wrap .left_line {padding: 0;} #c3_wrap .left_line::before {width: 40px; height: 4px; position: static; margin: 0 auto 20px;} /* font */ #c3_wrap .fs_65 {font-size:35px; } #c3_wrap .fs_60 {font-size:35px; } #c3_wrap .fs_55 {font-size:30px; } #c3_wrap .fs_50 {font-size:30px; } #c3_wrap .fs_45 {font-size:30px; } #c3_wrap .fs_40 {font-size:32px; } #c3_wrap .fs_39 {font-size:32px; } #c3_wrap .fs_37 {font-size:30px; } #c3_wrap .fs_36 {font-size:30px; } #c3_wrap .fs_34 {font-size: 27px;} #c3_wrap .fs_33 {font-size: 26px;} #c3_wrap .fs_32 {font-size: 26px;} #c3_wrap .fs_30 {font-size: 25px;} #c3_wrap .fs_28 {font-size: 22px;} #c3_wrap .fs_27 {font-size: 22px;} #c3_wrap .fs_26 {font-size: 21px;} #c3_wrap .fs_25 {font-size: 21px;} #c3_wrap .fs_24 {font-size: 20px;} #c3_wrap .fs_23 {font-size: 19px;} #c3_wrap .fs_22 {font-size: 19px;} #c3_wrap .fs_21 {font-size: 18px; line-height: 1.4;} #c3_wrap .fs_20 {font-size: 17px; line-height: 1.65;} #c3_wrap .fs_19 {font-size: 17px; line-height: 1.65;} #c3_wrap .fs_18 {font-size: 16px; line-height: 1.65;} #c3_wrap .fs_17 {font-size: 15px; line-height: 1.65;} #c3_wrap .fs_16 {font-size: 14px; line-height: 1.65;} #c3_wrap .fs_15 {font-size: 13px; line-height: 1.65;} /* content */ #c3_wrap .list {display: block; margin-top:40px;} #c3_wrap .list li { width:100%; } #c3_wrap .list li + li {margin-top: 20px; } #c3_wrap .list .img img {max-width: 100%; max-height: 300px; object-fit: cover; width: 100%; } #c3_wrap .list .txt {padding:0 30px 30px;} #c3_wrap .list .txt p {display: none; } #c3_wrap .list .plus_btn {right: 30px; top:30px; } } @media screen and (max-width: 640px) { /* common */ #c3_wrap {padding: 70px 0 50px;} #c3_wrap .c_inner {padding:0 20px;} /* font size */ #c3_wrap .fs_65 {font-size:30px; } #c3_wrap .fs_60 {font-size:27px; } #c3_wrap .fs_55 {font-size:25px; } #c3_wrap .fs_50 {font-size:25px; } #c3_wrap .fs_45 {font-size:25px; } #c3_wrap .fs_40 {font-size:24px; } #c3_wrap .fs_39 {font-size:24px; } #c3_wrap .fs_37 {font-size:22px; } #c3_wrap .fs_36 {font-size:22px; } #c3_wrap .fs_34 {font-size: 21px;} #c3_wrap .fs_33 {font-size: 20px;} #c3_wrap .fs_32 {font-size: 20px;} #c3_wrap .fs_30 {font-size: 20px;} #c3_wrap .fs_28 {font-size: 19px;} #c3_wrap .fs_27 {font-size: 19px;} #c3_wrap .fs_26 {font-size: 18px;} #c3_wrap .fs_25 {font-size: 18px;} #c3_wrap .fs_24 {font-size: 17px;} #c3_wrap .fs_23 {font-size: 17px;} #c3_wrap .fs_22 {font-size: 17px;} #c3_wrap .fs_21 {font-size: 16px;} #c3_wrap .fs_20 {font-size: 15px;} #c3_wrap .fs_19 {font-size: 15px;} #c3_wrap .fs_18 {font-size: 14px;} #c3_wrap .fs_17 {font-size: 14px;} #c3_wrap .fs_16 {font-size: 13px;} #c3_wrap .fs_15 {font-size: 12px;} /* content */ #c3_wrap .list {margin-top:30px;} #c3_wrap .list li a {border-radius: 20px; } #c3_wrap .list .img img {max-height: 250px; object-fit: cover; width: 100%; } #c3_wrap .list .txt {padding:0 20px 20px;} #c3_wrap .list .plus_btn {right: 20px; top:20px; width: 40px; height: 40px; } #c3_wrap .list .plus_btn i {width: 17px; } } @media screen and (max-width:480px) { }