@charset "utf-8";

main.service_infomation section{padding: 100px 0;}
main.service_infomation section .section_wrapper{}
main.service_infomation section .section_wrapper > img{margin: 0 auto;}
main.service_infomation section .section_wrapper p{text-align: center;}
main.service_infomation .section1{background-color: #3d72e2; padding: 100px 0;}
main.service_infomation .section1 .section_wrapper img{width: 330px; margin-bottom: 20px;}
main.service_infomation .section1 .section_wrapper h2{margin-bottom: 40px;}
main.service_infomation .section1 .section_wrapper p{color: #fff; font-size: 20px; text-align: center; margin: 20px 0;}

main.service_infomation .section1 .area{ background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  width: 100%;}
main.service_infomation .section1 .circles{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
main.service_infomation .section1 .circles li{position: absolute;display: block;list-style: none;width: 20px;height: 20px;background: rgba(255, 255, 255, 0.2);animation: animate 25s linear infinite;bottom: -150px;}
main.service_infomation .section1 .circles li:nth-child(1){left: 25%;width: 80px;height: 80px;animation-delay: 0s;}
main.service_infomation .section1 .circles li:nth-child(2){left: 10%;width: 20px;height: 20px;animation-delay: 2s;animation-duration: 12s;}
main.service_infomation .section1 .circles li:nth-child(3){left: 70%;width: 20px;height: 20px;animation-delay: 4s;}
main.service_infomation .section1 .circles li:nth-child(4){left: 40%;width: 60px;height: 60px;animation-delay: 0s;animation-duration: 18s;}
main.service_infomation .section1 .circles li:nth-child(5){left: 65%;width: 20px;height: 20px;animation-delay: 0s;}
main.service_infomation .section1 .circles li:nth-child(6){left: 75%;width: 110px;height: 110px;animation-delay: 3s;}
main.service_infomation .section1 .circles li:nth-child(7){left: 35%;width: 150px;height: 150px;animation-delay: 7s;}
main.service_infomation .section1 .circles li:nth-child(8){left: 50%;width: 25px;height: 25px;animation-delay: 15s;animation-duration: 45s;}
main.service_infomation .section1 .circles li:nth-child(9){left: 20%;width: 15px;height: 15px;animation-delay: 2s;animation-duration: 35s;}
main.service_infomation .section1 .circles li:nth-child(10){left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;}


main.service_infomation .section2{padding: 0;}
main.service_infomation .section2 h2{font-size: 48px; font-weight: bold; text-align: center;}
main.service_infomation .section2 p{color: #737373; font-size: 20px; text-align: center; margin: 20px 0;}
main.service_infomation .section2 #videoWrapper {height: 100%;overflow: hidden;position: relative;}
main.service_infomation .section2 #videoWrapper video {position: absolute;min-width: 100%;min-height: 100%;width: auto;height: auto;object-fit: cover; z-index: -100;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}
main.service_infomation .section2 #videoWrapper .caption {display: flex;justify-content: center;align-items: center;height: 100%;background-color: rgba(0, 0, 0, 0.3);}
main.service_infomation .section2 #videoWrapper .caption .contents {width:50%;color: #fff;text-align: center;padding: 2rem;background-color: rgba(0, 0, 0, 0.8);}


main.service_infomation .section3{background-color: #fff;}
main.service_infomation .section3 .section_wrapper h2{font-size: 48px; text-align: center; font-weight: bold;}
main.service_infomation .section3 .section_wrapper p{text-align: center; margin: 20px 0 50px; font-size: 18px;}
main.service_infomation .section3 .element{padding: 10px;background: #5b97f4; color: white;margin: 10px 0;border-radius: 5px;}
main.service_infomation .section3 .element .question{display: flex;justify-content: space-between;padding: 10px;}
main.service_infomation .section3 .question h3{font-family: sans-serif;font-weight: bold;text-transform: capitalize;font-size: 17px;text-align: center;}
main.service_infomation .section3 .question button{border: none;outline: none;background: none;cursor: pointer;color: #fff;}
main.service_infomation .section3 .question i{color: white;font-size: 20px;}
main.service_infomation .section3 .element .answer{padding: 10px 20px;animation: questionAnimate .7s;}
main.service_infomation .section3 .answer p{}
main.service_infomation .section3 .hideText{display: none;}
main.service_infomation .section4{background-color: #5d6af2;}
main.service_infomation .section4 .section_wrapper{text-align: center;}
main.service_infomation .section4 .section_wrapper p{margin: 20px 0 70px; color: #e3e3e3; font-size: 24px;}
main.service_infomation .section4 .section_wrapper .btn-a{padding: 20px; border-radius: 15px; background-color: #fff; color: #4545ff; font-weight: bold;}

main.solutions_process section{padding: 100px 0;}
main.solutions_process .section1{}
main.solutions_process .section1 .section_wrapper{}
main.solutions_process .section1 .section_wrapper .top-wrapper{height: 500px; position: relative; margin-bottom: 150px;}
main.solutions_process .section1 .section_wrapper .bg{height: 500px;position: relative;overflow: hidden;}
main.solutions_process .section1 .section_wrapper .bg img{ animation: bgs5 2.5s;animation-fill-mode: both;position: absolute; left: 0;top: 0;width: 100%;height: 100%; filter: brightness(50%); object-fit: cover;-o-object-fit: cover;transform: scale(1.15);}
main.solutions_process .section1 .section_wrapper .title-box{position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;text-align: center;}
main.solutions_process .section1 .section_wrapper .title-box .txt-ani{font-size: 66px; text-align: center; font-weight: bold; color: #fff;}
main.solutions_process .section1 .section_wrapper .title-box .txt-ani span{animation: ani_3 0.8s 0.3s;animation-fill-mode: both;opacity: 0;}
main.solutions_process .section1 .section_wrapper .title-box p{text-align: center; margin: 20px 0 50px; font-size: 30px; color: #fff; font-weight: bold;}
main.solutions_process .section1 .section_wrapper .wide{}
main.solutions_process .section1 .section_wrapper .wide ul{display: flex;align-items: center;padding: 0;flex-wrap: wrap;margin-bottom: 90px; opacity: 0; transition: opacity 1s ease-out;}
main.solutions_process .section1 .section_wrapper .wide ul:first-child{opacity: 1;}
main.solutions_process .section1 .section_wrapper .wide ul li{}
main.solutions_process .section1 .section_wrapper .wide ul li.left-box{flex: 1 1 auto;}
main.solutions_process .section1 .section_wrapper .wide ul li .wide-tit{font-size: 20px;font-weight: 600;letter-spacing: -0.06em;line-height: 1.2;color: #2056A7;margin-top: 15px;}
main.solutions_process .section1 .section_wrapper .wide ul li .wide-txt{font-size: 28px;font-weight: 600;letter-spacing: -1.95px;line-height: 1.35;color: #121212;margin-top: 7px;}
main.solutions_process .section1 .section_wrapper .wide ul li .wide-sub{font-size: 22px;font-weight: 400;letter-spacing: -1.5px;line-height: 1.3;color: #6C6D6F;margin-top: 18px;}
main.solutions_process .section1 .section_wrapper .wide ul li.right-box{text-align: right;}
main.solutions_process .section1 .section_wrapper .wide ul li .number{font-size: 20px;font-weight: bold;letter-spacing: -0.06em;line-height: 1.2;color: #fff;background: #3A85E3;border-radius: 30px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;}
main.solutions_process .section1 .section_wrapper .wide ul li.right-box .number-box{display: flex; justify-content: flex-end;}


main.solutions_process .section2{background-color: #f6f9ff;}
main.solutions_process .section2 .section_wrapper{}
main.solutions_process .section2 .section_wrapper > h2{font-size: 48px; text-align: center; font-weight: bold;}
main.solutions_process .section2 .section_wrapper > h2 span{color: #2056a7;}
main.solutions_process .section2 .section_wrapper .img-box{display: flex; max-width: 760px; margin: 0 auto; padding-top: 50px;}
main.solutions_process .section2 .section_wrapper .img-box .img-card{width: 33.3%; text-align: center;}
main.solutions_process .section2 .section_wrapper .img-box .img-card img{width: 150px; margin: 20px auto; border-radius: 50%;}
main.solutions_process .section2 .section_wrapper .img-box .img-card span{font-size: 18px; letter-spacing: -1.5px; line-height: 23px; margin-top: 14px; color: #121212;}

main.sample_introduction{min-height: 100vh; background-image: linear-gradient(#f7faff 0%, #f0fff4 50%, #fffee2 100%);}
main.sample_introduction section{padding: 100px 0;}
main.sample_introduction .section1 .section_wrapper{}
main.sample_introduction .section1 .section_wrapper > h2{font-size: 48px; text-align: center; font-weight: bold;}
main.sample_introduction .section1 .section_wrapper > p{text-align: center; margin: 20px 0 50px; font-size: 18px;}
main.sample_introduction .section1 .section_wrapper .card_wrapper{display: flex; flex-wrap: wrap; padding: 0 20px;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card{margin: 30px; box-sizing: border-box;   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);text-align: center;background-color: #f1f1f1;transition: 0.3s;border-radius: 10px;display: flex;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card:hover{  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.4);}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .box {flex: 1;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .left_box iframe{width: 100%; height: 100%;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .right_box{display: flex; flex-direction: column;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .right_box .top,
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .right_box .bottom{flex: 1;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .right_box .bottom{padding: 15px;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card .right_box img{width: 100%; height: 100%; object-fit: cover;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card h3{font-size: 24px; font-weight: bold; margin: 10px 0; text-align: left;}
main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card p{font-size: 16px; text-align: left;}


main.noticeList{padding-bottom: 150px;}
main.noticeList .notice_header{background-color: #bfc4d2; height: 292px; display: flex; align-items: center;}
main.noticeList .notice_header h2{color: #fff; font-size: 40px; font-weight: bold;}
main.noticeList .notice_header p{color: #fff; font-size: 22px;}
main.noticeList .notice_middle{height: 78px; background-color: rgb(243, 243, 247);margin-bottom: 125px;display: flex;}
main.noticeList .notice_middle .tab{display: flex;height: 100%;-webkit-box-align: center;align-items: center;gap: 148px;width: 100%;}
main.noticeList .notice_middle .tab .tablinks{font-size: 20px; cursor: pointer;color: rgb(94, 102, 141);}
main.noticeList .notice_middle .tab .tablinks.active{font-weight: bold;color: #000;border-bottom: 1px solid #000;}
main.noticeList .notice_content{display: none;}
main.noticeList .title_box{padding-bottom: 25px; border-bottom: 1px solid rgb(212, 219, 226);}
main.noticeList .title_box h3{font-size: 26px; color: #000;}
main.noticeList .content_box ul li > button{width: 100%;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center;padding: 28.5px 0px;border-bottom: 1px solid rgb(212, 219, 226); cursor: pointer;}
main.noticeList .content_box ul li button .type{min-width: 68px;font-size: 18px;letter-spacing: -0.45px;color: rgb(94, 102, 141);margin-right: 59px;white-space: nowrap;text-align: left;}
main.noticeList .content_box ul li button .content_wrp{display: flex;width: 100%;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center;}
main.noticeList .content_box ul li button .content_wrp .title{font-size: 18px;letter-spacing: -0.45px;text-align: left;}
main.noticeList .content_box ul li button .content_wrp .date{font-size: 16px;letter-spacing: -0.4px;color: rgb(87, 87, 87)}
main.noticeList .content_box ul li button .material-icons{margin-left: 56px !important;width: 20px !important; color: #677294;}
main.noticeList .content_box ul li .toggleArea{width: 100%;padding: 75.5px 0px;border-bottom: 1px solid rgb(212, 219, 226);}
main.noticeList .content_box ul li .toggleArea p{white-space: pre-line;font-size: 18px;line-height: 35px;letter-spacing: -0.45px;}

main.blogList{padding: 100px 0;}
main.blogList .section_wrapper > h2{font-size: 48px; text-align: center; font-weight: bold;}
main.blogList .section_wrapper > p{text-align: center; margin: 20px 0 50px; font-size: 18px;}
main.blogList .section_wrapper #dataList{}
main.blogList .section_wrapper #dataList ul{display: flex; flex-wrap: wrap;}
main.blogList .section_wrapper #dataList ul li{width: calc(33.33% - 20px); margin: 10px;background-color: white;box-shadow: 0 8px 16px rgba(black, .45);}
main.blogList .section_wrapper #dataList ul li form{display: block;}
main.blogList .section_wrapper #dataList ul li form .card{width: 100%;}
main.blogList .section_wrapper #dataList ul li form .card .card-img-container{overflow: hidden;position: relative;background-color: #262626;}
main.blogList .section_wrapper #dataList ul li form .card .card-img-container .card-img{transition: .45s ease all;display: flex;flex-direction: column;justify-content: space-between;background-position: center;background-size: 150%;height: 460px;width: 460px;padding: 30px;color: white;}
main.blogList .section_wrapper #dataList ul li form .card .card-img-container .card-img .date{-webkit-font-smoothing: antialiased;text-transform: uppercase;font-weight: 700;font-size: 14px;position: relative;}
main.blogList .section_wrapper #dataList ul li form .card .card-img-container .card-img h1{-webkit-font-smoothing: antialiased;font-weight: normal;font-size: 36px;margin: 0;position: relative;}
main.blogList .section_wrapper #dataList ul li form .card .card-img-container:hover .card-img{background-size: 175%;}


main.blogView{padding: 100px 0;}
main.blogView .section_wrapper{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);padding: 40px;box-sizing: border-box;border-radius: 10px; min-height: 500px;}
main.blogView .section_wrapper .blog-detail h2{font-size: 56px; text-align: center; font-weight: bold; margin: 50px 0;}
main.blogView .section_wrapper .blog-detail p{text-align: center; margin: 20px 0 50px; font-size: 18px; color: #000;}
main.blogView .section_wrapper .blog-detail .img-box{margin-bottom: 55px;}
main.blogView .section_wrapper .blog-detail img{width: 100%;}
main.blogView .section_wrapper .blog-detail p.sm-txt{color: #666;}
main.blogView .section_wrapper .blog-detail p.mn-txt{color: #000; font-size: 20px;}
main.blogView .section_wrapper .blog-detail .video-area{height: 500px;}
main.blogView .section_wrapper .blog-detail .video-area iframe{width: 100%; height: 100%;}
main.blogView .section_wrapper .blog-detail .list-box{margin: 100px 0;}
main.blogView .section_wrapper .blog-detail .list-box h3{font-size: 30px; color: #000; font-weight: bold; margin-bottom: 15px;}
main.blogView .section_wrapper .blog-detail .list-box span{font-size: 24px;}
main.blogView .section_wrapper .blog-detail .list-box ul{margin-top: 20px;}
main.blogView .section_wrapper .blog-detail .list-box ul li{font-size: 20px; margin-bottom: 5px;}
main.blogView .section_wrapper .blog-detail .comments-area{margin-top: 100px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-top{font-size: 24px; border-bottom: 2px solid #000; font-weight: bold; padding-bottom: 8px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body{margin: 25px 0; border-bottom: 1px solid #e1e1e1;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body ul li{display: flex; margin: 25px 0;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body .left-body{width: 50px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body .left-body img{border-radius: 50%;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body .right-body{padding-left: 15px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body .right-body .nickname{margin: 0; text-align: left; font-weight: bold;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-body .right-body .contents{margin: 0; color: #333; font-size: 16px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-foot{margin: 50px 0; border: 1px solid #000; display: flex; align-items: center; justify-content: center; padding: 50px 0; border-radius: 10px;}
main.blogView .section_wrapper .blog-detail .comments-area .comments-foot p{margin: 0;}

@keyframes line {
0% {
    height: 0;
}

100% {
    height: calc(100% - 10px);
}
}
@keyframes fadeIn {
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(20px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(-20px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

@keyframes questionAnimate{
  from{
      opacity: 0;
      transform: scale(0.6);
  }
  to{
      opacity: 1;
      transform: scale(1);
  }
}

@keyframes bgs5{
  0% {
    transform: scale(1.15);
}
100% {
    transform: scale(1.00);
}
}

@keyframes ani_3{
  0% {
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
}