@charset "utf-8";


::-webkit-scrollbar {width: 3px; height: 3px; z-index: -1;}
::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #B62C55, #3F297E); border-radius: 10px;}
::-webkit-scrollbar-track {background: #f0f5f9;}


/*header*/
.header {display: flex; justify-content: space-between; align-items: center; padding:0 0 50px 50px;}
.top_wrap ul {display: flex; align-items: center;}
.top_wrap .home a {display: flex; justify-content: space-between; align-items: center; width:215px; padding:20px; border:1px solid #fff; border-radius: 10px; color: #fff; transition: ease-in-out .1s;}
.top_wrap .home a:hover {background: #fff; color: #333;}

.top_wrap .apply a {display: flex; justify-content: flex-end; align-items:center; position: relative; width:350px; height: 120px; padding:25px; background: linear-gradient(180deg, #d3481d, #f7a706); clip-path: polygon(0 0, 100% 0%, 100% 100%, 25% 100%); overflow: hidden; transition: .2s ease-in-out;}
.top_wrap .apply a:hover {width:380px; padding-right: 3rem;}

.top_wrap .apply a > div p,.top_wrap .apply a > span  {color:#fff;}
.top_wrap .apply a > div p:first-child {font-size: 16px; margin-bottom:5px; font-weight: 300;}
.top_wrap .apply a > div p:last-child {position: relative; display: inline-block; font-size: 22px; font-weight: bold;}
.top_wrap .apply a > div p:last-child:before {content:""; position: absolute; left: 0; bottom:-1px; width: 0; height:1px; background: #fff; transition: .2s ease-in-out;}
.top_wrap .apply a:hover > div p:last-child:before {width: 100%;}

.top_wrap .apply a > span {display: flex; justify-content: center; align-items: center; width:33px; height:33px; background: #FFA965; border-radius: 100%; margin-left:20px;}


/*main_visual*/
.main_visual {position: relative; background:#ccc; width:100%; height:100vh; background: url("/images/musical/main_visual.jpg")center 0 no-repeat; background-size: cover !important; animation: bgZoom 5s ease-in-out forwards;}
.main_visual .title {position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align: center;}
.main_visual .title p {font-size: 2rem; font-weight: 300;}
.main_visual .title h1 {font-size: 5.5rem; font-weight: 900; margin:30px 0 20px 0;}
.main_visual .title span {position:relative; display: block; font-size: 1.5rem; letter-spacing: 10px; opacity: .3;}
.main_visual .title span:before { content: "";display: inline-block;width: 80px;height: 1px;background:rgba(255,255,255,.5);position: absolute;left: 0;top: 50%;transform: translate(0, -50%);}
.main_visual .title span:after { content: "";display: inline-block;width: 80px;height: 1px;background:rgba(255,255,255,.5); position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}

.main_visual .scroll {position: absolute; bottom:50px; left:50%; transform: translate(-50%,0); color:#fff; text-align: center;}
.main_visual .scroll a {display: block; color: #fff;}
.main_visual .scroll i {font-size:2rem;}
.main_visual .scroll span {display: block; text-align: center; font-size: .8rem; font-weight: 300;}
.main_visual .scroll span:before {content: ""; display: block; width:1px; height: 15px; background:rgba(255,255,255,.3); margin:8px auto;}


@keyframes bgZoom {
    from {
        background-size: 110%;
    }
    to {
        background-size: 100%;
    }
}




/*section*/
.section_wrap {background: url("/images/musical/sec_bg.jpg")center 0 no-repeat; width:100%; background-size:cover;}
.section {padding-top:150px;}
.sec_wrap {max-width: 1300px; margin:0 auto;}
.section .sec_wrap .title {text-align: center;}
.section .sec_wrap .title h1 {margin-bottom:90px;}
.section .sec_wrap .title .tit_s {display: block; font-size: 1.5rem; color:#FF9700; font-weight: bold; margin-bottom:30px;}
.section .sec_wrap .title h1 {color: #a6a9b8; font-size:2.65rem; font-weight:800; line-height: 3.8rem;}
.section .sec_wrap .title h1 span {display: inline-block; color:#fff;}

.cont_tit {position: relative; text-align: center; font-size: 1.8rem; font-weight: 800; margin-bottom:30px;}
.cont_tit:after {content: ""; display: block; width:20px; height:3px; background: #333; margin:15px auto;}


/*bullet*/
ul.dot_list li {line-height: 1.5;padding-left: 17px;position: relative;text-align: left}
ul.dot_list li::before {content: ""; width: 4px; height: 4px; background: #b9173d; position: absolute; left: 4px; top: 10px;}
ul.dot_list li + li {margin-top: 5px;}
ul.chk_list li {font-size: .9rem; line-height: 1.5; padding-left: 17px; position: relative; text-align: left; margin: 5px 0;}
ul.chk_list li::before {content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; padding: 2px; background: #0091ea url(/resources/images/contents/ico_check.svg) center center no-repeat; background-size: 80%; border-radius: 50%;}
ul.chk_list li + li {margin-top: 5px;}
ul.dot_list li strong {font-weight:600;}
ul.num_list > li + li {margin-top: 10px;}
ul.num_list > li {display: flex;flex-wrap: wrap;align-items: baseline;}
ul.num_list > li span.num {width: 18px;height: 18px; background: #555;border-radius: 50%;color: #fff; justify-content: center; font-size: .7rem;margin-right: 5px;text-align: center;line-height: 20px;}
ul.num_list > li span:nth-child(2) {width: calc(100% - 30px);display: inline-block;}
ul.num_list > li p {margin:5px 0 0 22px;}


/* table */
.tbl_wrap {max-width: 100%; overflow-x:auto;}
.tbl_wrap .tbl { position: relative; width: 100%; border-top:1px solid #e7e7e7;}
.tbl_wrap .tbl tr {border-bottom: 1px solid #dedede;}
.tbl_wrap .tbl tr th {padding: 20px;font-size: 1rem;font-weight: 700;background: #e7eeff;border-right: 1px solid #bfd4ff;text-align: center;white-space: nowrap;}
.tbl_wrap .tbl tr th:last-child {border-right: 0;}
.tbl_wrap .tbl tr td {padding: 15px; font-size: 1rem; color: #333; font-weight: 400; background: #fff; border-right: 1px solid #e7e7e7; text-align: center;}
.tbl_wrap .tbl tr td:last-child {border-right: 0;}
.tbl_wrap .tbl tr td .btn {display: block; padding: 15px 20px;background:#0071cd; color:#fff; border-radius: 3px; font-size: .9rem;}
.tbl_wrap .tbl tr td .btn span {position:relative; display: block;}
.tbl_wrap .tbl tr td .btn span:before {content: ""; position: absolute; display: block; width:0; height:1px; background:rgba(255,255,255,.5); left:0; bottom:-4px; transition: ease-in-out .2s;}
.tbl_wrap .tbl tr td .btn:hover span:before {width:100%;}
.tbl_wrap .tbl tr td textarea {width:100%; min-height:150px;}


/*section01*/
.section01 .sec_wrap {display: flex; justify-content: space-between; align-items: center;}
.section01 .sec_wrap .img {position: relative; max-width: 570px; overflow: hidden; margin-right:50px;}
.section01 .sec_wrap .img:before {content: "";position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width: 90%;height: 90%;background: url("/images/musical/seco1_visual02.svg")center/contain no-repeat;z-index: 9;}
.section01 .sec_wrap .img img {width: 100%; height:100%; object-fit: cover; -webkit-animation:spin 30s infinite linear;-moz-animation:spin 30s infinite linear;-ms-animation:spin 30s infinite linear;animation:spin 10s infinite linear;}
.section01 .sec_wrap .title {text-align: right;}
.section01 .sec_wrap .title h1 {margin-bottom:50px;}
.section01 .sec_wrap .title p {color:#fff;font-size: 1.2rem;font-weight: 100;line-height: 1.8rem;opacity: .9;}
.section01 .sec_wrap .title p:last-child {margin-top:20px;}

@-webkit-keyframes spin {
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    100%{-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    100%{-ms-transform: rotate(360deg);}
}
@keyframes spin {
    100%{transform: rotate(360deg);}
}

/*section02*/
.section02 ul {justify-content: space-between; margin-top:90px;}
.section02 ul li {position: relative; width:340px; height: 510px; border-radius: 20px; overflow: hidden; margin-top:70px; transition: .3s ease-in-out;}
.section02 ul li:nth-child(2):not(.popup_wrap ul li)  {margin-top:0;}
.section02 ul li:hover:not(.popup_wrap ul li) {margin-top:30px;}
.section02 ul li:nth-child(2):hover:not(.popup_wrap ul li)  {margin-top:-30px;}
.section02 ul li:hover .img img:not(.popup img) {transform: translate(-50%,-50%) scale(1.1);}
.section02 ul li .img {position: relative; width:100%; height:100%; }
.section02 ul li .img img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; height:100%; object-fit: cover; transition: .3s ease-in-out;}
.section02 ul li .name {position: absolute; left:35px; bottom:35px; display: block; color:#fff; font-size:1.75rem; font-weight: 700;}
.section02 ul li .name small {display: block; font-size:1.15rem; font-weight: 300; margin-bottom:5px;}
.section02 ul li .plus {position: absolute;top: 50px;right: 50px;z-index: 9;}
.section02 ul li .plus:before,.section02 ul li .plus:after {content: ""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background: #fff; transition: .2s ease-in-out;}
.section02 ul li .plus:before {width: 50px;height:1px;}
.section02 ul li .plus:after {width:1px;height: 50px;}

.section02 ul li:hover .plus:before,.section02 ul li:hover .plus:after{transform: translate(-50%,-50%) rotate(90deg);}


.section02 ul li .popup {position: fixed; inset: 0;background: rgba(0,0,0,.7); width: 100vw; height:100vh; z-index: 99;}
.section02 ul li .popup_wrap {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:1300px; background: #fff; border-radius: 10px; padding:50px; overflow: hidden; max-height: 90%;}
.section02 ul li .popup_wrap .close {position: absolute;right:50px;font-size: 3rem;}
.section02 ul li .popup_wrap .title {text-align: left;color: #000;border-bottom: 4px solid #000;padding-bottom: 1rem;margin-bottom: 2rem;}
.section02 ul li .popup_wrap .title h1 {color: #000;margin-bottom: 0;}
.section02 ul li .popup_wrap .title h1 span {display: inline-block; font-weight: bold; font-size:1.1rem; margin-left:15px; color: #a6a9b8;}
.section02 ul li .popup_wrap .txt {max-height:30rem;overflow-y: auto;padding-right: 2rem;width: calc(100% - 25rem);}
.section02 ul li .popup_wrap .txt h2 {margin-bottom:20px;}
.section02 ul li .popup_wrap ul,.section02 ul li .popup_wrap ul li {margin:0;}
.section02 ul li .popup_wrap ul {padding-bottom: 30px;border-bottom: 1px solid #ddd;}
.section02 ul li .popup_wrap ul li {width:auto; height: auto; font-weight: 300; margin-top:10px; font-size:1.1rem;}
.section02 ul li .popup_wrap ul li:first-child {margin-top:0;}

.section02 ul li .popup_wrap .con {justify-content: space-between;}
.section02 ul li .popup_wrap .img {width: 18rem;height: 25rem; border-radius: 10px; overflow: hidden;}
.section02 ul li .popup_wrap .img img {width: 100%; height: 100%; object-fit: cover;}


/*section03*/
.box {padding:50px; background: rgba(255,255,255,.9); border-radius: 10px;}
.tbl_wrap .tbl .gray td {background: #f5f5f5; font-weight: bold;}
.section03 .circle {display: flex; justify-content: center;}
.section03 .circle li {position: relative; display: flex;justify-content: center;align-items: center;width:250px;height: 250px;border-radius: 100%;margin-left: -1.5rem;text-align: center;font-size:1.2rem;background:#005b96;color: #fff;opacity: .8;}
.section03 .circle li:first-child {background: #009688 ;}
.section03 .circle li:last-child {background:#002896;}
.section03 .tbl td a {display: flex; justify-content: center; align-items: center; width:30px; height: 30px; padding:10px; background: #eee; border-radius: 5px; margin:0 auto; transition: .2s ease-in-out;}
.section03 .tbl td a i {font-size: .9rem;}
.section03 .tbl td a:hover {background:#d3481d; color: #fff;}

/*section04*/
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.section04 .box {background: rgba(255,255,255,.1);}
.section04 .benefit {position: relative;margin: 150px auto;display: flex;justify-content: center;align-items: center;width:560px;height:560px;}
.section04 .benefit:before {content: "";position: absolute;width:550px;height:550px;background: url("/images/musical/img_circle.svg")no-repeat center / contain; inset: 0; transform-origin: center;animation: spin 30s linear infinite;}
.section04 .benefit .title {justify-content: center;}
.section04 .benefit .title h1 {margin-bottom:0; font-size: 2.2rem !important;}
.section04 .benefit .title .tit_s {font-size:1.2rem !important; margin-bottom:10px !important;}

.section04 .benefit ul li {position: absolute; color:#fff; line-height: 2.2rem;}
.section04 .benefit ul li:first-child {top: 15%;left:50%;transform: translate(-50%,-100%);text-align: center;}
.section04 .benefit ul li:nth-child(2) {display:flex;align-items: center;top: 30%; right: 20%; transform: translate(100%, -50%);}
.section04 .benefit ul li:nth-child(3) {display:flex;align-items: center;bottom: 0; right: 25%; transform: translate(100%, -50%);}
.section04 .benefit ul li:nth-child(4) {bottom: 15%;left:50%;transform: translate(-50%,100%);text-align: center;}
.section04 .benefit ul li:nth-child(5) {display:flex;align-items: center;bottom: 0;left: 25%; transform: translate(-100%, -50%);}
.section04 .benefit ul li:last-child {display:flex;align-items: center;top: 30% ;left: 20%; transform: translate(-100%, -50%);}

.section04 .benefit ul li .img {position: relative; width:120px; height:120px; border-radius: 100%; background: #17184B; margin: auto;}
.section04 .benefit ul li:nth-child(2) .img {background: #1b1426;}
.section04 .benefit ul li:nth-child(3) .img {background: #231522;}
.section04 .benefit ul li:nth-child(4) .img {background: #12151e;}
.section04 .benefit ul li:nth-child(5) .img {background: #131931;}
.section04 .benefit ul li:last-child .img {background: #131426;}

.section04 .benefit ul li .img img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.section04 .benefit ul li span {display: block; font-weight: 200; font-size:1.35rem;}
.section04 .benefit ul li span b {display: block; font-weight: 600;}

.section04 .benefit ul li:first-child span {margin-bottom:20px;}
.section04 .benefit ul li:nth-child(2) span {margin-left:20px;}
.section04 .benefit ul li:nth-child(3) span {margin-left:20px;}
.section04 .benefit ul li:nth-child(4) span {margin-top:20px;}
.section04 .benefit ul li:nth-child(5) span {margin-right:20px;}
.section04 .benefit ul li:last-child span {margin-right:20px;}


/*section05*/
.section05 .grid {display: grid; gap: 2rem;  grid-template-columns:1fr 1fr 1fr 1fr;}
.section05 .grid li {position: relative; top:0; display: flex;justify-content: center;align-items: center;background: rgba(255,255,255,.1);border-radius: 10px; padding:4rem; flex-direction: column; transition:.2s ease-in-out;}
.section05 .grid li:hover {top:-20px;}
.section05 .grid li .img {height:65px; overflow: hidden;}
.section05 .grid li .img img {width: 100%; height: 100%; object-fit: cover;}
.section05 .grid li span {display: block; margin-top:30px; color:#fff; font-size:1.25rem; font-weight: 300; text-align: center;}


/*section06*/
.section06 .btn {display: flex; justify-content: center;}
.section06 .btn a {display: flex; justify-content: space-between;align-items: center; width: 220px;color: #fff;padding:20px;border:2px solid #fff;border-radius:10px; transition: .2s ease-in-out;}
.section06 .btn a:hover {background: #fff; color:#333;}
.section06 .btn a i {font-size: 1.2rem;}
.section06 .title {padding: 55px 0 320px 0;}


/*footer*/
.footer {padding:40px 0; background: #000; border-top:3px solid #a4aab8;}
.footer .top,.footer .bottom {justify-content: space-between;align-items: center;}
.footer .top ul li {position: relative;padding-left: 20px;margin-right: 20px;}
.footer .top ul li:before {content: "";position: absolute;top:50%;left: 0;transform: translate(0,-50%) rotate(45deg);width: 5px;height: 5px;background: rgba(255,255,255,.1);}
.footer .top ul li:first-child {padding-left:0;}
.footer .top ul li:first-child:before {display: none;}
.footer .top ul li:last-child {margin-right: 0;}
.footer .top ul li a {display: block; color: #fff; text-align: center;}
.footer .top ul li:hover a {text-decoration: underline;}

.footer .bottom {margin-top:60px;}
.footer .bottom .inform {max-width: 75%;}
.footer .bottom .inform ul {display: flex; gap:1rem 3rem; flex-wrap: wrap;}
.footer .bottom .inform ul li {display: inline-block; color: #a5abb9; font-weight: 300;}

.footer .bottom .inform ul li b {font-weight: bold; margin-right:20px;}
.footer .bottom .rel {position: relative; display: block; width: 240px; background: #1F2127; border-radius: 5px; box-sizing: border-box; transition:.2s ease-in-out;}
.footer .bottom .rel:hover {background: #2b2d36;}
.footer .bottom .rel .btn_rel {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;color:#fff;padding: 15px;font-weight: 300; }
.footer .bottom .rel .btn_rel i {font-size: 1.5rem; transition: .2s ease-in-out;}
.btn_rel.rotate i {transform: rotate(180deg); }

.footer .bottom .rel .list {position: absolute;bottom: 60px;width:100%;border-radius: 5px;overflow: hidden;}
.footer .bottom .rel .list li {border-top:1px solid #eee;}
.footer .bottom .rel .list li a {display: block; width:100%; padding:15px; color:#555; background: #fff; font-size: .9rem;  transition: .2s ease-in-out;}
.footer .bottom .rel .list li:hover a {background: #eee;}


/* scroll top */
.progress-wrap {position: fixed;right: 50px;bottom: 50px;width: 55px;height: 55px; border:2px solid #a4aab8; cursor: pointer;display: block;border-radius: 50%;z-index:9;opacity: 0;visibility: hidden;transform: translateY(15px);-webkit-transition: .2s linear;transition: .2s linear;}
.progress-wrap.active-progress {opacity: 1; visibility: visible; transform: translateY(0);}
.progress-wrap::after {content: "\EA56"; font-family: 'remixicon'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; display: block; z-index: 1; -webkit-transition: .2s linear; transition: .2s linear; color:#fff; font-size:2rem;}
.progress-wrap path {fill: none;}



@media (max-width: 1500px) {

    /*header*/
    .header {padding:0 0 3rem 3rem;}


    /*section*/
    .sec_wrap {max-width: initial; padding:0 3rem;}


    /*section01*/
    .section01 .sec_wrap .img {max-width: 500px; margin-right:1rem;}


    /*section02*/
    .section02 ul li .popup_wrap {width:90%;}


    /* scroll top */
    .progress-wrap {right:1.5%;}




}


@media (max-width: 1200px) {

    /*header*/
    .header {padding:0 0 2rem 2rem;}
    .header h1 {max-width: 350px; overflow: hidden;}
    .header h1 a {display: block;}
    .header h1 a img {width: 100%;}
    .top_wrap .apply a {width:250px; height: 100px;}
    .top_wrap .apply a:hover {width:280px; padding-right: 2rem;}
    .top_wrap .apply a > div {text-align: right;}
    .top_wrap .apply a > div p:first-child {font-size: 1rem;}
    .top_wrap .apply a > div p:last-child {font-size:1.1rem;}
    .top_wrap .apply a > span {width: auto;height: auto;background: none;margin-left: .5rem;}
    .top_wrap .home a {width: 200px; font-size: .9rem;}


    /*main_visual*/
    .main_visual {height: 85vh;}
    .main_visual .title p {font-size: 1.5rem;}
    .main_visual .title h1 {font-size: 4.5rem; margin:20px;}
    .main_visual .title span {font-size: 1.3rem;}
    .main_visual .title span:before,.main_visual .title span:after {width: 50px;}


    /*section*/
    .section .sec_wrap .title .tit_s {font-size: 1.3rem; margin-bottom:20px;}
    .section .sec_wrap .title h1 {font-size: 2.3rem; line-height: 3.3rem;}
    .section01 .sec_wrap .title p {font-size:1.1rem;}


    /*section01*/
    .section01 .sec_wrap .img {max-width:25rem;}


    /*section02*/
    .section02 ul {gap:3rem;}
    .section02 ul li {width: calc(100%/3); height: 55vh;}
    .section02 ul li .popup_wrap .img {transform: scale(1);}
    .section02 ul li .popup_wrap .txt h2 {font-size:1.3rem; margin-bottom: 15px;}
    .section02 ul li .popup_wrap ul li {font-size: 1rem;}



    /*section04*/
    .section04 .benefit,.section04 .benefit:before {width: 500px; height: 500px;}
    .section04 .benefit ul li .img {width: 100px; height: 100px;}
    .section04 .benefit ul li span {font-size: 1.2rem;}


    /*footer*/
    .footer .top,.footer .bottom .inform ul {justify-content: center;}
    .footer .top h1 {display: none;}
    .footer .bottom {flex-direction: column; gap: 2rem; margin-top:30px;}
    .footer .bottom .rel {width: 50%;}
    .footer .bottom .inform {max-width: 100%;}


}

@media (max-width: 1024px) {

    /*main_visual*/
    .main_visual {height: 60vh;}


    /*section*/
    .sec_wrap {flex-wrap: wrap; justify-content: center;}


    /*section01*/
    .section01 {padding-top:50px !important;}
    .section01 .sec_wrap .img {max-width:70%; margin: 0 auto;}
    .section01 .sec_wrap .title {text-align: center;width: 100%;}


    /*section02*/
    .section02 ul {flex-wrap:wrap; justify-content: center;}
    .section02 ul li {width: calc(100%/2 - 3rem); height: 40vh;}
    .section02 ul li:last-child {margin:0;}

    .section02 ul li .popup_wrap .img {width: 15rem; height: 20rem;}
    .section02 ul li .popup_wrap .txt {width: calc(100% - 20rem);}



    /*section04*/
    .section04 .benefit, .section04 .benefit:before {width: 400px; height: 400px;}
    .section04 .benefit .title .tit_s {font-size: 1rem !important;}
    .section04 .benefit .title h1 {font-size: 1.8rem !important; margin:0 !important;}
    .section04 .benefit ul li span {font-size: 1.1rem; line-height:1.6rem;}


    /*section05*/
    .section05 .grid {grid-template-columns:1fr 1fr 1fr;}
    .section05 .grid li {padding:3rem;}
    .section05 .grid li span {font-size: 1.1rem;}


}


@media (max-width: 920px) {

    /*header*/
    .header {display: block; padding:2rem;}
    .header h1 {margin:0 auto;}
    .top_wrap {position: absolute;bottom:0;left:0;width: 100%;}
    .top_wrap ul {display: flex;gap: 0;flex-direction: row;width: 100%;align-items: stretch;}
    .top_wrap ul li {width: 50%;}
    .top_wrap .apply a,.top_wrap .home a {display: block; width: 100%; text-align: center; border-radius: 0;}
    .top_wrap .apply a {clip-path: none;}
    .top_wrap .apply a:hover {width:auto; padding-right: 20px;}
    .top_wrap .apply a:hover div p:last-child:before {display: none;}
    .top_wrap .home a {background:#424242;border:0;font-size: 1rem;height: 100%;}
    .top_wrap .home a:hover {background:#424242; color:#fff;}
    .top_wrap .home a i {margin-left:.5rem;}
    .top_wrap .apply a {height: auto;padding:20px;background: #d3481d;display: flex;justify-content: center;}
    .top_wrap .apply a > div {text-align: center;}
    .top_wrap .apply a > div p {display: inline-block;}
    .top_wrap .apply a > div p:first-child,.top_wrap .apply a > div p:last-child  {font-weight:normal; font-size: 1rem;}
    .top_wrap .apply a > div p:first-child {margin:0;}


    /*section*/
    .sec_wrap {padding: 0 2rem;}
    .section .sec_wrap .title h1 {margin-bottom: 50px;}


    /*main_visual*/
    .main_visual .title p {font-size: 1.3rem;}
    .main_visual .title h1 {font-size: 3.5rem;}
    .main_visual .title span {font-size: 1rem;}
    .main_visual .title span:before, .main_visual .title span:after {width: 30px;}
    .scroll {display: none;}


    /*section02*/
    .section02 ul li .popup_wrap .con {flex-direction: column; align-items:center;}
    .section02 ul li .popup_wrap .img {width: 50%; height:20rem;}
    .section02 ul li .popup_wrap .txt {width: 100%; margin-top:2rem; max-height: 25rem;}


    /*section03*/
    .section03 .circle li {width: 200px; height: 200px; margin-left:-1rem; font-size: 1rem;}


    /*section04*/
    .section04 .title.sec04 {display: none;}
    .section04 .box {padding:0; background: none;}
    .section04 .benefit{width: auto; height: auto; flex-direction:column; margin:0;}
    .section04 .benefit:before {display: none;}
    .section04 .benefit .title h1 {margin-bottom: 50px !important; font-size:2.3rem !important;line-height: 3.3rem!important;}
    .section04 .benefit .title .tit_s {font-size: 1.3rem !important; margin-bottom:20px !important;}

    .section04 .benefit ul {display: grid;grid-template-columns:1fr 1fr 1fr;gap: 2rem;}
    .section04 .benefit ul li {position: relative; top:auto !important; left:auto !important; bottom:auto !important; right:auto !important; transform: translate(0,0) !important; display: flex; justify-content: center; flex-direction: column-reverse; text-align: center !important; border-radius: 10px; background: rgba(255,255,255,.1); padding:1.5rem;}

    .section04 .benefit ul li:nth-child(2),.section04 .benefit ul li:nth-child(3),.section04 .benefit ul li:nth-child(4) {flex-direction:column;}
    .section04 .benefit ul li:nth-child(5) {justify-content: flex-end;}

    .section04 .benefit ul li .img {width:auto; height: 65px; margin:0 auto 30px auto; background: none !important;}
    .section04 .benefit ul li .img img {position: relative; top:auto; left:auto; transform: translate(0,0); width:100%; height: 100%; object-fit: cover;}

    .section04 .benefit ul li:first-child span {margin-bottom:0;}
    .section04 .benefit ul li:nth-child(2) span {margin-left:0;}
    .section04 .benefit ul li:nth-child(3) span {margin-left:0;}
    .section04 .benefit ul li:nth-child(4) span {margin-top:0;}
    .section04 .benefit ul li:nth-child(5) span {margin-right:0;}
    .section04 .benefit ul li:last-child span {margin-right:0;}

    .section04 .benefit ul li span b {display: inline; margin:0 3px;}


}


@media (max-width: 768px) {

    /*header*/
    .top_wrap .apply a, .top_wrap .home a {display: flex; align-items: center; justify-content: space-between;}
    .top_wrap .apply a > div {text-align: left;}


    /*section*/
    .section .sec_wrap .title h1 {margin-bottom:30px;}
    .cont_tit {font-size:1.5rem;}
    .box {padding:30px;}


    /*section02*/
    .section02 ul {flex-direction: column; align-items: center;}
    .section02 ul li {width: 60%; height: 55vh; margin:0;}
    .section02 ul li:nth-child(2):hover:not(.popup_wrap ul li) {margin:0;}
    .section02 ul li:hover:not(.popup_wrap ul li) {margin:0;}
    .section02 ul li .plus:before {width: 40px;}
    .section02 ul li .plus:after {height: 40px;}
    .section02 ul li .popup_wrap .txt {padding-right: 1rem; margin-top:1.5rem;}


    /*section03*/
    .section03 .circle {flex-direction:column; align-items: center;}
    .section03 .circle li {width: 200px; height: 200px; margin:-.5rem;}
    .section03 .circle li:first-child {margin-top:0;}

    .section03 .img {display: block;}
    .section03 .img img {width: 100% !important;}
    .section03 .img img:first-child {margin-bottom: 2rem;}


    /*section04*/
    .section04 .benefit ul,.section05 .grid {grid-template-columns:1fr 1fr;}
    .section04 .benefit ul li {padding: 3rem 2rem;}
    .section04 .benefit ul li .img {margin:0 auto 20px auto}


    /*footer*/
    .footer .top{max-width:100%; overflow-x: auto;}
    .footer .top ul {padding-bottom: 10px;}
    .footer .top ul li {min-width: calc(100% / 4);padding-left: 10px;margin-right: 10px;}
    .footer .top ul li:before {width: 3px; height: 3px;}
    .footer .top ul li a {font-size: .9rem;}
    .footer .bottom .inform li {font-size: .9rem;}
    .footer .bottom .rel {width: 100%;}


}


@media (max-width: 520px) {


    /*main_visual*/
    .main_visual { background-position: left 0;}


    /*section*/
    .section {padding-top:100px;}
    .section .sec_wrap .title h1 {font-size: 2rem; line-height: 3rem;}


    /*section01*/
    .section01 .sec_wrap .img {max-width:100%;}


    /*section02*/
    .section02 ul {margin-top:50px;}
    .section02 ul li {width: 80%; height: 45vh; margin-top:0;}
    .section02 ul li .popup_wrap .title h1 span {font-size: 1rem; margin-left: 10px;}


    /*section03*/
    .section03 .circle li {margin:-1rem 0;}
    .section03 .circle li:first-child {margin-top:0;}


    /*section04*/
    .section04 .benefit ul,.section05 .grid {gap:1rem;}
    .section04 .benefit ul li span,.section05 .grid li span {font-size: 1rem;}


    /*footer*/
    .footer .bottom {gap:0;}

}


@media (max-width: 450px) {

    /*header*/
    .top_wrap ul {flex-wrap: wrap;flex-direction: column-reverse;}
    .top_wrap ul li {width: 100%;}


    /*main_visual*/
    .main_visual { height: 60vh;}
    .main_visual .title p {font-size: 1.1rem;}
    .main_visual .title h1 {font-size: 3rem;}


    /*section*/
    .section .sec_wrap .title .tit_s {font-size: 1.1rem; margin-bottom:10px;}
    .section .sec_wrap .title h1 {font-size:1.8rem; line-height: 2.8rem;}
    .cont_tit {font-size:1.3rem;}


    /*table*/
    .tbl_wrap .tbl tr th,.tbl_wrap .tbl tr td {padding:10px; font-size:.9rem;}


    /*section01*/
    .section01 .sec_wrap .title p {font-size: 1rem;}


    /*section02*/
    .section02 ul li {width: 90%;}
    .section02 ul li .popup_wrap ul {padding-bottom:20px;}
    .section02 ul li .popup_wrap ul li {font-size: .9rem;}
    .section02 ul li .popup_wrap .txt h2 {margin-top: 20px !important;}


    /*section04*/
    .section04 .benefit ul li {padding:1.5rem;}
    .section04 .benefit ul li .img {height:50px;}
    .section04 .benefit .title h1 {margin-bottom: 30px !important;}
    .section04 .benefit .title .tit_s {margin-bottom:10px !important;}


    /*footer*/
    .footer .bottom .inform ul {gap:1rem; flex-direction:column;}



}




@media (max-width: 430px) {

    /*main_visual*/
    .main_visual {height: 75vh;}


    /*section*/
    .tbl_wrap .tbl tr th,.tbl_wrap .tbl tr td {font-size: .9rem;}


    /*section02*/
    .section02 ul li .popup_wrap {padding:40px; max-height: 95%;}
    .section02 ul li .popup_wrap .close {right:40px; font-size: 2rem;}
    .section02 ul li .popup_wrap .img {width: 55%;height: 12rem;}
    .section02 ul li .popup_wrap .txt {max-height:20rem;}

    .section02 ul li .popup_wrap ul li {margin-top:5px;}
    .section02 ul li .popup_wrap .txt h2 {font-size: 1.2rem; margin-bottom: 10px;}


    /*section04*/
    .section04 .benefit .title .tit_s {font-size: 1.1rem !important;}
    .section04 .benefit .title h1 {font-size:1.8rem !important; line-height: 2.8rem !important;}
    .section04 .benefit ul {grid-template-columns:1fr;}
    .section04 .benefit ul li {flex-direction:row-reverse !important; align-items: center; justify-content: flex-start;}
    .section04 .benefit ul li .img {margin:0 1rem 0 0; width:50px; height:auto;}
    .section04 .benefit ul li .img img,.section05 .grid li .img img {object-fit: contain;}
    .section04 .benefit ul li span {text-align: left; max-width:calc(100% - 70px);}

    .section04 .benefit ul li:nth-child(2),.section04 .benefit ul li:nth-child(3),.section04 .benefit ul li:nth-child(4) {flex-direction:row !important;}
    .section04 .benefit ul li:last-child {justify-content: flex-end;}


    /*section05*/
    .section05 .grid li {justify-content: center; align-items: center; padding: 1.5rem;}
    .section05 .grid li .img{margin:0 auto;width: auto;height: 40px;}
    .section05 .grid li span {margin-top:10px;}


    /*section06*/
    .section06 {padding-top:50px;}
    .section06 .btn a {width: 100%; border:1px solid #fff; border-radius:5px; padding:17px; font-size:.9rem;}
    .section06 .title {padding:50px 0 200px 0;}


    .progress-wrap.active-progress {display: none;}




}



@media (max-width: 390px) {

    /*main_visual*/
    .main_visual {height: 65vh;}


    /*section*/
    .section {padding-top:70px;}


}