/*Content CSS*/ #c3_wrap .c_inner {width: 100%; max-width: 1600px; padding: 0 50px; margin: 0 auto; } /* font size */ #c3_wrap .fs_70 {font-size:70px; font-weight :700; line-height: 1.1; } #c3_wrap .fs_60 {font-size: 60px; font-weight :700; line-height: 1.1; } #c3_wrap .fs_55 {font-size: 55px; font-weight :700; line-height: 1.1; } #c3_wrap .fs_50 {font-size: 50px; font-weight :700; line-height: 1.1; } #c3_wrap .fs_49 {font-size: 49px; font-weight :800; 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_35 {font-size: 35px; 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; letter-spacing: -.46px; } #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; letter-spacing: -.42px; } #c3_wrap .fs_20 {font-size: 20px; font-weight:400; line-height: 1.85; letter-spacing: -.4px; } #c3_wrap .fs_19 {font-size: 19px; font-weight: 400; line-height: 1.67; letter-spacing: -.38px; } #c3_wrap .fs_18 {font-size: 18px; font-weight: 400; line-height: 1.83; 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 {width: 180px; height:50px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight:400; font-family: "Poppins", sans-serif; overflow: hidden; z-index: 1; position: relative; border:1px solid #fff; transition: all .3s; pointer-events: auto; border-radius: 25px;} #c3_wrap .c_btn .arrow {transition: background-image .3s; display: block; width: 12px ;height: 11px; background:url("../img/c_btn_arrow.png") 50%/contain no-repeat; position: relative; margin-left: 20px;} #c3_wrap .c_btn:hover {border-color: #092a62; background-color: #092a62; } /* Content */ #c3_wrap {padding: 100px 0 100px; overflow: hidden; background:url("../img/c3_bg.jpg") 50%/cover no-repeat; margin: 0 auto; width: calc(100% - 20px); border-radius: 20px; } #c3_wrap .c_inner {display: flex; justify-content: space-between; align-items: flex-start; } #c3_wrap .left_txt {flex-shrink: 0; padding: 30px 0 0;} #c3_wrap .left_txt h2 {color:#fff; font-family: "Poppins", sans-serif; font-weight: 700; line-height: 1.17; } #c3_wrap .left_txt p {color:#fff; line-height: 1.74;font-weight: 400; margin-top:50px; } #c3_wrap .list { width: 770px;} #c3_wrap .list > li {width:100%; display: flex; align-items: center; padding: 0 60px; height: 200px;border-radius: 20px; background: rgba(0,0,0,.05); overflow: hidden; justify-content: space-between; position: relative; z-index: 1; backdrop-filter: blur(10px); text-align: left; } #c3_wrap .list > li::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: -1; opacity: 0; transition: opacity .3s; background:url("../img/c3_list_bg.jpg") 50%/cover no-repeat;} #c3_wrap .list .txt {display: flex; align-items: center;} #c3_wrap .list .txt h4 {font-weight: 700; color:#fff; } #c3_wrap .list .c_btn {flex-shrink: 0; margin-left: 20px; } #c3_wrap .list .icon {flex-shrink: 0; display: flex; width:93px;} #c3_wrap .list .icon img {transition: transform .5s; } #c3_wrap .list > li:hover .icon img {transform: rotateY(180deg);} #c3_wrap .list > li:hover::before {opacity: 1; } #c3_wrap .list > li:nth-child(n+2) {margin-top: 24px; } @media screen and (max-width: 1500px) { #c3_wrap .list { width: 55%; max-width: 770px;} #c3_wrap .list > li {padding: 0 40px; } } @media screen and (max-width: 1199px) { #c3_wrap .c_btn {width: 150px;} } @media screen and (max-width: 1024px) { /* 공통 */ #c3_wrap {padding:70px 0; text-align: center; width: 100%; border-radius: 0; } #c3_wrap .c_inner {padding:0 30px;} /* font size */ #c3_wrap .fs_70 {font-size:35px; } #c3_wrap .fs_60 {font-size:35px; } #c3_wrap .fs_55 {font-size:32px; } #c3_wrap .fs_49 {font-size:30px; } #c3_wrap .fs_50 {font-size:30px; } #c3_wrap .fs_45 {font-size:28px; } #c3_wrap .fs_40 {font-size:28px; } #c3_wrap .fs_39 {font-size:28px; } #c3_wrap .fs_37 {font-size:27px; } #c3_wrap .fs_36 {font-size:27px; } #c3_wrap .fs_35 {font-size: 27px;} #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;} #c3_wrap .c_btn {font-size: 15px; height: 45px; width: 150px;} /* content */ #c3_wrap br {display: none; } #c3_wrap .c_inner {display: block; } #c3_wrap .left_txt {padding: 0; } #c3_wrap .left_txt p {margin-top: 20px; } #c3_wrap .list {width: 100%; margin: 50px auto 0;} #c3_wrap .list > li {height: 140px; } #c3_wrap .list > li:nth-child(n+2) {margin-top: 15px; } } @media screen and (max-width: 640px) { /* 공통*/ #c3_wrap {padding: 50px 0;} #c3_wrap .c_inner {padding:0 20px;} /* font size */ #c3_wrap .fs_70 {font-size:30px; } #c3_wrap .fs_60 {font-size:27px; } #c3_wrap .fs_55 {font-size:25px; } #c3_wrap .fs_49 {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_35 {font-size: 21px;} #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;} /* c_btn */ #c3_wrap .c_btn {width:140px; height: 40px; font-size: 13px; } #c3_wrap .c_btn .arrow {width: 10px; margin-left: 10px; } /* content */ #c3_wrap .left_txt p {font-size: 15px; margin-top: 15px; } #c3_wrap .list {margin: 40px 0 0;} #c3_wrap .list > li {height: 120px; padding: 0 30px; } #c3_wrap .list .icon {width:60px; } #c3_wrap .list .icon img {max-height: 45px;} } @media screen and (max-width: 480px) { /* 공통*/ /* content */ #c3_wrap .list > li {height: auto; padding: 25px 20px; display: block; } #c3_wrap .list .txt {justify-content: center; margin: 0 0 20px;} #c3_wrap .list .c_btn {margin: 0 auto; } }