body {
}
#top-banner {
width:100%;
height:52px;
background:#030b1c;
background:radial-gradient(circle at center,rgba(7,34,80,0.85) 0%,rgba(3,11,28,1) 60%,rgba(3,11,28,1) 100%);
display:flex;
align-items:center;
overflow:hidden;
position:fixed;
top:0;
z-index:19;
}
#top-banner .inner {
max-width:1850px;
width:100%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding: 0 20px;
}
/* 텍스트 롤링 */
.tb-text-wrapper {
position:relative;
height:22px;
display:flex;
align-items:center;
justify-content:center;
}
.tb-text {
position:absolute;
opacity:0;
color:#fff;
font-size:15px;
transition:opacity .6s ease;
white-space:nowrap;
}
.tb-text.active {
opacity: 1;
}
/* 닫기 버튼 */
.tb-close {
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.1);
border:none;
width:26px;
height:26px;
color:#fff;
border-radius:20px;
cursor:pointer;
font-size:18px;
line-height: 0;
}
/* 모바일 대응 */
@media(max-width:768px) {
.tb-text {
font-size:14px;
}
}
.fix_right {
position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);
z-index:9999;
transition:all .5s;
box-shadow:0 0 20px rgba(0,0,0,0.1);
background:#fff;
border-radius:130px;
padding:15px 0;
}
.fix_right li {
margin:15px 0;
border-radius:50%;
text-align:center;
}
.fix_right li img {
border-radius:10px;
width:25px
}
.fix_right li a {
display:block;
vertical-align:middle;
width:80px;
line-height:40px;
text-align:center;
color:#4F4F4F;
font-size:24px;
}
.fix_right li.hash {
display:none
}
.fix_right li.call {
}
.fix_right li.gohd a {
color:#fff;
width:80px;
height:80px;
line-height:80px;
}
.fix_right li a p {
font-size:15px;
line-height:normal;
letter-spacing:-0.05em;
font-weight:600;
white-space:nowrap
}
.fix_right li.gohd {
position:absolute;
top:calc( 100% + 2px );
background:#313B75;
margin: 5px 0;
}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
#cus {
display:none;
}
.fix_right {
top:18%;
}
.fix_right li.hash {
display:block;
}
}
@media screen and (max-width:900px) {
#hd_wrapper {
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
width:100%;
}
.fix_right {
top:unset;
bottom:120px;
right:20px;
transform:unset;
padding:10px 0 15px;
}
.fix_right li {
margin:5px 0
}
.fix_right li a {
width:60px;
font-size:14px;
}
.fix_right li a p {
width:60px;
font-size:10px;
}
.fix_right li.gohd a {
color:#fff;
width:60px;
height:60px;
line-height:60px;
}
}
.inner {
max-width:1850px;
margin:0 auto;
width:100%;
padding: 20px
}
/* HERO */
#hero {
width:100%;
overflow:hidden;
position:relative
}
#hero .heroSwiper {
height:600px
}
#hero .swiper-pagination {
position:relative;
transform:translateY(-50%);
bottom:50px
}
.hero-inner {
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 0 80px 80px;
background:#f5f8ff;
max-height:600px;
}
.hero-inner .txt {
position:relative;
z-index:2;
}
.hero-inner .txt h2 {
font-size:46px;
color:#1b3fae;
line-height:1.3;
font-weight:700
}
.hero-inner .txt p {
font-size:18px;
color:#333;
margin:15px 0 25px;
line-height:1.6
}
.hero-inner .txt .btn {
background:#4a8cff;
color:#fff;
padding:12px 26px;
font-size:16px;
display:inline-block
}
.hero-inner .img img {
height:100%;
}
.slide-quick-box {
position:absolute;
top:50%;
transform:translateY(-50%);
left:50%;
z-index:8;
margin-left:360px;
width:300px;
height:fit-content;
background:rgba(0,0,0,0.88);
background-size:cover;
padding:40px 20px 30px;
border-radius:10px;
box-shadow:0 10px 20px rgba(20,67,153,0.4);
}
.slide-quick-box .slide-quick-tit {
text-align:left;
margin:-5px 20px 0;
padding-bottom:16px;
}
.slide-quick-box .slide-quick-tit h3 {
color:#fff;
font-size:26px;
font-weight:600;
margin-bottom:6px;
}
.slide-quick-box .slide-quick-tit span {
color:rgb(169,199,253);
font-size:14px;
font-weight:300;
line-height:1.2em;
}
.slide-quick-box .slide-quick-btn {
align-items:center;
gap:10px;
border-radius:4px;
background-color:rgba(0,0,0,0.2);
box-shadow:0 0px 20px rgb(22,43,133);
vertical-align:top;
margin:10px;
display:flex;
padding:18px 20px;
position:relative;
cursor:pointer;
}
.slide-quick-box .slide-quick-btn:hover {
background-color:rgba(255,255,255,0.3);
}
.slide-quick-box .slide-quick-btn span {
font-size:16px;
line-height:1em;
font-weight:500;
color:#fff;
}
.slide-quick-box .slide-quick-btn span small {
font-size:14px;
line-height:1.4em;
font-weight:200;
color:#fff;
padding-top:px;
}
.slide-quick-box .slide-quick-btn i {
color:#fff;
font-size:40px
}
#intro .intro-box {
display:flex;
justify-content:space-between;
align-items:center;
padding:60px 0
}
#intro .intro-box .txt h3 {
font-size:38px;
font-weight:700;
color:#1b3fae;
line-height:1.4
}
#intro .intro-box .txt p {
margin-top:15px;
font-size:17px;
color:#444;
line-height:1.6
}
#intro .intro-box .img img {
width: 420px;
}
/* FEATURE */
section#feature {
margin-top:-100px;
position:relative;
z-index:3;
}
#feature .sec-title,#extra-service .sec-title,#service-pack .sec-title {
font-size:25px;
font-weight:700;
margin-bottom:25px;
color:#000
}
.feature-grid {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
background:#fff;
padding:10px;
}
.feature-grid .card {
padding:25px;
border:1px solid #ddd;
;
text-align:center;
background:#fff
}
.feature-grid .card img {
width:90px;
;
margin-bottom:12px
}
.feature-grid .card h4 {
font-size:20px;
color:#1b3fae;
margin-bottom:8px
}
.feature-grid .card p {
font-size:15px;
color: #555
}
/* PACK SERVICE */
#service-pack {
padding-bottom:50px
}
#service-pack .pack-grid {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:25px
}
#service-pack .item {
text-align:center;
padding:25px;
background:#f8f8f8
}
#service-pack .item img {
width:90px;
;
margin-bottom:12px
}
#service-pack .item h4 {
font-size:20px;
color:#1b3fae;
margin-bottom:8px
}
#service-pack .item p {
font-size:15px;
color:#444
}
#service-pack .item svg {
background:#fff;
border-radius: 150px
}
/* INFO BOARD */
#info-board {
background:#f8f8f8;
padding-top:120px;
margin-top:-120px
}
#info-board .inner {
display:flex;
gap:40px;
padding:50px 20px
}
#info-board .col {
flex:1;
width:100%
}
#info-board .col h4 {
font-size:22px;
margin-bottom:12px;
color:#1b3fae
}
#info-board .col ul li {
margin-bottom:10px
}
#info-board .col ul li a {
font-size:15px;
color: #333
}
/* PARTNERSHIP */
#partnership {
text-align:center;
padding:80px 0;
overflow:hidden
}
#partnership h3 {
font-size:32px;
color:#1b3fae;
margin-bottom:15px
}
#partnership p {
font-size:17px;
color:#444;
margin-bottom:20px
}
#partnership .partner-logo {
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
gap:10px
}
#partnership .partner-logo .img {
min-width:250px;
border-radius:20px;
background:#f8f8f8;
padding:20px;
height:75px;
display:flex;
align-items:center;
justify-content:center
}
#partnership .partner-logo img {
width:200px;
mix-blend-mode:darken;
max-height:70px;
object-fit: contain;
}
/* 기존 CSS에서 이 부분만 교체 또는 추가 */
#partnership .partner-slider {
width:100%;
padding:20px 0;
}
#partnership .swiper-wrapper {
display:flex
}
#partnership .swiper-slide {
flex-shrink:0
}
#partnership .partner-slider .img {
border-radius:20px;
background:#f8f8f8;
padding:20px;
height:75px;
display:flex;
align-items:center;
justify-content:center
}
#partnership .partner-slider img {
width:200px;
max-height:70px;
object-fit:contain;
mix-blend-mode:darken;
height: auto
}
/* CONSULT */
#consult {
text-align:center;
padding:60px 0;
background:#f5f8ff
}
#consult .txt {
position:relative;
z-index:2
}
#consult h3 {
margin-bottom:10px;
color:#1b3fae;
font-weight:700;
font-size:35px;
line-height:1.2em
}
#consult p {
font-size:17px;
color:#555;
margin-bottom:20px
}
#consult .btn {
height:fit-content;
line-height:1.5em;
font-weight:600;
position:relative;
overflow:hidden;
padding:12px 46px;
background:#4a8cff;
color:#fff;
font-size:26px;
border-radius:120px;
display:inline-flex;
justify-content:center;
gap:10px;
align-items:center;
}
#consult .btn::before {
content:"";
position:absolute;
top:0;
left:-150%;
width:80%;
height:100%;
background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 100%);
transform:skewX(-20deg);
animation:btnShine 1.5s ease-in-out infinite;
}
#consult .btn img {
mix-blend-mode:screen;
}
@keyframes btnShine {
0% {
left:-150%;
}
60% {
left:150%;
}
100% {
left: 150%;
}
}
/* NEWS */
#news .inner {
padding:80px 0px
}
#news .news-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0px;
row-gap:20px
}
#news .news-grid .news-card {
position:relative;
display:block;
cursor:pointer
}
#news .news-grid .img-wrap {
position:relative;
overflow:hidden
}
#news .news-grid img {
width:100%;
height:250px;
object-fit:cover;
transition:.4s ease
}
#news .news-grid .guide {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.35);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
font-weight:600;
opacity:1;
transition:.4s ease
}
#news .news-grid .guide i {
font-size:32px;
margin-bottom:10px;
animation:tap 1.2s infinite ease-in-out
}
#news .news-grid .guide p {
color:#fff
}
#news .news-grid .overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
border-radius:0px;
opacity:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:30px 25px;
transition:.4s ease
}
#news .news-grid .overlay .big {
color:#fff;
font-size:35px;
font-weight:700;
line-height:1.3;
opacity:0;
transform:translateY(10px);
transition:.4s ease;
padding-left:30px
}
#news .news-grid .overlay .small {
color:#fff;
font-size:15px;
font-weight:400;
line-height:1.4;
opacity:0;
transform:translateY(10px);
transition:.4s ease .05s
}
.news-card .img-wrap {
clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
#news .news-grid .news-card:hover img {
filter:brightness(60%)
}
#news .news-grid .news-card:hover .guide {
opacity:0
}
#news .news-grid .news-card:hover .overlay {
opacity:1
}
#news .news-grid .news-card:hover .overlay .big {
opacity:1;
transform:translateY(0)
}
#news .news-grid .news-card:hover .overlay .small {
opacity:1;
transform:translateY(0)
}
@keyframes tap {
0% {
transform:translateY(0)
}
50% {
transform:translateY(-6px)
}
100% {
transform: translateY(0)
}
}
/* responsive */
@media(max-width:1200px) {
#intro .intro-box .img img {
width:70%
}
.hero-inner {
flex-direction:column;
text-align:center;
padding:80px 0
}
.feature-grid,.pack-grid,.news-grid {
grid-template-columns:repeat(2,1fr) !important
}
#info-board .inner {
flex-wrap:wrap
}
#intro .intro-box .txt h3 {
font-size:28px;
}
#intro .intro-box .txt p {
font-size:14px;
}
#consult .btn {
font-size:16px;
}
.hero-inner .txt h2 {
font-size:36px;
}
.hero-inner .txt p {
font-size:14px;
}
}
@media(max-width:768px) {
.slide-quick-box {
display:none
}
.feature-grid,.pack-grid,.news-grid {
grid-template-columns:1fr!important;
}
#intro .intro-box {
flex-direction:column;
text-align:center
}
}
.bg-flow {
position:relative;
overflow:hidden;
}
.bg-flow:before {
content:"";
position:absolute;
top:0;
left:0;
width:200%;
height:200%;
background:radial-gradient(circle at 30% 30%,rgba(74,140,255,0.5),transparent 60%),radial-gradient(circle at 70% 70%,rgba(123,179,255,0.35),transparent 65%),radial-gradient(circle at 50% 50%,rgba(74,140,255,0.25),transparent 70%);
animation:bgMove 2s linear infinite;
}
@keyframes bgMove {
0% {
transform:translate(-10%,-10%)
}
50% {
transform:translate(-15%,-5%)
}
100% {
transform:translate(-10%,-10%)
}
}
.bg-flow-soft {
position:relative;
overflow:hidden;
}
.bg-flow-soft:before {
content:"";
position:absolute;
top:0;
left:0;
width:220%;
height:220%;
background:radial-gradient(circle at 25% 20%,rgb(74,140,255),transparent 60%),radial-gradient(circle at 75% 30%,rgba(123,179,255,0.10),transparent 65%),radial-gradient(circle at 40% 75%,rgba(160,200,255,0.08),transparent 70%),radial-gradient(circle at 70% 80%,rgba(120,160,255,0.10),transparent 75%),radial-gradient(circle at 50% 50%,rgba(180,210,255,0.07),transparent 75%);
animation:bgSoftMove 6s ease-in-out infinite;
transform:translate(-15%,-15%);
}
@keyframes bgSoftMove {
0% {
transform:translate(-12%,-12%) scale(1);
}
50% {
transform:translate(-25%,-10%) scale(1.05);
}
100% {
transform:translate(-12%,-12%) scale(1);
}
}
.typing {
display:inline-block;
overflow:hidden;
white-space:nowrap;
border-right:2px solid rgba(74,140,255,0.7);
animation:typing 2.8s steps(30),cursorBlink .7s step-end infinite;
}
@keyframes typing {
from {
width:0
}
to {
width:100%
}
}
@keyframes cursorBlink {
50% {
border-color: transparent
}
}
/*푸터-카피라이터*/
#footer {
width:100%;
background:#F3F3F5;
}
#footer .inr {
position:relative;
width:100%;
padding:0 60px 60px;
}
#footer .inr .ft_info {
color:#fff;
}
#footer .inr .ft_info.v1 {
}
#footer .inr .ft_info.v1 h1 {
}
#footer .inr .ft_info.v1 h1 img {
height:50px;
opacity:1;
mix-blend-mode:darken
}
#footer .top {
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 60px;
border-bottom:1px solid #d9d9d9;
}
#footer .btns {
}
#footer .btns a {
display:inline-block;
height:44px;
line-height:44px;
color:#fff;
font-weight:600;
font-size:17px;
padding:0 36px;
margin-left:5px;
transition:0.1s
}
#footer .btns a:nth-child(1) {
background:#0072EB;
}
#footer .btns a:nth-child(2) {
background:#A7A7A7;
}
#footer .btns a:hover {
opacity:0.8;
}
#footer .ft_menu {
display:flex;
align-items:center;
}
#footer .ft_menu>li {
margin-right:20px;
display:flex;
align-items:center;
}
#footer .ft_menu>li:not(:last-child):after {
content:"";
display:inline-block;
width:1px;
height:18px;
background-color:#ffffff56;
margin-left:20px;
}
#footer .ft_menu>li:last-child {
margin-right:0px;
}
#footer .ft_menu>li>a {
display:block;
font-size:15px;
font-weight:500;
color:#1a1a1a;
line-height:1.5em;
}
#footer .ft_menu>li>a.color {
color:#aba8f6;
}
#footer .middle {
padding:60px 0 0;
}
#footer .middle .inr {
display:flex;
justify-content:space-between;
}
#footer .inr .ft_info.v1 .btn_foot {
padding:0 10px;
height:27px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#fff;
background:#3e3b93;
border-radius:3px;
margin:0 5px;
}
#footer .inr .ft_info.v1 .btn_foot02 {
padding:0 10px;
height:27px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#fff;
background:#3e3b93;
border-radius:3px;
margin:0 5px 0 0;
}
#footer .inr .ft_info.v1 .btn_foot.kakao {
background:#f2da00;
color:#2d2817;
}
#footer .inr .ft_info.v1 .btn_foot02.kakao {
background:#f2da00;
color:#2d2817;
}
#footer .inr .ft_info.v2 {
margin-left:120px;
}
#footer .inr .ft_info.v3 {
}
#footer .inr .ft_info.v3 .telNum {
font-weight:700;
font-size:48px;
letter-spacing:-1px;
font-family:"Montserrat",sans-serif;
color:#000
}
#footer .hp_tit {
color:#1a1a1a;
margin-bottom:15px;
font-size:1.2em;
font-weight:600;
}
#footer .inr .ft_info address,#footer .inr .ft_info address p,#footer .inr .ft_info address span {
font-size:1.1em;
font-weight:400;
color:#1a1a1a;
opacity:0.6;
}
#footer .inr .ft_info address p,#footer .inr .ft_info address span {
display:inline;
}
#footer .inr .ft_info address span {
padding-left:4px;
}
#footer .copy p {
font-size:1.1em;
font-weight:400;
color:#000;
opacity:0.2;
font-size:0.9em;
}
#footer .copy a {
opacity:1;
color:#1a1a1a
}
@media (max-width:1024px) {
#footer .inr {
position:relative;
display:flex;
flex-direction:column;
width:100%;
padding: 0px 20px;
}
#footer .inr .ft_info.v1 {
/*position:absolute;left:0;bottom:0;border-top:1px solid rgba(255,255,255,0.2);*/
padding:30px 20px 0px;
}
#footer .inr .ft_info,#footer .inr .ft_info.v2,#footer .area_cs {
padding:30px 20px 20px;
}
#footer .inr .ft_info.v3 .sns_wrap {
display:none;
}
#footer .inr .copy {
padding:20px 0px;
}
#footer .area_cs>ul.call>li>a {
font-size:32px;
}
#footer .inr .copy p br {
display:none;
}
#footer .inr .ft_info.v2 address {
width:100%;
margin:0;
}
}
@media (max-width:950px) {
#footer .ft_menu>li>a {
font-size:10px;
}
#footer .inr .ft_info.v1 .btn_foot {
display:none
}
#footer .ft_menu {
padding:0 !important;
width:100%;
}
#footer .area_cs>ul.call>li>a {
font-size:30px;
}
#footer .ft_info>.btn_mfoot {
display:flex;
margin:15px 0 0;
}
}
@media (max-width:850px) {
#footer .inr {
padding:0 0 55px;
}
#footer .ft_menu,#footer .inr .ft_info.v2,#footer .area_cs {
padding:20px;
}
#footer .inr .copy {
padding:10px 0 0;
}
#footer .area_cs>ul.call {
padding:60px 0 0;
}
#footer .area_cs>ul.call>li>a>span {
display:block;
padding:0 0 8px;
}
}
@media (max-width:768px) {
#footer .middle .inr .flex {
display:block !important
}
#footer .inr .ft_info.v1 h1 img {
height:17px;
}
#footer .top {
display:block;
padding:20px 20px 20px;
}
#footer .inr .ft_info {
width:100%;
padding:15px 20px;
}
#footer .inr .ft_info.v3 .telNum {
font-size:34px;
}
#footer .inr .line>i {
width:100%;
}
#footer .inr .line>i:last-child {
display:none;
}
#footer .ft_menu {
padding:20px 0;
justify-content:center
}
#footer .middle {
padding: 0;
}
#footer .inr .ft_info.v1 {
/*position:absolute;left:0;bottom:0;border-top:1px solid rgba(255,255,255,0.2);*/
padding:30px 20px 0px;
}
#footer .inr .ft_info.v2 {
margin-left:0;
}
#footer .inr .copy {
}
#footer .inr .ft_info address,#footer .inr .ft_info address p,#footer .inr .ft_info address span,#footer .copy p {
font-size:1em;
}
#footer .area_cs>ul.call>li {
font-size:1.5em;
font-weight:bold;
line-height:normal
}
#footer .ft_menu>li {
margin-right:15px;
}
#footer .ft_menu>li:not(:last-child):after {
margin-left:5px;
}
#footer .btns {
margin-top:30px;
text-align:center;
}
#footer .btns a {
font-size:14px;
}
#footer .btns a:first-child {
margin-left: 0;
}
}
/* 상단 레이아웃 */
#hd {
width:100%;
height:70px;
transition:all 0.3s ease;
position:fixed;
background:#fff;
z-index:10;
border-bottom:1px solid #d9d9d9;
top:52px;
}
.hd_zindex {
z-index:999 !important
}
#hd_h1 {
position:absolute;
font-size:0;
line-height:0;
overflow: hidden
}
/* 상단 메뉴*/
#tnb {
position:absolute;
right:18px;
top:18px;
border:1px solid rgba(0,0,0,0.05);
}
#tnb:after {
display:block;
visibility:hidden;
clear:both;
content:""
}
#tnb li {
float:left;
}
#tnb a {
display:inline-block;
border-left:1px solid rgba(0,0,0,0.05);
font-size:1em;
padding:8px 12px;
}
#tnb a:hover {
background:#266ec3;
color:#fff;
}
#tnb a.home {
background:#063e7e;
color:#fff;
}
#tnb li:first-child a {
border-left:0;
}
#tnb .fa-home {
}
#hd_top {
position:relative;
transition:all .5s;
display:flex;
align-items:flex-start;
justify-content:space-between;
width:100%;
margin:0 auto;
padding:10px 20px;
background:#fff;
}
#hd_top .logo {
text-align:center;
transition:all .5s;
}
#hd_top .logo img {
height:35px;
margin-top:5px;
}
#hd_top .logo img.logo_black {
display:block;
}
/*#hd_top .logo img.logo_color{display: none;}*/
#hd.hd_class #hd_top .logo img.logo_black,#hd.on #hd_top .logo img.logo_black {
display:none;
}
#hd.hd_class #hd_top .logo img.logo_color,#hd.on #hd_top .logo img.logo_color {
display:block;
}
#hd_top .treat_time {
position:absolute;
left:20px;
top:27px
}
#hd_top .tmenu ul {
display:flex;
align-items:center;
justify-content:center;
margin-top:5px
}
#hd_top .tmenu li {
margin-left:8px;
}
#hd_top .tmenu li img {
height:30px;
}
#hd_top .tmenu li:nth-child(4) img {
height:auto;
}
#hd_top .tmenu li .ic_sns {
display:flex;
align-items:center;
justify-content:center;
width:70px;
height:40px;
border-radius:500px;
}
#hd_top .tmenu li:nth-child(1) .ic_sns {
background:#fff;
color:#1b1f41;
}
#hd.hd_class #hd_top .tmenu li:nth-child(1) .ic_sns,#hd.on #hd_top .tmenu li:nth-child(1) .ic_sns {
border:1px solid #1b1f4112;
}
#hd_top .tmenu li:nth-child(2) .ic_sns {
background:#fff;
border:1px solid #4e83fc;
color:#4e83fc;
}
#hd_top .tmenu li:nth-child(3) .ic_sns {
background:#4e83fc;
color: #fff;
}
/*상단 전체 검색*/
#hd_top .hd_div {
display:none;
}
#hd_top #hd_sch {
position:fixed;
left:0;
top:0;
width:100%;
height:100vh;
background-color:#000000;
z-index:9999;
font-size:1.6em;
opacity:0.85;
}
#hd_top .hd_sch_inr {
max-width:1000px;
width:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#hd_top #hd_sch h2 {
color:#fff;
margin-bottom:1em;
}
#hd_top #hd_sch form {
display:flex;
align-items:center;
border-bottom:2px solid #fff;
}
#hd_top #hd_sch legend {
position:absolute;
margin:0;
padding:0;
font-size:0;
line-height:0;
text-indent:-9999em;
overflow:hidden
}
#hd_top #hd_sch #sch_stx {
padding-left:5px;
width:100%;
height:auto;
border:0;
background:transparent!important;
line-height:4em;
color:#fff;
outline:none;
}
#hd_top #hd_sch #sch_stx::placeholder {
color:#ffffff56;
}
#hd_top #hd_sch #sch_submit {
padding:0 5px;
border:0;
background:transparent;
color:#fff;
cursor:pointer;
font-size:2em;
}
#hd_top #hd_sch .hd_closer {
position:absolute;
right:20px;
top:20px;
background-color:transparent;
border:0;
color:#fff;
font-size:2em;
padding:2em;
}
#hd_top .tmenu li .btn_qna {
display:flex;
align-items:center;
justify-content:center;
padding:0 20px;
width:auto;
height:52px;
border-radius:52px;
background:#c0d940;
color:#000;
font-size:18px;
font-weight:700;
margin:0 10px;
}
#hd_top .tmenu li .btn_qna>img {
margin-right: 7px;
}
#hd_wrapper {
position:relative;
/*width:1280px;margin:0 auto;*/
zoom:1;
z-index:5;
text-align:center;
transition:all .5s;
}
#hd_wrapper.container {
padding-left:0;
padding-right:0;
}
#logo {
height:89px;
box-sizing:border-box;
padding:18px 15px;
background:#fff;
}
#logo>a {
display:block;
}
#logo img {
height:45px;
}
#logo img {
padding:5px 0 0
}
#hd .nav_open {
display: none;
}
/*스크롤시 hd.on*/
/*#hd[data-show="active"].on{display: none;}*/
#hd.hd_class,#hd.on {
z-index:99 !important;
position:fixed;
top:0;
left:0;
background:#fff;
box-sizing:border-box;
/*box-shadow:0px 3px 5px rgba(0,0,0,.1);*/
/*height:auto;*/
}
#hd.hd_class:after,#hd.on:after {
content:"";
display:block;
position:absolute;
top:100px;
left:0;
width:100%;
height:0px;
background:#eee;
}
#hd.hd_class .gnb_1da,#hd.on .gnb_1da {
color:#333;
}
.hash {
transform:translateX(100%);
transition:transform .4s ease;
z-index:99999;
position:relative
}
.hash.transform-right {
transform:translateX(0);
}
.menu-open {
overflow:hidden;
}
#hd.hd_class #hash_menu div>span,#hd.on #hash_menu div>span {
background:#333;
}
#hd.hd_class #hash_menu>i,#hd.on #hash_menu>i {
color:#333;
}
#hd.hd_class #hd_wrapper,#hd.on #hd_wrapper {
transition:all .5s;
}
#hd.class #hd_top,#hd.on #hd_top {
position:relative;
transition:all .5s;
}
.menu_wrap_r {
display:flex;
align-items: flex-start;
}
/* 메인메뉴 */
#gnb {
transition:all 1s;
margin-right:80px;
}
#gnb h2 {
display:none;
}
#gnb_1dul {
margin:0 auto !important;
padding:0;
zoom:1;
display:flex;
align-items:flex-start;
}
.gnb_1dli {
z-index:10;
position:relative;
padding:0 10px;
}
.gnb_1da {
width:max-content;
height:105px;
padding:32px 20px;
padding:0 20px;
letter-spacing:-.050em;
line-height:50px !important;
text-align:center;
box-sizing:border-box;
font-size:1.3em;
color:#111 !important;
line-height:1em;
font-weight:600;
text-decoration:none;
position:relative;
z-index:5;
}
.gnb_1da h3 {
font-weight:400;
}
/*.gnb_1da span{display:block;width:0px;height:4px;position:absolute;left:50%;bottom:-10px;background:#0d1550;transform:translateX(-50%);transition:all 0s;}.gnb_1dli:hover .gnb_1da span{width:100%;transition: all 0.5s;}*/
/*.gnb_1dli:last-child a{padding-right: 0;}*/
/*.gnb_1dli:focus,.gnb_1dli:hover{color: #111;}*/
.gnb_1dli:hover,.gnb_1dli:hover .gnb_1da {
color:#5385fd !important
}
.gnb_1dli {
position: relative;
}
/*2차메뉴*/
.gnb_2dul {
display:none;
width:100%;
color:#555;
padding:25px 0 !important;
}
.gnb_2dli {
padding:0 0 0 0px;
/*border-bottom:1px dotted rgba(255,255,255,0.2);*/
}
.gnb_2dul .gnb_2dli:last-child {
border-bottom: none;
}
/*2차메뉴*/
.gnb_2da {
display:block;
padding:0px;
/*text-align:left;*/
width:100%;
text-decoration:none;
font-size:1.34em;
font-weight:600;
border-bottom:1px solid rgba(255,255,255,0);
line-height:1.4em;
color:#555 !important;
/*border-bottom:2px solid rgba(255,255,255,0);*/
opacity:0.8;
}
/* 1차메뉴 hover했을때 2차메뉴 안나오게 하기위해 주석처림 함*/
/*1차메뉴hover*/
#gnb .gnb_1dli:focus .gnb_1da,#gnb .gnb_1dli:hover .gnb_1da,#gnb .gnb_1dli.hov .gnb_1da {
text-decoration: none;
}
/*2차메뉴hover*/
#gnb .gnb_2da:focus,#gnb .gnb_2da {
line-height:2em;
}
#gnb .gnb_2da:focus,#gnb .gnb_2da:hover {
color:#222 !important;
display:inline-block;
opacity:1;
}
#gnb_empty {
padding:10px 0;
width:100%;
text-align:center;
line-height:2em
}
#gnb_empty a {
text-decoration: underline
}
/*전체메뉴*/
#hd .mobile_home {
display:none;
}
#hd .nav_open {
display:block;
}
.gnb_3dul {
padding:0;
text-align:left;
}
.gnb_3dul li a {
display:block;
color:#fff;
padding:0 0 0 15px;
line-height:35px;
background:#253dbe;
border-top:1px solid #2b47dd;
}
.inr {
position:relative;
width:1400px;
margin:0 auto;
}
.inr.sub {
position:relative;
width:1000px;
margin:0 auto;
}
.line {
}
.line .left {
position:absolute;
top:100px;
left:calc(50% - 600px);
left:-webkit-calc(50% - 700px);
bottom:0;
z-index:90;
width:1px;
height:100%;
background:rgba(255,255,255,0.1);
}
.line .right {
position:absolute;
top:100px;
right:calc(50% - 600px);
right:-webkit-calc(50% - 700px);
bottom:0;
z-index:90;
width:1px;
height:100%;
background:rgba(255,255,255,0.1);
}
.line .bottom {
position:absolute;
left:0;
right:0;
bottom:100px;
z-index:90;
width:100%;
height:1px;
background:rgba(255,255,255,0.1);
}
.line.gray {
position:absolute;
top:0;
width:100%;
height:100%;
z-index:-1;
}
.line.gray i {
display:block;
float:left;
width:calc(100% / 3);
height:100%;
border-right:1px solid rgba(0,0,0,0.05);
}
.line.gray i:first-child {
border-left:1px solid rgba(0,0,0,0.05);
}
.line.wt i {
background: rgba(255,255,255,0.1);
}
/* 중간 레이아웃 */
#wrapper {
z-index:5;
margin:122px auto 0;
width:100%;
zoom:1;
background:#fff;
}
#hd.on+#wrapper {
z-index:5;
margin:70px auto 0;
width:100%;
zoom:1;
background:#fff;
}
@media (max-width:1500px) {
.inr.sub {
width:80%;
}
.line .left {
left:calc(50% - 40%);
left:-webkit-calc(50% - 40%);
}
.line .right {
right:calc(50% - 40%);
right:-webkit-calc(50% - 40%);
}
#hd_top .tmenu {
display: none
}
}
@media (max-width:1400px) {
/* 모바일 카테고리 왼쪽메뉴 */
#hd .nav_open {
display:block;
position:absolute;
top:8px;
right:5px;
}
#hd .nav_open a {
font-size:25px;
display:inline-block;
line-height:30px;
color:#666;
padding:20px 14px;
}
#hd .nav_open span {
display:block;
width:25px;
height:1px;
background:#222;
margin-bottom:6px;
}
.inr.sub {
width:90%;
}
#svisual .line {
display:none;
}
}
@media (max-width:1279px) {
#hd_top .treat_time {
display:none
}
#container {
width:100% !important;
}
#gnb_1dul {
margin:0 auto !important;
padding:0;
width:100%;
zoom:1;
/*border-left:1px solid #c5c6c6*/
}
.gnb_1dli {
padding:0 20px;
}
.gnb_1da {
font-size:1.20em;
}
}
#hd .nav_open {
display:block;
position:absolute;
top:0;
right:0;
width:calc(50% - 600px);
width:-webkit-calc(50% - 600px);
}
#hash_menu {
padding:0px;
box-sizing:border-box;
}
#hash_menu>i {
display:inline-block;
position:relative;
top:-2px;
font-weight:200;
font-size:2em;
color:#fff;
font-style:normal;
vertical-align:super;
}
#hash_menu>div {
display:inline-block;
position:relative;
z-index:9999;
width:23px;
height:24px;
font-size:0px;
transition:all 0.3s ease 0s;
}
#hash_menu div>span {
display:block;
position:absolute;
left:0px;
width:100%;
height:2px;
background:#fff;
}
#hash_menu div>span:nth-of-type(1) {
top:5px;
}
#hash_menu div>span:nth-of-type(2) {
top:50%;
margin-top:-1px;
transition:background 0.3s ease 0s;
}
#hash_menu div>span:nth-of-type(3) {
top:17px;
}
#hash_menu div>span:nth-of-type(1),#hash_menu div>span:nth-of-type(3) {
transition:all 0.3s ease;
transition-property:top,transform;
transition-delay:0.3s,0s;
}
@media (max-width:1500px) {
#logo {
width:200px;
}
#logo img {
width:100%;
padding:13px 0 0
}
#hd .nav_open {
width:calc(50% - 40%);
width:-webkit-calc(50% - 40%);
}
}
@media (max-width:1279px) {
#logo {
width:200px;
}
#hd {
min-width:100%;
}
#hd .nav_open {
width:auto;
}
#scont_wrap {
width:100%;
padding:50px 20px 80px;
min-height:450px;
}
}
#navtoggle .close {
position:absolute;
top:0;
right:0;
padding:30px 70px;
z-index:1001;
opacity:1;
background:#fff;
}
#navtoggle .close>i {
display:inline-block;
position:relative;
top:-2px;
margin-left:9px;
font-weight:bold;
font-size:16px;
color:#333;
font-style:normal;
vertical-align:super;
}
#navtoggle .close>div {
display:inline-block;
position:relative;
z-index:9999;
width:23px;
height:24px;
font-size:0px;
transition:all 0.3s ease 0s;
}
#navtoggle .close div>span {
display:block;
position:absolute;
left:0px;
width:100%;
height:2px;
background:#333;
}
#navtoggle .close div>span:nth-of-type(1) {
top:8px;
transform:rotate(45deg);
}
#navtoggle .close div>span:nth-of-type(2) {
top:8px;
transform:rotate(-45deg);
}
#accordion-example #gnb2 {
position:relative;
top:35%;
width:88%;
margin:0 auto;
}
a.mgnb_1da {
display:block;
margin:20px 0 10px;
font-size:1.35em;
font-weight:600;
color:#062F87
}
li.mgnb_1dli span {
font-size:30px;
font-weight:bold;
color:#333;
cursor:default;
}
@media screen and (min-width:1279px) {
#navtoggle {
position:absolute;
width:100%;
height:100vh;
right:0;
top:0;
background:#fff;
overflow:auto;
z-index:102;
}
#navtoggle #logo {
left:20px;
position:absolute;
}
#navtoggle .cate_logo {
text-align:center;
padding:30px 0;
}
#navtoggle .scroll {
position:relative;
height:100%;
overflow:hidden;
}
#navtoggle #hd_tnb {
display:none;
}
#navtoggle #left_menu {
width:100%;
position:relative;
height:100%;
text-align:left;
z-index:1000;
}
#navtoggle #left_menu:after {
content:'';
display:block;
clear:both;
}
#navtoggle #left_menu .title {
color:#000;
line-height:40px;
font-size:1.35em;
padding:10px 0 5px;
border-bottom:1px solid #9c9c9c;
font-weight:bold;
letter-spacing:-1px
}
#navtoggle .title {
color:#000;
line-height:40px;
font-size:1.35em;
padding:10px 0 5px;
border-bottom:1px solid #9c9c9c;
font-weight:bold;
letter-spacing:-1px
}
#navtoggle #mgnb_1dul {
/*border-top:1px solid #285ca5;*/
}
#accordion-example {
position:relative;
float:left;
box-sizing:border-box;
width:70%;
height:100vh;
}
#accordion-example .line.gray i:first-child {
border-leftt:1px solid rgba(0,0,0,0.03)
}
#accordion-example .line.gray i {
border-right:1px solid rgba(0,0,0,0.03)
}
.mgnb_1dul {
width:100%;
}
.mgnb_1dul:after {
content:'';
display:block;
clear:both;
}
li.mgnb_1dli {
float:left;
width:20%;
}
li.mgnb_1dli h3 {
display:none;
}
li.mgnb_1dli svg {
display:none;
}
ul.mgnb_2dul {
margin:5px 0 0;
}
li.mgnb_2dli {
font-size:17px;
font-weight:400;
color:#666;
line-height:1.8em;
}
.menu_img {
float:left;
width:30%;
height:100vh;
background:#333 url(../img/common/menu_img.jpg)no-repeat center;
background-size:cover;
}
}
@media screen and (max-width:1500px) {
#accordion-example #gnb2 {
width:90%;
}
li.mgnb_1dli span {
font-size:28px;
}
}
@media screen and (max-width:1350px) {
li.mgnb_1dli span {
font-size:26px;
}
}
@media screen and (max-width:1279px) {
#hd {
min-width:100%;
border-bottom:none;
}
#hd_wrapper {
width: 100%;
}
/* 상단 메뉴*/
#tnb {
display: none;
}
/*스크롤시 hd.on*/
#hd.on #logo img {
height:auto;
}
.ad_menu {
display:none;
}
#hd_tnb {
position:absolute;
bottom:15px;
left:15px;
}
#hd_tnb li {
float:left;
width:100%;
}
#hd_tnb li.adm,#hd_tnb li.mod {
width:100%;
}
#hd_tnb li.adm a {
background:#FFCF4D;
color:#1a1a1a;
font-weight:600;
}
#hd_tnb li.mod a {
}
#hd_tnb li a {
color:#000;
border-radius:30px;
background:rgba(255,255,255,0.1);
text-align:center;
display:block;
padding:5px 15px;
}
#navtoggle {
position:absolute;
width:100%;
height:100vh;
right:0;
top:0;
background:#fff;
overflow:auto;
z-index:102;
}
#navtoggle #logo {
display:none;
}
#navtoggle .close {
padding:20px;
z-index:9999;
}
#navtoggle .close>i {
display:none;
}
#navtoggle ul li {
padding:0;
}
#navtoggle #left_menu {
width:100%;
position:relative;
height:100%;
text-align:left;
z-index:1000;
text-indent:2%;
margin-top:65px;
}
#navtoggle #left_menu .title {
color:#000;
line-height:40px;
font-size:1.35em;
padding:10px 0 5px;
border-bottom:1px solid #9c9c9c;
font-weight:bold;
letter-spacing:-1px
}
#navtoggle .title {
color:#000;
line-height:40px;
font-size:1.35em;
padding:10px 0 5px;
border-bottom:1px solid #9c9c9c;
font-weight:bold;
letter-spacing:-1px
}
#navtoggle #mgnb_1dul {
text-align:center;
}
#navtoggle:before {
content:'';
position:absolute;
left:50%;
bottom:50px;
width:80%;
height:0;
padding-bottom:54%;
background:url('../img/common/logo.svg')no-repeat center;
background-size:180px;
transform: translateX(-50%);
}
/*1차메뉴*/
li.mgnb_1dli a.mgnb_1da {
display:block;
cursor:pointer;
position:relative;
color:#333 !important;
padding:15px 0;
margin-top:10px;
border-bottom:1px solid #f5f5f5;
}
li.mgnb_1dli a.mgnb_1da h3 {
font-size:1.8em;
font-weight:bold;
line-height:2.3em;
color:#333 !important;
}
li.mgnb_1dli a.mgnb_1da.on {
border-bottom:0;
}
li.mgnb_1dli a.mgnb_1da.on h3 {
color:#00adff !important;
}
li.mgnb_1dli a.selected {
color:#FFF;
font-weight:600;
border-bottom: 0;
}
/*2차메뉴*/
ul.mgnb_2dul {
background:#fff;
display:none;
}
li.mgnb_2dli a.mgnb_2da {
color:#949494;
display:block;
font-size:15px;
line-height:1.8em;
background:none;
font-weight:400;
}
li.mgnb_1dli span {
display:none;
}
#accordion-example .line.gray {
display:none;
}
#container {
width:100%;
margin:0 auto;
}
#scont_wrap {
margin-left:0;
padding:10px 0 30px 0;
min-height:300px;
width:96%;
margin:0 auto;
}
#scont_wrap2 {
padding:20px 0;
min-height:300px;
}
#scont {
padding:0;
width:100%;
}
#sub_title {
margin:15px 0 0;
padding-bottom:0px;
text-align:center;
border:0;
}
.container_title {
font-size:1.2em;
text-align:center;
position:relative;
padding:0;
}
}
@media (max-width:1024px) {
#gnb {
display:none;
}
#hd_top .logo {
padding:0 0 0 20px;
}
}
@media (max-width:900px) {
#hd.hd_class:after,#hd.on:after {
display:none;
}
}
@media (max-width:768px) {
.inr {
width:100%;
padding:0 15px;
}
#hd_top {
height:100%;
padding:9px 0;
position:relative;
transition:all .5s;
}
#hd_top .logo {
text-align:left;
padding:0 0 0 20px;
transition:all .5s;
}
#hd_top .logo img {
margin-top:10px;
}
/*#hd.on{height: 70px;}*/
#logo {
padding:10px;
height:69px;
}
}
@media (max-width:500px) {
/*#hd.on{height: 60px;}*/
#logo {
padding:5px;
width:150px;
height:59px;
}
}
#top-banner {
width:100%;
height:52px;
background:#030b1c;
background:radial-gradient(circle at center,rgba(7,34,80,0.85) 0%,rgba(3,11,28,1) 60%,rgba(3,11,28,1) 100%);
display:flex;
align-items:center;
overflow:hidden;
position:fixed;
top:0;
z-index:19;
}
#top-banner .inner {
max-width:1850px;
width:100%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding: 0 20px;
}
/* 텍스트 롤링 */
.tb-text-wrapper {
position:relative;
height:22px;
display:flex;
align-items:center;
justify-content:center;
}
.tb-text {
position:absolute;
opacity:0;
color:#fff;
font-size:15px;
transition:opacity .6s ease;
white-space:nowrap;
}
.tb-text.active {
opacity: 1;
}
/* 모바일 대응 */
@media(max-width:768px) {
.tb-text {
font-size: 14px;
}
}
/* INFO BOARD */
#info-board {
background:#f8f8f8;
padding-top:120px;
margin-top:-120px
}
#info-board .inner {
display:flex;
gap:40px;
padding:50px 20px
}
#info-board .col {
flex:1;
width:100%
}
#info-board .col h4 {
font-size:22px;
margin-bottom:12px;
color:#1b3fae
}
#info-board .col ul li {
margin-bottom:10px
}
#info-board .col ul li a {
font-size:15px;
color:#333
}
.info-latest {
width:100%
}
.info-latest ul {
margin:0;
padding:0;
list-style:none;
width:100%
}
.info-latest ul li {
margin-bottom:10px;
display:flex;
justify-content:space-between;
align-items:center;
width:100%
}
.info-latest ul li a {
font-size:15px;
color:#333;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.info-latest ul li .date {
font-size:14px;
color:#888;
margin-left:10px;
flex-shrink:0
}
.info-latest ul li.empty {
color:#aaa;
font-size:15px
}
@media(max-width:1200px) {
.info-latest ul li a {
font-size:15px;
color:#333;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width: 75%
}
}
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*서브비주얼 */
#svisual {
width:100%;
min-width:1280px;
height:300px;
background-repeat:no-repeat;
background-position:center 0px;
background-attachment:fixed;
margin:0px auto;
text-align:left;
position:relative;
transition:all 0.3s ease;
}
#svisual::after {
content:"";
display:inline-block;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(11,21,40,.4),rgba(11,21,40,.5));
}
#svisual .s_text {
position:relative;
top:100px;
max-width:1400px;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#fff;
z-index:1;
}
#svisual .s_text h2 {
font-size:3.20em;
margin:0;
text-transform:uppercase;
font-weight:700;
margin-bottom:10px;
}
#svisual .s_text .slogan {
font-size:1.45em;
font-weight:400;
margin-bottom:5px;
position:relative;
line-height:1.5em;
color:#fff;
text-transform:uppercase;
}
#svisual .s_text .color_blue {
text-shadow:0 0 5px #fff;
}
#svisual .s_text .slogan span {
display:inline-block;
}
#svisual .s_text span {
display:block;
font-size:2em;
}
#container {
z-index:0;
font-size: 1.2em;
}
#svisual .lnb {
display:grid;
grid-template-columns:1fr;
position:absolute;
bottom:0px;
width:100%;
justify-content:center;
}
#container .line.gray {
top:-28px;
height:103%;
}
#container .line.gray i {
border-right:1px solid rgba(0,0,0,0.03);
}
#container .inner {
max-width:1400px;
margin:0 auto;
padding:20px 0;
position:relative;
}
#container>.inner {
padding:130px 0;
position:relative;
}
#location {
position:absolute;
left:0;
top:20px;
font-size:16px;
color:#999;
font-weight:400;
}
#location strong {
color:#555;
font-weight:500;
}
@media (max-width:1200px) {
#location {
display:none;
}
}
@media (max-width:1600px) {
#svisual .s_text {
width:100%
}
}
@media (max-width:1500px) {
#svisual .s_text {
width:90%;
max-width:90%;
}
#svisual .line .left {
left:calc(50% - 45%);
left:-webkit-calc(50% - 45%);
}
#svisual .line .right {
right:calc(50% - 45%);
right:-webkit-calc(50% - 45%);
}
}
@media (max-width:1400px) {
#svisual .line {
display:none;
}
#svisual .s_text {
width:100%;
max-width:100%;
}
}
@media (max-width:1279px) {
#svisual {
height:300px;
min-width:100%;
background-position:center top;
background-size:auto 100%;
background-attachment:unset;
transition:all 0.3s ease;
}
#svisual .s_text {
top:25%;
}
#svisual .s_text h2 {
font-size:2.20em;
margin:0 0 10px
}
#svisual .s_text .slogan {
font-size:1.35em;
font-weight:400;
position:relative;
line-height:1.5em;
color:#fff;
text-align:center;
}
}
@media (max-width:850px) {
#container>.inner {
padding:40px 0;
}
#svisual .s_text h3 {
font-size:1.45em;
margin-bottom:0;
}
#container .line.gray {
top:0;
}
}
@media (max-width:768px) {
#container .inr {
padding:0 !important;
}
#container>.inner {
padding:40px 15px !important;
}
#svisual {
position:relative;
height:200px;
transition:all 0.3s ease;
}
#svisual .s_text {
padding:0;
text-align:center;
width:100%;
}
#svisual .s_text h2 {
font-size:1.70em;
font-weight:600;
}
#svisual .s_text .slogan {
font-size:1.05em;
font-weight:400;
position:relative;
line-height:1.5em;
letter-spacing:-1px;
color:#fff
}
#svisual .lnb {
position:absolute;
display:block;
bottom:0;
margin:0;
padding:0;
}
}
@media (max-width:550px) {
#svisual .s_text h3 {
font-size:1.35em;
}
}
#company {
width:100%;
overflow:hidden
}
#company .inner {
max-width:1850px;
margin:0 auto;
padding:80px 20px
}
#company .com-hero {
text-align:left;
padding:100px 0px
}
#company .com-hero h1 {
font-size:42px;
line-height:1.3;
margin-bottom:20px;
}
#company .com-hero p {
font-size:18px;
color:#333
}
#company .com-greeting .grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center
}
#company .com-greeting h2 {
font-size:32px;
color:#1b3fae;
margin-bottom:20px
}
#company .com-greeting .txt p {
font-size:17px;
color:#444;
margin-bottom:14px;
line-height:1.6
}
#company .com-greeting .sign {
margin-top:30px;
font-size:18px;
color:#222
}
#company .com-greeting .g-right {
text-align:right
}
#company .com-greeting img {
width:100%;
border-radius:20px;
max-width:350px;
margin-left:auto;
text-align:right
}
#company .com-org {
text-align:center;
padding-top:40px
}
#company .com-org h2 {
font-size:32px;
color:#1b3fae;
margin-bottom:10px
}
#company .com-org .sub {
font-size:17px;
color:#555;
margin-bottom:40px
}
#company .org-chart {
width:100%;
margin-top:40px
}
#company .org-top {
display:flex;
justify-content:center;
gap:40px;
margin-bottom:50px;
flex-direction:column;
align-items:center
}
#company .org-box {
padding:14px 28px;
border:1px solid #1b3fae;
border-radius:12px;
font-size:18px;
color:#1b3fae;
width:fit-content
}
#company .org-box:first-child {
background:#1b3fae;
color:#fff
}
#company .org-mid {
display:flex;
justify-content:center;
gap:60px;
flex-wrap:wrap
}
#company .org-col {
display:flex;
flex-direction:column;
align-items:center;
gap:12px
}
#company .org-col>div {
width:100%
}
#company .dept {
padding:12px 20px;
border:1px solid #4e83fc;
border-radius:12px;
color:#4e83fc;
font-size:18px;
font-weight:600
}
#company .team {
padding:10px 18px;
border:1px solid #aaa;
border-radius:10px;
font-size:16px;
color:#444
}
.com-hero h1 {
overflow:hidden;
white-space:nowrap;
border-right:2px solid rgba(27,63,174,0.6);
background:linear-gradient(90deg,#1b3fae,#4a8cff,#1b3fae);
-webkit-background-clip:text;
color:transparent;
background-size:200% auto;
animation: titleGradient 4s linear infinite,typing 3.8s steps(45,end),cursorBlink .7s step-end infinite;
}
/* 추가 반응형:600px 이하 */
@media(max-width:600px) {
#company .com-greeting img {
width:80%
}
#company .com-greeting .g-right {
text-align:center
}
#company .com-hero h1 {
font-size:26px;
line-height:1.35;
}
#company .com-hero p {
font-size:16px;
}
#company .com-greeting {
text-align:center;
}
#company .com-greeting h2,#company .com-org h2 {
font-size:26px;
}
#company .com-greeting .txt p,#company .com-org p {
font-size:15px;
line-height:1.55;
}
#company .org-box {
font-size:16px;
padding:12px 22px;
}
#company .dept {
font-size:16px;
padding:10px 16px;
}
#company .team {
font-size:14px;
padding:8px 14px;
}
#company .com-greeting .grid {
grid-template-columns: 1fr;
}
}
/* 추가 반응형:480px 이하 (모바일 초소형) */
@media(max-width:480px) {
#company .inner {
padding:50px 16px;
}
#company .com-hero {
padding:40px 0;
}
#company .com-hero h1 {
font-size:22px;
border-right-width:1px;
/* 타이핑 커서 얇게 */
}
#company .com-hero p {
font-size:15px;
}
#company .com-greeting h2 {
font-size:22px;
}
#company .com-greeting .txt p {
font-size: 14px;
}
/* 조직도 여백 축소 */
#company .org-mid {
gap:20px;
}
#company .org-col {
gap:10px;
}
#company .org-box,#company .dept,#company .team {
width:100%;
text-align:center;
}
}
#pay01 {
width:100%;
padding:80px 0;
}
#pay01 .inner {
max-width:1500px;
margin:0 auto;
padding:0 20px
}
#pay01 .pay-title {
text-align:center;
margin-bottom:60px
}
#pay01 .pay-title h2 {
font-size:34px;
color:#1b3fae;
margin-bottom:16px
}
#pay01 .pay-title h6 {
font-size:18px;
color:#444;
line-height:1.6;
margin-bottom:16px
}
#pay01 .pay-title p {
font-size:13px;
color:#949494;
line-height:1.6
}
.proc-wrap {
overflow-x:auto;
background:linear-gradient(to right,transparent,#f8fbff 50%,transparent);
height:fit-content;
padding:100px 0px
}
.proc-grid {
display:flex;
/*grid-template-columns:repeat(12,1fr);*/
gap:10px;
margin-bottom:40px;
justify-content: center;
}
.cell {
background:#eaf1ff;
border-radius:14px;
padding:20px;
text-align:center
}
.sub-node .icon {
margin-bottom:10px;
height:45px
}
.node h4 {
font-size:18px;
color:#1b3fae;
margin-bottom:6px
}
.node p {
font-size:14px;
color:#555;
line-height:1.4
}
.flow p {
font-size:20px;
color:#4a8cff;
font-weight:600
}
.flow .top {
margin-bottom:6px
}
.merge {
display:flex;
align-items:center;
justify-content:center;
grid-column:6 / 9
}
.proc-sub {
display:grid;
grid-template-columns:repeat(9,1fr);
gap:20px;
min-width:1200px
}
.sub-node {
text-align:center;
background:#eaf1ff;
border-radius:14px;
padding:20px
}
.sub-node h4 {
font-size:17px;
margin-top:8px;
color:#1b3fae
}
.sub-flow {
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:10px;
flex-direction:column;
gap:20px;
width: 292px;
}
.sub-flow p {
font-size:15px;
color:#4a8cff;
font-weight:600;
line-height:1.3
}
.sub-blank {
height:40px
}
@media(max-width:1024px) {
#pay01 .pay-title h2 {
font-size:28px
}
.proc-grid,.proc-sub {
min-width:1400px
}
}
@media(max-width:768px) {
#pay01 {
padding:60px 0
}
#pay01 .pay-title p {
font-size:16px
}
.proc-grid,.proc-sub {
min-width:1400px
}
}
#pay02 {
width:100%;
padding:100px 0;
background:#fff
}
#pay02 .inner {
max-width:1500px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;
gap:80px;
flex-direction:column;
text-align:center
}
#pay02 .img.flex {
justify-content:center;
gap:50px;
margin-top:120px
}
#pay02 .img.flex img {
border-radius:20px;
border:20px solid #f3f3f3
}
.p2-left h2 {
font-size:46px;
font-weight:700;
color:#111;
line-height:1.3;
margin-bottom:20px
}
.p2-left h2 .sub {
font-size:26px;
color:#666;
font-weight:400
}
.p2-left .desc {
font-size:18px;
color:#444;
line-height:1.6;
margin-bottom:26px
}
.p2-left .tags span {
display:inline-block;
background:#f1f1f1;
padding:6px 14px;
border-radius:6px;
font-size:14px;
margin-bottom:6px;
margin-right:6px;
color:#555
}
.p2-right {
position:relative;
width:50%;
min-height:480px;
margin: 0 auto
}
.circle-bg {
position:absolute;
top:50%;
left:50%;
width:380px;
height:380px;
background:radial-gradient(circle,#e5edff 0%,#d0dcff 40%,transparent 70%);
/* 45도 회전된 사각형(다이아몬드) 마스크 */
-webkit-mask-image:paint(square);
/* 최신 브라우저 추천 */
mask-image:paint(square);
/* 혹시라도 paint() 안 먹히는 구형 브라우저 대비 SVG 폴백 */
-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='15' width='70' height='70' fill='black' transform='rotate(45 50 50)'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='15' width='70' height='70' fill='black' transform='rotate(45 50 50)'/%3E%3C/svg%3E");
-webkit-mask-size:90% 90%;
/* 다이아몬드 크기 조절 (60~80% 추천) */
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-size:90% 90%;
mask-position:center;
mask-repeat:no-repeat;
animation:glowStar 4s ease-in-out infinite,glowRotate 10s ease-in-out infinite;
}
@keyframes glowStar {
0% {
-webkit-mask-size:90% 90%;
opacity:0.9;
}
50% {
-webkit-mask-size:150% 150%;
opacity:1;
}
100% {
-webkit-mask-size:90% 90%;
opacity:0.9;
}
}
@keyframes glowWave {
0% {
transform:translate(-50%,-50%) scale(1)
}
50% {
transform:translate(-50%,-50%) scale(1.15)
}
100% {
transform:translate(-50%,-50%) scale(1)
}
}
.center-title {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:26px;
font-weight:700;
color:#111
}
.icon-item {
position:absolute
}
.icon-box {
background:#fff;
border-radius:200px;
padding:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:center;
width:120px
}
.icon-box p {
margin-top:8px;
font-size:15px;
color:#333;
font-weight:500
}
.icon-box div {
width:32px;
height:32px;
margin:0 auto 15px;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center
}
.icon-box div.kakao {
background:#FFE100;
}
.icon-box div.naver {
background:#00be18;
}
.icon-item.top {
top:0;
left:50%;
transform:translate(-50%,0)
}
.icon-item.right {
top:15%;
right:18%;
}
.icon-item.bottom {
bottom:0;
left:50%;
transform:translate(-50%,0)
}
.icon-item.left {
top:15%;
left:18%;
}
.icon-item.left-bottom {
bottom:15%;
left:18%
}
.icon-item.right-bottom {
bottom:15%;
right: 18%
}
/* 반응형 */
@media(max-width:1200px) {
#pay02 .inner {
flex-direction:column;
text-align:center;
padding:0
}
.p2-right {
width:100%;
min-height:420px
}
.icon-box {
width:100px;
padding:16px
}
}
@media(max-width:768px) {
.p2-left h2 {
font-size:34px
}
.circle-bg {
width:300px;
height:300px
}
.icon-box {
width:100px;
padding:14px
}
.icon-item.left {
left:10%
}
.icon-item.right {
right:10%
}
.icon-item.left-bottom {
left:10%
}
.icon-item.right-bottom {
right:10%
}
#pay02 .img.flex {
flex-direction:column
}
#pay02 .img.flex img {
border-width:10px
}
}
@media(max-width:480px) {
.p2-right {
min-height:360px
}
.circle-bg {
width:260px;
height:260px
}
.icon-item.left {
left:0%
}
.icon-item.right {
right:0%
}
.icon-item.left-bottom {
left:0%
}
.icon-item.right-bottom {
right:0%
}
}
#pay03 {
width:100%;
padding:120px 0;
position:relative
}
#pay03 .inner {
max-width:1850px;
margin:0 auto;
padding:0 20px
}
#pay03 .pay-grid {
display:grid;
grid-template-columns:1fr;
align-items:center;
gap:60px;
text-align:center
}
#pay03 .pay-tags {
margin-bottom:6px
}
#pay03 .pay-tags span {
display:inline-block;
background:#4a8cff;
color:#fff;
padding:6px 14px;
border-radius:20px;
font-size:13px;
margin-right:6px
}
#pay03 .pay-tags .tag.app {
background:#34c3ff
}
#pay03 .pay-tags .tag.pc {
background:#5b63ff
}
#pay03 .pay-text h1 {
font-size:42px;
font-weight:700;
line-height:1.3;
margin-bottom:22px
}
#pay03 .pay-text .desc {
font-size:18px;
color:#333;
margin-bottom:12px;
line-height:1.6
}
#pay03 .pay-text .highlight {
font-size:17px;
color:#4a8cff;
font-weight:600;
margin-bottom:20px
}
#pay03 .pay-hash span {
display:inline-block;
background:#f3f3f3;
color:#666;
font-size:14px;
padding:8px 14px;
border-radius:8px;
margin-right:6px;
margin-top:8px
}
#pay03 .pay-img {
margin:0 auto;
position:relative;
text-align:center
}
#pay03 .mockup {
width:280px;
z-index:3;
position:relative
}
#pay03 .img.flex {
justify-content:center;
gap:50px;
margin-top:120px
}
#pay03 .img.flex img {
border-radius:20px;
border:20px solid #f3f3f3;
width:48%;
object-fit:cover;
object-position:left;
}
.phone-mockup {
width:280px;
height:auto;
background:#e5e8f0;
border-radius:32px;
padding:15px;
border:1px solid #e5e8f0;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
position:relative
}
.phone-mockup::before {
content:"";
width:120px;
height:14px;
background:#e8ebf2;
border-radius:10px;
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%)
}
.phone-screen {
height:500px;
position:relative;
z-index:1;
background:#fdfdfd;
border-radius:20px;
padding:28px 22px;
border:1px solid #f1f3f5
}
.phone-screen h4 {
text-align:center;
font-size:16px;
margin-bottom:22px;
font-weight:600
}
.phone-screen label {
display:block;
font-size:13px;
margin:12px 0 6px;
color:#333
}
.phone-screen input {
width:100%;
padding:12px 14px;
border:1px solid #d6dbe3;
border-radius:10px;
font-size:14px;
outline:none
}
.phone-screen select {
width:48%;
padding:12px;
border:1px solid #d6dbe3;
border-radius:10px;
font-size:14px;
background:#fff
}
.phone-screen .row {
display:flex;
justify-content:space-between;
gap:10px
}
.phone-mockup input::placeholder {
color:#9aa2b1
}
.phone-mockup input,.phone-mockup select {
transition:all .25s;
cursor:not-allowed
}
.phone-mockup input:focus,.phone-mockup select:focus {
border-color:#4a8cff;
box-shadow:0 0 0 3px rgba(74,140,255,0.15)
}
#biz-section {
padding:80px 0px
}
#biz-section .inner {
max-width:1850px;
margin:0 auto;
padding:0
}
#biz-section h2 {
font-size:34px;
font-weight:700;
color:#111;
margin-bottom:50px;
line-height:1.4
}
.biz-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px
}
.biz-box {
border:1px solid #dce3ee;
border-radius:16px;
padding:40px 20px;
text-align:center;
background:#fff;
transition:.3s
}
.biz-box:hover {
transform:translateY(-6px);
border-color:#4a8cff
}
.biz-box .icon {
color:#4a8cff;
margin-bottom:18px
}
.biz-box h3 {
font-size:20px;
color:#1b3fae;
margin-bottom:12px
}
.biz-box p {
font-size:15px;
color:#555;
line-height:1.6
}
@media(max-width:1200px) {
.biz-grid {
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:768px) {
#biz-section h2 {
font-size:26px
}
.biz-grid {
grid-template-columns:1fr;
gap:25px
}
.biz-box {
padding:30px 18px
}
#pay03 .img.flex {
flex-direction:column
}
#pay03 .img.flex img {
border-width:10px;
width:100%
}
#pay03 .pay-text {
text-align: center
}
}
/* 애니메이션 */
@keyframes glowRotate {
0% {
transform:translate(-50%,-50%) rotate(0deg)
}
100% {
transform: translate(-50%,-50%) rotate(360deg)
}
}
/* 반응형 */
@media(max-width:1200px) {
#pay03 .pay-text h1 {
font-size:36px
}
#pay03 .circle-bg {
width:350px;
height:350px
}
}
@media(max-width:960px) {
#pay03 .pay-grid {
grid-template-columns:1fr;
gap:50px
}
#pay03 .pay-img .mockup img {
width:300px
}
}
@media(max-width:640px) {
#pay03 .pay-text h1 {
font-size:28px
}
#pay03 .highlight {
font-size:15px
}
#pay03 .circle-bg {
width:260px;
height:260px
}
}
#pay04 {
padding:80px 20px
}
#pay04 .inner {
max-width:1850px;
margin:0 auto;
display:flex;
align-items:center;
gap:80px;
flex-direction:column;
text-align:center
}
#pay04 .col-left {
flex:1
}
#pay04 .col-right {
flex:1;
display:flex;
justify-content:center
}
.tag-wrap {
margin-bottom:20px
}
.tag {
font-size:14px;
padding:6px 14px;
border-radius:30px;
color:#fff;
margin-right:6px
}
.tag.app {
background:#34c3ff
}
.tag.pc {
background:#5b63ff
}
#pay04 h2 {
font-size:42px;
font-weight:700;
line-height:1.3;
margin-bottom:20px
}
#pay04 .desc {
font-size:18px;
color:#333;
margin-bottom:30px;
line-height:1.6
}
#pay04 .hash-wrap span {
display:inline-block;
background:#f1f3f7;
padding:8px 14px;
border-radius:10px;
margin:6px 6px 0 0;
font-size:14px;
color:#444
}
#pay04 .phone-screen {
border-radius:20px;
background:#fdfdfd;
padding:18px;
height:500px;
overflow:hidden;
position:relative
}
#pay04 .sms {
display:flex;
flex-direction:column;
gap:12px
}
#pay04 .bubble {
background:#eef1f8;
padding:12px 14px;
border-radius:14px;
font-size:14px;
color:#333;
line-height:1.4;
width:88%;
text-align:left
}
#pay04 .notify {
background:#0d41e3;
padding:14px;
border-radius:14px;
color:#fff;
display:flex;
gap:10px;
font-size:14px;
margin-top:10px;
text-align:left
}
.notify svg {
flex-shrink:0;
margin-top:4px
}
@media(max-width:1200px) {
#pay04 .inner {
flex-direction:column;
text-align:center;
gap:50px
}
#pay04 h2 {
font-size:34px
}
}
@media(max-width:768px) {
#pay04 h2 {
font-size:28px
}
.bubble {
font-size:13px
}
.notify {
font-size:13px
}
}
#pay05 {
padding:80px 20px
}
#pay05 .inner {
max-width:1850px;
margin:0 auto;
display:flex;
align-items:center;
gap:80px;
flex-direction:column;
text-align:center
}
#pay05 .col-left {
flex:1
}
#pay05 .col-right {
flex:1;
display:flex;
justify-content:center
}
#pay05 h2 {
font-size:42px;
font-weight:700;
line-height:1.3;
margin-bottom:20px
}
#pay05 .desc {
font-size:18px;
color:#333;
margin-bottom:30px;
line-height:1.6
}
#pay05 .hash-wrap span {
display:inline-block;
background:#f1f3f7;
padding:8px 14px;
border-radius:10px;
margin:6px 6px 0 0;
font-size:14px;
color:#444
}
#pay05 .phone-screen {
background:#fdfdfd;
border-radius:20px;
padding:20px;
height:520px;
overflow: hidden
}
/* TOP SELECT (Month / Week / Day) */
#pay05 .auto-area {
display:flex;
justify-content:space-between;
margin:20px 0 50px
}
#pay05 .auto-item {
width:100%;
background:#fff;
border-radius:14px;
padding:10px 0;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,.06)
}
#pay05 .auto-item .num {
font-size:22px;
font-weight:600;
margin-bottom:4px
}
#pay05 .auto-item span {
font-size:13px;
color:#888
}
#pay05 .auto-item.active {
background:#3455e5;
color:#fff;
box-shadow:0 4px 16px rgba(90,103,248,.4)
}
#pay05 .auto-item.active span {
color: #fff
}
/* CALENDAR */
#pay05 .calendar {
margin-top:10px
}
#pay05 .cal-header {
text-align:center;
font-weight:600;
margin-bottom:14px;
font-size:16px
}
#pay05 .cal-week {
display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;
font-size:13px;
margin-bottom:8px;
color:#666
}
#pay05 .cal-grid {
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
font-size:13px;
text-align:center;
color:#444
}
#pay05 .cal-grid span {
padding:6px 0
}
#pay05 .cal-grid .sel {
background:#3455e5;
color:#fff;
border-radius: 10px
}
/* RESPONSIVE */
@media(max-width:1200px) {
#pay05 .inner {
flex-direction:column;
text-align:center;
gap:50px
}
#pay05 h2 {
font-size:34px
}
}
@media(max-width:768px) {
#pay05 h2 {
font-size:28px
}
}
#pay06 {
padding:0px 20px 100px;
background:#fff
}
#pay06 .inner {
max-width:1400px;
margin:0 auto
}
#pay06 .sec-title {
font-size:42px;
font-weight:700;
margin-bottom:60px;
line-height:1.3;
text-align:center
}
#pay06 hr {
display:block
}
#pay06 .device-item {
display:flex;
gap:50px;
margin-bottom:80px;
align-items:center
}
#pay06 .device-img img {
width:70%;
}
#pay06 .device-img {
flex:1
}
#pay06 .device-info {
flex:1
}
#pay06 .device-name {
font-size:28px;
font-weight:700;
margin-bottom:60px
}
#pay06 .spec-box {
margin-bottom:20px
}
#pay06 .spec-box h4 {
font-size:18px;
font-weight:700;
margin-bottom:10px
}
#pay06 .spec-box ul {
padding-left:18px
}
#pay06 .spec-box li {
position:relative;
padding-left:14px;
line-height:2em
}
#pay06 .spec-box li:before {
content:'';
position:absolute;
left:0;
top:8px;
width:6px;
height:6px;
background:#4a8cff;
border-radius:50%
}
#pay06 .maker-box h4 {
font-size:18px;
font-weight:700;
margin-bottom:10px
}
#pay06 .maker-box p {
margin-bottom:4px;
font-size:16px;
color:#444
}
@media(max-width:1024px) {
#pay06 .sec-title {
font-size:34px
}
#pay06 .device-item {
flex-direction:column;
align-items:center;
text-align:center
}
#pay06 .device-img img {
width:260px
}
#pay06 .device-info {
text-align:left
}
}
@media(max-width:768px) {
#pay06 .sec-title {
font-size:28px
}
#pay06 .device-img img {
width:220px
}
#pay01 .pay-title h6,#pay02 .desc,#pay03 .pay-text .desc,#pay04 .desc,#pay05 .desc,#pay06 .desc {
font-size:14px;
}
}
#etc01 {
width:100%;
padding:80px 0
}
#etc01 .inner {
max-width:1850px;
margin:0 auto;
padding:0 20px
}
#etc01 .top {
display:flex;
align-items:center;
justify-content:space-between;
gap:60px
}
#etc01 .top .txt h1 {
font-size:40px;
font-weight:700;
color:#1b3fae;
margin-bottom:10px
}
#etc01 .top .txt .sub {
font-size:22px;
color:#333;
margin:15px 0;
line-height:1.5em
}
#etc01 .top .txt .desc {
font-size:16px;
color:#555;
line-height:1.6
}
#etc01 .top img {
position:relative;
width:350px;
height:320px
}
#etc01 .table_wrap table {
width:100%;
border-collapse:collapse;
margin-top:50px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#etc01 .table_wrap th,#etc01 .table_wrap td {
padding:14px;
font-size:16px;
color:#333;
text-align:center
}
#etc01 .table_wrap th {
background:#f5f7ff;
font-weight:600;
color:#1b3fae
}
#etc01 .feat {
margin-top:80px
}
#etc01 .feat h2 {
text-align:center;
font-size:28px;
color:#1b3fae;
margin-bottom:40px
}
#etc01 .feat-box {
margin-top:50px;
text-align:center;
display:flex;
gap:60px;
align-items:flex-start;
justify-content:center
}
#etc01 .feat-txt {
width:100%;
padding:15px 0 30px;
background:#e4edff60;
border-radius:12px
}
#etc01 .feat-txt h3 {
font-size:20px;
color:#222;
margin-bottom:6px;
margin-top:20px;
font-weight:800
}
#etc01 .feat-txt p {
font-size:16px;
color:#555;
line-height:1.6
}
#etc01 .icons {
display:flex;
gap:40px;
margin-top:20px;
justify-content:center
}
#etc01 .ico {
text-align:center;
width:100px
}
#etc01 .ico span {
display:block;
color:#1b3fae;
font-size:12px
}
#etc01 .ico-img {
width:60px;
height:60px;
border-radius:12px;
background:#e9efff;
margin:0 auto 10px
}
#etc01 .ico-img.api {
background:#e4edff url('data:image/svg+xml;utf8,') center/28px no-repeat
}
#etc01 .ico-img.guide {
background:#e4edff url('data:image/svg+xml;utf8,') center/28px no-repeat
}
#etc01 .ico-img.box{
background:#e4edff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b3fae'%3E%3Cpath d='M2 7l10 5 10-5-10-5zm0 2v8l10 5V14zm20 0v8l-10 5V14z'/%3E%3C/svg%3E") center/28px no-repeat
}
/* RESPONSIVE */
@media(max-width:1024px) {
#etc01 .top {
flex-direction:column;
text-align:center
}
#etc01 .mockup {
margin-top:20px
}
#etc01 .feat-box {
flex-direction:column;
align-items:center;
gap:20px;
margin-top:50px
}
#etc01 .icons {
justify-content:center
}
}
@media(max-width:768px) {
#etc01 .feat-txt {
padding:15px 30px 30px;
}
#etc01 .top img {
width:80%;
height:auto
}
#etc01 .top .txt h1 {
font-size:32px
}
#etc01 .table_wrap th,#etc01 .table_wrap td {
font-size:14px;
padding:10px
}
}
#etc02 {
width:100%
}
#etc02 .inner {
max-width:1850px;
margin:0 auto;
padding:80px 20px
}
#etc02 .hero {
display:flex;
align-items:center;
gap:80px;
justify-content:space-between
}
#etc02 .hero h1 {
font-size:40px;
font-weight:700;
color:#1b3fae;
margin-bottom:10px
}
#etc02 .hero .sub {
font-size:22px;
color:#333;
margin:15px 0;
line-height:1.5em
}
#etc02 .hero .desc {
font-size:16px;
color:#555;
line-height:1.6
}
#etc02 .hero-right {
text-align:right
}
#etc02 .hero img {
position:relative;
width:350px;
height:320px
}
#etc02 .brand-line {
text-align:center;
margin-top:40px
}
#etc02 .brand-title {
font-size:22px;
color:#333;
margin-bottom:30px;
line-height:1.5em
}
#etc02 .brand-icons {
display:flex;
justify-content:center;
gap:30px
}
#etc02 .brand-icons .item {
display:flex;
align-items:center;
width:100px;
padding:14px 26px;
background:#fff;
border-radius:50px;
font-size:18px;
color:#1b3fae;
border:1px solid #dce6ff;
aspect-ratio:1/1
}
#etc02 .brand-icons .item img {
width:100%
}
#etc02 .try-line {
width:100%;
padding:55px 0 30px;
background:#e4edff60;
border-radius:12px
}
#etc02 .try-line h2 {
font-size:26px;
margin-bottom:30px;
text-align:center
}
#etc02 .try-box {
display:flex;
gap:40px;
align-items:center;
justify-content:center
}
#etc02 .step li {
font-size:16px;
color:#333;
margin-bottom:10px;
line-height:1.5
}
#etc02 .try-phone .mock {
width:230px;
height:420px;
background:#fff;
border-radius:28px;
padding:20px;
box-shadow:0 0 20px rgba(0,0,0,0.08)
}
#etc02 .try-phone .screen {
width:100%;
height:100%;
background:#e1e9ff;
border-radius:20px
}
#etc02 .step li.active {
color:#1b3fae;
font-weight:600
}
#etc02 .try-phone .screen-wrap {
width:100%;
height:100%;
position:relative
}
#etc02 .screen-item {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:20px;
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center
}
#etc02 .screen-item.show {
display:flex
}
#etc02 .screen-item input {
width:90%;
padding:10px;
border:1px solid #ccc;
border-radius:10px;
margin-bottom:10px
}
#etc02 .screen-item .btn-next {
padding:10px 18px;
background:#1b3fae;
color:#fff;
border-radius:8px;
font-size:14px;
margin-top:10px
}
#etc02 .screen-item h4 {
font-size:18px;
color:#1b3fae;
margin-bottom:12px
}
#etc02 .screen-item p {
font-size:14px;
color:#444;
line-height:1.5
}
#etc02 .step li {
position:relative;
padding-left:40px;
cursor:pointer
}
#etc02 .step li .circle {
position:absolute;
left:0;
top:5px;
width:26px;
height:26px;
border-radius:50%;
background:#dbe6ff;
color:#1b3fae;
display:flex;
justify-content:center;
align-items:center;
font-size:14px;
font-weight:600
}
#etc02 .step li.active .circle {
background:#1b3fae;
color:#fff
}
#etc02 .mock {
width:100%;
height:520px;
background:#fff;
border-radius:28px;
padding:25px 20px;
margin:0 auto;
position:relative;
overflow:hidden
}
#etc02 .screen-wrap {
width:100%;
height:100%;
position:relative
}
#etc02 .screen-item {
display:none;
width:100%;
height:100%
}
#etc02 .screen-item.show {
display:block
}
#etc02 .screen-title {
font-size:17px;
font-weight:700;
color:#222;
margin-bottom:14px;
text-align:left
}
#etc02 .form-box label {
display:block;
font-size:13px;
color:#666;
margin-bottom:4px
}
#etc02 .form-box input {
width:100%;
height:42px;
border:1px solid #ddd;
border-radius:10px;
padding:0 12px;
font-size:14px;
margin-bottom:12px
}
#etc02 .btn-primary {
width:100%;
height:44px;
background:#3d65ff;
color:#fff;
border-radius:10px;
font-size:15px;
border:0;
margin-top:5px
}
#etc02 .notice-box {
text-align:center;
margin-top:60px
}
#etc02 .icon-send {
width:60px;
height:60px;
margin:0 auto 15px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#etc02 .msg-title {
font-size:17px;
font-weight:700;
color:#222;
margin-bottom:8px
}
#etc02 .msg-desc {
font-size:14px;
color:#666;
line-height:1.4;
padding:0 10px
}
#etc02 .sms-bubble {
background:#f2f5ff;
color:#333;
border-radius:14px;
padding:14px;
max-width:100%;
margin:60px auto 0;
position:relative;
font-size:14px;
text-align:left
}
#etc02 .sms-bubble::after {
content:"";
position:absolute;
left:20px;
bottom:-10px;
width:16px;
height:16px;
background:#f2f5ff;
transform:rotate(45deg);
}
#etc02 .sms-bubble .time {
display:block;
text-align:right;
font-size:12px;
color:#999;
margin-top:6px;
}
#etc02 .code-input-box input {
text-align:center;
font-size:20px;
letter-spacing:4px;
height:50px;
border-radius:12px;
border:1px solid #bbb;
}
#etc02 .done-box {
text-align:center;
margin-top:100px
}
#etc02 .icon-check {
width:70px;
height:70px;
border-radius:50%;
margin:0 auto 15px;
background:#3d65ff url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#etc02 .done-msg {
font-size:17px;
font-weight:700;
color:#3d65ff
}
#etc02 .progress-wrap {
width:100%;
height:4px;
background:#e3e7f3;
border-radius:4px;
margin:50px auto 10px;
overflow:hidden;
max-width:300px
}
#etc02 .progress-bar {
width:0%;
height:100%;
background:#1b3fae;
border-radius:4px;
transition:width .4s ease
}
#etc02 .feature {
text-align:center
}
#etc02 .feature h2 {
font-size:28px;
margin-bottom:40px;
color:#1b3fae
}
#etc02 .feature-box {
display:flex;
gap:40px;
align-items:center;
flex-direction:column
}
#etc02 .f-left {
width:100%;
padding:35px 0 30px;
background:#e4edff60;
border-radius:12px
}
#etc02 .f-left h3 {
font-size:22px;
margin-bottom:14px;
color:#1b3fae
}
#etc02 .f-left p {
font-size:16px;
color:#444;
line-height:1.6
}
#etc02 .icons {
display:flex;
gap:40px;
margin-top:20px;
justify-content:center
}
#etc02 .ico {
text-align:center;
width:100px;
}
#etc02 .ico span {
display:block;
color:#1b3fae;
font-size:12px
}
#etc02 .f-right {
display:flex;
gap:20px
}
#etc02 .f-right .api {
margin:0 auto 10px;
width:60px;
height:60px;
border-radius:12px;
background:#dbe6ff url("data:image/svg+xml;utf8,") center/50% no-repeat;
}
#etc02 .f-right .socket {
margin:0 auto 10px;
width:60px;
height:60px;
border-radius:12px;
background:#dbe6ff url("data:image/svg+xml;utf8,") center/50% no-repeat;
}
@media(max-width:1024px) {
#etc02 .hero {
flex-direction:column;
text-align:center
}
#etc02 .try-box {
flex-direction:column
}
#etc02 .feature-box {
flex-direction:column;
text-align:center
}
#etc02 .hero-right {
text-align:center
}
}
@media(max-width:768px) {
#etc02 .f-left {
padding:55px 30px 30px;
}
#etc02 .try-line {
padding:55px 30px 30px;
}
#etc02 .hero img {
width:100%;
height:auto
}
#etc02 .phone-mock {
width:220px;
height:420px
}
#etc02 .screen {
width:140px;
height:240px
}
#etc02 .brand-icons {
flex-wrap:wrap
}
}
#etc03 {
width:100%
}
#etc03 .inner {
max-width:1850px;
margin:0 auto;
padding:80px 20px
}
#etc03 h1 {
font-size:42px;
color:#1b3fae;
margin-bottom:20px;
font-weight:800
}
#etc03 h2 {
font-size:25px;
color:#1b3fae;
margin-bottom:30px;
text-align:center
}
#etc03 .sub {
font-size:18px;
color:#333;
line-height:1.6
}
#biz-process {
width:100%;
padding:30px 0 30px;
background:#e4edff60;
border-radius:12px
}
#biz-process .process-scroll {
overflow-x:auto;
padding-bottom:20px
}
#biz-process .process-wrap {
display:flex;
align-items:center;
gap:40px;
min-width:1100px;
justify-content:center
}
#biz-process .p-box {
width:260px;
border:1px solid #dbe4ff;
border-radius:14px;
text-align:center;
padding:20px 20px;
background:#fff;
flex-shrink:0
}
#biz-process .p-box .icon {
width:60px;
height:60px;
margin:0 auto 10px
}
#biz-process .p-box svg {
width:100%;
height:100%;
stroke:#1b3fae
}
#biz-process .p-box .title {
background:#1b3fae;
color:#fff;
padding:10px;
border-radius:8px;
margin-top:10px;
font-size:16px;
font-weight:600
}
#biz-process .arrow-group {
text-align:center;
width:200px;
flex-shrink:0
}
#biz-process .arrow-group .top,#biz-process .arrow-group .bottom {
font-size:14px;
color:#333;
line-height:1.4;
margin-bottom:8px
}
#biz-process .arrow svg {
width:40px;
height:40px;
stroke:#1b3fae;
margin:0 auto
}
#etc03 .needs .need-list {
margin-top:40px;
display:flex;
gap:40px;
justify-content:center
}
#etc03 .needs li {
display:flex;
gap:20px;
align-items:flex-start
}
#etc03 .needs .n-icon {
width:50px;
height:50px;
border-radius:12px;
background:#e7efff;
display:flex;
align-items:center;
justify-content:center
}
#etc03 .needs .n-icon svg {
width:28px;
height:28px;
stroke:#1b3fae
}
#etc03 .needs .txt h4 {
font-size:20px;
color:#1b3fae;
margin-bottom:6px
}
#etc03 .needs .txt p {
font-size:16px;
color:#333;
line-height:1.5
}
@media(max-width:1024px) {
#etc03 .hero {
text-align:center
}
#etc03 h1 {
font-size:34px
}
#etc03 h2 {
font-size:28px
}
#etc03 .p-item {
width:220px;
padding:24px
}
#etc03 .needs .need-list {
margin-top:40px;
display:flex;
flex-direction:column;
gap:40px
}
}
@media(max-width:768px) {
#etc03 .inner {
padding:60px 20px
}
#etc03 .needs .need-list {
gap:30px
}
#biz-process .p-box {
width:180px;
}
}
#etc04 {
padding:80px 0;
}
#etc04 .inner {
margin:auto;
padding:40px 20px;
}
#etc04 h1 {
font-size:42px;
color:#1b3fae;
margin-bottom:20px;
font-weight:800
}
#etc04 h2 {
font-size:25px;
color:#1b3fae;
margin-bottom:30px;
text-align:center
}
#etc04 p.sub {
font-size:18px;
color:#333;
line-height:1.6
}
#etc04 .use-area {
width:100%;
padding:30px 30px;
background:#e4edff60;
border-radius:12px
}
#etc04 .use-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
text-align:center;
}
#etc04 .use-grid .item {
background:#ffffff;
padding:25px;
border-radius:16px;
}
#etc04 .use-grid svg {
width:48px;
height:48px;
stroke:#4A75F7;
fill:none;
margin-bottom:10px;
}
#etc04 .use-grid p {
font-size:16px;
margin-top:5px;
}
#etc04 .effect-list {
display:flex;
justify-content:space-between;
gap:20px;
margin-top:25px;
padding-left:0;
}
#etc04 .effect-list li {
flex:1;
list-style:none;
border:1px solid #e5e9f5;
padding:20px 15px;
border-radius:12px;
background:#fff;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
transition:0.25s;
}
#etc04 .effect-list li.active {
border-color:#4A75F7;
box-shadow:0 6px 16px rgba(0,0,0,0.05);
}
#etc04 .effect-list .num {
width:100%;
height:32px;
border-radius:12px;
background:#4A75F720;
color:#4A75F7;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:600;
}
#etc04 .effect-list li i {
font-size:50px;
color:#4A75F7;
margin:15px 0
}
#etc04 .effect-list li p {
font-size:15px;
color:#333;
line-height:1.45;
margin:0;
}
#triangle-process .triangle-area {
position:relative;
width:100%;
max-width:520px;
margin:0 auto;
padding: 80px 0 50px
}
#triangle-wrap {
width:100%;
max-width:520px;
/* 절대 초과 불가 */
margin:0 auto;
position:relative;
}
#triangle-process .triangle-bg {
width:0;
height:0;
/* 삼각형 가로 = (border-left+border-right) 따라서 최대 크기를 절대 520px 안 넘도록 clamp()로 제한 */
border-left:clamp(50px,25vw,260px) solid transparent;
border-right:clamp(50px,25vw,260px) solid transparent;
border-bottom:clamp(80px,40vw,420px) solid #C2EBF7;
margin:0 auto;
}
#triangle-process .circle {
width:130px;
height:130px;
background:#fff;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:absolute
}
#triangle-process .circle svg {
width:45px;
height:45px
}
#triangle-process .circle p {
margin-top:6px;
font-size:14px;
font-weight:600;
color:#333
}
#triangle-process .center-sec {
top:60%;
left:50%;
transform:translate(-50%,-50%)
}
#triangle-process .node-a {
top:10px;
left:50%;
transform:translateX(-50%)
}
#triangle-process .node-b {
bottom:10px;
right:-20px
}
#triangle-process .node-c {
bottom:10px;
left:-20px
}
#triangle-process .line {
position:absolute;
display:flex;
align-items:center
}
#triangle-process .line span {
width:22px;
height:22px;
background:#4A75F7;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:600
}
#triangle-process .line-1 {
top:clamp(80px,40vw * 0.8,270px);
left:clamp(80px,8vw,120px);
transform:rotate(-60deg)
}
#triangle-process .line-2 {
top:clamp(80px,40vw * 0.8,270px);
right:clamp(80px,8vw,120px);
transform:rotate(60deg)
}
#triangle-process .line-3 {
bottom:40px;
left:50%;
transform:translateX(-50%)
}
#triangle-process .step-desc {
margin-top:40px;
display:grid;
gap:18px;
grid-template-columns:repeat(3,1fr)
}
#triangle-process .step-desc .box {
padding:14px 18px;
border:1px solid #dfe6ff;
border-radius:10px;
background:#f7faff
}
#triangle-process .step-desc strong {
display:inline-block;
width:22px;
height:22px;
background:#4A75F7;
color:#fff;
border-radius:50%;
text-align:center;
line-height:22px;
margin-right:10px;
font-size:13px
}
#triangle-process .step-desc p {
margin-left:32px;
color:#555;
font-size: 14px
}
/* 반응형 */
@media(max-width:768px) {
#etc04 .use-grid {
grid-template-columns:repeat(1,1fr);
padding:0 30px
}
#etc04 .intro {
text-align:center
}
#etc04 h1 {
font-size:34px
}
#etc04 h2 {
font-size:28px
}
#triangle-process .circle {
width:96px;
height:96px
}
#triangle-process .circle svg {
width:36px;
height:36px
}
#triangle-process .node-a {
top:15px
}
#triangle-process .node-a {
top:15px
}
#triangle-process .circle p {
font-size:11px;
}
#triangle-process .line span {
width:18px;
height:18px;
font-size:11px
}
#triangle-process .step-desc {
grid-template-columns:repeat(1,1fr)
}
.use-grid {
grid-template-columns:repeat(2,1fr);
}
#etc04 .effect-list {
flex-wrap:wrap;
}
#etc04 .effect-list li {
flex:100%;
}
#etc04 .use-grid .item {
display:flex;
align-items:center;
padding:0px 25px 0;
gap:10px
}
#etc04 .use-grid svg {
margin-bottom:0;
width:30px;
height:30px;
margin-top:5px
}
#etc04 .use-grid p {
margin:0
}
}
#custom01 {
font-family:inherit;
color:#222;
}
#custom01 .inner {
width:100%;
max-width:1200px;
margin:0 auto;
padding:50px 20px;
}
#custom01 .section-title {
text-align:center;
margin-bottom:30px;
}
#custom01 .section-title h2 {
font-size:32px;
font-weight:700;
margin-bottom:10px;
}
#custom01 .section-title p {
font-size:18px;
color:#666;
}
#custom01 .main-visual {
position:relative;
display:flex;
align-items:end;
justify-content:space-between;
gap:50px;
background:#f7f7f8;
border-radius:20px
}
#custom01 .main-visual .visual-img {
height:300px;
}
#custom01 .main-visual .visual-img img {
height:100%
}
#custom01 .visual-text {
padding:60px 40px;
}
#custom01 .visual-text h3 {
font-size:28px;
font-weight:700;
margin-bottom:15px;
line-height:1.5em
}
#custom01 .visual-text p {
font-size:16px;
color:#555;
margin-bottom:25px;
line-height:1.6;
}
#custom01 .btn-wrap {
display:flex;
gap:12px;
}
#custom01 .btn-primary {
background:#111;
color:#fff;
padding:12px 22px;
border-radius:8px;
display:inline-block;
font-size:16px;
}
#custom01 .btn-line {
background:#fff;
color:#111;
border:1px solid #ddd;
padding:12px 22px;
border-radius:8px;
font-size:16px;
}
#custom01 .simple-pay {
background:#202020;
color:#fff;
padding:50px 40px;
border-radius:20px;
margin:70px 0;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:30px;
}
#custom01 .simple-pay h3 {
font-size:26px;
margin-bottom:12px;
font-weight:700;
line-height:1.5em
}
#custom01 .simple-pay p {
color:#ddd;
font-size:15px;
}
#custom01 .sp-icons {
display:flex;
gap:15px;
flex-wrap:wrap;
}
#custom01 .sp-icons img {
width:270px;
height:auto;
}
@media (max-width:768px) {
#custom01 .main-visual {
flex-direction:column;
text-align:center;
}
#custom01 .main-visual .visual-img {
height:auto
}
#custom01 .visual-img img {
width:100%;
max-width:330px;
height:auto!important;
}
#custom01 .simple-pay {
flex-direction:column;
text-align:center;
}
#custom01 .sp-icons img {
width:50%;
margin:0 auto
}
}
#custom02 {
font-family:inherit;
color:#222;
}
#custom02 .inner {
width:100%;
max-width:1200px;
margin:0 auto;
padding:50px 20px;
}
#custom02 .section-title {
text-align:center;
margin-bottom:30px;
}
#custom02 .section-title h2 {
font-size:32px;
font-weight:700;
margin-bottom:10px;
}
#custom02 .section-title p {
font-size:18px;
color:#666;
}
#custom02>img {
width:100%
}
#join01 {
padding:80px 20px;
font-family:inherit;
}
#join01 h2 {
text-align:center;
font-size:36px;
font-weight:700;
margin-bottom:10px;
}
#join01 p {
text-align:center;
font-size:18px;
opacity:0.9;
}
#join01 h3 {
font-size:28px;
color:#1b3fae;
text-align:center;
margin-bottom:40px;
}
#join01 .process-wrap {
margin-top:60px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:25px;
}
#join01 .process-wrap .step {
position:relative;
}
#join01 .process-wrap .icon {
width:92px;
height:92px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 15px auto;
font-size:34px;
background:linear-gradient(135deg,#ffffff 0%,#f2f5ff 100%);
border:1px solid rgba(22,43,133,0.25);
box-shadow:0 4px 12px rgba(0,0,0,0.08),inset 0 2px 6px rgba(255,255,255,0.8);
backdrop-filter:blur(4px);
transition:all .3s ease;
}
#join01 .process-wrap .step.active .icon {
background:linear-gradient(135deg,#162b85 0%,#3f59d1 100%);
color:#fff;
border-color:#162b85;
box-shadow:0 6px 16px rgba(22,43,133,0.35),inset 0 2px 4px rgba(255,255,255,0.3);
}
#join01 .process-wrap .label {
font-size:16px;
line-height:1.4;
color:#000
}
#join01 .process-wrap .arrow i {
font-size:28px;
opacity:0.8;
}
#join01 .bottom-info {
margin:70px 0;
font-size:18px;
font-weight:500;
text-align:center;
}
#join01 .contact-box {
margin-top:50px;
display:flex;
justify-content:center;
gap:80px;
text-align:center;
}
#join01 .contact-box .col {
width:100%;
padding:35px 0 30px;
background:#e4edff60;
border-radius:12px;
}
#join01 .contact-box .col h4 {
font-size:20px;
margin-bottom:5px;
}
#join01 .contact-box .val {
font-size:22px;
font-weight:700;
margin-bottom:5px;
}
#join01 .contact-box .sub {
font-size:14px;
opacity:0.8;
}
@media (max-width:768px) {
#join01 .process-wrap {
gap:20px;
}
#join01 .process-wrap .icon {
width:70px;
height:70px;
font-size:26px;
}
#join01 h2 {
font-size:28px;
}
#join01 p {
font-size:16px;
}
#join01 .contact-box {
flex-wrap:wrap;
gap:20px
}
}
#join02 h2 {
text-align:center;
font-size:28px;
font-weight:700;
color:#1b3fae;
margin-bottom:25px;
}
#join02 .table_wrap table {
width:100%;
border-collapse:collapse;
margin-top:50px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#join02 .table_wrap th,#join02 .table_wrap td {
padding:14px;
font-size:16px;
color:#333;
text-align:center
}
#join02 .table_wrap tr:not(:last-child) td {
border-bottom:1px dashed #ddd;
}
#join02 .table_wrap tbody tr:not(:last-child) th {
border-bottom:1px dashed #ddd;
}
#join02 .table_wrap th {
background:#f5f7ff;
font-weight:600;
color:#1b3fae
}
#join02 .cond-box {
display:flex;
justify-content:center;
gap:40px;
margin:30px 0 50px;
flex-wrap:wrap;
}
#join02 .cond-box .item {
text-align:center;
}
#join02 .cond-box .item i {
background:#f5f7ff;
border:1px solid #dbe2ff;
padding:25px 35px;
border-radius:12px;
text-align:center;
min-width:200px;
transition:.3s;
color:#1b3fae;
font-size:30px;
margin-bottom: 12px;
}
/* 반응형 */
@media (max-width:768px) {
#join02 .cond-box {
gap:20px;
}
#join02 .cond-box .item {
min-width:140px;
padding:20px;
}
}
.provision-wrap {
margin: 40px auto;
}
/* 탭 UI */
.provision-wrap .tabs {
display:flex;
border-bottom:2px solid #ddd;
margin-bottom:20px
}
.provision-wrap .tab-btn {
flex:1;
text-align:center;
padding:14px 0;
font-size:18px;
font-weight:600;
cursor:pointer;
border-bottom:3px solid transparent
}
.provision-wrap .tab-btn.active {
color:#1b3fae;
border-bottom-color: #1b3fae
}
/* 내용 영역 */
.provision-wrap .tab-content {
display:none
}
.provision-wrap .tab-content.active {
display: block;
margin: 140px auto;
}
/* 제목 스타일 */
.provision-wrap h1 {
font-size:26px;
font-weight:700;
margin:25px 0 15px;
color:#1b3fae
}
.provision-wrap h2 {
font-size:20px;
margin-top:25px;
color:#162b85
}
.provision-wrap h3 {
font-size:17px;
margin-top:18px;
color: #333;
}
/* 본문 스타일 */
.provision-wrap p {
margin:10px 0;
}
.provision-wrap ul {
margin:10px 0 10px 20px;
}
.provision-wrap ul li {
margin-bottom: 6px;
}
/* 인용 강조 */
.section-box {
background:#f1f4ff;
border-left:4px solid #1b3fae;
padding:15px;
margin:20px 0;
border-radius: 6px
}
/* 반응형 */
@media(max-width:600px) {
.provision-wrap {
padding:20px
}
.provision-wrap .tab-btn {
font-size:16px;
padding:12px 0
}
}
.provision-wrap h1 {
font-size:28px;
font-weight:700;
text-align:center;
margin-bottom:50px;
padding-bottom:20px;
}
.provision-wrap h2 {
font-size:20px;
font-weight:700;
margin:45px 0 15px;
color:#000;
padding-left:10px;
border-left:5px solid #0066ff;
}
.provision-wrap h3 {
font-size:18px;
font-weight:600;
margin:30px 0 12px;
color:#333;
}
.provision-wrap p {
margin-bottom:15px;
font-size:16px;
}
.provision-wrap ol,.provision-wrap ul {
margin:15px 0;
padding-left:30px;
}
.provision-wrap ol>li,.provision-wrap ul>li {
margin-bottom:10px;
font-size:16px;
}
.provision-wrap ol ol,.provision-wrap ul ul,.provision-wrap ol ul,.provision-wrap ul ol {
margin-top:8px;
margin-bottom: 8px;
}
/* 숫자 목록 깔끔하게 */
.provision-wrap ol {
counter-reset:item;
list-style:none;
padding-left:5px;
}
.provision-wrap ol>li {
counter-increment:item;
position:relative;
padding-left:35px;
}
.provision-wrap ol>li::before {
content:counter(item) ".";
position:absolute;
left:0;
color:#0066ff;
font-weight:700;
width:30px;
text-align: right;
}
/* 불릿 목록 */
.provision-wrap ul>li {
position:relative;
padding-left:18px;
}
.provision-wrap ul>li::before {
content:"•";
color:#0066ff;
font-weight:bold;
position:absolute;
left: 0;
}
/* 강조 */
.provision-wrap strong {
color:#0066ff;
font-weight: 700;
}
/* 모바일 최적화 */
@media (max-width:768px) {
.provision-wrap h1 {
font-size:24px;
margin-bottom:40px;
}
.provision-wrap h2 {
font-size:19px;
margin:35px 0 12px;
}
.provision-wrap article {
padding:20px;
}
.provision-wrap p,.provision-wrap li {
font-size:15.5px;
}
}
#ready {
width:100%;
padding:120px 20px;
text-align:center
}
#ready .inner {
max-width:900px;
margin:0 auto
}
#ready .ready-box {
padding:60px 40px;
position:relative;
overflow:hidden
}
#ready .icon-wrap {
width:90px;
height:90px;
border-radius:50%;
background:linear-gradient(135deg,#4a8cff,#1b3fae);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 25px;
color:#fff;
font-size:40px;
box-shadow:0 10px 25px rgba(0,0,0,0.08)
}
#ready h1 {
font-size:32px;
color:#1b3fae;
margin-bottom:14px;
font-weight:700
}
#ready .sub {
font-size:17px;
color:#555;
line-height:1.6;
margin-bottom:40px
}
#ready .preview-box {
background:#fff;
border:1px solid #d9e2ff;
padding:30px;
border-radius:20px;
margin-bottom:40px
}
#ready .preview-box h3 {
font-size:20px;
color:#1b3fae;
margin-bottom:20px
}
#ready .preview-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px
}
#ready .preview-grid .item {
background:#f1f5ff;
border:1px solid #dce4ff;
border-radius:16px;
padding:20px 10px
}
#ready .preview-grid .item i {
font-size:26px;
color:#4a8cff;
margin-bottom:10px
}
#ready .preview-grid .item p {
font-size:15px;
color:#333
}
#ready .btn-home {
margin-top:20px;
padding:14px 28px;
font-size:17px;
background:#4a8cff;
color:#fff;
border:none;
border-radius:10px;
cursor:pointer;
transition:.3s
}
#ready .btn-home:hover {
background: #1b3fae
}
/* 반응형 */
@media(max-width:768px) {
#ready h1 {
font-size:26px
}
#ready .preview-grid {
grid-template-columns:repeat(2,1fr)
}
#ready .ready-box {
padding: 40px 20px
}
}
/*서브-왼쪽메뉴*/
#depth_menu {
position:relative;
width:100%;
z-index:1;
transition:all 0.5s;
background-color:rgba(211,211,211,0);
max-width:1400px;
margin:0 auto
}
#depth_menu dl {
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
}
#depth_menu dd {
width:100%;
height:60px;
display:flex;
align-items:center;
}
#depth_menu dd:not(:last-child):after {
content:"";
display:inline-block;
width:1px;
height:20px;
background-color:#ffffff56;
}
#depth_menu dd a {
font-size:1.4em;
width:max-content;
height:100%;
padding:0 40px;
line-height:100%;
transition:all 0.4s;
color:#fff;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
opacity:0.8;
position:relative;
padding-bottom:0px;
font-weight:200;
min-width:calc(100% - 1px);
}
#depth_menu dd a.current {
font-weight:500;
transition:all 0.4s;
opacity:1;
}
@media (max-width:992px) {
#depth_menu {
transition:all 0.5s;
overflow-x:scroll;
overflow-y:hidden;
bottom:0px;
width:100%;
height:40px;
background:#fff;
border-bottom:1px solid #e1e4e3;
}
#depth_menu dl {
white-space:nowrap;
width:fit-content;
min-width: 100%;
}
#depth_menu dd {
white-space:nowrap;
float:none;
display:inline-block;
}
#depth_menu dd:last-child {
border-right:0px
}
#depth_menu dd {
float:none;
color:#fff;
line-height:38px;
display:inline-block;
height:40px;
width:auto
}
#depth_menu dd a {
color:#666;
font-size:1.02em;
display:block;
line-height:38px;
font-weight:500;
padding:0 25px;
transition:all 0.4s;
}
#depth_menu dd a:hover {
color:#fff;
text-decoration:none;
height:40px;
transition:all 0.4s;
}
#depth_menu dd a.current {
color:rgba(0,0,0);
height:40px;
font-weight:500;
border-bottom:4px solid #1560af;
width:100%;
line-height:40px
}
#depth_menu dd a.current:after {
display:none
}
}
@media (max-width:767px) {
#depth_menu dd a {
padding:0 10px;
transition: all 0.4s;
}
}
#consult-form{padding:80px 0;}
#consult-form .wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
#consult-form .grid{display:grid;grid-template-columns:420px 1fr;gap:80px;align-items:center;}
#consult-form .brand{display:flex;align-items:center;gap:12px;}
#consult-form .brand h2{font-size:26px;font-weight:700;}
#consult-form .desc{margin-top:20px;color:#666;line-height:1.6; font-size: 1.2em}
#consult-form .agree-box{border:1px solid #eee;padding:30px;border-radius:6px;margin-bottom:30px;}
#consult-form .agree-box h3{font-size:18px;font-weight:700;margin-bottom:20px;}
#consult-form .agree-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
#consult-form .agree-grid strong{display:block;font-size:14px;margin-bottom:6px;}
#consult-form .agree-grid p{font-size:13px;color:#666;line-height:1.5;}
#consult-form .agree-check{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;color:#555;}
#consult-form .form .field{margin-bottom:22px;}
#consult-form .form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;}
#consult-form .form input,
#consult-form .form textarea{width:100%;border:none;border-bottom:1px solid #ccc;padding:8px 0;font-size:15px;outline:none;}
#consult-form .form textarea{resize:none;}
#consult-form .btns{display:flex;gap:16px;margin-top:30px;}
#consult-form .btn{flex:1;height:48px;border-radius:4px;font-size:15px;font-weight:600;border:none;cursor:pointer;}
#consult-form .btn.gray{background:#999;color:#fff;}
#consult-form .btn.primary{background:#1e2f8b;color:#fff;}
@media(max-width:960px){
#consult-form .grid{grid-template-columns:1fr;gap:40px;}
#consult-form .agree-grid{grid-template-columns:1fr;}
}
#faq-list{padding:80px 0;}
#faq-list .wrap{margin:0 auto;padding:0 0px;}
#faq-list .faq-list{border-top:1px solid #eee;}
#faq-list .faq-item{border-bottom:1px solid #eee;}
#faq-list .faq-q{
width:100%;
background:none;
border:none;
padding:22px 0;
display:flex;
align-items:center;
gap:12px;
font-size:18px;
font-weight:600;
cursor:pointer;
text-align:left;
}
#faq-list .faq-q .icon.q{
width:26px;height:26px;
border-radius:50%;
background:#2e6cf6;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
flex-shrink:0;
}
#faq-list .faq-a{
display:none;
padding:0 0 22px 38px;
color:#555;
line-height:1.6;
font-size:15px;
}
#faq-list .faq-a .icon.a{
width:22px;height:22px;
border-radius:50%;
background: #000000;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
margin-right:8px;
margin-bottom:8px;
}
#faq-list .faq-item.active .faq-a{display:block;}
.notice-list{margin-top:40px;}
.notice-list .panel{justify-content:flex-end;margin-bottom:20px;}
.notice-list select{height:42px;border:1px solid #ddd;padding:0 10px;font-size:14px;}
.notice-list .search{display:flex;align-items:center;border:1px solid #ddd;}
.notice-list .search input{height:40px;border:0;padding:0 12px;font-size:14px;outline:none;}
.notice-list .search button{width:42px;height:40px;border:0;background:#fff;color:#666;}
.notice-list table{width:100%;border-top:2px solid #000;border-collapse:collapse;}
.notice-list th,
.notice-list td{padding:18px 10px;border-bottom:1px solid #e5e5e5;font-size:15px;text-align:center;color:#333;}
.notice-list td:nth-child(2){text-align:left;}
.notice-list tr.fixed{background:#f5f7fa;}
.notice-list tr.fixed td{font-weight:600;}
.notice-list tr.fixed td:first-child{color:#111;}
.notice-list a{color:#111;text-decoration:none;}
.notice-list a:hover{text-decoration:underline;}
.notice-list .empty{padding:60px 0;color:#999;font-size:15px;}
@media(max-width:768px){
.notice-list table,
.notice-list tbody,
.notice-list tr,
.notice-list td{display:block;width:100%;}
.notice-list tr{padding:14px 0; padding: 14px 0;
border-bottom: 1px solid #eee;}
.notice-list td{border:0;padding:6px 0;font-size:14px;}
.notice-list td:first-child{font-weight:700;}
.notice-list td:first-child:before {content: 'No.'; display: inline-block}
.notice-list td:nth-child(3),
.notice-list td:nth-child(4){display:inline-block;width:auto;margin-right:10px;color:#777;font-size:13px;}
}
.notice-view{margin-top:40px; min-height: 60vh}
.notice-view .title{padding-bottom:24px;border-bottom:1px solid #e5e5e5;}
.notice-view .title strong{font-size:22px;font-weight:700;color:#111;line-height:1.4;}
.notice-view .title .icon{display:inline-block;margin-right:6px;padding:3px 8px;font-size:13px;border:1px solid #111;border-radius:3px;vertical-align:middle;}
.notice-view .info{margin-top:12px;display:flex;gap:20px;font-size:14px;color:#777;}
.notice-view .info p{display:inline;margin-left:6px;color:#333;}
.notice-view .view{padding:40px 0;font-size:16px;line-height:1.7;color:#333;}
.notice-view .view img{max-width:100%;height:auto;}
.notice-view .view table{width:100%;border-collapse:collapse;}
.notice-view .view th,
.notice-view .view td{border:1px solid #ddd;padding:10px;font-size:14px;}
.notice-view .attached-file{margin-top:40px;padding-top:20px;border-top:1px solid #e5e5e5;}
.notice-view .attached-file label{display:block;margin-bottom:10px;font-size:15px;font-weight:600;color:#111;}
.notice-view .attached-file a{display:inline-block;margin-bottom:6px;font-size:14px;color:#333;text-decoration:none;}
.notice-view .attached-file a i{margin-right:6px;color:#666;}
.notice-view .attached-file a:hover{text-decoration:underline;}
@media(max-width:768px){
.notice-view .title strong{font-size:18px;}
.notice-view .info{flex-wrap:wrap;gap:10px;font-size:13px;}
.notice-view .view{padding:24px 0;font-size:15px;}
.notice-view .attached-file{margin-top:30px;}
}
.notice-btn-area{margin-top:50px;text-align:center;}
.notice-btn-area .btn-list{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1px solid #ccc;border-radius:30px;font-size:15px;color:#333;text-decoration:none;transition:all .2s ease;}
.notice-btn-area .btn-list i{font-size:14px;color:#666;}
.notice-btn-area .btn-list:hover{border-color:#111;color:#111;}
.notice-btn-area .btn-list:hover i{color:#111;}
@media(max-width:768px){
.notice-btn-area{margin-top:40px;}
.notice-btn-area .btn-list{padding:10px 22px;font-size:14px;}
}