body { word-break: keep-all; } .container {position:relative; padding:4.5rem 0 6.5rem; } .column{width:1380px; margin:0 auto; } .main .container {padding:0} @media screen and (max-width: 1380px) { .container { padding:2.5rem 0 3.5rem; } .column{width:100%; padding:0 1rem; } } .wrap {position:relative;} /* top띠배너 */ #topBanner {position:relative; width:100%; max-height:80px;color:#fff; overflow:hidden; z-index: 1006; display:flex;justify-content: center; } #topBanner .bn_con {width:100%; margin:0; padding:0; text-align:center;} #topBanner .bn_con span {font-size:16px; line-height:65px; color:#fff;} #topBanner .bn_con img {} #topBanner .bn_close {position:absolute; top:23px; right:25px; padding:0 0 0 27px; font-size:9pt; letter-spacing:-1px;} #topBanner .bn_close #chkday {position:absolute; top:1px; left:0; width:17px; height:17px; color:#fff;} #topBanner .bn_close label [for=chkday] {cursor:pointer; padding-right:0px;} #topBanner .bn_close label span { color:rgba(255,255,255,0.3);} #topBanner .bn_close .btnClose {position:relative; display:inline-block;vertical-align:middle; padding:1px 7px 2px 5px; border-radius:2px; color:#333; width:1.35rem; height:1.35rem; line-height:1.5rem; border-radius:50%; background:rgba(0,0,0,0.4) url('/images/pop_close_w.png') no-repeat center center; text-align:center; background-size:auto 50%; font-size:0; } #topBanner input[type=checkbox] + label {padding-right:.5rem; font-size:.85rem; } #topBanner input[type=checkbox] + label:before {border:1px solid transparent;} #topBanner input[type=checkbox] + label:after {border-color:#333;} #topBanner input[type=checkbox]:checked + label:before { background-color:#fff !important; box-shadow:none;} .top_bg { background-color:#f4ead7; } @media screen and (max-width: 1024px) { #topBanner { max-height:auto;} #topBanner .bn_con img {margin-top:0; height:auto; width:100%;} #topBanner .bn_close{ top:50%; right:5px; margin-top:-1rem; } #topBanner .bn_close .btnClose{ width:1rem; height:1rem; line-height:1rem; } #topBanner input[type=checkbox] + label {padding-right:.2rem; font-size:.7rem; } #topBanner input[type=checkbox]:checked + label {color:var(--brand-color-main)} #topBanner input[type=checkbox] + label:before {display:none;} #topBanner input[type=checkbox] + label:after {display:none;} #topBanner input[type=checkbox]:checked + label:before {display:none;} } #header { position: fixed; top: 0px; left: 0; width: 100%; max-width: 100%; z-index: 1005; font-size: 1.25rem; color: var(--color-white); transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); } @media screen and (max-width: 800px) { #header {font-size: 1.125rem; } } #header.down { transform: translate(0, -100%);} #header:hover { background-color: var(--color-white); color: var(--color-black); } #header:hover::before { opacity: 1; } #header:hover #logo .hov { display: block; } #header:hover #logo .on { display: none; } #header.on, #header.scroll { color: var(--color-black); background-color: var(--color-white); } #header:hover .dep1_tit , #header.scroll .dep1_tit{ color: var(--color-black); } #header.on #logo .hov, #header.scroll #logo .hov { display: block;} #header.on #logo .on, #header.scroll #logo .on { display: none;} #header.on .h_inner, #header.scroll .h_inner { background-color: var(--color-white); } #header.on::before { opacity: 1;} #header.on::after { height: calc(var(--dep2-hei) + 1px); top: 100%; transform: translateY(0); border-bottom: 1px solid var(--border-color);} #header.on .dep2 { visibility: visible;} #header:hover #allMenuBtn .line, #header.scroll #allMenuBtn .line, #header.on #allMenuBtn .line { fill: var(--color-black) !important;} #header:hover:before {border-color:rgba(0,0,0,0.1)} #header::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 9; pointer-events: none; border-bottom: 1px solid rgba(255,255,255,0.1); } #header::after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: calc(var(--height-height) + var(--dep2-hei)); background-color: var(--color-white); transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1); } #header #logo { position: absolute; top: 50%; left: var(--spacing); transform: translateY(-50%);} #header #logo a { display: block;} #header #logo img { height: 2.125rem;} @media screen and (max-width: 1380px) { #header #logo img { position: static; left: 0; top: 0; transform: none; height: 1.65rem; } } #header #logo .hov { display: none;} #header #logo .on { display: block;} #header .h_inner { display: flex; align-items: center; justify-content: center; max-width: var(--h-wrap); width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--spacing); padding-right: var(--spacing); position: relative; z-index: 8; } @media screen and (max-width: 1280px) { #header .h_inner { justify-content: space-between; height: var(--header-hei); } } #header .h_etc { display: flex; align-items: center; gap: 1.6em; position: absolute; top: 50%; right: var(--spacing); transform: translateY(-50%);} #header .h_etc svg { display: block;} .log_box {display:flex; align-items: stretch; font-size: 0.75em; font-weight: 500; border-radius: 2.3571428571em; border: 1px solid rgba(255,255,255,0.2); padding-left: 0.8571428571em; padding-right: 0.8571428571em; --lang-hei: 2.3571428571em; cursor: pointer; } .log_box .log_item { display: flex; } #header:hover .log_box {border-color:rgba(0,0,0,0.1)} #header:hover .log_item, #header.on .log_item { color: var(--color-black);} .log_box .log_item { align-items: center; position: relative; white-space: nowrap; height: var(--lang-hei); padding-left: 0.5714285714em; padding-right: 0.5714285714em;} .log_box .log_item::before { content: ""; display: block; position: absolute; left: 0; top: 50%; border-left: 1px solid var(--color-grey-light); height: 0.5714285714em; margin-top: -0.2857142857em;} .log_box .log_item::before { content: ""; display: block; position: absolute; left: 0; top: 50%; border-left: 1px solid var(--color-grey-light); height: 0.5714285714em; margin-top: -0.2857142857em;} .log_box .log_item:first-child:before {display:none;} @media screen and (max-width: 1380px) { .log_box.on::before { display: none; } .log_box.on .log_item { display: flex; } } @media screen and (max-width: 500px) { .log_box {display:none;} } #gnb { display: flex; justify-content: center; max-width: 75%;} @media screen and (max-width: 1280px) { #gnb {display: none;} } #gnb .nav { display: flex; align-items: stretch; margin-left: auto; margin-right: auto; width: 49.25rem; max-width: 100%; height: var(--header-hei); transition: width 0.85s cubic-bezier(0.19, 1, 0.22, 1); } #gnb .dep1_tit { white-space: nowrap; font-weight:600; font-size:1.165rem; color:var(--color-white); padding-left: 2em; padding-right: 2em;} @media screen and (max-width: 1440px) { #gnb .dep1_tit { padding-left: 1.6em; padding-right: 1.6em; } } #gnb._load:hover .nav { width: 53em;} #gnb._load:hover .dep1_tit { position: relative; z-index: 5;/* background-color: var(--color-white); */color:var(--color-grey2); padding-left: 1.25em; padding-right: 1.25em;} #gnb._load:hover .dep1 { flex: 1 1;} #gnb._load:hover .dep1:last-child .dep2 { /*border-right: 1px solid var(--color-grey-light);*/} #gnb._load:hover .dep2 { transform: translateY(0); visibility: visible; z-index: 3; /*border-left: 1px solid var(--color-grey-light); */ transition: transform 0.65s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 0.1s, border-color 0.35s ease-out 0.1s, background 0.4s;} #gnb._load .dep1:hover .dep1_tit { color: var(--brand-color-main);} #gnb._load .dep1:hover .dep1_tit::after { opacity: 1;} #gnb .dep1 { max-width: 25%; height: 100%; position: relative; flex: 1 1 auto;} #gnb .dep1:last-child .dep2 { border-right: 1px solid rgba(0, 0, 0, 0.05);} #gnb .dep1_tit { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; position: relative; } #gnb .dep1_tit::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 0 solid var(--brand-color-main); opacity: 0; transition: opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1);} #gnb .dep2 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: left !important; gap: 1.5em; position: absolute; top: 100%; left: 0; min-width: 100%; height: var(--dep2-hei); font-size: 0.8em; padding-top: 2em; padding-bottom: 2em; padding-left: 1.35em; padding-right: 0.2em; visibility: hidden; transform: translateY(-35%); transition: background 0s, transform 0s cubic-bezier(0.075, 0.82, 0.165, 1); border-left: 1px solid rgba(0, 0, 0, 0.05); } #gnb .dep2:hover { background-color:#f9f9f9; } #gnb .dep2 > li { width:100%; letter-spacing: -.08em; } #gnb .dep2 > li em {font-size:.9rem; letter-spacing: -.1em; } #gnb .dep2 > li:hover .dep2_tit { color: var(--brand-color-main); font-weight:bold; } #gnb .dep2 > li:hover .dep2_tit::after {} #gnb .dep2 > li:hover .dep2_tit.on::after { } #gnb .dep2_tit { letter-spacing: -0.05em; white-space: nowrap; font-weight: 500; text-align: left !important; } #gnb .dep2_tit.child { position:relative; } #gnb .dep2_tit.child::before { content:""; position:absolute; top:2px; right:-14px; width:1px; height:13px; background-color:#333; } #gnb .dep2_tit.child::after { content:""; position:absolute; top:8px; right:-20px; width:13px; height:1px; background-color:#333; } #gnb .dep2_tit.child.on::after { content:""; position:absolute; top:8px; right:-20px; width:13px; height:1px; background-color:#333;} #gnb .dep2_tit.child.on::before {display:none;} @media screen and (min-width: 1025px), print { #gnb .dep2_tit.child.on:hover::after {} } #gnb .dep2_tit.child.on + .dep3 { display: block;} #gnb .dep3 { display: none; font-size: 1em; color: var(--color-grey5); font-weight: 400; letter-spacing: -0.4px; width:100%; padding:.5rem; overflow:hidden; border:0px solid #f00} #gnb .dep3 > li {position:relative; width:100%; padding-left:.5rem; font-size:.9rem; font-weight:500;display: block;margin-top:.2rem; margin-bottom:.35rem; } #gnb .dep3 > li:before {content:''; position:absolute; left:0; top:6px; width:3px; height:3px; background-color:var(--color-grey5)} #gnb .dep3 > li a {display:block; font-weight:500 !important; color:var(--color-grey5)} #gnb .dep3 > li a:hover {color:var(--brand-color-main); text-decoration:underline;} #header.scroll .all_menu_btn{background-image:url('/images/inc/ico_hamburger.png'); } #header:hover .all_menu_btn {background-image:url('/images/inc/ico_hamburger.png'); } .all_menu_btn {border:0;width:2rem; height:2rem; background-image:url('/images/inc/ico_hamburger_w.png'); background-repeat: no-repeat; background-position:center center; background-size:auto 100%;} .all_menu_btn.on {background-image:url('/images/inc/ico_gnb_close.png');} .all_menu_btn .line { transition: d 0.35s ease-out;} .all_menu_btn.on .close.line1 { d: path("M-25.8,0h21c0.8,0,1.5,0.7,1.5,1.5l0,0C-3.3,2.3-3.9,3-4.8,3h-21c-0.8,0-1.5-0.7-1.5-1.5l0,0C-27.3,0.7-26.6,0-25.8,0z");} .all_menu_btn.on .close.line2 { d: path("M-18.8,9h14c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-14c-0.8,0-1.5-0.7-1.5-1.5l0,0C-20.3,9.7-19.6,9-18.8,9z");} .all_menu_btn.on .open.line1 { d: path("M-25.8,18h21c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-21c-0.8,0-1.5-0.7-1.5-1.5l0,0C-27.3,18.7-26.6,18-25.8,18z");} .all_menu_btn.on .open.line2 { transition-delay: 0.25s; d: path("M3.9,16.5L18,2.4c0.6-0.6,1.5-0.6,2.1,0l0,0c0.6,0.6,0.6,1.5,0,2.1L6,18.6c-0.6,0.6-1.5,0.6-2.1,0l0,0C3.3,18,3.3,17.1,3.9,16.5z");} .all_menu_btn.on .open.line3 { transition-delay: 0.25s; d: path("M6,2.4l14.1,14.1c0.6,0.6,0.6,1.5,0,2.1l0,0c-0.6,0.6-1.5,0.6-2.1,0L3.9,4.5C3.3,3.9,3.3,3,3.9,2.4l0,0C4.4,1.8,5.4,1.8,6,2.4z");} #allMenuWrap { position: fixed; top: 0; left: 0; background-color: var(--color-white); width: 100%; height: 100%; font-size: 1rem; padding: 3.5em 1em; transform: translateX(100%); /* transform: translateY(-100%); */ z-index: 5005; --allmenu-wrap: calc(91rem + (var(--spacing) * 2)); pointer-events: none; opacity: 0; transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); max-height: calc(var(--vh, 1vh) * 100); overflow-y: auto; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } #allMenuWrap .logo_wrap img { height: 2.85rem; } #allMenuWrap .logo_wrap span {display:inline-block; height:2.8rem; width:20rem; background:url('/images/inc/logo_big.png?ver=0509') no-repeat center; background-size:auto 90%;} #allMenuWrap .log_box { border: 1px solid #eee; } #allMenuWrap .log_box .log_item { display: flex; color:var(--color-grey5)} @media screen and (max-width: 1380px) { #allMenuWrap { font-size: 1.35rem; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } #allMenuWrap .logo_wrap { margin-right: auto; } #allMenuWrap .logo_wrap img { height: 1.95em; } } @media screen and (max-width: 800px) { #allMenuWrap { font-size: 1.125rem; } #allMenuWrap .logo_wrap span {background:url('/images/ico_mobile_home.png') no-repeat left ; background-size:80%;width:2.25rem; height:2.25rem;} } #allMenuWrap::-webkit-scrollbar { display: none; height: 0; background-color: transparent;} #allMenuWrap.on { opacity: 1; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); pointer-events: auto; transform: translateY(0);} #allMenuWrap .allmenu_head, #allMenuWrap .allmenu_wrap { max-width: var(--allmenu-wrap); width: 100%; margin-left: auto; margin-right: auto;} #allMenuWrap .allmenu_head { max-width: 109.5rem; height: 4.125em; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5em; position: relative;} @media screen and (max-width: 1380px) { #allMenuWrap .allmenu_head {display: flex; align-items: center; justify-content: space-between; height: 3.9444444444em; margin-bottom: 0; gap: 0.9444444444em; padding-left: var(--spacing); padding-right: var(--spacing); } } #allMenuWrap .allmenu_wrap { border-top: 1px solid var(--color-grey-light); padding-left: 0.8888888889em; padding-right: 0.8888888889em;} #allMenuWrap .log_box { display: none;} @media screen and (max-width: 1380px) { #allMenuWrap .log_box { display: flex; margin-left: auto; } #allMenuWrap .log_box::before { display: none; } #allMenuWrap .log_item { display: flex; } } #allMenuWrap .nav { display: flex; flex-direction: column; font-size: 1.125em;} @media screen and (max-width: 1380px) { #allMenuWrap .nav { font-size: 1em; } } #allMenuWrap .nav .dep1 { display: flex; align-items: stretch; justify-content: flex-start; border-bottom: 1px solid var(--color-grey-light); padding-top: 2em; padding-bottom: 2em;} #allMenuWrap .nav .dep1_tit { font-size: 1.4em; font-weight: bold; max-width: 7.5625em; width: 35%; padding-right: 0.5em;} #allMenuWrap .nav .dep2 { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; flex: 1 1 auto; width: 100%;} #allMenuWrap .nav .dep2 > li { width: 35%; max-width: 15em; padding-left: 0.6em;} #allMenuWrap .nav .dep2_tit { display: block; color: var(--color-grey3); font-size:1.185rem;line-height:1.3em; margin:.5rem 0; font-weight: 600; position: relative;} #allMenuWrap .nav .dep2_tit::before { content: ""; display: block; width: 0.2em; height: 0.2em; background-color: var(--brand-color-main); position: absolute; top: .65rem; left: -0.6em; transform: translateY(-50%);} #allMenuWrap .nav .dep3 { display: flex; flex-direction: column; gap: 1em; font-size: 0.8em; margin-top: 1.5em; color: #999;} #allMenuWrap .nav .dep3_tit:hover { font-weight: bold;} @media screen and (max-width: 1380px) { #allMenuWrap .nav .dep1 { padding: 0; display: block; } #allMenuWrap .nav .dep1_tit { display: flex;align-items: center; justify-content: space-between; width: 100%; max-width: 100%; font-size: 1em;padding: 1.3888888889em 0.8888888889em; } #allMenuWrap .nav .dep1_tit::after { content: ""; width: 1.3em; height: 1.3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='translate(6 11)' style='fill:%23121212' d='M0 0h12v2H0z'/%3E%3Cpath transform='rotate(90 3.5 9.5)' style='fill:%23121212' d='M0 0h12v2H0z'/%3E%3C/svg%3E%0A"); } #allMenuWrap .nav .dep1_tit.on::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='translate(6 11)' style='fill:%231b4ded' d='M0 0h12v2H0z'/%3E%3C/svg%3E%0A"); } #allMenuWrap .nav .dep1_tit.on + .dep2 { display: flex; } #allMenuWrap .nav .dep2 { display: none; gap: 1.5em; border-top: 0.125rem solid var(--brand-color-main); background-color: var(--color-white2); font-size: 0.8888888889em; padding: 1.5em 1em; } #allMenuWrap .nav .dep2 > li { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding-left: 0; } #allMenuWrap .nav .dep2_tit { display: flex; align-items: center; justify-content: space-between; font-size: 1em; margin-bottom: 0; font-weight: 400;} #allMenuWrap .nav .dep2_tit::before { display: none; } #allMenuWrap .nav .dep2_tit.child::after { content: ""; display: block; width: 1.5em; height: 1.5em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='translate(6 11)' style='fill:%23121212' d='M0 0h12v2H0z'/%3E%3Cpath transform='rotate(90 3.5 9.5)' style='fill:%23121212' d='M0 0h12v2H0z'/%3E%3C/svg%3E%0A"); } #allMenuWrap .nav .dep2_tit.child.on::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='translate(6 11)' style='fill:%2300844a' d='M0 0h12v2H0z'/%3E%3C/svg%3E%0A"); } #allMenuWrap .nav .dep2_tit.child.on + .dep3 { display: flex; } #allMenuWrap .nav .dep3 { display: none; gap: 1.5em; font-size: 1em; } } #allMenuWrap .allmenu_etc { display: flex; align-items: center; justify-content: space-between; color: var(--color-b2); margin-top: 3.5em; gap: 2.5em;} #allMenuWrap .allmenu_etc .etc_mn { display: flex; align-items: center; gap: 2.5em;} #allMenuWrap .allmenu_etc .privacy { font-weight: bold; color: var(--color-black);} @media screen and (max-width: 1380px) { #allMenuWrap .allmenu_etc { font-size: 0.8888888889em; gap: 2.5em; flex-wrap: wrap; margin-top: 2.5em; } #allMenuWrap .allmenu_etc .etc_mn { flex-wrap: wrap; white-space: nowrap; gap: 1em 0; } #allMenuWrap .allmenu_etc .etc_mn > li { min-width: 45%; padding-right: 1em; } #allMenuWrap .allmenu_etc .copy { margin-bottom: 2.8571428571em; } } #allMenuWrap .allmenu_etc .copy { display: block; font-size: 0.875em; font-family: "Inter", sans-serif; font-weight: 300;} #allMenuWrap .all_menu_btn { position: absolute; top:-1.5rem; right: 0; width: 2rem; height: 2rem;} @media screen and (max-width: 1380px) { #allMenuWrap .all_menu_btn { position: static; margin-right:.5rem; top:0rem;} } #allMenuWrap .all_menu_btn .line { fill: #121212;} @media screen and (max-width: 1024px) { #allMenuWrap .nav .dep2 { gap: .95em; } } .custom_under { display: inline-block; position: relative; overflow: hidden;} .custom_under.cb2::before { background-image: linear-gradient(180deg, transparent calc(100% - 2px), var(--color-b2) 2px);} .custom_under.cb::before { background-image: linear-gradient(180deg, transparent calc(100% - 2px), var(--color-black) 2px);} .custom_under::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; background-image: linear-gradient(180deg, transparent calc(100% - 2px), var(--brand-color-main) 2px); transition: transform 0.325s cubic-bezier(0.165, 0.84, 0.44, 1); transform: translateX(-100%); } @media screen and (min-width: 1025px), print { .custom_under:hover::before { transform: translateX(0); } } /* ========== footer============= */ .main #footer{margin:0} #footer { position: relative; z-index: 10; background-color: #1a1a1a; font-size: 1rem; padding:3.5rem 0 5rem; z-index:0; clear:both;} #footer .nav { display: flex; width:100%; justify-content: flex-start;} #footer .nav .dep1_tit {color:var(--color-white); font-weight:600; } #footer .nav li:first-child {width:36%;} #footer .nav li:first-child ul.dep2 {display:block;} #footer .nav li:first-child ul.dep2 li {display:inline-block; width:40% !important;} #footer .nav li {width:20%; } #footer .nav li a {color:#fff;} #footer .nav li ul.dep2 {margin-top:1rem; } #footer .nav li ul.dep2 li {display:block; width:100%; margin-bottom:.5rem;} #footer .nav li ul.dep2 li:first-child {width:100%;} #footer .nav li ul.dep2 li a.dep2_tit {font-size:.95rem; line-height:1.7rem; font-weight:400; color:var(--color-grey8)} #footer .nav li ul.dep2 li a.dep2_tit:hover {color:var(--brand-color-sub)} #footer .nav li ul.dep2 ul.dep3 {display:none;} #footer address {position:relative; margin-top:1.5rem; padding-top:1.85rem; border-top:1px solid rgba(255,255,255,0.05)} #footer address .f_logo {display:inline-flex; width:15rem; height:1.9rem; background:url('/images/inc/f_logo.png?ver=0509') no-repeat ; background-size:auto 1.65rem;} #footer address p {margin-top:1rem; font-size:.85rem; line-height:1.45rem; font-weight:500; color:var(--color-grey8)} #footer address p span {display:inline-block; vertical-align:top; margin-right:.8rem;} #footer address p span:last-child {margin-right:0;} #footer .link {position:absolute; right:0; top:4.8rem; display:flex; justify-content: flex-end; gap:1.5rem; z-index:30} #footer .link a {color:var(--color-grey8); font-size:.9rem;} #footer .link a.use {color:var(--color-white); font-weight:500;} #footer .copyright { color:var(--color-grey6)} @media screen and (max-width: 1380px) { #footer {padding:2.5rem 0 4rem; } #footer .nav {display:none;} #footer address {margin-top:0; padding:0; border:0} #footer address .f_logo {background-size:96%; } #footer .link {top:1rem} } @media screen and (max-width: 1024px) { #footer .link {margin-top:1rem;position:relative; top:auto; justify-content: flex-start;} } /* 1:1상담 고정 */ .floating {position:fixed; top:50%;margin-top:-5rem; right:1rem; transform: translate(-50%,auto); z-index: 99; display:flex; flex-direction: column; justify-content: center; align-items: center; gap:.5rem;} .floating .float_btn {position:relative;} .floating .float_btn a {display:block;width: 8.6rem;height: 8.6rem;overflow: hidden; position: relative; z-index: 5; } .floating .float_btn img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;} .floating .float_btn img.rotate{animation: rotate 40s linear 1s infinite;} .quick_btn { display: flex; flex-direction: column; align-items: flex-end; position: relative;} .quick_btn .icon_btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; margin-bottom: 0.5rem; background-color: #ffffff; border: 1px dashed rgba(25,87,244,0.3); border-radius: 99px; overflow: hidden; white-space: nowrap; transition-property: width; transition-duration: 0.4s; text-align: left; box-shadow:5px 5px 15px rgba(20,50,160,0.15); } .quick_btn .icon_btn > * { display: inline-block; vertical-align: middle;} .quick_btn .icon_btn p { font-size: .9rem;line-height: 1rem; text-align:center; letter-spacing: -.04em; font-weight: 500; color: var(--brand-color-main); font-weight:700; opacity: 1; } .quick_btn .icon_btn p i { font-size:.815rem; font-weight:600; } .quick_btn .icon_btn img {height:38px; margin-top:-.5rem;} .quick_btn .icon_btn figure { height:40px; } .quick_btn .icon_btn figure:before {content:''; display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-size:75%; background-position:center center; } .quick_btn .icon_btn figure.ew:before {content:''; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 250 250' style='enable-background:new 0 0 250 250;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M125,248.8c-0.7,0-1.4-0.1-2.1-0.3c-1-0.3-102.9-27.3-102.9-134.2v-78c0-2.9,1.4-5.5,3.8-7.1 c2.4-1.6,5.4-1.9,8-0.9c9,3.6,18.3,5.4,27.5,5.4c23,0,44.4-10.6,58.9-29.1c1.6-2.1,4.1-3.3,6.8-3.3s5.2,1.2,6.8,3.3 c14.4,18.5,35.9,29.1,58.9,29.1c9.2,0,18.5-1.8,27.5-5.4c2.7-1.1,5.7-0.7,8,0.9c2.4,1.6,3.8,4.3,3.8,7.1v78 c0,107-101.9,133.9-102.9,134.2C126.4,248.7,125.7,248.8,125,248.8z M37.3,48.2v66.1c0,86.3,73.8,112.6,87.7,116.8 c13.9-4.2,87.7-30.4,87.7-116.8V48.2C205.4,50,198,51,190.7,51c-24.9,0-48.3-10.1-65.7-28c-17.3,17.9-40.8,28-65.7,28 C51.9,51,44.6,50,37.3,48.2z'/%3E%3Cpath class='st0' d='M112.2,164.4c-0.1,0-0.1,0-0.2,0c-2.3-0.1-4.6-1.1-6.1-2.8l-33.6-36.5c-3.2-3.5-3-9,0.5-12.2 c3.5-3.2,9-3,12.2,0.5l27.5,29.9l56.1-55.3c3.4-3.4,8.9-3.3,12.2,0.1c3.3,3.4,3.3,8.9-0.1,12.2l-62.5,61.6 C116.7,163.5,114.5,164.4,112.2,164.4z'/%3E%3C/g%3E%3C/svg%3E%0A"); } /* .quick_btn .icon_btn > * { display: inline-block; vertical-align: middle;} .quick_btn .icon_btn p { margin-left: .25rem; font-size: 1.05rem; letter-spacing: -.04em; line-height: 1; font-weight: 500; color: var(--brand-color-main); font-weight:700; opacity: 1; } .quick_btn .icon_btn img {height:40px; } .quick_btn .icon_btn figure { height:40px; } .quick_btn .icon_btn figure:before {content:''; display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-size:75%; background-position:center center; } .quick_btn .icon_btn figure.ew:before {content:''; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 250 250' style='enable-background:new 0 0 250 250;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M125,248.8c-0.7,0-1.4-0.1-2.1-0.3c-1-0.3-102.9-27.3-102.9-134.2v-78c0-2.9,1.4-5.5,3.8-7.1 c2.4-1.6,5.4-1.9,8-0.9c9,3.6,18.3,5.4,27.5,5.4c23,0,44.4-10.6,58.9-29.1c1.6-2.1,4.1-3.3,6.8-3.3s5.2,1.2,6.8,3.3 c14.4,18.5,35.9,29.1,58.9,29.1c9.2,0,18.5-1.8,27.5-5.4c2.7-1.1,5.7-0.7,8,0.9c2.4,1.6,3.8,4.3,3.8,7.1v78 c0,107-101.9,133.9-102.9,134.2C126.4,248.7,125.7,248.8,125,248.8z M37.3,48.2v66.1c0,86.3,73.8,112.6,87.7,116.8 c13.9-4.2,87.7-30.4,87.7-116.8V48.2C205.4,50,198,51,190.7,51c-24.9,0-48.3-10.1-65.7-28c-17.3,17.9-40.8,28-65.7,28 C51.9,51,44.6,50,37.3,48.2z'/%3E%3Cpath class='st0' d='M112.2,164.4c-0.1,0-0.1,0-0.2,0c-2.3-0.1-4.6-1.1-6.1-2.8l-33.6-36.5c-3.2-3.5-3-9,0.5-12.2 c3.5-3.2,9-3,12.2,0.5l27.5,29.9l56.1-55.3c3.4-3.4,8.9-3.3,12.2,0.1c3.3,3.4,3.3,8.9-0.1,12.2l-62.5,61.6 C116.7,163.5,114.5,164.4,112.2,164.4z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .quick_btn .icon_btn:hover { width: 135px;padding:0 1rem; } .quick_btn .icon_btn:hover p { opacity: 1; } .quick_btn .icon_btn.join:hover {width:155px;} */ .floating .skip_top { text-align: center; display:flex; justify-content: center;align-items: center; } .floating .skip_top .skip_top_btn { display:flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 50%; background-color:var(--color-white); border:1px solid rgba(0,0,0,.08); cursor: pointer; text-align: center; box-shadow: 5px 5px 20px rgba(0,0,0,0.1)} .floating .skip_top .skip_top_btn:before { content:"\e909";font-family:'xeicon'; font-size:1.25rem; color:var(--color-grey3);} .floating .skip_top .skip_top_btn span { display: block; vertical-align: top; margin-top: 0px; font-size: 14px; line-height: 14px; color:var(--color-grey3); font-weight: 700; letter-spacing: 0;} @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg);} to { transform: translate(-50%, -50%) rotate(360deg);} } @media screen and (max-width: 1400px) { .floating { right:1rem; top:auto;bottom:1rem; } .floating .float_btn a { width: 6.8rem;height: 6.8rem; } .quick_btn .icon_btn { width: 3rem; height: 3rem; margin-bottom:.2rem; } .quick_btn .icon_btn img {display:inline-block;width:2rem; height:2rem;margin:.35rem auto;} .quick_btn .icon_btn p {display:none;} .quick_btn .icon_btn:hover { width: 3rem !important ;padding:0; } .quick_btn .icon_btn:hover p { opacity: 0; } .floating .skip_top .skip_top_btn { width: 2.8rem; height: 2.8rem;} .floating .skip_top .skip_top_btn:before { font-size: 1.2rem; } } @media screen and (max-width: 670px) { .floating_wrap {display:none; transition: all 0.2s ease-in;} .floating { top:auto; right:.25rem; bottom:1rem; transform: translate(auto,auto); gap:.2rem} .floating .float_btn a { width: 4.5rem;height: 4.5rem;} .floating .float_btn img {width:100%;} }