@charset "utf-8"; @font-face { font-family: 'HanYongUn'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/HAN-YONG-UN.woff') format('woff'); font-weight: normal; font-display: swap; } a { transition:0.25s all; } a:hover { text-decoration:none; } .flex { position:relative; flex-wrap:wrap; align-items:center; justify-content:space-between; transition:0.3s all; &.main { gap:100px; .items { position:relative; flex:1; z-index:1; dl { margin-top:25px; padding-left:45px; dd { margin-top:40px; } } } } &.sub { align-items:stretch; justify-content:flex-start; gap:20px; > li { flex:1; text-align:center; } } > li { position:relative; transition:0.3s all; } } .page_btn { display:inline-block; padding:0 25px; font-size:16px; line-height:40px; font-weight:500; border-radius:50px; &.large { padding:0 45px; font-size:inherit; line-height:55px; } &.btn_orange { color:#0b1c35; background:#f59e0b; &:hover { background:#f5840b; } } } .only_m { display:none; } .inner { position:relative; } .inner + .inner { margin-top:80px; } .inner2 { position:relative; margin-top:35px; } .con_ti { position:relative; font-weight:700; line-height:1.4; &.ti1 { font-size:40px; } &.ti2 { font-size:22px; } &.ti3 { font-size:30px; } &.ti4 { font-size:50px; } &.padd { padding-left:45px; } } .con_cate { position:relative; display:block; padding-left:45px; font-size:12px; line-height:1; color:#f59e0b; letter-spacing:2px; text-transform: uppercase; &::before { position:absolute; top:50%; left:0; content:""; width:35px; height:1px; background:#f59e0b; transform:translateY(-50%); } } .con_txt { font-size:16px; color:rgba(255,255,255,0.5); } .con_padd { position:relative; padding-top:100px; padding-bottom:100px; } .con_more { display:inline-flex; align-items:center; gap:10px; color:#333; font-weight:600; &:hover { color:#f59e0b; gap:15px; } } .con_bg { padding:8% 0; background-repeat:no-repeat; background-position:center center; background-size:cover; &.bg { padding:5% 0; background-color:#edf0f5; } &.bg1 { background-image:url(/res/sub/service01.jpg); } &.bg2 { background-image:url(/res/sub/service02.jpg); } &.bg3 { background-image:url(/res/sub/service03.jpg); } &.bg4 { background-image:url(/res/sub/service04.jpg); } &.bg5 { background-image:url(/res/sub/service05.jpg); } &.bg6 { background-image:url(/res/sub/service06.jpg); } &.bg7 { background-image:url(/res/sub/service07.jpg); } &.bg8 { background-image:url(/res/sub/service08.jpg); } &.bg9 { background-image:url(/res/sub/service09.jpg); } } .img_r { border-radius:1.3vw; } .orange { color:#f59e0b; } .white { color:#fff; } .tbl_wrap { padding:6%; background:rgba(0,0,0,0.5); backdrop-filter: blur(10px); border-radius:1.3vw; } .tbl { width: 100%; transition: all 0.3s; border-bottom:2px solid transparent; background: linear-gradient(to right, #0d6fdf, #72e3cd); > * > tr > * { border-bottom: 1px solid rgba(0,0,0,0.12); } th, td { padding:12px; text-align: center; } thead { background: linear-gradient(to right, #0d6fdf, #72e3cd); th { padding:20px 10px; font-size:20px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.15); img { margin-bottom:10px; } } } tbody { th { font-weight: 600; background:rgba(15,90,180,0.1); } td { background:#fff; } } &.diff { thead th:nth-child(2), tbody th { color:#fff; background:#0b1c35; } } } .greeting.flex { flex-direction:row-reverse; align-items:stretch; .con_ti { font-weight:600; span { font-weight:900; background: linear-gradient(to right, #0d6fdf, #72e3cd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .sign span { font-family: 'HanYongUn'; font-size:36px; } } .org_ti.flex { justify-content:center; gap:10px; font-size:24px; font-weight:600; color:#666; } .org_wrap.flex { flex-direction:column; &::after { position:absolute; bottom:0; left:50%; content:""; width:2px; height:100%; background:#ddd; transform:translateX(-50%); z-index:1; } .org { position:relative; width:100%; &.top { position:relative; padding-bottom:80px; text-align:center; } span { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:200px; padding:15px 25px; font-size:22px; font-weight:600; color:#fff; background: linear-gradient(to right, #0d6fdf, #72e3cd); border-radius:15px; z-index:9; } } .org.bottom.flex { align-items:stretch; padding-top:90px; &::before { position:absolute; top:0; left:50%; content:""; width:calc((100% - ((100% - 120px) / 7))); height:2px; background:#ddd; transform:translateX(-50%); z-index:1; } .team { position:relative; flex:1; padding:20px 10px; border:2px solid #ddd; border-radius:15px; background:#fff; z-index:9; &::after { position:absolute; top:-90px; left:50%; content:""; width:2px; height:50px; background:#ddd; transform:translateX(-50%); z-index:1; } .icon { position:absolute; top:-40px; left:50%; display:inline-block; background:#2881c5; border-radius:50%; transform:translateX(-50%); } .ti { position:relative; margin:25px 0 20px 0; font-size:20px; font-weight:600; color:#2881c5; text-align:center; &::after { position:absolute; bottom:-10px; left:50%; content:""; width:35%; height:2px; background:#3d93d5; transform:translateX(-50%); } } .list.flex { flex-direction:column; z-index:9; } } } } .certi.flex { gap:20px; > li { width:calc((100% - 40px) / 3); text-align:center; border:1px solid #ddd; border-radius:1.3vw; overflow:hidden; } } .map.flex { > li { display:flex; align-items:center; gap:10px; img { background:#f59e0b; border-radius:7px; } } } .service.flex { > li { flex:1; padding:0 20px; text-align:center; color:#fff; .img { display:inline-block; padding:20px; border-radius:10px; background:rgba(11,28,53,0.7); backdrop-filter: blur(10px); } p { margin:15px 0 10px 0; color:#fff; } } } .merit.flex { > li { padding:20px; span { display:inline-block; width:35px; margin-bottom:15px; line-height:35px; color:#fff; background:#f59e0b; border-radius:50%; } div { font-size:20px; color:#fff; } } } .check_wrap { padding:25px; border: 4px solid transparent; border-radius:10px; background-image:linear-gradient(#fff, #fff), linear-gradient(90deg, rgba(13, 111, 223, 1) 0%, rgba(114, 227, 205, 1) 100%); background-origin: border-box; background-clip: padding-box, border-box; .check.flex { gap:10px; > li { flex:1 calc((100% - 10px) / 2); position:relative; padding-left:35px; font-weight:600; text-align:left; &::before { position:absolute; left:0; content:""; width:30px; height:30px; background-image:url(/res/icon_check.png); border-radius:50%; } } } } .step_wrap { padding:5% 0; border-radius:0.5vw; background:#0b1c35; .step.flex { align-items:stretch; > li { flex:1; padding:0 10px; text-align:center; p { color:#fff; } span { display:block; font-size:14px; font-weight:600; color:#f59e0b; } img { position:relative; margin-bottom:10px; background:#3a362d; border-radius:50%; z-index:99; } &::after { position:absolute; top:calc(65px / 2); left:0; content:""; width:100%; height:1px; background:#3a362d; z-index:1; } } &.step2 { > li { &::after { top:calc(110px / 2); } } } } } .reference { padding:25px 25px 25px 35px; background:rgba(245,158,11,0.1); &::before { position:absolute; top:0; left:0; content:""; width:5px; height:100%; background:#f59e0b; } } .place.flex { > li { flex:none; width:calc((100% - 60px) / 4); text-align:center; span { display:none; } p { margin-top:15px; color:#fff; } img { border-radius:0.8vw; } } } .fr_wrap2 { align-items:stretch; .con_ti { display:flex; align-items:center; text-align:center; width:35%; padding:40px; color:#fff; border-radius:1.3vw; background:url(/res/sub/consulting.jpg) no-repeat center center; } .fr_info { width:55%; .flex > li { flex:none; width:calc((100% - 20px) / 2); text-align:left; } } .ipt, .slt, .txta { width:100%; padding:0 15px; line-height:45px; border:0; background:rgba(0,0,0,0.1); border-radius:10px; outline:0; } .slt { height:45px; } .txta { height:125px; padding:15px; line-height:1.6; } label { display: block !important; font-size: initial !important; } .ezform-label:has(+ .ez_required)::after, .ezform-label:has(+ * .ez_required)::after { color: black; margin-top: 2px; } } .category-wrap { width:100%; .category.flex { width:100%; gap:10px; > li { flex:1; a { display:block; padding:10px; font-weight:500; color:#0b1c35; text-align:center; background:rgba(245,158,11,0.2); border-radius:7px; &:hover { font-weight:600; background:#f59e0b; } } &.selected a { font-weight:600; background:#f59e0b; } } } } @media only screen and (max-width: 1024px) { .flex { &.main { gap:60px; } &.sub { gap:20px; } &.col2 > li { width:calc((100% - 20px) / 2); } &.col3 > li { width:calc((100% - 40px) / 3); } &.col4 > li { width:calc((100% - 60px) / 4); } &.col5 > li { width:calc((100% - 80px) / 5); } &.col6 > li { width:calc((100% - 100px) / 6); } } .only_pc { display:none; } .only_m { display:block; } .inner + .inner { margin-top:60px; } .con_padd { padding-top:60px; padding-bottom:60px; } .con_ti { &.ti1 { font-size:30px; } &.ti3 { font-size:26px; } &.ti4 { font-size:40px; } } .page_btn { &.large { padding:0 30px; line-height:45px; } } .tbl { thead { th { padding:12px; font-size:18px; } } } .org_ti.flex { font-size:20px; } .org_wrap.flex { .org { &.top { padding-bottom:40px; } span { padding:12px; font-size:20px; border-radius:10px; } } .org.bottom.flex { padding-top:80px; .team { border-radius:10px; &::after { top:-80px; height:40px; } .ti { margin-top:15px; font-size:18px; } } } } .service.flex { > li { .img { padding:15px; img { width:40px; } } } } .merit.flex { > li { padding:10px; span { width:30px; margin-bottom:10px; line-height:30px; } div { font-size:18px; } } } } @media only screen and (max-width: 768px) { .flex { &.main { gap:20px; .items { position:relative; flex:auto; } } &.sub { gap:10px; > li { flex:1 calc((100% - 10px) / 2); } } } .greeting.flex { .line { font-size:26px; } .sign span { font-family: 'HanYongUn'; font-size:32px; } } .org_wrap.flex { &::after { height:50px; top:50px; } .org.bottom.flex { justify-content:flex-start; &::before { width:calc((100% - ((100% - 30px) / 4))); } .team { flex:none; width:calc((100% - 30px) / 4); &:nth-child(n+5) { margin-top:68px; } } } } .certi.flex { gap:10px; > li { width:calc((100% - 10px) / 2); } } .fr_wrap2 { flex-direction:column; gap:20px; > div { width:100% !important; } } .service.flex { > li { flex:1 calc(50% - 10px); } } .place.flex { > li { flex:none !important; width:calc((100% - 20px) / 3); } } .step_wrap { .step2.flex { > li { img { width:80px !important; } &::after { top:calc(80px / 2) !important; } } } } } @media only screen and (max-width: 540px) { .flex { &.main { .items { dl { padding-left:0; dd { margin-top:20px; } } } } &.sub { gap:10px; > li { flex:1 100%; } } } .inner + .inner { margin-top:40px; } .inner2 { margin-top:20px; } .con_padd { padding-top:35px; padding-bottom:35px; } .con_ti { &.ti1 { font-size:24px; } &.ti3 { font-size:20px; } &.ti4 { font-size:30px; } &.padd { padding-left:0; } } .con_cate { padding-left:30px; &::before { width:20px; } } .org_ti.flex { gap:5px; padding:0 20px; font-size:18px; line-height:1.4; img { width:18px; } } .org_wrap.flex { .org.top { img { width:25px; } } .org.bottom.flex { &::before { width:calc((100% - ((100% - 10px) / 2))); } .team { width:calc((100% - 10px) / 2); &:nth-child(n+3) { margin-top:68px; } .icon img { width:55px; } .ti { margin-top:10px; line-height:1; } } } } .certi.flex > li { width:calc((100% - 10px) / 2); } .category-wrap { .select.none { display:block; width:100% !important; padding:0 10px; height:40px; line-height:40px; font-size:16px; font-weight:500; border-radius:7px; background:#f59e0b; border-color:transparent; } .category.flex { display:none !important; } } .service.flex { > li { flex:1 100%; padding:10px 0; & + li { border:0; border-top:1px solid rgba(255,255,255,0.2); } } } .check_wrap { padding:20px; .check.flex { gap:10px; > li { flex:1 100%; padding-left:30px; &::before { top:-4px; } } } } .place.flex { > li { width:calc((100% - 10px) / 2); } } .step_wrap { padding:25px 0; .step.flex { gap:20px 0; > li { flex:1 calc(100% / 3); padding:0 5px; img { width:50px; } &::after { top:calc(50px / 2); } } } .step2.flex { > li { flex:1 calc(100% / 2); } } } .reference { padding:25px 25px 25px 35px; background:rgba(245,158,11,0.1); &::before { position:absolute; top:0; left:0; content:""; width:5px; height:100%; background:#f59e0b; } } } @media only screen and (max-width: 320px) { }