/* main */

section[class*="sect"] {word-break: keep-all;} 
section[class*="sect"] .inner {max-width: 1000px; width: 90%; margin: auto;}
section[class*="sect"] .title {text-align: center; line-height: 1.5; margin-bottom: 60px;} 
section[class*="sect"] .title .sub {color: #2699DD; font-weight: 500; font-size: 16px; margin-bottom: 1.25em; }
section[class*="sect"] .title h3 {font-weight: 500; font-size: 30px; color: #222;  line-height: 1.4;}
section[class*="sect"] .title .desc {color: #555; font-size: 20px; margin-top: 0.75em;}
@media screen and (max-width:1024px){
  section[class*="sect"] .title .sub {font-size: 15px;}
  section[class*="sect"] .title h3 {font-size: 24px;}
  section[class*="sect"] .title .desc {font-size: 18px;}
}
@media screen and (max-width:768px){
  section[class*="sect"] .title .sub {font-size: 14px;}
  section[class*="sect"] .title h3 {font-size: 20px;}
  section[class*="sect"] .title .desc {font-size: 16px;}
}
@media screen and (max-width:480px){
  section[class*="sect"] .title .sub {font-size: 13px;}
  section[class*="sect"] .title h3 {font-size: 18px;}
  section[class*="sect"] .title .desc {font-size: 15px;}
}

/*  */
.hero-section {width: 100%; height: 980px; background: url(/images/img_hero.jpg) center no-repeat; background-size: cover; margin: auto; display: flex; align-items: center; justify-content: center; position: relative;}
.hero-section .text-box {color: #fff; text-align: center; }
.hero-section .text-box .sub {font-size: 18px; line-height: 1.5; opacity: 0.8; font-weight: 500;}
.hero-section .text-box h2 {line-height: 1.4; font-size: 45px; margin-top: 0.65em; font-weight: 500;}
.hero-section .text-box .desc {font-size: 25px; line-height: 1.4; margin-top: 0.8em;}
.hero-section .text-box a {display: flex; width: fit-content; height: 62px; background: #fff; color: #222; align-items: center;justify-content: center; font-weight: 500; padding: 0 50px; margin: 60px auto 0; font-size: 18px;}

.hero-section .scroll {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);}
.hero-section .scroll p {color: #fff; text-align: center; font-size: 16px; font-weight: 500;}

.hero-section .scroll .icon {display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 10px;}
.hero-section .scroll span {border-left: 4px solid rgba(0,0,0,0); border-right: 4px solid rgba(0,0,0,0); border-top: 6px solid #fff; opacity: 0; animation: blink 0.7s linear 0s infinite;}
.hero-section .scroll span:nth-child(1) {animation-delay: 0s;}
.hero-section .scroll span:nth-child(2) {animation-delay: 0.23s;}
.hero-section .scroll span:nth-child(3) {animation-delay: 0.46s;}

@keyframes blink {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

@media screen and (max-width:1024px){
  .hero-section .text-box .sub {font-size: 16px;}
  .hero-section .text-box h2 {font-size: 38px;}
  .hero-section .text-box .desc {font-size: 20px;}

  .hero-section .text-box a {height: 50px; font-size: 16px; padding: 0 32px;}
}
@media screen and (max-width:768px){
  .hero-section {height: 720px;}
  .hero-section .text-box .sub {font-size: 15px;}
  .hero-section .text-box h2 {font-size: 24px;}
  .hero-section .text-box .desc {font-size: 17px;}
  .hero-section .scroll p {font-size: 14px;}
}
@media screen and (max-width:480px){
   .hero-section {height: 580px;}
  .hero-section .text-box .sub {font-size: 14px;}
  .hero-section .text-box h2 {font-size: 20px;}
  .hero-section .text-box .desc {font-size: 15px;}
  .hero-section .text-box a {padding: 0 24px; font-size: 14px; height: 46px; margin: 40px auto 0;}
  .hero-section .scroll {bottom: 28px;}
  .hero-section .scroll p {font-size: 13px;}
  .hero-section .scroll .icon {margin-top: 8px; gap: 6px;}
  .hero-section .scroll span {border-left-width: 3px; border-right-width: 3px; border-top-width: 5px;}
}


/* sec2 */
.sect2 {padding: 100px 0 80px; position: relative;}
.sect2 .anchor {position: absolute; left: 0; top: 0;}
.sect2 .law-box {display: flex; justify-content: space-between; align-items: stretch; position: relative;}
.sect2 .law-box::before,
.sect2 .law-box::after {content:""; width: 1px; height: 100%; background: #ebebeb; position: absolute; top: 0;}
.sect2 .law-box::before {left:31.5%;}
.sect2 .law-box::after {right: 31.5%;}
.sect2 .law-box .item {width: 26%; position: relative; text-align: center; box-sizing: border-box;}
.sect2 .law-box .item .icon {font-size: 0; width: 80px; margin: 0 auto 30px;}
.sect2 .law-box .item .icon img {width: 100%;}
.sect2 .law-box .item .tit {font-weight: 500; color: #222; font-size: 18px; line-height: 1.4; margin-bottom: 15px;}
.sect2 .law-box .item .desc {font-size: 16px; color: #555; line-height: 1.5;}
@media screen and (max-width:1024px){
  .sect2 .law-box {}
  .sect2 .law-box::before,
  .sect2 .law-box::after {display: none;}
  .sect2 .law-box .item {width: 30%;}
  .sect2 .law-box .item .icon {width: 70px;}
}
@media screen and (max-width:768px){
  .sect2 .law-box {flex-direction: column; gap: 40px; align-items: center;}
  .sect2 .law-box .item {width: 100%; max-width: 400px; display: flex; text-align: left; gap: 30px; } 
  .sect2 .law-box .item .icon {width: 60px; margin: 0; padding-top: 10px; flex-shrink: 0;}
  .sect2 .law-box .item .tit {font-size: 17px;}
  .sect2 .law-box .item .desc {font-size: 15px;}
}
@media screen and (max-width:480px){
  .sect2 .law-box .item {gap: 24px;}
  .sect2 .law-box .item .icon {width: 48px;}
  .sect2 .law-box .item .tit {font-size: 16px;}
  .sect2 .law-box .item .desc {font-size: 14px;}
}

/* sect3 */
.sect3 {padding: 80px 0; background: url(/images/main_sect3_bg.jpg) center no-repeat; background-size: cover; }
.sect3 .profil-box {display: flex; gap: 100px; justify-content: center;}
.sect3 .profil-box .item {width: 320px;}
.sect3 .profil-box .item .img-box {font-size: 0;}
.sect3 .profil-box .item .img-box img {width: 100%;}
.sect3 .profil-box .item .info {margin-top: 20px; line-height: 1.4;}
.sect3 .profil-box .item .info .tit {font-weight: 500; display: flex; gap: 10px; align-items: baseline; font-size: 20px;}
.sect3 .profil-box .item .info .tit em {font-style: normal;  font-size: 1em;  color: #222;}
.sect3 .profil-box .item .info .tit span {color: #555; font-size:0.8em; }
.sect3 .profil-box .item .info .en {margin-top: 5px; color: #555; font-size: 16px;}
.sect3 .profil-box .item .info .mail {color: #777; font-size: 16px; padding-left: 1.5em; background-image: url(/images/icon_mail.svg); background-repeat: no-repeat; background-position: left 0.35em;  margin-top: 15px; display: block; background-size: 1em; }
.sect3 .btn-box {margin-top: 50px;}
.sect3 .btn-box a {display: flex; width: fit-content; margin: auto; background: #222; color: #fff; height: 60px; font-size: 16px; font-weight: 500; align-items: center; justify-content: center; padding: 0 50px;}
@media screen and (max-width:1024px){
  .sect3 .profil-box {gap: 80px;}
  .sect3 .btn-box a {height: 52px; padding: 0 32px;}
}
@media screen and (max-width:768px){
  .sect3 .profil-box {gap: 16px;}
  .sect3 .profil-box .item {width: calc(50% - 8px);}
  .sect3 .profil-box .item .info .tit {font-size: 18px;}
  .sect3 .profil-box .item .info .en {font-size: 14px;}
  .sect3 .profil-box .item .info .mail {font-size: 14px;}
}
@media screen and (max-width:480px){
  .sect3 .profil-box {gap: 8px;}
  .sect3 .profil-box .item {width: calc(50% - 4px);}
  .sect3 .profil-box .item .info .tit {font-size: 16px;}
  .sect3 .profil-box .item .info .en {font-size: 12px;}
  .sect3 .profil-box .item .info .mail {font-size: 13px;}
  .sect3 .btn-box a {height: 46px; padding: 0 26px; font-size: 14px;}
}

/* sect4 */
.sect4 {padding: 80px 0;}
.sect4 .service-box {display: grid; gap: 20px; grid-template-columns: repeat(3,1fr); }
.sect4 .service-box .item {position: relative; padding: 30px 35px;  box-sizing: border-box; transition: box-shadow 0.3s;}
.sect4 .service-box .item::before {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.1s; box-sizing: border-box; border: 1px solid #eee;}
.sect4 .service-box .item .text-box {position: relative; line-height: 1.4;}
.sect4 .service-box .item .text-box .arr {position: absolute; right: 0; top: 0; width: 25px; height: 25px; background-image: url(/images/icon_arrow.svg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.sect4 .service-box .item .text-box .tit {color: #222; font-size: 18px; font-weight: 500; margin-bottom: 20px; padding-right: 25px;}
.sect4 .service-box .item .text-box .desc {color: #555; font-size: 16px;}

.sect4 .service-box .item:hover {box-shadow: 4px 4px 10px rgba(0,0,0,0.2);}
.sect4 .service-box .item:hover::before {border: 3px solid #2699dd;}
@media screen and (max-width:1024px){
  .sect4 .service-box {grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width:768px){
  .sect4 .service-box {gap: 10px;}
  .sect4 .service-box .item {padding: 20px;}
  .sect4 .service-box .item .text-box .tit {font-size: 16px; margin-bottom: 1em;}
  .sect4 .service-box .item .text-box .desc {font-size: 14px;}
  .sect4 .service-box .item .text-box .arr {width: 20px; height: 20px;}
}
@media screen and (max-width:480px){
  .sect4 .service-box {grid-template-columns:repeat(1, 1fr)}
}

/* sect5 */
.sect5 {padding: 80px 0; background: url(/images/main_sect5_bg.jpg) center no-repeat; background-size: cover;}
.sect5 .inquiry-box {display: flex; gap: 20px; }
.sect5 .inquiry-box .item {width: calc(50% - 10px); height: 150px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.sect5 .inquiry-box .item:nth-child(1) {background-image: url(/images/main_sect5_img01.jpg);}
.sect5 .inquiry-box .item:nth-child(2) {background-image: url(/images/main_sect5_img02.jpg);}
.sect5 .inquiry-box .item a { width: 100%; height: 100%; padding: 30px 40px; font-weight: 500; display: flex; flex-direction: column; justify-content: space-between; align-items: start; font-size: 20px; color: #fff; box-sizing: border-box; }
.sect5 .inquiry-box .item a .tit {font-size: 1em;}
.sect5 .inquiry-box .item a .btm {font-size: 1.2em; margin-left: auto;}
@media screen and (max-width:768px){
  .sect5 .inquiry-box {flex-direction: column;}
  .sect5 .inquiry-box .item {width: 100%;}
  .sect5 .inquiry-box .item a {font-size: 18px; padding: 24px 32px;}
}
@media screen and (max-width:480px){
  .sect5 .inquiry-box .item {height: 100px;}
  .sect5 .inquiry-box .item a {font-size: 15px; padding: 18px 24px; }
}

/* sect6 */
.sect6 {padding: 80px 0 120px; }
.sect6 .map-box {display: flex; gap: 70px; align-items: center;}
.sect6 .map-box .map {width: 600px; height: 350px; overflow: hidden;}
.sect6 .map-box .map .root_daum_roughmap {width: 100%; height: 100%;}
.sect6 .map-box .map .root_daum_roughmap .wrap_map {width: 100%; height: 100%;}
.sect6 .map-box .map .root_daum_roughmap .cont {display: none;}
.sect6 .map-box .map .root_daum_roughmap .map_border {opacity: 0;}
.sect6 .map-box .addr {width: 330px;}
.sect6 .map-box .addr .item {display: flex; gap: 30px; align-items: center;}
.sect6 .map-box .addr .item + .item {margin-top: 40px;}
.sect6 .map-box .addr .item .icon {width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f4f4f4; flex-shrink: 0;}
.sect6 .map-box .addr .item .text-box {width: 100%; font-size: 16px; line-height: 1.4;}
.sect6 .map-box .addr .item .text-box .tit {font-size: 1.125em; color: #222; font-weight: 500;}
.sect6 .map-box .addr .item .text-box p {color: #333; font-size: 1em; margin-top: 0.625em;}
@media screen and (max-width:1024px){
  .sect6 .map-box {gap: 40px;}
  .sect6 .map-box .addr .item {gap: 20px;}
  .sect6 .map-box .addr .item .text-box {font-size: 15px;}
}
@media screen and (max-width:768px){
  .sect6 .map-box {flex-direction: column;}
  .sect6 .map-box .map {width: 100%; height: 300px;}
  .sect6 .map-box .addr {width: 100%;}
}
@media screen and (max-width:480px){
  .sect6 .map-box .map {height: 240px;}
  .sect6 .map-box .addr .item .text-box {font-size: 14px;}
}