@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}

#wrapper {position:relative; overflow:hidden; padding-top:var(--header-height);}

/* header */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; transition:.3s; background:#fff;}
#header .contain {position:relative; display:flex; align-items:center; height:var(--header-height); z-index:10;}

#gnb {margin-left:120px; position:relative; display:inline-block;}
#gnb .toggle-button {height:var(--header-height); gap:10px; display:flex; align-items:center; font-size:var(--fz18); font-weight:600; line-height:1.4em;  color:#333; background:#fff; border:0;}

#gnb .toggle-layer {box-shadow:3px 3px 10px rgba(0,0,0,.1); border-radius:12px; display:none; position:absolute; top:82%; left:50%; transform:translateX(-50%); width:180px; background:#fff;}
#gnb .toggle-layer ul {padding:25px 5px;}
#gnb .toggle-layer ul li {margin-bottom:13px; text-align:center; line-height:1.4em;}
#gnb .toggle-layer ul li:last-child {margin-bottom:0;}
#gnb .toggle-layer ul li a {display:block; font-weight:400; color:#505050;}
#gnb .toggle-layer ul li a:hover {text-decoration:underline;}

#header.header-fixed {box-shadow:0px 3px 5px rgba(0,0,0,0.1);}

/* main */
.main-wrap .contain {display:flex; padding-top:10px;}

.main-visual {position: relative; padding: 40px 70px; border-radius:24px; display: flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:0; width: 1%; background: #f7f9e8;}
.main-visual .cnt {width: 500px;}
.main-visual .cnt p {margin-bottom: 15px; font-size: var(--fz24); font-weight: 800; letter-spacing:-.03em; line-height: 1.33em; color:var(--color-primary);}
.main-visual .cnt h2 {font-size: var(--fz54); font-weight: 800; letter-spacing:-.03em; line-height: 1.28em;}
.main-visual .cnt h2 span {display: inline-block; position: relative;}
.main-visual .cnt h2 span:after {animation:zoomInOut .6s linear infinite alternate; position: absolute; left: 50%; margin-left: -85px; top: 50%; margin-top: -36px; content:''; width: 171px; height:74px; background: url('/images/main/mv-circle.png') no-repeat 50% 50% / 100% 100%;}

.article {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}

.article li {position: absolute; list-style: none; width: 17px; height: 17px; background: #dbe4ec; animation: animate 20s linear infinite; bottom: -20px; border-radius: 10rem; display: flex; justify-content: center; align-items: center;}
.article li:nth-child(2n) {width: 11px; height: 11px;}
.article li:first-child {left: 10%; animation-delay: -4s; background: #4dc89e; animation-duration: 12s;}
.article li:nth-child(2) {left: 25%; animation-delay: -7s; background: #f55887; animation-duration: 11s;}
.article li:nth-child(3) {left: 70%; background: #9afdee; animation-delay: -6s; animation-duration: 12s;}
.article li:nth-child(4) {left: 16%; animation-delay: -2s; animation-duration: 13s; background: #85c54d;}
.article li:nth-child(5) {left: 78%; animation-delay: -5s; background: #ffbf86; animation-duration: 12s;}
.article li:nth-child(6) {left: 76%; animation-delay: 1s; background: #72ddff; animation-duration: 13s;}
.article li:nth-child(7) {left: 68%; background: #8b78ff; animation-delay: -5s;}
.article li:nth-child(8) {left: 90%; animation-delay: -7s; background: #fface8; animation-duration: 15s;}
.article li:nth-child(9) {left: 20%; animation-delay: 3s; animation-duration: 18s;}
.article li:nth-child(10) {left: 85%; animation-delay: 4s; animation-duration: 11s;}
.article li:nth-child(11) {left: 11%; background: #dcd7d7; animation-delay: -11s; animation-duration: 15s;}
.article li:nth-child(12) {left: 13%; animation-delay: -5s; background: #a4b6f9; animation-duration: 16s;}
.article li:nth-child(13) {left: 26%; animation-delay: -6s; animation-duration: 13s; background: #fbee98;}
.article li:nth-child(14) {left: 78%; animation-delay: -2s; animation-duration: 14s; background: #fcee75;}

@keyframes animate {
  0% {transform: translateY(0) rotate(0deg); opacity: .6;}
  to {transform: translateY(-1000px) rotate(2turn); opacity: 0;}
}

@media only screen and (max-width: 1024px) {
  @keyframes animate {
    0% {transform: translateY(0) rotate(0deg) scale(.6); opacity: .5;}
    to {transform: translateY(-1000px) rotate(2turn) scale(.6); opacity: 0;}
  }
}

@keyframes zoomInOut {
	0%{transform:scale(1);}
	100%{transform:scale(1.1);}
}

.main-vertical {position:relative; margin-left:20px; overflow:hidden; height:450px; padding:0 44px; width:330px; background:#000; background:#f5f5f5; border-radius:24px;}
.main-vertical:after {content:''; position:absolute; left:0; bottom:0; height:60px; width:100%; background:linear-gradient(to top, rgba(255,255,255,.8) 10%, transparent)}
.main-vertical ul li {margin-bottom:18px; background:#fff; border-radius:36px; padding:24px 30px;}
.main-vertical ul li:last-child {margin-bottom:0;}
.main-vertical ul li p {position:relative; padding-left:33px; font-size:var(--fz20); font-weight:600; line-height:1.33em;}
.main-vertical ul li p:before {content:''; position:absolute; left:0; top:.1em; width:22px; height:18px; background:url('/images/main/check.png') no-repeat 0 0 / contain;}

.m-tit {margin-bottom:50px; font-size:var(--fz48); font-weight:800; letter-spacing:-.03em; line-height:1.4em; color:#333; text-align:center;}

.main-branch {position: relative; padding: 245px 0 117px;}
.main-branch:before {content:''; position: absolute; left: 0; bottom:0; width: 100%; height: 400px; z-index: -1; background: url('/images/main/branch-bg.jpg') no-repeat 50% 50% / cover;}
.main-branch .item {padding: 0 20px; text-align:center;}
.main-branch .item .tit {opacity: 0; transition:.3s; margin-top: 24px; color: #fff; font-size: var(--fz20); font-weight: 700; letter-spacing:-.03em; line-height: 1.4em;}
.main-branch .slick-current .tit {opacity: 1;}
.main-branch .slick-arrow {border-radius:100%; box-shadow:1px 1px 12px rgba(0,0,0,.2); border:0; font-size: 0; background-color:transparent; z-index: 10; position: absolute; top:45%; margin-top: -28px; z-index: 10; width: 55px; height: 56px; background-size:contain; background-repeat: no-repeat; background-position:50% 50%;}
.main-branch .slick-prev {left: 1.5%; background-image: url('/images/main/branch-prev.png');}
.main-branch .slick-next {right:1.5%; background-image: url('/images/main/branch-next.png');}

/* .pin-section-wrap {position:relative;} */
/* .pin-section {position:relative; height:100vh; 충분한 스크롤 확보} */

/* .main-office {z-index:2; 처음에 위쪽에 배치 position:absolute; top:0; left:0; right:0; height:100vh; text-align:center; padding:calc(var(--header-height) + 140px) 0 140px;}
.main-office .contain {height:100%;} */

.main-office  {padding:140px 0;}
.main-office .box {border-radius:24px; height:100%; width:100%; padding:105px 140px; background:url('/images/main/office-bg.jpg') no-repeat 50% 50% / cover;}
.main-office .box .inner {height:100%; padding:160px 30px; text-align:center; background:#fff; border-radius:24px 100px 24px 100px;}
.main-office .box .inner p {font-size:var(--fz24); font-weight:400; letter-spacing:-.03em; line-height:1.58em; color:#505050;}
.main-office .m-tit {margin-bottom:20px;}

/* .main-suggest {z-index:1; 뒤쪽에 배치 opacity:0; 처음에는 안 보이도록 설정 opacity:0; position:absolute; top:0; left:0; right:0; height:100vh; display:flex; align-items:center;  padding-top:var(--header-height); background:url('/images/main/suggest-bg.jpg') no-repeat 50% 50% / cover;}
.main-suggest .contain {width:100%;} */
.main-suggest {background:url('/images/main/suggest-bg.jpg') no-repeat 50% 50% / cover; padding: 140px 0;}
.main-suggest ul {max-width:700px; margin:0 auto;}
.main-suggest ul li {height: 87px; display: flex; align-items:center; padding:15px 50px; font-size:var(--fz20); background:#fff; border-radius:16px;}
.main-suggest ul li + li {margin-top:20px;}
.main-suggest ul li p {display: flex; transition:.2s; font-weight:700; line-height:1.33em; color:#333;}
.main-suggest ul li span {display: inline-block; font-weight:800; color:#725fe5; width:67px;}
.main-suggest ul li:hover p {font-size: 1.1em;}

.main-boon {padding:140px 0;}
.main-boon .wrap .row {display:flex; flex-wrap:wrap; margin:-13px;}
.main-boon .wrap .col {width:33.333%; padding:13px;}
.main-boon .wrap .box {overflow:hidden; position:relative; padding:50px; background:#f5f5f5; height:288px; border-radius:24px;}
.main-boon .wrap .box img {display:block; transition:.3s; position:absolute; right:50px; bottom:0; width:155px; height:149px;}
.main-boon .wrap .box p {font-size:var(--fz28); font-weight:700; letter-spacing:-.03em; line-height:1.43em; color:#333;}
.main-boon .wrap .box p strong {font-weight:800;}
.main-boon .wrap .box:hover:after {transform:scale(1.09);}

.main-industry {position:relative; z-index:2; padding-top:calc(var(--header-height) + 120px); overflow:hidden; background:#fbf1f8 ;}
.main-industry .tit-area {position:absolute; top:0; left:0; width:100%; height:100vh; padding-top:calc(var(--header-height) + 120px); background:url('/images/main/industry-acc.png') no-repeat 0 100%;}
.main-industry .tit-area .title {width:42%;}
.main-industry .tit-area .title .m-tit {text-align:left;}
.main-industry .tit-area .title p {font-size:var(--fz20); font-weight:400; line-height:1.4em; color:#505050;}
.main-industry .list-area {position:relative; margin-left:63%; padding:130px 0 120px;}
.main-industry .list-area .items {display:flex; flex-wrap:wrap; align-items:flex-start; gap:74px;}
.main-industry .list-area .item {margin-bottom:20px; display:flex; flex-direction:column; justify-content:center; text-align:center; width:calc(50% - 37px); min-height:240px; background:#fff; border-radius:24px;}
.main-industry .list-area .item:first-child {margin-left:calc(50% + 37px);}
.main-industry .list-area .item:nth-child(even) {margin-top:-207px;}
.main-industry .list-area .item .tit {margin-top:20px; font-size:var(--fz20); font-weight:700; line-height:1.4em ;}

.main-reason {padding:130px 0 150px;}
.main-reason .m-tit span {position:relative; display:inline-block;}
.main-reason .m-tit span:before {content:''; position:absolute; left:.5em; top:-50px; width:45px; height:46px; background:url('/images/main/tit-check.png') no-repeat 50% 100% / contain;}
.main-reason .wrap {position:relative; display:flex; align-items:center; max-width:1120px; margin:0 auto;}
.main-reason .wrap .vs {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.main-reason .wrap .col {width:50%;}
.main-reason .wrap .box {border-radius:8px; overflow:hidden; padding:60px 30px; box-shadow:0 14px 28px rgba(0,0,0,.16); position:relative; text-align:center;}
.main-reason .wrap .box:after {content:''; border-radius:8px; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid #ddd;} 
.main-reason .wrap .box h3 {margin-bottom:40px; font-size:var(--fz30); font-weight:800; letter-spacing:-.03em; line-height:1.33em; color:#999;}
.main-reason .wrap .box ul li {margin-bottom:63px; font-size:var(--fz20); font-weight:400; letter-spacing:-.03em; line-height:1.6em; color:#999;}
.main-reason .wrap .box ul li:last-child {margin-bottom:0;}
.main-reason .wrap .box ul li strong {display:block; color:#505050;}
.main-reason .wrap .box.small-box {border-radius:8px 0 0 8px;}
.main-reason .wrap .box.small-box:after {border-radius:8px 0 0 8px;}
.main-reason .wrap .box.big-box:after {border-width:2px; border-color:var(--color-secondary);}
.main-reason .wrap .box.big-box h3 {font-size:var(--fz40); color:var(--color-secondary);}
.main-reason .wrap .box.big-box ul li {color:#505050; margin-bottom:35px;}
.main-reason .wrap .box.big-box ul li:last-child {margin-bottom:0;}

.main-benefit {padding:120px 0; background:#f5f5f5;}
.main-benefit .wrap .row {display:flex; flex-wrap:wrap; margin:-10px;}
.main-benefit .wrap .col {width:50%; padding:10px;}
.main-benefit .wrap .box {min-height:180px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:20px; padding:30px 50px;}
.main-benefit .wrap .box .con {font-size:var(--fz18); font-weight:500; line-height:1.4em; color:#505050; display:flex; flex-direction:column; align-items:center; text-align:center;}
.main-benefit .wrap .box .con span {margin-bottom:15px; min-width:140px; padding:7px; font-size:var(--fz20); font-weight:700; line-height:1.33em; background:#4ab3fc; color:#fff; border-radius:20px; min-width:140px;}
.main-benefit .wrap .box .won {font-size:var(--fz40); font-weight:800; line-height:1.33em; color:#505050;}
.main-benefit .wrap .box .won span {display:inline-block; color:#4ab3fc; animation:zoomInOut .6s linear infinite alternate;}

.main-process {padding-top:140px;}
.main-process .list ol {display:flex; margin:-28px;}
.main-process .list ol li {position:relative; width:33.333%; padding:28px;}
.main-process .list ol li:after {position:absolute; right:0; top:50%; margin:-12px -18px 0 0; content:''; width:36px; height:24px; background:url('/images/main/process-arrow.png') no-repeat 50% 50% /contain;}
.main-process .list ol li:last-child:after {display:none;}
.main-process .list .box {height:100%; padding:50px; background:#f5f5f5; border-radius:24px;}
.main-process .list .box .num {margin:23px 0 6px; font-size:var(--fz20); font-weight:800; line-height:1.4em; color:#333;}
.main-process .list .box .tit {font-size:var(--fz28); font-weight:800; line-height:1.4em; color:#333;}
.main-process .list .box .tit small {font-weight:400; font-size:var(--fz20);}

.main-marquee-text {padding:120px 0;}
.main-marquee-text ul:after {content:" "; display:block; clear:both;}

.main-store {margin-bottom:140px; position:relative;}
.main-store .m-tit span {display:inline-block; background:var(--color-primary); color:#fff; padding:0 5px; line-height:1.2em;}
.find-store-wrap {display:flex; height:850px;}

.find-store-list {display:flex; flex-direction:column; width:510px; padding:30px 30px 0; margin-right:40px; background:#f5f5f5; border-radius:24px;}
.find-store-list .tab-area {margin-bottom:30px;}
.find-store-list .tab-area ul {display:flex;}
.find-store-list .tab-area ul li {flex:1 0 auto;}
.find-store-list .tab-area ul li a {border-radius:20px; height:40px; padding:0 5px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:var(--fz18); font-weight:700; line-height:1.4em; color:#999;}
.find-store-list .tab-area ul li.active a {background:#4ab3fc; color:#fff;}
.find-store-list .list-area {overflow-Y:auto; overflow-X:hidden; flex:1 1 auto; min-height:0; height:1%;}
.find-store-list .list-area ul {display:flex; flex-wrap:wrap; margin:-9px;}
.find-store-list .list-area ul li {cursor:pointer; width:50%; padding:9px;}
.find-store-list .list-area ul li .box {padding:23px 20px; text-align:center; border-radius:16px; font-size:var(--fz20); font-weight:600; line-height:1.33em; background:#fff;}

.find-store-map {position:relative; overflow:hidden; flex:1; border-radius:20px;}
.find-store-map #map {position:relative; width:100%; height:100%;}
.find-store-map .addr:before,
.find-store-map .addr:after {content:''; width: 21px; height: 21px; background: url('/images/main/circle-bg.png') no-repeat 50% 50% / contain; position: absolute;}
.find-store-map .addr {position: relative; border-radius:20px 0 0 0; padding:18px 25px; position:absolute; right:0; bottom:0; z-index:2; background:#fff; font-size:var(--fz18); line-height:1.33em; font-weight:600;}
.find-store-map .addr:before {top:-21px; right: 0;}
.find-store-map .addr:after {bottom:0; left: -21px;}
.find-store-map .addr .bar {display:inline-block; width:1px; height:14px; background:#999; margin:0 10px;}

.main-review {padding:120px 0; background:#14507f;}
.main-review .m-tit {color:#fff;}
.main-review .marquee {mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(20, 80, 127) 12.5%, rgb(20, 80, 127) 87.5%, rgba(0, 0, 0, 0) 100%);}
.main-review .marquee:after {content:" "; display:block; clear:both;}
.main-review .marquee ul {display:flex;}
.main-review .marquee ul li {margin-right:50px !important;}
.main-review .marquee .box {display:flex; flex-direction:column; justify-content:center; min-height:367px; max-width:430px; padding:42px; height:100%; border-radius:24px; background:#1c6caa; color:#fff;}
.main-review .marquee .box .head {padding-bottom:22px; margin-bottom:25px;  border-bottom:1px solid rgba(255,255,255,.3)}
.main-review .marquee .box .head .name {display:inline-block; margin-bottom:12px;  font-weight:600; font-size:var(--fz18); line-height:1.4em;}
.main-review .marquee .box .txt {font-size:var(--fz18); font-weight:600; line-height:1.56em;}

.main-faq {padding:140px 0;}

.chatbot {display:block; width:61px; height:60px; position:fixed; right:20px; bottom:20px; z-index:90;}

/* footer */
#footer {color:#505050; font-size:var(--fz15); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
#footer address {font-style:normal;}
#footer span {display:inline-block;}
#footer a:hover {text-decoration:underline;}

.foot-top {padding:18px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.foot-top .contain {display:flex; align-items:center; justify-content:space-between;}
.foot-top .link {font-weight:700; line-height:1.4em;}
.foot-top .scroll-top {display:inline-flex; align-items:center; font-weight:700; line-height:1.33em; color:#454545;}
.foot-top .scroll-top:after {content:""; display:block; margin-left:8px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:7px solid #454545;}

.foot-wrap {padding:45px 0;}
.foot-wrap .contain {display:flex; align-items:center;}
.foot-wrap .f-logo {margin-right:65px;}
.foot-wrap .f-info {flex:1 1 auto; min-width:0; width:1%;}
.foot-wrap address {margin-bottom:10px;}
.foot-wrap address span {margin-right:28px;}