@charset "utf-8";
/* 192b53 */

section .inner {width:100%; max-width:1280px; margin:0 auto; padding: 5% 0 7%;}
section .inner .main-title {font-weight: 600; font-size:34px; text-align: center;}
section .inner .main-title.last {margin-bottom: 60px;}
section .inner .main-desc {margin-top: 10px; margin-bottom: 60px; font-weight: 400; font-size: 20px; text-align: center; color:#888888}

/*  비쥬얼 배너  */
/* .visual-banner {position: relative; overflow: hidden; width:100%; height:calc(100vh - 90px); background-color: #000;} 
.visual-banner .bg-video {position: absolute; left: 0; top: 0; z-index:2; width: 100%; height: 100%; object-fit: cover;}
.visual-banner .bg-video video {width: auto; height: auto; min-width: 100%; min-height: 100%;} */

.visual-banner {
  position: relative;
  width: 100%;
  padding-top: 40px;
  overflow: hidden;
  background: #192b53;
}

/* 배너 영역 (PC 최대 1100px) */
.visual-banner .bg-video {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;   /* 가운데 정렬 */
  aspect-ratio: 16 / 9; /* 배너 비율 */
  overflow: hidden;
}

/* 영상 */
.visual-banner .bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.visual-banner .swiper {height: 100%;}
.visual-banner .swiper-wrapper {z-index: 10;}
.visual-banner .swiper-slide {background-repeat:no-repeat; background-position: center;}
.visual-banner .swiper-pagination.swiper-pagination-bullets {position: relative; width:1280px; margin:auto; bottom:80px; text-align: left;}
.visual-banner .swiper-pagination-bullets .swiper-pagination-bullet {width: 0; height: 0; margin:0 16px !important; font-family:roboto; font-weight:300; font-size:24px; color: #fff; opacity: 1;}
.visual-banner .swiper-pagination-bullets .swiper-pagination-bullet:first-child {margin-left: 0  !important;}
.visual-banner .swiper-pagination-bullets .swiper-pagination-bullet-active {position: relative; padding-left:76px; font-weight:900; color:#C5A059;}
.visual-banner .swiper-pagination-bullets .swiper-pagination-bullet-active::before {content: ""; display: inline-block; position: absolute; left: 0;  top:16px; width:70px; height:3px; background:#C5A059;}

.visual-banner .swiper-slide .content-box {opacity:0;}
.visual-banner .swiper-slide-active .content-box {opacity: 1;}
.visual-banner .content-box {display:block; position: absolute; top:7%; width:100%; margin:auto; text-align:left; }
.visual-banner .content-box strong {font-weight: 600; }
.visual-banner .content-box .top-sup-text {font-weight:300; font-size:32px; color:#fff; }
.visual-banner .content-box .top-sup-text + .title {margin-top:20px}
.visual-banner .content-box .title {color:#fff; font-weight: 600; font-size:56px; line-height: 1.4;}
.visual-banner .content-box .title + .desc-text { margin-top: 10px;}
.visual-banner .content-box .desc-text {color:#fff; font-weight: 200; font-size:32px; line-height:1.4;}
.visual-banner .content-box .bg-text {display: inline-block; font-weight:300; background:rgba(255, 255, 255, .45); padding:8px 20px; color: #000;}
.visual-banner .content-box .last-text {margin-top:7%; font-size: 28px;}

/* 
.visual-banner .slide-number1,
.visual-banner .slide-number2,
.visual-banner .slide-number3  {background: #000;}
.visual-banner .slide-number1 {background-image:url(../images/main/bn_main_02.jpg);}
.visual-banner .slide-number2 {background-image:url(../images/main/bn_main_02.jpg);}
.visual-banner .slide-number3 {background-image:url(../images/main/bn_main_02.jpg);} */

/* 상담문의 */
.counsel-section {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#498cfb+0,00c4ad+96 */
    background: #192b53; /* Old browsers */
}
.counsel-section .inner {padding: 35px 0 40px;}
.counsel-section .left-area {width: 100%;}
.counsel-section .left-area h3 {margin-bottom: 20px; font-weight:500; font-size: 32px; color: #fff; text-align: center; word-break:keep-all;}
.counsel-section .left-area .call-number {display: flex; gap: 10px; align-items: center; position: relative;}
.counsel-section .left-area .call-number p {position: relative; width: 100%; padding:8px 10px; text-align: center; border: 1px solid #898989; font-weight:300; font-size:20px; color:#fff; background: rgba(0,0,0,.2); border-radius:5px;}
.counsel-section .left-area .call-number p a {font-weight:400; }
.counsel-section .left-area .call-number p + p {margin-top:4px;}

.counsel-section .right-area {width: 100%; padding-top: 20px;}
.counsel-section .right-area .board-list ul li {padding: 5px 0; border-bottom: 0;}
.counsel-section .right-area .board-list ul li > h4 {width: 96px; padding:0;}
.counsel-section .right-area .board-list ul li > h4 label {color: #fff;}
.counsel-section .right-area .board-list ul li > h4 .ic-require {display: none;}
.counsel-section .right-area .agree-box {padding: 0;; border-bottom: 0; color: #fff; text-align:right}
.counsel-section .right-area .agree-box input[type="checkbox"] + label,
.counsel-section .right-area .agree-box .btn-link {color: #fff;}
.counsel-section .right-area .agree-box .btn-link::after {background: #fff;}

.counsel-section .right-area .board-list ul {display: flex; flex-wrap: wrap; border-top: 0;}
.counsel-section .right-area .board-list ul .item-name {width: 50%;}
.counsel-section .right-area .board-list ul .item-phone {width: 50%; padding-left:22px;}
.counsel-section .right-area .board-list ul .item-phone .after-dash:after {background-color: #fff;}
.counsel-section .right-area .board-list ul .item-content {width: 100%;}
.counsel-section .right-area .board-list ul .item-content textarea {height:90px;}

/* point section */
.point-section ul {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:-moz-box; display:flex; margin: -20px;;}
.point-section ul li {display: inline-block; width: 25%;; padding:10px;}
.point-section ul li .item {overflow: hidden; position: relative; width: 100%; padding-top: 84%; border-radius: 12px; background-position: top center; background-repeat: no-repeat; background-size: contain;}
.point-section ul li .item > .text-area {margin-top:-5px; background: #EAE4D8; padding:20px;}
.point-section ul li .item > .text-area span {display: inline-block; min-width: 100%; font-weight: 700; font-size: 17px; color: #8E5A31;}
.point-section ul li .item > .text-area p {margin-top:6px; font-weight:600; font-size: 17px;}
.point-section .btn-group {margin-top: 30px;}

.point-section ul li .item1 {background-image:url('/images/main/main_point1.jpg');}
.point-section ul li .item2 {background-image:url('/images/main/main_point2.jpg');}
.point-section ul li .item3 {background-image:url('/images/main/main_point3.jpg');}
.point-section ul li .item4 {background-image:url('/images/main/main_point4.jpg');}

/* work section */
.work-section {background:#f2f4f6;}
.work-section ul {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:-moz-box; display:flex; flex-wrap:wrap; margin: -20px;;}
.work-section ul li {display: inline-block; width:33.33%; padding:15px;}
.work-section ul li .item {display: block; position: relative; width: 100%; border-radius: 12px; overflow: hidden;}
.work-section ul li .item .bg-img {position: relative;}
.work-section ul li .item .bg-img > figure {width: 100%; height: 260px; background: #ddd;}
.work-section ul li .item .bg-img > figure img {width:100%; height: 100%;}
.work-section ul li .item  h4 {margin-bottom: 12px; font-weight: 700; font-size: 24px; color: #000;}
.work-section ul li .item > .text-area {position: relative; padding: 20px 25px; background: #ffffff;}
.work-section ul li .item > .text-area p {font-weight: 400; font-size: 18px; color:#333;}
.work-section ul li .item .btn-more {margin-top: 10px; padding: 10px 20px; font-size:16px; background-color: #192b53; color:#fff; border-radius: 3px;}

@keyframes more-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

/* 약력 */
.history-section {background:#fff;}
.history-section .inner::after {content: ""; display: block; clear: both;}

.history-wrap {display: flex; border-radius:20px; overflow: hidden; padding: 40px; background-color: #f8f7f3;}
.history-wrap .img {width: 100%; max-width:360px; margin: 0 auto;}
.history-wrap .img img {border-radius: 12px; overflow: hidden;}
.history-wrap .content {width: 100%; margin: 0 auto; padding-top: 20px; padding-left: 50px;}
.history-wrap .content .name {font-weight: 700; font-size: 28px;}
.history-wrap .content .name > span {font-weight: 500; font-size: 22px;}
.history-wrap .content .text {margin-top: 10px; font-weight: 400; font-size: 16px;}
.history-wrap .content .list {padding: 10px 0 20px;}
.history-wrap .content .list li {position: relative; padding-left:15px; font-size: 17px;}
.history-wrap .content .list li + li {margin-top: 6px;}
.history-wrap .content .list li::after {content: ""; display: block; position: absolute; top: 14px; left: 0; width: 3px; height: 3px; margin-top: -3px; background:#000; border-radius: 50%;} 
.history-wrap .content .btn-group {text-align: left;}
.history-wrap .content .btn-group .btn-gold {color: #fff;}

.youtube-wrap {display: flex; gap: 20px; margin-top: 40px;}
.youtube-wrap .video {width: 100%;}
.youtube-wrap .video .title {font-weight: 600; font-size: 20px; padding-bottom: 10px;}
.youtube-wrap .video iframe {width: 100%;}

/* 오시는길 */
.map-section {background:#f2f4f6; border: 1px solid #e9e9e9;}
.map-section .map-area {overflow: hidden; border-radius: 12px 12px 0 0;}
.map-section .office-box {z-index: 1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top: -10px; padding: 10px; border-radius: 0 0 12px 12px; background-color: #192b53;}
.map-section .office-box dl {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; padding: 10px; text-align: center; color: #fff; border-radius: 6px; background-color: rgba(255,255,255,.09);}
.map-section .office-box dl dt {width: 100%;font-size: 18px; font-weight: 500; color: #A5C7ED;} 
.map-section .office-box dl dd {font-weight:700; font-size: 20px; margin-top: 4px;}
.map-section .office-box dl dd .refer {display: block; font-size:15px; font-weight: 300;}
.map-section .office-box dl:first-child {background: radial-gradient(circle at center, #f2d7a7 0%, #e3c08d 50%, #c4a068 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3); border: 1px solid #b8955a; border-radius: 6px;}
.map-section .office-box dl:first-child dt {color: #192b53;}
.map-section .office-box dl:first-child dd {color: #192b53;}
.map-section .office-box dl:first-child dd .btn-call {margin-top: 6px; padding: 8px 15px; font-size:16px; font-weight: 400; background-color: #192b53; color:#fff; border-radius: 3px;}

    
@media all and (max-width: 1240px) {
    section .inner {max-width:100%; padding: 80px 40px 80px;}
    section .inner .main-title {font-size:32px;}

    /*  비쥬얼 배너  */
    .visual-banner {padding-top:0;}
    .visual-banner .bg-video .video {width:100%;}

    .visual-banner .swiper-pagination.swiper-pagination-bullets {width:100%; padding-left:40px;}

    /* 상담문의 */
    .counsel-section .inner {padding: 35px 40px 40px;}


    /* point section */
    .point-section ul {margin: -10px;;}
    .point-section ul li {padding:6px;}
    .point-section ul li .item > .text-area p {font-size: 18px;}


    /* work section */
    .work-section ul {margin: -10px;;}
    .work-section ul li {padding:10px;}
    .work-section ul li .item .bg-img > figure{height: 210px; }
    .work-section ul li .item .bg-img > h4 {font-size: 24px;}
    .work-section ul li .item > figure {height: 210px; }
    .work-section ul li .item > .text-area {padding:20px;}
    .work-section ul li .item > .text-area p {font-size: 16px;}
    .work-section ul li .item .btn-more {font-size: 15px;}


    /* 오시는길 */
    .map-section .office-box dl dt {font-size: 15px;}
    .map-section .office-box dl dd {font-size: 20px;}
}

@media all and (max-width:1023px) {
    /*  비쥬얼 배너  */
    .visual-banner .content-box  .title {font-size:40px;}

    .visual-banner .video {top:70px; transform: scale(1.32);}

    .counsel-section .left-area {float: none; width:100%;}
    .counsel-section .right-area {float: none; width:100%;}
    .counsel-section .left-area h3 {text-align: center;}
    .counsel-section .left-area .call-number {text-align: center; margin-bottom:24px;}
    .counsel-section .left-area .call-number p + p {margin-top:4px;}

     /* point section */
    .point-section ul {flex-wrap: wrap;}
    .point-section ul li {width:50%;}
    .point-section ul li .item > .text-area p {font-size: 16px;}

    /* 약력 */
    .history-wrap .content {display: block; padding: 30px 20px;}

    /* 오시는길 */
    .map-section .office-box {grid-template-columns: repeat(2, 1fr);}
    .map-section .office-box dl dt {font-size: 16px;} 
    .map-section .office-box dl dd {font-size:18px;}
    .map-section .office-box dl:first-child dd .btn-call {margin-left: 10px; font-size:15px;}



}
@media all and (max-width:768px) {
    section .inner {padding:60px 16px 80px;}
    section .inner .main-title {font-size:24px; line-height: 1.47; word-break: keep-all;}
    section .inner .main-title.last {margin-bottom: 40px;}
    section .inner .main-desc {margin-bottom: 40px; font-size: 15px; line-height: 1.47; word-break: keep-all;}
    
    /*  비쥬얼 배너  */
    .visual-banner .swiper-pagination.swiper-pagination-bullets {padding-left:16px;}
    .visual-banner .swiper-pagination-bullets .swiper-pagination-bullet {width: 0; height: 0; margin:0 12px !important; font-family:roboto; font-weight:300; font-size:18px; color: #fff; opacity: 1;}
    .visual-banner .swiper-pagination-bullets .swiper-pagination-bullet:first-child {margin-left: 0  !important;}
    .visual-banner .swiper-pagination-bullets .swiper-pagination-bullet-active {position: relative; padding-left:56px; font-weight:900; color:#C5A059;}
    .visual-banner .swiper-pagination-bullets .swiper-pagination-bullet-active::before {content: ""; display: inline-block; position: absolute; left: 0;  top:12px; width:50px; height:3px; background:#C5A059;}
  
    .visual-banner .video {top:90px; left:-90px; transform: scale(1.7);}
    .visual-banner .content-box .top-sup-text {font-size:20px;}
    .visual-banner .content-box .top-sup-text + .title {margin-top:10px}
    .visual-banner .content-box  .title {font-size:32px;}
    .visual-banner .content-box .desc-text {font-size:18px;}
    .visual-banner .content-box .bg-text {padding:4px 10px;}

    /* 상담문의 */
    .counsel-section .inner {padding: 35px 16px 40px;}
    .counsel-section .left-area h3 {font-size: 24px;}
    .counsel-section .left-area .call-number {display: flex; flex-wrap: wrap; gap:2px; width: 90%; margin: 0 auto;}
    .counsel-section .left-area .call-number p {width: 100%; font-size:16px;}
    .counsel-section .right-area {padding:16px 20px 24px;}

    .counsel-section .right-area .board-list ul .item-name {width: 100%;}
    .counsel-section .right-area .board-list ul .item-phone {width: 100%; padding-left:0;}
    .counsel-section .right-area .board-list ul .item-content {width: 100%;}

    /* point section */
    .point-section ul li .item {padding-top:60%;}
    .point-section ul li .item > figure {height: 160px;}
    .point-section ul li .item > .text-area {margin-top: 0; padding: 15px 16px;}
    .point-section ul li .item > .text-area span {font-size: 14px;}
    .point-section ul li .item > .text-area p {font-size: 14px;}

    /* work section */
    .work-section ul li {width:100%; padding:10px 10px 60px 10px} 
    .work-section ul li .item {display: flex; overflow: visible;}
    .work-section ul li .item .bg-img {border-radius: 12px; overflow: hidden;}
    .work-section ul li .item .bg-img > figure {width:200px; height: auto; }
    .work-section ul li .item h4 {font-size: 22px; margin-bottom: 8px;}
    .work-section ul li .item > .text-area {width: calc(100% - 10%); border-radius: 12px; overflow: hidden; position: absolute; left: 10%; top:15%; padding:16px; background: rgba(255, 255, 255, .9);}

    /* 약력 */
    .history-wrap {display: block; padding: 20px 24px 0;}
    .history-wrap .content {padding: 30px 0;}
    .history-wrap .content .name {font-size: 24px;}
    .history-wrap .content .name > span {font-size: 18px;}
    .history-wrap .content .list li {font-size: 15px;}
    .history-wrap .content .btn-group {margin: 0 auto;}

    .youtube-wrap {display: block; gap: 20px; margin-top: 40px;}
    .youtube-wrap .video {width: 100%;}
    .youtube-wrap .video + .video {margin-top: 20px;}
    .youtube-wrap .video .title {font-weight: 600; font-size: 18px; padding-bottom: 10px;}

    /* 오시는길 */
    .map-section .office-box {grid-template-columns: repeat(1, 1fr); gap: 5px;}
    .map-section .office-box dl {display: flex; flex-wrap: nowrap; flex-direction:row;}
    .map-section .office-box dl dt {width: inherit; text-align: left;}
    .map-section .office-box dl dd {flex: 1; text-align: right; margin-top: 0;}
    .map-section .office-box dl dd .refer {font-size:15px;}
    .map-section .office-box dl:first-child dd .btn-call {margin-left: 4px;}

}

@media all and (max-width:500px) {
     /*  비쥬얼 배너  */
     .visual-banner .video {top: 30%;left: -20%;transform: scale(2.5);}


}