/*----- reset -----*/
* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {height: 100%; word-break: keep-all;}
html {scroll-behavior: smooth;}
body {font-family: "Raleway", "Noto Sans KR", sans-serif; line-height: 1.6; letter-spacing: -0.25px;}
/* body > * {all: unset;} */
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
ul, ol, li {list-style: none;}
img {vertical-align: middle; width: 100%;}
a {color: #000; text-decoration: none;}
section {position: relative; overflow-x: clip;}



/*----- common -----*/
.wrapper {display: flex;}
.text-center {text-align: center;}
.red {border: 2px solid var(--red);}
.green {border: 2px solid var(--green);}
.blue {border: 2px solid var(--blue);}
.mg-50 {margin-top: var(--mg50);}
.mg-100 {margin-top: var(--mg100);}
.mg-150 {margin-top: var(--mg150);}
.mg-200 {margin-top: var(--mg200);}
.mg-250 {margin-top: var(--mg250);}
:root {
  --white: #ffffff;
  --black: #000000;
  --red: #ff0000;
  --green: #00ff00;
  --blue: #0000ff;
  --mg50: 50px;
  --mg100: 100px;
  --mg150: 150px;
  --mg200: 200px;
  --mg250: 250px;
}
.top {position: relative; overflow: hidden;}
.top img {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
mark {position: relative; font-weight: 500; background: none;}
mark::before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 6px; background: #fff079; z-index: -1;}
@media (max-width: 767px) {
  body.active {overflow: hidden; touch-action: none;}
}



/*----- nav -----*/
nav .sidebar {position: fixed; top: 0; left: 0; width: 160px; height: 100%; z-index: 9999; background: #ffffff; padding: 40px 0 100px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-shadow: 5px 5px 20px rgba(0,0,0,0.05);}
nav .sidebar .logo-top {width: 60px; text-align: center;}
nav .sidebar .logo-top img {width: 100%;}
nav .sidebar .trigger {position: relative; width: 38px; height: 26px; cursor: pointer;}
nav .sidebar .trigger span {position: absolute; width: 100%; height: 3px; background: #000000; transition: 0.3s;}
nav .sidebar .trigger span:nth-child(1) {top: 0;}
nav .sidebar .trigger span:nth-child(2) {top: 50%; left: 0; width: 80%;}
nav .sidebar .trigger span:nth-child(3) {top: 100%;}
nav .sidebar .trigger.active span:nth-child(1) {transform: rotate(45deg); top: 50%;}
nav .sidebar .trigger.active span:nth-child(2) {opacity: 0; left: -50%;}
nav .sidebar .trigger.active span:nth-child(3) {transform: rotate(-45deg); top: 50%;}
nav .sidebar .logo-bottom {width: 120px; text-align: center; transform: rotate(90deg);}
nav .sidebar .logo-bottom img {width: 100%;}
@media (max-width: 767px) {
  nav .sidebar {width: 100%; height: 60px; padding: 0; flex-direction: row-reverse; padding: 0 5%; background: rgb(255 255 255 / 90%); backdrop-filter: blur(5px);}
  nav .sidebar .logo-top {display: none;}
  nav .sidebar .trigger {width: 24px; height: 16px;}
  nav .sidebar .trigger span {height: 2px;}
  nav .sidebar .logo-bottom {width: 140px; text-align: left; transform: rotate(0);}
}
@media (min-width: 768px) and (max-width: 1024px) {
  nav .sidebar {width: 110px;}
}



/*----- category -----*/
nav .category {opacity: 0; position: fixed; top: 0; left: 0; bottom: 0; width: 380px; height: 100%; z-index: -999; background: #ffffff; transition: 0.6s;}
nav .category .company-pdf {position: absolute; bottom: 7%; left: 50%; width: 180px; transform: translateX(-50%); border: 3px solid #000000;}
nav .category .company-pdf a {display: block; padding: 6%; font-size: 14px; text-align: center; transition: 0.3s;}
nav .category .company-pdf a:hover {background: #000000; color: #ffffff;}
nav .category .navbar-nav {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
nav .category .navbar-nav .nav-item {margin: 12px 0; position: relative; overflow: hidden; animation-name: menuHover;}
nav .category .navbar-nav .nav-item a {font-size: 22px; font-weight: 700; text-transform: capitalize;}
nav .category .navbar-nav .nav-item:hover::after {animation: menuHover 1.25s ease forwards infinite;}
nav .category .navbar-nav .nav-item::after {content: ''; width: 100%; height: 3px; background: #000000; position: absolute; top: 16px; left: -100%; transition: 1s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;}
nav .category.active {opacity: 1; left: 160px; z-index: 999;}
nav .category.active .navbar-nav .nav-item {display: block; transition: 0.3s; animation: fadeIn 0.5s ease; animation-fill-mode: both;}
nav .category.active .navbar-nav .nav-item:nth-child(1) {animation-delay: 0.2s;}
nav .category.active .navbar-nav .nav-item:nth-child(2) {animation-delay: 0.3s;}
nav .category.active .navbar-nav .nav-item:nth-child(3) {animation-delay: 0.4s;}
nav .category.active .navbar-nav .nav-item:nth-child(4) {animation-delay: 0.5s;}
nav .category.active .navbar-nav .nav-item:nth-child(5) {animation-delay: 0.6s;}
@keyframes fadeIn {
  0% {opacity: 0; transform: translateX(-30px);}
  100% {opacity: 1; transform: translateX(0);}
}
@keyframes menuHover {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(250%);}
}
@media (max-width: 767px) {
  nav .category {width: 100%; height: 100vh; display: none;}
  nav .category.active {display: block;}
  nav .category .company-pdf {position: absolute; bottom: 22%;}
  nav .category .navbar-nav {margin-top: -18%; gap: 4px;}
  nav .category .navbar-nav .nav-item {width: 100%; margin: 5px 0; text-align: center;}
  nav .category .navbar-nav .nav-item a {display: block; padding: 2px 0;}
  nav .category .navbar-nav .nav-item::after {display: none;}
  nav .category.active {left: 0; z-index: 999;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  nav .category.active {left: 110px;}
}



/*----- index -----*/
main {flex: 1; margin-left: 160px;}
main .tit {padding: 80px 0;}
main .tit h2 {font-size: 62px; text-align: center; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; letter-spacing: -2px;}
main .dimmed {opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #00000080; z-index: 20;}
main .dimmed.active {opacity: 1; pointer-events: all;}
main .title {margin-bottom: 260px;}
main .title .inner {text-align: center;}
main .title .inner .text01 p {font-size: 120px; font-weight: 900; color: #f5f6f9;}
main .title .inner .text02 {position: absolute; top: 25.7%; left: 50%; width: 100%; transform: translateX(-50%);}
main .title .inner .text02 h2 {font-size: 36px; font-weight: 700;}
main .title .inner .text02 p {font-size: 20px; font-weight: 400;}
main .title .icon-wrap {padding: 0 12%;}
main .title .icon {display: flex; justify-content: space-around; padding: 0;}
main .title .icon .inner {width: 100px; height: 140px; margin-bottom: 40px;}
main .title .icon .inner p {font-size: 16px; padding-top: 12px; text-transform: capitalize;}
main .office .inner .text01 {position: absolute; top: -8.4%; left: 10%; z-index: 99;}
main .office .inner .text01 p {font-size: 80px; font-weight: 700; line-height: 1.4;}
main .office .inner .mySwiper01 {width: 100%; height: auto; max-width: 86%; position: absolute; right: 0;}
main .office .inner .mySwiper01 .swiper-slide {display: flex; justify-content: center; align-items: center; cursor: url(https://therules.kr/img/icon/icon_vertical_wh.png) 64 64, auto;}
main .office .inner .mySwiper01 .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
main .office .inner .mySwiper01 .swiper-button-prev {left: 5%; color: #ffffff50;}
main .office .inner .mySwiper01 .swiper-button-next {right: 5%; color: #ffffff50;}
main .office .inner .mySwiper01 + .swiper-pagination {position: absolute; top: auto; bottom: -5%; left: 14%; right: auto; width: 86%; height: 1px;}
main .office .inner .mySwiper01 + .swiper-pagination .swiper-pagination-progressbar-fill {background: #000000;}
main .history .list {display: flex; flex-direction: column;}
main .history .list li {display: flex;}
main .history .list li:last-child h3::before {height: 50%;}
main .history .list li h3 {position: relative; flex: 3; font-size: 38px; font-weight: 700; line-height: 1.2;}
main .history .list li h3::before {content: ''; position: absolute; top: 15px; right: 0; width: 1px; height: 100%; background: #dedede;}
main .history .list li h3::after {content: ''; position: absolute; top: 15px; right: -7px; width: 14px; height: 14px; background: #3b55e6; border-radius: 50%;}
main .history .list li ul {flex: 7; padding: 0.65% 0 8% 8%;}
main .history .list li ul li {margin-bottom: 15px; font-size: 18px; word-break: keep-all; text-transform: uppercase;}
main .history .list li ul li strong {width: 14%; min-width: 85px; font-size: 20px; line-height: 1.4; color: #3b55e6;}
main .portfolio .box-wrap {display: flex; flex-wrap: nowrap; gap: 15px; justify-content: center; overflow: hidden;}
main .portfolio .box {position: relative; padding: 0; overflow: hidden;}
main .portfolio .box img {transition: 0.6s;}
main .portfolio .box:hover img {transform: scale(1.06);}
main .portfolio .box:hover .official {opacity: 1;}
main .portfolio .box .text01 {position: absolute; bottom: 6%; left: 6%; color: #ffffff; z-index: 9; transition: 0.4s; text-transform: uppercase;}
main .portfolio .box .text01 p:first-child {font-size: 14px; font-weight: 600;}
main .portfolio .box .text01 p:last-child {font-size: 24px; font-weight: 700;}
main .portfolio .box .official {opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 0.3s;}
main .portfolio .box .official h3 {font-size: 28px; font-weight: 600; color: #ffffff;}
main .portfolio .box .official p {font-size: 16px; font-weight: 400; color: #ffffff;}
main .process .item {border: 1px solid #ededed;}
main .process .item .inner {padding: 15% 0; text-transform: capitalize; text-align: center;}
main .process .item .inner h3 {font-size: 24px; margin-bottom: 20px;}
main .process .item .inner p {font-size: 15px; color: #a6a6a6;}
main .partner .mid {justify-content: center;}
main .partner .inner {padding: 15%;}
@media (max-width: 767px) {
  main {margin-left: 0;}
  main .tit {padding: 14% 0;}
  main .tit h2 {font-size: 32px;}
  main .title {margin: 30% 0 50%;}
  main .title .inner .text01 p {font-size: 76px;}
  main .title .inner .text02 {top: 16%;}
  main .title .inner .text02 h2 {font-size: 18px;}
  main .title .inner .text02 p {font-size: 13px;}
  main .title .icon-wrap {padding: 0 6%;}
  main .title .icon .inner p {font-size: 14px;}
  main .office .inner .text01 {position: absolute; top: -25.8%; left: 10%;}
  main .office .inner .text01 p {font-size: 34px; font-weight: 700; line-height: 1.2;}
  main .office .inner .text01 p:nth-child(2) {margin-left: 80px;}
  main .office .inner .mySwiper01 {width: 100%; height: auto; max-width: 100%; position: absolute; left: 0; right: 0;}
  main .office .inner .mySwiper01 .swiper-button-prev {color: #ffffff50;}
  main .office .inner .mySwiper01 .swiper-button-next {color: #ffffff50;}
  main .office .inner .mySwiper01 + .swiper-pagination {bottom: -14%; left: 0; right: 0; width: 80%; margin: 0 auto;}
  main .history .list {position: relative; padding: 0 6% 0 8%;}
  main .history .list > li::before {content: ''; position: absolute; top: 15px; left: 2.5%; width: 1px; height: 98%; background: #dedede;}
  main .history .list li {flex-direction: column;}
  main .history .list li h3 {font-size: 26px; line-height: unset;}
  main .history .list li h3::before {display: none;}
  main .history .list li h3::after {left: -8%; z-index: 9; width: 12px; height: 12px;}
  main .history .list li ul {padding: 6% 0;}
  main .history .list li ul li {margin: 0 0 6%; font-size: 14px;}
  main .history .list li ul li strong {width: auto; padding-bottom: 5px; font-size: 16px;}
  main .portfolio .box-wrap {flex-direction: column; gap: 25px;}
  main .portfolio .box {width: 88%; margin: 0 auto;}
  main .portfolio .box::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, #00000090);}
  main .portfolio .box:hover img {transform: scale(1);}
  main .portfolio .box:hover .official {display: none;}
  main .process .item {border: 0; border-bottom: 1px solid #ededed;}
  main .process .row:nth-child(2) .item:first-child {border-top: 1px solid #ededed;}
  main .partner .inner {padding: 10%;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  main {margin-left: 110px;}
  main .office .inner .text01 {top: -24.4%;}
  main .office .inner .text01 p {font-size: 58px;}
  main .office .inner .mySwiper01 + .swiper-pagination {bottom: -10%;}
  main .history,
  main .portfolio,
  main .process {padding: 0 7%;}
}



/*----- about -----*/
main .about .banner {padding: 0;}
main .about .banner .inner .top {width: 100%; height: 560px;}
main .about .banner .inner .top img {width: inherit; height: inherit; object-fit: cover; object-position: left;}
main .about .banner .sub {position: relative; width: 25%; font-size: 30px;}
main .about .banner .sub::before {content: ''; position: absolute; left: 0; top: 52px; width: 24px; height: 4px; background: #000000;}
main .about .banner .about-wrap {display: flex; padding: 150px 0 0;}
main .about .banner .about-wrap > div {width: 75%;}
main .about .banner .about-wrap > div p {font-size: 22px; margin-bottom: 60px; font-weight: 300;}
main .about .banner .about-wrap > div ul li {display: flex; align-items: center; height: 64px; border-bottom: 1px solid #ededed;}
main .about .banner .about-wrap > div ul li strong {flex: 1; font-weight: 400; border-right: 1px solid #ededed;}
main .about .banner .about-wrap > div ul li span {flex: 4; padding-left: 60px; line-height: 1.4;}
main .about .banner .contact-wrap {display: flex; padding: 150px 0 0;}
main .about .banner .contact-wrap > div {width: 75%;}
main .about .banner .contact-wrap > div p {font-size: 22px; margin-bottom: 60px; font-weight: 300;}
main .about .banner .contact-wrap > div ul li {display: flex; flex-direction: column; padding: 20px 0; border-bottom: 1px solid #ededed;}
main .about .banner .contact-wrap > div ul li .question {display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
main .about .banner .contact-wrap > div ul li .question .btn {width: 60px; height: 60px; background: #dedede; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
main .about .banner .contact-wrap > div ul li .question .btn svg {color: #000000; transition: 0.3s;}
main .about .banner .contact-wrap > div ul li .question strong {font-size: 22px; font-weight: 600;}
main .about .banner .contact-wrap > div ul li .question .btn.active {background: #fff079;}
main .about .banner .contact-wrap > div ul li .question .btn.active svg {transform: rotate(225deg);}
main .about .banner .contact-wrap > div ul li .answer {position: relative; display: none; line-height: 1.4; padding: 20px 0 20px; color: #a6a6a6;}
main .about .banner .contact-wrap > div ul .answer ul li {border: 0; padding: 6px;}
@media (max-width: 767px) {
  main .about .banner .inner .top {height: 300px; margin-top: 60px;}
  main .about .banner .inner .top img {object-position: 32% 0;}
  main .about .banner .about-wrap {flex-direction: column; gap: 40px; padding: 0 10px;}
  main .about .banner .sub {width: 100%; font-size: 24px; margin-top: 60px;}
  main .about .banner .sub::before {top: 48px; height: 3px;}
  main .about .banner .about-wrap > div {width: 100%;}
  main .about .banner .about-wrap > div p {font-size: 16px; margin-bottom: 40px;}
  main .about .banner .about-wrap > div ul li strong {flex: 1.5; font-size: 14px;}
  main .about .banner .about-wrap > div ul li span {flex: 4; font-size: 14px; padding-left: 20px;}
  main .about .banner .about-wrap > div ul li span:last-child {line-height: 1.8;}
  main .about .banner .contact-wrap {flex-direction: column; gap: 40px; padding: 0 10px;}
  main .about .banner .contact-wrap > div {width: 100%;}
  main .about .banner .contact-wrap > div p {font-size: 16px; margin-bottom: 40px;}
  main .about .banner .contact-wrap > div ul li .question strong {font-size: 18px;}
  main .about .banner .contact-wrap > div ul li .question .btn {width: 40px; height: 40px;}
  main .about .banner .contact-wrap > div ul li .question .btn svg {width: 16px;}
  main .about .banner .contact-wrap > div ul .answer ul {}
  main .about .banner .contact-wrap > div ul .answer ul li {font-size: 14px;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  main .about .banner .inner .top img {object-position: 29% 0;}
  main .about .banner .about-wrap,
  main .about .banner .contact-wrap {padding: 150px 7% 0;}
}



/*----- business -----*/
main .business .banner {padding: 0;}
main .business .banner .inner .top {width: 100%; height: 560px;}
main .business .banner .inner .top img {width: inherit; height: inherit; object-fit: cover; object-position: left;}
main .business .banner .sub {position: relative; width: 25%; font-size: 30px;}
main .business .banner .sub::before {content: ''; position: absolute; left: 0; top: 52px; width: 24px; height: 4px; background: #000000;}
main .business .banner .business-wrap {display: flex; padding: 150px 0 0;}
main .business .banner .business-wrap > div {width: 75%;}
main .business .banner .business-wrap > div p {font-size: 22px; margin-bottom: 60px;}
main .business .banner .business-wrap > div .business01 {display: flex; justify-content: space-between; margin-bottom: 60px;}
main .business .banner .business-wrap > div .business01 div {max-width: 200px;}
main .business .banner .business-wrap > div .business02 {padding: 60px 0 0; border-bottom: 1px solid #dedede;}
main .business .banner .business-wrap > div .business02 h3 {font-size: 24px; margin-bottom: 14px;}
main .business .banner .business-wrap > div .business02 p {font-size: 16px;}
main .business .banner .business-wrap > div .business03 {padding: 60px 0 0; border-bottom: 1px solid #dedede;}
main .business .banner .business-wrap > div .business03 h3 {font-size: 24px; margin-bottom: 14px;}
main .business .banner .business-wrap > div .business03 p {font-size: 16px;}
main .business .banner .business-wrap > div .business04 {padding: 60px 0 0; border-bottom: 1px solid #dedede;}
main .business .banner .business-wrap > div .business04 .brand-logo {margin-bottom: 60px;}
main .business .banner .business-wrap > div .business04 .brand-logo .inner {padding: 5%;}
main .business .banner .business-wrap > div .business04 h3 {font-size: 24px; margin-bottom: 14px;}
main .business .banner .business-wrap > div .business04 p {font-size: 16px;}
main .business .banner .business-wrap > div .business04 p span {color: #3b55e6; font-weight: 500; padding-right: 5px;}
main .business .banner .dealershop-wrap {display: flex; padding: 150px 0 0;}
main .business .banner .dealershop-wrap > div {width: 75%;}
main .business .banner .dealershop-wrap > div > .row {display: flex; justify-content: center; flex-wrap: nowrap; gap: 20px; padding: 0 30px 20px;}
main .business .banner .dealershop-wrap > div .shop {background: #ededed; padding: 20px; border-radius: 20px;}
main .business .banner .dealershop-wrap > div .shop img {mix-blend-mode: darken; filter: grayscale();}
@media (max-width: 767px) {
  main .business .banner .inner .top {height: 300px; margin-top: 60px;}
  main .business .banner .inner .top img {object-position: 63% 0 !important;}
  main .business .banner .sub {width: 100%; font-size: 24px; margin-top: 60px;}
  main .business .banner .sub::before {top: 48px; height: 3px;}
  main .business .banner .business-wrap {flex-direction: column; gap: 40px; padding: 0 10px;}
  main .business .banner .business-wrap > div {width: 100%;}
  main .business .banner .business-wrap > div p {font-size: 16px; margin-bottom: 40px;}
  main .business .banner .business-wrap > div .business01 div {flex: 6; display: flex; justify-content: center; align-items: center;}
  main .business .banner .business-wrap > div .business01 div:nth-child(even) {flex: 2;}
  main .business .banner .business-wrap > div .business02 h3 {font-size: 22px;}
  main .business .banner .business-wrap > div .business03 h3 {font-size: 22px;}
  main .business .banner .business-wrap > div .business04 h3 {font-size: 22px;}
  main .business .banner .business-wrap > div .business04 .brand-logo .inner {padding: 10%;}
  main .business .banner .dealershop-wrap {flex-direction: column; gap: 40px; padding: 0 10px;}
  main .business .banner .dealershop-wrap > div {width: 100%;}
  main .business .banner .dealershop-wrap > div > .row {gap: 10px; padding: 0 15px 10px}
  main .business .banner .dealershop-wrap > div .shop {padding: 10px 0; border-radius: 10px;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  main .business .banner .inner .top img {object-position: 67% 0 !important;}
  main .business .banner .business-wrap,
  main .business .banner .dealershop-wrap {padding: 150px 7% 0;}
}



/*----- portfolio -----*/
/* .background {position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(120deg, #DCE2F0, #F9EBDE, #FCF6F5); background-size: 300% 300%; animation: gradient 6s ease infinite;}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
} */
main .portfolio .banner {padding: 0;}
main .portfolio .banner .inner {padding: 0;}
main .portfolio .banner .inner .top {width: 100%; height: 560px;}
main .portfolio .banner .inner .top img {width: inherit; height: inherit; object-fit: cover; object-position: left;}
main .portfolio .tit #typed {font-size: 42px;}
main .portfolio .breadcrumb {position: relative; margin: 0 0 24px; transition: all 0.3s ease-in-out;}
main .portfolio .breadcrumb:hover {box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2); transform: translate(0, -4px); transition: all 0.3s ease-in-out;}
main .portfolio .breadcrumb .por_btn {position: absolute; left: 10px; bottom: 10px; width: 50px; height: 50px; z-index: 1;}
main .portfolio .sub {position: relative; width: 25%; font-size: 30px;}
main .portfolio .sub::before {content: ''; position: absolute; left: 0; top: 52px; width: 24px; height: 4px; background: #000000;}
@media (max-width: 767px) {
  main .portfolio .banner .inner .top {height: 300px; margin-top: 60px;}
  main .portfolio .banner .inner .top img {object-position: 16%;}
  main .portfolio .tit #typed {font-size: 26px;}
  main .portfolio .breadcrumb {margin: 10px 0;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  main .portfolio {padding: 0;}
  main .portfolio .tit #typed {font-size: 38px;}
  main .portfolio .container > .row {padding: 0 7%;}
}



/*----- contact -----*/
main .contact .row > * {padding: 0;}
main .contact .row > div {height: 560px; word-break: keep-all;}
main .contact .info01 .inner {background: url('/img/office/camp_office_05.jpg') no-repeat center / cover; height: 560px;}
main .contact .info01 .inner img {object-fit: cover;}
main .contact .info02 .inner {display: flex; flex-wrap: wrap;}
main .contact .info02 .inner > div {height: 280px;}
main .contact .info02 .inner .gray {background: #1c1c1c;}
main .contact .info02 .inner .dk-gray {background: #131313;}
main .contact .info02 .inner .text01 {display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; text-align: center;}
main .contact .info02 .inner .text01 svg {color: #3b55e6; margin-bottom: 25px;}
main .contact .info02 .inner .text01 p {font-size: 16px; color: #ffffff; padding: 0 15%;}
main .contact .info02 .inner .text01 p a {color: #ffffff;}
main .contact .info02 .inner .text02 {display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; text-align: center;}
main .contact .info02 .inner .text02 svg {color: #3b55e6; margin-bottom: 25px;}
main .contact .info02 .inner .text02 p {font-size: 16px; color: #ffffff; padding: 0 15%;}
main .contact .info02 .inner .text02 p a {color: #ffffff;}
main .map {height: 560px;}
@media (max-width: 767px) {
  main .contact .row > div {height: auto;}
  main .contact .info01 .inner {height: 300px; margin-top: 60px;}
  main .contact .info02 .inner > div {height: 250px;}
  main .contact .info02 .inner .text01 p {font-size: 13px;}
  main .contact .info02 .inner .text02 p {font-size: 13px;}
  main .map {height: 400px;}
}



/*----- footer -----*/
footer {position: relative; background: #fafafa; padding: 150px 100px;}
footer .go_top {position: absolute; padding: 0; top: -30px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; line-height: 60px; text-align: center; background: #131313; box-shadow: 5px 5px 20px rgba(0,0,0,0.3); transition: 0.3s;}
footer .go_top:hover {background: #000;}
footer .go_top a {display: block; width: 100%; height: 100%; padding-top: 6px;}
footer .go_top a svg {color: #ffffff;}
footer .inner {text-align: center;}
footer .company {align-items: center;}
footer .company-logo img {width: 50%; opacity: 0.35;}
footer .company-adress p {font-size: 14px;}
footer .company-info p {font-size: 14px;}
@media (max-width: 767px) {
  footer {background: #fafafa; padding: 25% 0 15%;}
  footer .company-logo img {width: 40%;}
  footer .inner > div {margin-bottom: 20px;}
  footer .inner > div p {font-size: 14px;}
}