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

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

#wrapper {position:relative; background:#fff;}
#main #wrapper {padding-top:var(--80px);}

#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}

.contain {position:relative; width:100%; max-width:1260px; padding-left:30px;padding-right:30px; margin:0 auto;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header {position:fixed; z-index:90; left:0; top:0; width:100%; transition:0.2s all ease;}
#header:before {content:''; position:absolute; width:100%; height:1px; left:0; bottom:0; background:#cdcdcd; opacity:0; z-index:-1;}
#header .contain {position:relative; max-width:100%; height:var(--80px); transition:0.2s all ease;}

#main #header {background:#fff;}
#main .sitelogo svg path, 
#main .sitelogo svg rect {fill:#000;}
#main #header #gnb > ul > li > a {color:#000;}
#main #header .btn-all-menu span,
#main #header .btn-all-menu span:before,
#main #header .btn-all-menu span:after {background:#000;}
#main #header .util-menu ul li a {color:#000;}
#main #header .util-menu ul li.logout:after {background-image:url('/images/common/icon-logout.png');}


.header-fixed #header {background:#fff;}
.header-fixed #header #gnb > ul > li > a {color:#000;}
.header-fixed #header .sitelogo svg path, 
.header-fixed #header .sitelogo svg rect {fill:#000;}
.header-fixed #header .util-menu ul li a {color:#000;}
.header-fixed #header:before {opacity:1;}
.header-fixed #header .btn-all-menu span,
.header-fixed #header .btn-all-menu span:before,
.header-fixed #header .btn-all-menu span:after {background:#000;}
.header-fixed #header .util-menu ul li.logout:after {background-image:url('/images/common/icon-logout.png');}


.sitelogo {position:absolute; left:30px; top:50%; margin-top:-12px;}
.sitelogo a {display:block;}
.sitelogo svg {display:block;}
.sitelogo svg path, 
.sitelogo svg rect {fill:#fff; transition:0.2s all ease;}

#gnb > ul {display:flex; justify-content:center;}
#gnb > ul > li {position:relative; text-align:center;}
#gnb > ul > li > a {position:relative; display:flex;  padding:0 clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); font-family:var(--font-ns); font-size:clamp(15px, calc(18/ var(--inner) * 100vw ),18px); font-weight:700; height:var(--80px); line-height:1.4em; letter-spacing:0; color:#fff; position:relative; align-items: center; justify-content: center;}

#gnb .submenu {position:absolute; display:none; left:50%; transform:translateX(-50%); top:var(--80px); background:#fff; text-align:center; z-index:21;}
#gnb .submenu ul {position:relative; min-width:160px; border:1px solid #E4E4E4; border-top:0;}
#gnb .submenu ul li a {position:relative; display:flex; align-items:center; justify-content:center; height:clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); font-family:var(--font-ns); font-size:clamp(14px, calc(17/ var(--inner) * 100vw ),17px); font-weight:700; letter-spacing:-0.03em; color:#000; line-height:1em; transition:0.2s all ease;}
#gnb .submenu ul li:hover a {background:#3FD9D7; color:#fff;} 

.util-menu {position:absolute; right:clamp(80px, calc( 144 / var(--inner) * 100vw ), 144px); top:50%; transform:translateY(-50%);}
.util-menu ul {display:flex;}
.util-menu ul li {position:relative; padding:0 12px;}
.util-menu ul li:before {content:''; position:absolute; right:0; top:50%; margin-top:-5.5px; width:1px; height:11px; background:#ccc;}
.util-menu ul li:last-child:before {display:none;}
.util-menu ul li a {display:block; font-size:13px; font-weight:400; line-height:1; letter-spacing:0; color:#fff;}
.util-menu ul li.logout {padding-right:16px;}
.util-menu ul li.logout:after {content:''; position:absolute; right:0; top:50%; margin-top:-6px; width:12px; height:12px; background:url('/images/common/icon-logout-white.png') no-repeat 50% 50%/contain;}



/* 전체메뉴 */
.only-all-menu {display:none;}
.btn-all-menu {position:absolute; z-index:1; top:50%; transform:translateY(-50%); width:24px; height:20px; right:30px; text-align:center; transition: all 0.5s ease-in-out; text-indent:-9999em; }

.btn-all-menu span {position:absolute; display:block; right:0; top:50%; height:2px; width:24px; background:#fff; border-radius:100vh;}
.btn-all-menu span:before,
.btn-all-menu span:after {content:" "; position:absolute; right:0; width:24px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; border-radius:10px;}
.btn-all-menu span:before {top:-10px; transition-property:top, transform;}
.btn-all-menu span:after {bottom:-10px; transition-property:bottom, transform;}

.all-navigation {position:fixed; right:0; top:0; transform:translateX(100%); padding:28vh 70px 70px 124px; width:100%; max-width:636px; height:100vh; overflow:auto; transition:.3s ease-in-out; background:#fff url('../images/common/nav-bg.png') no-repeat right 55px bottom 70px;}
.all-util-menu {position:absolute; left:124px; bottom:70px; width:154px; height:154px; border:1px solid #cecece; border-radius:100%; animation:move_up_down 2s linear infinite;}
.all-util-menu a {display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-weight:700; line-height:1; letter-spacing:0; color:#000; text-align:center;}
.all-util-menu .logout {position:relative; padding-right:14;}

.all-navigation .all-nav-menu>ul>li {position:relative; margin-bottom:24px; transition:0.5s all ease; opacity:0; transform:translateY(50px);}
.all-navigation .all-nav-menu>ul>li:nth-child(1) {transition-delay:0.2s;}
.all-navigation .all-nav-menu>ul>li:nth-child(2) {transition-delay:0.3s;}
.all-navigation .all-nav-menu>ul>li:nth-child(3) {transition-delay:0.4s;}
.all-navigation .all-nav-menu>ul>li:nth-child(4) {transition-delay:0.5s;}
.all-navigation .all-nav-menu>ul>li:nth-child(5) {transition-delay:0.6s;}
.all-navigation .all-nav-menu>ul>li:nth-child(6) {transition-delay:0.7s;}
.all-navigation .all-nav-menu>ul>li:last-child {margin-bottom:0;}
.all-navigation .all-nav-menu>ul>li>a {display:inline-block; font-family:var(--font-ns); color:#000; font-size:26px; font-weight:700; line-height:1.3em; letter-spacing:0; transition: all 0.2s ease-in;}

.all-navigation .all-nav-menu .submenu {padding:var(--30px) 0 var(--50px);}
.all-navigation .all-nav-menu .submenu>ul>li {margin-bottom:10px;}
.all-navigation .all-nav-menu .submenu>ul>li:last-child {margin-bottom:0;}
.all-navigation .all-nav-menu .submenu>ul>li>a {position:relative; display:inline-block; padding-bottom:12px; font-size:20px; font-weight:400; line-height:1.2em; letter-spacing:0;}
.all-navigation .all-nav-menu .submenu>ul>li>a:before {content:""; position:absolute; width:0; height:8px; left:0; bottom:0; background:#81FFE9; transition:0.2s all ease;}
.all-navigation .all-nav-menu .submenu>ul>li>a:hover:before {width:90%;}

@keyframes move_up_down {
  0%,100%{
    transform:translateY(0);
  }
  50% {
    transform:translateY(15px);
  }
}
@keyframes move_left_right {
  0%,100%{
    transform:translateX(0);
  }
  50% {
    transform:translateX(15px);
  }
}

html.menu-all-opened {overflow:hidden;}
html.menu-all-opened .btn-all-menu span {transition-delay:0s, 0.3s;background:0 !important;}
html.menu-all-opened .btn-all-menu span:before,
html.menu-all-opened .btn-all-menu span:after {transition-delay:0s, 0.3s; background:#000 !important;}
html.menu-all-opened .btn-all-menu span:before {top:0px; transform:rotate(45deg);}
html.menu-all-opened .btn-all-menu span:after  {bottom:0px; transform:rotate(-45deg);}
html.menu-all-opened .all-navigation {transform:translateX(0);}
html.menu-all-opened .all-navigation .only-all-menu {display:block;}
html.menu-all-opened .all-navigation .all-nav-menu>ul>li {transform:translateY(0); opacity:1;}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3; z-index:80;} 
html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */ 
.main-visual {position:relative; padding-top:120px; text-align:center;}
.main-visual .tit-wrap {margin-bottom:clamp(20px, calc( 72 / var(--inner) * 100vw ), 72px); display:inline-block; text-align:left;}
.main-visual .tit-wrap .txt {margin-bottom:0.67em; font-family:var(--font-ns); font-size:clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight:700;}
.main-visual .tit-wrap .tit {font-family:var(--font-os); font-size:clamp(62px, calc( 116 / var(--inner) * 100vw ), 116px); font-weight:700; line-height:1; letter-spacing:clamp(0.04em, calc(7 / var(--inner) * 100vw ), 7px); color:#111;} 

.main-visual .items {pointer-events:none;}
.main-visual .img-wrap {margin:0 auto;}
.main-visual .img-wrap .img {position:relative; width:clamp(254px, calc( 666 / var(--inner) * 100vw ), 666px); height:clamp(254px, calc( 666 / var(--inner) * 100vw ), 666px); border-radius:100%; display:inline-block; opacity:0;}
.main-visual .img-wrap .img:before {content:''; position:absolute; width:100%; height:100%; left:0; top:0; border:1px solid #cecece; border-radius:100%; z-index:-1; transition:none;}
.main-visual .img-wrap img {display:inline-block;}
.main-visual .cnt {position:absolute; top:50%; left:50%; width:100%; padding:0 30px; transform:translate(-50%,-50%); text-align:left;}
.main-visual .cnt .txt {margin:0 0 0 auto; width:50%; padding-left:14%; font-family:var(--font-ns); font-size:clamp(14px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight:400; line-height:1.7em; letter-spacing:-0.014em; color:#444; opacity:0;}

.main-visual .cnt .more-btn {display:block; position:relative; margin-top:13px; padding-left:13px; pointer-events:auto;}
.main-visual .cnt .more-btn:hover .circle {animation:move_left_right 2s linear infinite;}
.main-visual .cnt .more-btn:before {content:''; position:absolute; z-index:1; left:0; top:50%; margin-top:-5px; width:47px; height:10px; background:url('/images/main/icon-arrow.png') no-repeat 50% 50%/contain;}
.main-visual .cnt .more-btn .circle {display:block; width:clamp(22px, calc( 62 / var(--inner) * 100vw ), 62px); height:clamp(22px, calc( 62 / var(--inner) * 100vw ), 62px); background:#efefef; border-radius:100%;}

.main-visual .slick-active .item1 .img {opacity:1;}
.main-visual .slick-active .item1 .cnt .txt {padding-left:465px; opacity:1; transition:all 1s ease 0.4s;}
.main-visual .slick-active .item1 .img-wrap .img:before {transform:translateX(-34.53%); transition:all 1s ease 0.3s;}
.main-visual .slick-active .item1 .img-wrap .img {transform:translateX(13%); transition:all 1s ease 0.3s;}

.main-visual .item2 .img {opacity:1;}
.main-visual .item2 .cnt .txt {padding-left:465px; opacity:1; transition:none;}
.main-visual .item2 .img-wrap .img:before {transform:translateX(-26%); transition:none;}
.main-visual .item2 .img-wrap .img {transform:translateX(13%); transition:none;}

.main-visual .item .img {opacity:1;}
.main-visual .item .cnt .txt {padding-left:465px; opacity:1; transition:none;}
.main-visual .item .img-wrap .img:before {transform:translateX(-26%); transition:none;}
.main-visual .item .img-wrap .img {transform:translateX(13%); transition:none;}

.main-visual .pager-wrap {display:flex; align-items:center; justify-content:center; margin:var(--100px) auto 0; widtH:100%; max-widtH:1780px; padding:0 30px;}
.main-visual .pager {font-family:var(--font-roboto); font-size:0.81em; font-weight:700; line-height:1.2em; letter-spacing:-0.02em; color:#000;}
.main-visual .progress {position:relative; width:236px; height:2px; background:#B5B5B5; margin:0 15px;}
.main-visual .progress:after {content:""; position:absolute; top:0; left:0; width:0; height:100%; background:#000; transition: 0.1s width linear;}
.main-visual .progress.animate:after {transition:width linear; width:100%; transition-delay:unset; transition-duration:4s;}

.main-sec {padding:var(--140px) 0;}

.main-maquee {padding:var(--100px) 0 var(--40px);}
.maquee-txt {widtH:100%; overflow:hidden;}
.maquee-txt .item {width:auto !important; font-family:var(--font-os); font-size:120px; font-weight:600; color:#f2f2f2; letter-spacing:0; line-height:1.4em; white-space:nowrap;}
.maquee-txt .slick-track {display:flex !important;}
.maquee-txt .slick-list {margin:0 -30px;}
.maquee-txt .slick-slide {margin:0 30px; float:none;}

.main-story {text-align:center;}
.main-story .tit {margin-bottom:var(--60px); font-family:var(--font-os); font-size:clamp(1.625rem, 0.8750rem + 1.8750vw, 3.125rem); font-weight:800; line-height:1.2em; letter-spacing:0.2em; color:#000;}
.main-story .txt {margin-bottom:var(--80px); font-family:var(--font-ns); font-weight:400; font-size:clamp(0.875rem, 0.6875rem + 0.4688vw, 1.25rem); line-height:1.77; letter-spacing:0; color:#444;}
.main-story .btn a {position:relative; display:inline-block; padding-left:var(--80px); font-family:var(--font-crimson); font-weight:700; letter-spacing:0; line-height:1em; color:#000;}
.main-story .btn a:before {content:''; position:absolute; width:calc(var(--80px) - 12px); height:1px; top:50%; left:0; background:#a8a8a8;}

.main-biz {position:relative;}
.main-biz .wrap {position:relative;}
.main-biz .group {position:relative; display:flex; align-items:flex-start; padding:16vh 90px; max-widtH:1920px; margin:0 auto;}
.main-biz .group:nth-child(even) {flex-direction:row-reverse;}
.main-biz .group .cnt {flex:1 1 auto; min-width:0; width:1%; padding-right:clamp(0rem, -7.3438rem + 18.3594vw, 14.6875rem);;}
.main-biz .group:nth-child(even) .cnt {padding-right:0; padding-left:clamp(0rem, -7.3438rem + 18.3594vw, 14.6875rem);;}
.main-biz .img-wrap {position:relative;}
.main-biz .img-wrap .cate {position:absolute; z-index:2; top:20px; right:20px; padding:11px 18px; font-family:var(--font-ns); font-size:clamp(0.75rem, 0.5000rem + 0.6250vw, 1.25rem); letter-spacing:0; line-height:1em; font-weight:800; border-radius:100vh; background:#fff; border:1px solid #FF8282;}
.main-biz .group:nth-child(even) .cate {right:auto; left:20px;}
.main-biz .img-wrap .img {position:relative; z-index:1;}
.main-biz .img-wrap .img:before {content:''; position:absolute; width:82%; height:69%; left:-26px; bottom:-26px; background:#FF8282; border-radius:8px; z-index:-1;}
.main-biz .group:nth-child(even) .img:before {left:auto; right:-26px;}
.main-biz .img-wrap .img img {border-top-right-radius:46px;}
.main-biz .group:nth-child(even) .img img {border-top-right-radius:0; border-top-left-radius:46px;}
.main-biz .cnt .tit {position:relative; padding-bottom:65px; margin-bottom:60px; font-family:var(--font-os); font-size:clamp(2.25rem, 1.3750rem + 2.1875vw, 4rem); font-weight:700; letter-spacing:0; line-height:1.1; color:#000;} 
.main-biz .cnt .tit:before {content:''; position:absolute; width:2px; height:34px; left:0; bottom:0; background:#d9d9d9;}
.main-biz .cnt ul {display:flex; flex-wrap:wrap; margin-bottom:-56px;}
.main-biz .cnt ul li {width:50%; padding-right:10px; margin-bottom:3.29em; font-family:var(--font-ns); font-size:clamp(0.875rem, 0.7810rem + 0.2350vw, 1.063rem); font-weight:700; letter-spacing:0; line-height:1.7; color:#000;}
.main-biz .cnt ul li .num {margin-bottom:8px; line-height:1.2em; font-size:clamp(1.25rem, 0.9375rem + 0.7813vw, 1.875rem); color:#9d9d9d; font-weight:700;}
.main-biz .cnt .btn {margin-top:var(--80px);}
.main-biz .cnt .btn a {display:inline-block; padding:21px 28px; background:#FF8282; font-family:var(--font-ns); font-size:1.13em; font-weight:700; letter-spacing:0; line-height:1em; color:#fff; border-radius:100vh;}

.main-biz .gr1 .point-color {color:#FF8282;}
.main-biz .gr1 .img-wrap .img:before,
.main-biz .gr1 .btn a {background:#FF8282;}
.main-biz .gr1  .img-wrap .cate {color:#FF8282; border-color:#FF8282;}

.main-biz .gr2 .point-color {color:#3FD9D7;}
.main-biz .gr2 .img-wrap .img:before,
.main-biz .gr2 .btn a {background:#3FD9D7;}
.main-biz .gr2  .img-wrap .cate {color:#3FD9D7; border-color:#3FD9D7;}

.main-biz .gr3 .point-color {color:#D598FF;}
.main-biz .gr3 .img-wrap .img:before,
.main-biz .gr3 .btn a {background:#D598FF;}
.main-biz .gr3  .img-wrap .cate {color:#D598FF; border-color:#D598FF;}

.move-up-down {animation:move_up_down 2s linear infinite;}
@keyframes move-up-down {
  0%,100%{
    transform:translateY(0);
  }
  50% {
    transform:translateY(15px);
  }
}
.blink-2 {animation: blink-2 5s infinite both;}
@-webkit-keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.string-wrap {position:relative; border-top:1px solid #efefef; padding:clamp(30px, calc( 120 / var(--inner) * 100vw ), 120px) 0;}
.string-area {display:flex; position:absolute; height:100%; width:100%; left:0; top:0;}
.string-area .string {flex:1; height:100%; border-right:1px solid #efefef;}
.string-area .string:last-child {bottom:0;}

.main-banner {position:relative; width:100%; max-width:1096px; padding:0 clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); margin:0 auto clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.main-banner .item a {display:block; overflow:hidden; border-radius:clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px);}
.main-banner .item img {width:100%;}
.main-banner .slick-arrow {position:absolute; z-index:1; top:50%; margin-top:-23px; width:clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px); height:46px; border:0; background-color:transparent; background-size:contain; background-position:50% 50%; background-repeat:no-repeat; text-indent:-999em; overflow:hidden;}
.main-banner .slick-prev {background-image:url('/images/main/sld-prev2.png'); left:clamp(7.5px, calc( 32 / var(--inner) * 100vw ), 32px);}
.main-banner .slick-next {background-image:url('/images/main/sld-next2.png'); right:clamp(7.5px, calc( 32 / var(--inner) * 100vw ), 32px);}

.main-banner .slick-dots {display:flex; position:absolute; left:50%; bottom:clamp(10px, calc( 14.8 / var(--inner) * 100vw ), 14.8px); transform:translateX(-50%);}
.main-banner .slick-dots li {padding:0 clamp(0.5px, calc( 4 / var(--inner) * 100vw ), 4px);}
.main-banner .slick-dots li button {display:block; width:57px; height:clamp(1px, calc( 2 / var(--inner) * 100vw ), 2px); background:#918D8D; border:0; text-indent:-999em; overflow:hidden;}
.main-banner .slick-dots li.slick-active button {background:#fff;}

.main-recruitment {position:relative; margin-bottom:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.main-recruitment:last-child {margin-bottom:0;}
.main-recruitment .contain {max-width:1090px;}
.main-recruitment .tit-wrap {margin-bottom:clamp(24px, calc( 30 / var(--inner) * 100vw ), 30px);}
.main-recruitment .tit-wrap h2 {font-size:clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight:700; line-height:1.2; letter-spacing:0; color:#000;}
.main-recruitment .tit-wrap p {margin-top:10px; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:400; line-height:1.2; letter-spacing:0;}
.main-recruitment .swiper-arrow {position:absolute; z-index:1; top:33%; width:26px; height:26px; text-indent:-999em; overflow:hidden; background-color:transparent; background-position:50% 50%; background-size:contain; background-repeat:no-repeat; border:0; border-radius:100%; box-shadow:1px 2px 4px 0 rgba(0,0,0,0.25);}
.main-recruitment .swiper-button-prev {left:-42px; background-image:url('/images/main/recruit-prev.png');}
.main-recruitment .swiper-button-next {right:-42px; background-image:url('/images/main/recruit-next.png');}
.main-recruitment .sale-tag {display:inline-block; position:absolute; right:14px; top:14px; padding:0 10px; background:#EB605C; font-size:12px; font-weight:500; letter-spacing:0; line-height:19px; color:#fff;}
.main-recruitment .more-btn {margin-top:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); text-align:center;}
.main-recruitment .more-btn a {display:inline-block; min-width:clamp(126px, calc( 240 / var(--inner) * 100vw ), 240px); padding:0.94em; background:#fff; border:1px solid #e6e6e6; border-radius:100vh; font-size:1.18em; font-weight:500; line-height:1; letter-spacing:0; color:#000; text-align:center;}

.main-host-banner {padding:18px; background:#9DD9D9; text-align:center;}

.main-photo {padding:var(--100px) 0 var(--80px); background:#FBFBFB;}
.main-photo .main-tit {margin-bottom:var(--30px); font-family:var(--font-os); font-size:clamp(1.625rem, 0.8750rem + 1.8750vw, 3.125rem); font-weight:700; line-height:1.2em; letter-spacing:0.1em; color:#000; text-align:center;}

.photo-slider {max-width:1500px; margin:0 auto var(--60px) auto;}
.photo-slider .in {padding:24px; width:clamp(21.875rem, 17.2500rem + 11.5625vw, 31.125rem); background:#fff; border-radius:20px; box-shadow: 5.4px 14px 15px #00000026;}
.photo-slider .in .thumb {position:relative; padding-bottom:100%; margin-bottom:30px; overflow:hidden;}
.photo-slider .in .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.photo-slider .tit-wrap {display:flex; justify-content:space-between; align-items:center;}
.photo-slider .tit-wrap .tit {font-family:var(--font-ns); font-size:clamp(0.625rem, 0.4060rem + 0.5475vw, 1.063rem); letter-spacing:-0.02em; color:#444;}
.photo-slider .tit-wrap .icon {display:flex;}
.photo-slider .tit-wrap .icon img {width:clamp(1rem, 0.5625rem + 1.0938vw, 1.875rem);}
.photo-slider .slick-slide {transform:scale(0.8); padding:25px 0;}
.photo-slider .slick-current {transform:scale(1);}
.photo-slider .slick-arrow {position:absolute; z-index:1; display:block; top:50%; width:clamp(2.5rem, 1.4375rem + 2.6563vw, 4.625rem); height:62px; margin-top:-31px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; border:0; text-indent:-999em; overflow:hidden;}
.photo-slider .slick-prev {left:-130px; background-image:url('../images/main/sld-prev.png');}
.photo-slider .slick-next {right:-130px; background-image:url('../images/main/sld-next.png');}

.main-contact {position:relative; padding:50px; background:url('../images/main/contact-bg.jpg') no-repeat 50% 50%; background-size:cover; background-attachment:fixed;}
.circle-wrap {position:relative;}
.circle {position:relative; overflow:hidden; height:50%;}
.circle i {display:block; position:absolute; top:0; left:0; width:var(--circle); height:var(--circle); border-radius:50%; box-sizing:border-box; border:1px solid transparent;}

@keyframes circle-t {
	from {transform:rotate(-135deg);}
	to {transform:rotate(45deg);}
}
@keyframes circle-b {
	from {transform:rotate(45deg);}
	to {transform:rotate(225deg);}
}
.circle.top i {border-top-color:#fff; border-left-color:#fff;}
.circle.bottom i {border-top-color:#fff; border-left-color:#fff; top:calc(0px - var(--circle)/2);}

[data-aos="circle-t"] {
  &.aos-animate {
	animation:circle-t 1s 1 linear both;
  }
}
[data-aos="circle-b"] {
  &.aos-animate {
	animation:circle-b 1s 1s 1 linear both;
  }
}

[data-aos="circle-on"] {
  &.aos-animate {
	animation: ani 1s 1s 1 linear both;
  }
}

.circle-wrap {width:760px; height:760px; margin:0 auto;}
.circle_box {position:relative; width:760px; height:760px; margin:0 auto;}
.circle_box.tab-ver {display:none; width:450px; height:450px;}
.circle_box.mo-ver {display:none; width:300px; height:300px;}
.bg_circle {width:100%; height:100%; border:1px solid rgba(255,255,255,.2); border-radius:100%;}
.out_circle {position:absolute; left:0; top:0;}
.moving-circle {transform:rotate(-90deg); stroke-dasharray:2387; stroke-dashoffset:2387;}
.moving-circle .circle {}

.circle_box.tab-ver .moving-circle {stroke-dasharray:1414; stroke-dashoffset:1414;}
.circle_box.mo-ver .moving-circle {stroke-dasharray:1130; stroke-dashoffset:1130;}

.circle-on-pc {animation: ani 1s 1s 1 linear both;}
@keyframes ani {
  0% {
    stroke-dashoffset: 2387; 
  }
  100% {
    stroke-dashoffset: 0;  
  }
}

.circle-on-tab {animation: ani2 1s 1s 1 linear both;}
@keyframes ani2 {
  0% {
    stroke-dashoffset: 1414; 
  }
  100% {
    stroke-dashoffset: 0;  
  }
}

.circle-on-mo {animation: ani3 1s 1s 1 linear both;}
@keyframes ani3 {
  0% {
    stroke-dashoffset: 1130; 
  }
  100% {
    stroke-dashoffset: 0;  
  }
}

.main-contact .cnt {position:absolute; top:50%; transform:translateY(-50%); left:30px;}
.main-contact p {font-family:var(--font-ns); font-size:clamp(1.25rem, 0.6250rem + 1.5625vw, 2.5rem); font-weight:800; line-height:1.6em; letter-spacing:0; color:#fff;}

/* sub page */ 
.sub-visual {position:relative; width:100%; padding-top:var(--80px); height:clamp(280px, calc( 495 / var(--inner) * 100vw ), 495px); display:flex; align-items:center; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.sub-visual .content {position:relative; z-index:1; color:#fff; width:100%; max-width:1260px; padding:0 30px; margin:0 auto;}
.sub-visual .content h2 {font-family:var(--font-os); font-size:clamp(26px, calc( 64 / var(--inner) * 100vw ), 64px); line-height:1em; font-weight:400; letter-spacing:0; opacity:0; transform:translateY(50px); transition:0.8s all 0.3s ease;}
.sub-visual .content p {margin-top:0.83em; font-family:var(--font-ns); font-size:clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:500; line-height:1.4em; letter-spacing:0; opacity:0; transform:translateY(50px); transition:0.8s all 0.4s ease;}
.sub-visual.sv1 {height:clamp(180px, calc( 410 / var(--inner) * 100vw ), 410px);}
.sub-visual.sv1 .content {text-align:center;}

.sub-visual.load .content h2 {opacity:1; transform:translateY(0);}
.sub-visual.load .content p {opacity:1; transform:translateY(0);}
.sub-visual .background {
	position:absolute; 
	top:0; 
	left:0;
	width:100%; height:100%;	
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	transform:scale(1.09);
    -ms-transform:scale(1.09); /* IE 9 */
    -moz-transform:scale(1.09); /* Firefox */
    -webkit-transform:scale(1.09); /* Safari and Chrome */
    -o-transform:scale(1.09); /* Opera */
	transition: all 2s ease-out 0s;
	transition-delay: 0.1s;
	z-index:0;
}
.sub-visual.load .background {
	transform:scale(1);
    -ms-transform:scale(1); /* IE 9 */
    -moz-transform:scale(1); /* Firefox */
    -webkit-transform:scale(1); /* Safari and Chrome */
    -o-transform:scale(1); /* Opera */
}

.sub-visual.login-sv {height:clamp(180px, calc( 410 / var(--inner) * 100vw ), 410px); text-align:center;}

.sub-title {margin:var(--160px) 0; text-align:center;}
.sub-title h1 {color:#242424; font-size:var(--f51); line-height:1.2em; font-weight:700; letter-spacing:0.18em;}

#lnb {position:relative; background:#000;}
.lnb {max-width:1200px; margin:0 auto;}
.lnb ul {display:flex; justify-content:center;}
.lnb ul li {width:auto; text-align:center;}
.lnb ul li a {position:relative; padding:0 26px; display:flex; align-items:center; justify-content:center; min-height:clamp(40px, calc( 56 / var(--inner) * 100vw ), 56px); color:#fff; font-weight:600; line-height:1.2em; letter-spacing:0;}
.lnb ul li.active a {color:#000; background:#fff;}

.path-wrap {border-bottom:1px solid #ddd; display:none;}
.path-wrap .inner {max-width:1200px; margin:0 auto;}
.path-wrap .inner:after {content:""; display:block; clear:both;}
.path-wrap .home {float:left;}
.path-wrap .home a {display:block; width:var(--lnb-height); height:var(--lnb-height); background:url("../images/common/home.png") 50% 50% no-repeat; text-indent:-999em; overflow:hidden; border-right:1px solid #ddd; border-left:1px solid #ddd;}
.path-wrap .part {float:left; position:relative; min-width:300px; border-right:1px solid #ddd; z-index:50;}
.path-wrap .part > a {display:flex; align-items:center; justify-content:center; position:relative; height:48px; font-size:var(--font-size-18); color:#fff; font-weight:600; letter-spacing:0; padding:0 40px; background:#000; text-align:center;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; margin-top:-5px; right:22px; width:20px; height:11px; background:url('../images/common/icon-down.png') no-repeat 50% 50%/contain;}
.path-wrap .part.active > a:after {transform:scaleY(-1);}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; background:#fff; border:1px solid #ddd; border-top:0; z-index:50;}
.path-wrap .part ul li {color:#454545; line-height:1.35em; font-weight:400; border-top:1px solid #ddd;}

.path-wrap .part ul li a {position:relative; display:flex; height:var(--lnb-height); align-items:center; padding:0 20px;}
.path-wrap .part ul li.active a,
.path-wrap .part ul li a:hover {color:#fff; background:#000;}


#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

/* footer */
#footer {background:#fff; color:#868686; font-size:14px; line-height:1.4em; font-weight:400; letter-spacing:0; padding-top:206px; padding-bottom:var(--70px);}
#footer .contain {display:flex; max-width:1700px;}

.f-logo {margin-right:var(--60px);}
#footer address {display:flex; flex:1 1 auto; min-width:0; width:1%; font-style:normal; letter-spacing:0;}
#footer address strong {display:block; margin-bottom:16px; font-family:var(--font-os); font-size:13px; font-weight:400; line-height:1em; letter-spacing:0.2em; color:#000;}
#footer .bar {display:inline-block; margin:0 12px; width:1px; height:14px; vertical-align:middle; background:#d9d9d9;}
#footer .col {position:relative; width:250px; padding-left:20px;}
#footer .col:before {content:''; position:absolute; width:1px; height:14px; background:#d9d9d9; left:0; top:0;}
#footer .addre {flex:1 1 auto; min-width:0; width:1%;}