@charset "utf-8"; a { transition:0.25s all; } a:hover { text-decoration:none; } .bold { font-weight:600 !important; } .green { color:#54905a; } .green2 { color:#69916d; } .blue { color:#1d5aac; } .gray_6 { color:#666; } .white { color:#fff; } .flex { position:relative; flex-wrap:wrap; align-items:center; justify-content:space-between; transition:0.3s all; > li { position:relative; } &.main { gap:100px; } .col { flex:1; } } .only_m { display:none; } .inner { position:relative; &.flex { align-items:stretch; dt { display:flex; align-items:start; gap:15px; width:25%; font-weight:400; } dd { width:calc(75% - 100px); } } } .inner + .inner { margin-top:100px; } .inner2 { position:relative; margin-top:45px; } .con_padd { position:relative; padding-top:150px; padding-bottom:150px; } .con_ti { position:relative; font-weight:700; line-height:1.4; &.ti1 { font-size:2.2vw; } &.ti2 { font-size:28px; } } .con_txt { color:#666; &.margin { margin:20px 0 50px 0; } } .p_btn { display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:13px 30px; font-size:16px; font-weight:600; line-height:1.2; border-radius:50px; background:transparent; border:1px solid transparent; span { display:inline-block; font-size:19px; line-height:1; } &.btn_blue { color:#fff; background:#1d5aac; &:hover { background:#0b4592; } } &.btn_white { color:#1d5aac; border-color:#1d5aac; &:hover { color:#fff; background:#1d5aac; } } } .more { display:inline-flex; align-items:center; gap:10px; padding:0 5px 5px; font-size:16px; font-weight:500; color:#7b614e; border-bottom:1px solid #7b614e; &:hover { gap:15px; color:#54905a; border-color:#54905a; } } .tbl_wrap { overflow-x: auto; } .tbl { width: 100%; th, td { padding: 15px 1.25rem; text-align: center; } th { color:#fff; font-weight: 600; background:#7b614e; } > * > tr > * { border:1px solid #e8e2d9; } > * > tr > *:first-child { border-left:0; } > * > tr > *:last-child { border-right:0; } } .greeting.flex { gap:100px; dt { .flex { gap:40px; img { border-radius:20px; } } } } .map.flex { gap:40px; .col { padding:35px 10px; text-align:center; background:rgba(29,90,172,0.1); border-radius:15px; .con_ti { margin:20px 0 10px 0; font-size:20px; } } } .ez-tab.sub { display:flex; align-items:center; justify-content:center; border-bottom:1px solid #ddd; > li { float: none; padding:0; font-size: inherit; a { display: block; height: auto; padding:0 20px 10px; font-weight:600; color: #666; border:0; border-bottom:3px solid transparent; border-radius:0; background-color:transparent; &:hover { color:#69916d; border-bottom:3px solid #69916d; } } &.active { a { height: auto; font-size: inherit; color:#69916d; background-color: transparent; border:0; border-bottom:3px solid #69916d; } } &.no-view-for-line { display:none; } } } .service_wrap { border-radius:25px; border:1px solid #e8e2d9; &.bg { padding:5%; background-position:right center; background-repeat:no-repeat; background-size:contain; &.bg1 { background-image:url('/res/sub/bg_service1.jpg'); } &.bg2 { background-image:url('/res/sub/bg_service2.jpg'); } &.bg3 { background-image:url('/res/sub/bg_service3.jpg'); } } .txt_wrap { width:60%; } .benef.flex { gap:20px; > li { width:100%; padding:15px 25px; background:rgba(225,215,205,0.3); backdrop-filter:blur(5px); border-radius:15px; p { margin-bottom:10px; } } } } .service_info { padding:60px; border-radius:25px; background:#eef3ed; .icon { display:inline-block; border-radius:50%; background:#69916d; img { width:65px; } } } .check.flex { gap:15px; > li { display:flex; align-items:stretch; gap:10px; width:100%; padding:10px 15px 10px 40px; border-radius:10px; background-color:#fff; background-image:url('/res/sub/icon_check.png'); background-repeat:no-repeat; background-position:15px 16px; .bold { color:#6f8f83; } } } .check2.flex { gap:15px; margin-top:10px; > li { width:calc((100% - 15px) / 2); padding:7px 15px; font-size:16px; background:#f2f5f0; border:1px solid #d6dfd6; border-radius:10px; } } .flow.flex { align-items:stretch; gap:20px; > li { width:calc((100% - 20px) / 2); padding:15px 25px; border-radius:15px; background:#fff; span { display:inline-flex; align-items:center; justify-content:center; width:32px; aspect-ratio:1/1; margin-right:10px; font-size:16px; font-weight:500; line-height:1; color:#fff; border-radius:7px; background:#69916d; } .txt { margin-top:10px; padding-left:42px; } } &.flow2 { > li { width:100%; span { color:#7b614e; background:#e8e2d9; } } } &.flow3 { gap:40px; > li { flex:1; padding:25px; border:1px solid #e8e2d9; box-shadow:3px 5px 10px rgba(0,0,0,0.1); z-index:1; p { color:#7b614e; } .txt { padding-left:0; font-size:16px; } &::before { position:absolute; top:50%; left:-30px; content:"→"; font-size:20px; color:#7b614e; font-weight:600; transform:translateY(-50%); z-index:9; } &:nth-child(1)::before { display:none; } } } } .prd.flex { gap:10px; justify-content:start; span { display:inline-block; padding:5px 20px; color:#69916d; font-weight:500; background:#fff; border:1px solid #d6dfd6; border-radius:50px; } } @media only screen and (max-width: 1024px) { .flex { &.main { gap:60px; } } .inner { &.flex { gap:20px; dt, dd { width:100%; } } } .inner + .inner { margin-top:60px; } .inner2 { margin-top:25px; } .con_padd { padding-top:60px; padding-bottom:60px; } .con_ti { br { display:none; } &.ti1 { font-size:26px; } &.ti2 { font-size:20px; } } .con_txt { br { display:none; } &.margin { margin:10px 0 25px 0; } } .p_btn { gap:10px; padding:10px 25px; font-size:15px; span { font-size:17px; } } .more { font-size:15px; padding-bottom:0; &:hover { gap:15px; } } .tbl { th, td { padding: 10px 5px; } } .greeting.flex { gap:40px; > .col { > .flex { gap:20px; } } } .map.flex { gap:20px; } .service_wrap { &.bg { padding:35px; background-position:calc(100% + 125px) bottom; background-size:cover; } } .service_info { padding:25px; .icon img { width:60px; } dt { display:flex; align-items:center; gap:15px; .margin-v15 { margin-top:0 !important; margin-bottom:5px !important; } } } .flow.flex { &.flow3 { > li { flex:1 100%; &::before { top:-25px; left:50%; transform:rotate(90deg) translateX(-50%); } } } } } @media only screen and (max-width: 768px) { .flex { &.main { gap:20px; } .col { flex:1 100%; } } .inner + .inner { margin-top:40px; } .inner2 { margin-top:15px; } .con_ti { &.ti1 { font-size:24px; } &.ti2 { font-size:18px; } } .greeting.flex { > .col { flex:1 100%; > .flex { .col { flex:1 !important; } } } } .map.flex { .col { padding:20px 10px; img { width:30px; } .con_ti { margin:10px 0 7px 0; font-size:18px; } } } .check.flex { gap:15px; > li { flex-direction:column; align-items:start; gap:3px; background-position:15px 15px; } } } @media only screen and (max-width: 540px) { .service_wrap { .txt_wrap { width:100%; } &.bg { padding:20px; padding-bottom:50%; background-position:center bottom; background-size:contain; &.bg1 { background-image:url('/res/sub/bg_service_m1.jpg'); } &.bg2 { background-image:url('/res/sub/bg_service_m2.jpg'); } &.bg3 { background-image:url('/res/sub/bg_service_m3.jpg'); } } } .service_info { padding:15px; border-radius:15px; .icon img { width:60px; } dt { display:flex; align-items:center; gap:15px; .margin-v15 { margin-top:0 !important; margin-bottom:5px !important; } } } .flow.flex { > li { width:100%; padding:15px; span { width:28px; font-size:14px; } .txt { padding-left:0; } } } .check2.flex { gap:10px; > li { width:100%; font-size:15px; } } .prd.flex { gap:7px; span { width:calc((100% - 7px) / 2); } } }