@import url("https://webfontworld.github.io/gmarket/GmarketSans.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");

.quick-btn_wrap{
    position: fixed;
    bottom: 10%;
    right: 4%;
    z-index: 1010;
}

.q-global-menu {
    position: fixed;
    top: 3%;
    right: 4%;
}
.q-global-menu .global-btn {
    width: 7.4rem;
    height: 7.4rem;
    background: #68b0dc;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255, 0.8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
}
.global-menu_list {
    display: none;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    width: 9rem;
    background: #142537;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5rem;
    padding: 2.5rem 1.5rem;
    z-index: 10;
}
.global-menu_list li a {
    display: flex;
    padding: 0.8rem 0;
    align-items: center;
    justify-content: center;
}
.global-menu_list li a span{
    padding-left: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: -1px;
}

.top-btn {
    z-index: 1010;
    width: 7.4rem;
    height: 7.4rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    cursor: pointer;
}

/*@media screen and (max-width:1080px){
    .home-btn img{
        max-width:9rem;
        width:10vw;
    }
}*/

section {
    background: #fff;
}
.pb-0{
    padding-bottom:0 !important;
}
.pt-0{
    padding-top:0 !important;
}
*{
    box-sizing: border-box;
    font-family:'noto sans kr', sans-serif !important;
}
.d-flex{
    display:flex;
}
.justify-content-start{
    justify-content: flex-start;
}
.justify-content-center{
    justify-content: center;
}
.justify-content-end{
    justify-content: end;
}
.align-items-center{
    align-items: center;
}
.align-items-start{
    align-items: flex-start;
}
.align-items-end{
    align-items: flex-end;
}

.b-bg {
    background-color: #f5f6fa;
}

.b-bg2 {
    background-color: #142537;
}
.b-bg2 *{
    color: #fff;
}

.grid6 ul{
    grid-template-columns: repeat(6, 1fr);
}
.grid4 ul{
    grid-template-columns: repeat(4, 1fr);
}

.grid-list ul{
    display:grid;
}

.text-center{
    text-align: center;
}
/*이미지 모바일+PC표기*/
.hide-768 {
    display: block !important;
}
.hide-420 {
    display: block !important;
}
.hide-360 {
    display: block !important;
}
.i-hide-420 {
    display: inline !important;
}

.show-420 {
    display: none !important;
}
.show-360 {
    display: none !important;
}
.view-768 {
    display: none !important;
}

@media (max-width: 768px) {
    .hide-768 {
        display: none !important;
    }
    
    .view-768 {
        display: block !important;
    }
    .top-btn {
        display:none;
    }
}
@media (max-width: 420px) {
    .hide-420,
    .i-hide-420 {
        display: none !important;
    }
    .show-420 {
        display: block !important;
    }
}
@media (max-width: 360px) {
    .hide-360 {
        display: none !important;
    }
    .show-360 {
        display: block !important;
    }
}
/* 서브 탑 비주얼 */
.sub-visual {
    position: relative;
    height: 55rem;
}
.sub-visual .img {
    /* background: #000; */
    height: 100%;
}
.sub-visual .img img {
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
}

.sub-visual .txt {
    position: absolute; 
    top:50%;
    left: 50%; 
    transform: translate(-50%,-50%);
    text-align: center;
    width: 100%;
    padding-inline: 5%;
    padding-top: 5rem;
}

.sub-visual .txt h2 {
    font-size: 4.8rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.5rem;
}
.sub-visual .txt p {
    font-size: max(18px,2.4rem);
    font-weight: 200;
    color: #fff;
}

@media screen and (max-width:768px){
    .sub{
        overflow: hidden;
    }
    .sub-visual .txt p img{
        width:70vw;
        max-width: fit-content;
    }
}

/* 섹션 타이틀 */
.b-title {
    text-align: center;
}

.b-title + .b-title {
    margin-top: 5rem;
}

.b-title .big-tit {
    font-size: 4.3rem;
    font-weight: 700;
}

.b-title .caption-box{
    color:#fff;
    background-color: var(--point);
    padding: 0.5rem 3rem;
    border-radius: 20rem;
    font-size: 2.4rem;
    font-weight: 500;
    margin-top: 3rem;
    display:inline-block;
}

.b-title .big-tit .thin {
    display: block;
    font-weight:200;
}
.b-title .sm-tit {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 5rem;
}
.b-title .lg-tit{
    font-size:3rem;
    margin-top:5rem;
    font-weight:500;
}
.b-title + .big-txt {
    font-size: 4rem;
    text-align: center;
    margin-top: 9rem;
    color: var(--point2);
}
.b-title + .big-txt b {
    font-weight: 700;
}

.b-title .lg-tit.mt-0 + .big-tit{
    margin-top: 3rem;
}

.b-cont {
    padding-block: 18rem;
    overflow: hidden;
}
@media (max-width:1080px) {
    .b-cont {
        padding-block: 14rem;
    }
    .b-title .big-tit {
        font-size: 5rem;
        padding-inline:3%;
    }
    .b-title .sm-tit {
        font-size: max(20px,2.8rem);
        text-align: left;
        padding-inline:3%;
    }
    .b-title + .big-txt br,
    .b-title .sm-tit br{
        display: none;
    }
    
    .b-title + .big-txt {
        font-size: 3rem;
    }
    .b-title .lg-tit{
        font-size:4rem;
    }
}
@media (max-width:768px) {
    .b-cont {
        padding-block: 8rem;
    }
    .b-round-box .box .img{
        max-width:60px;
        max-height:60px;
    }
    .b-title .big-tit {
        font-size: 3.7rem;
        letter-spacing: -0.05rem;
    }
    .b-title .sm-tit {
        font-size: max(16px,2.2rem);
        text-align: center;
        letter-spacing: -0.05rem;
        margin-top: 3.5rem;
    }
    .b-title .lg-tit{
        font-size:3.2rem;
    }
    .b-title .big-tit .thin {
        font-size:3.4rem;
        margin-bottom:1.5rem;
    }
    .b-title + .b-title{
        margin-top:4.5rem;
    }
}

/*  */
.b-round-box {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    margin-top: 5rem;
}
.b-round-box .swiper-wrapper {
    justify-content: center;
}
.b-round-box .box{
    padding: 1rem ;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    background: #ebf4fb;
    border-radius: 10rem;
    width: min(380px,30%);
    margin-inline: 1rem;
}
.b-round-box .box p {
    font-size: 1.6rem;
    font-weight: 500;
    padding-left: 1rem;
    text-align: left;
}

.point-blue{
    color: var(--point2);
}

@media (max-width:1400px) {
    .b-round-box .box p {
        padding-left: 5%;
    }
}
@media (max-width:1080px) {
    .b-round-box .box {
        width: auto;
        margin-inline: 0;
    }
    .b-round-box .swiper-wrapper {
        justify-content: flex-start;
    }
}

@media screen and (max-width:480px){
    .b-round-box .box p{
        padding-left:3%;
        font-size:3vw;
    }
}


/* 빌딩 층 */
.b-building {
    padding-block: 13rem 0rem;
    position: relative;
    overflow: hidden;
}
.b-building .tit-box{
    margin-bottom:8rem;
}

.b-building .txt {
    padding-top: 10rem;
    position: relative;
    z-index: 4;
}
.b-building .txt h2 {
    font-size: 6rem;
    letter-spacing: -1px;
}
.b-building .txt h2 b {
    font-size: 2.5em;
    line-height:1;
    color: var(--point2);
    font-weight: 500;
}
.b-building .tit-box p{
    color:var(--point2);
    font-size: 5.3rem;
    font-weight: 300;
    margin-top: 1rem;
}


.b-building .txt > ul > li {
    display: flex;
    flex-flow: row wrap;
}
.b-building .txt ul > li > span {
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background: var(--point);
    color: #fff;
    border-radius: 50%;
    font-size: 2rem;
}
.b-building .txt ul > li.building-on > span {
    background: var(--point2);
}
.b-building .txt ul ul {
    padding: .5rem 0 2rem 2.5rem;
}
.b-building .txt ul ul h3 {
    font-size: 3rem ;
    font-weight: 500;
    letter-spacing: -1px;
}
.b-building .txt ul ul h3.point-blue {
    color: var(--point2);
}
.b-building .txt ul ul p {
    font-size: 2rem;
    font-weight: 300;
}
.b-building .img.hide-768 {
    width: 55%;
    height:73%;
    position: absolute; 
    bottom:2rem; 
    right:0;
    background: url(../../theme/frandeer-v2/img/m4_1.png) no-repeat left bottom / 100% 70%;
    display: flex !important;
    align-items: flex-end;
}
.b-building .img img {
    max-width: 90%;
    max-height: 100%;
    margin-left: 10%;
    object-fit: contain;
}
@media (max-width:1700px) {
    .b-building .img {
        width: 58%;
        background: url(../../theme/frandeer-v2/img/m4_1.png) no-repeat left bottom / 100% 38vw;
    }
}
@media (max-width:1080px) {
    .b-building {
        display: flex;
        flex-flow: column wrap;
    }
    .b-building .img {
        position: static;
        order:1;
        width: 96%;
        margin: 0 0 0 auto ;
        background: url(../../theme/frandeer-v2/img/m4_1.png) no-repeat left bottom / 100% 60%;
    }
    .b-building .inner {
        order:1;
    }
}

@media (max-width:768px) {
    .b-building .img {
        width: 100%;
        margin-top: 4rem;
    }
    .b-building .txt {
        padding-top: 5rem;
        position: relative;
        z-index: 4;
    }
    .b-building .img.hide-768{
        display: none !important;
    }
    .b-building .txt h2{
        font-size: 4.5rem;
    }
    .b-building .txt ul ul p {
        letter-spacing: -1px;
    }
    .b-building .tit-box p{
        font-size: 4rem;
    }
    .b-building .tit-box{
        margin-bottom: 5rem;
    }
}
@media (max-width:420px) {
    .b-building .txt ul ul h3 {
        font-size: 2.6rem;
    }
}

.b-cont3 .b-title{
    text-align: left;
    margin-bottom: 8rem;
}
.b-cont3 .b-title .pt-bg-blue{
    background-color: var(--point2);
    color: #fff;
    padding: 0.2% 0.7%;
    font-weight: 700;
}
.b-cont3 .b-title .sm-tit{
    font-weight: 600;
    font-size: clamp(2.4rem, 3.4vw, 3.4rem);
    letter-spacing: -2px;
}
.b-cont3 .b-title .sm-tit .point-blue{
    color: #7db5e4;
    font-weight: inherit;
}

.b-cont3 .b-title .big-tit{
    margin-top: 2rem;
    font-weight: 600;
    letter-spacing: -2px;
}

.b-cont3 .bottom{
    background-color: #64a9e0;
    color: #fff;
}

.b-cont3 .bottom .inner3{
    padding-block: 4rem;
}

.b-cont3 .bottom .inner3 .inner{
    position: relative;
}

.b-cont3 .bottom .inner3 .inner .img{
    position: absolute;
    right: 0;
    bottom: -7rem;
}

.b-cont3 .bottom .career-list{
    font-size: clamp(2.0rem, 3.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -1px;
}

.b-cont3 .bottom .career-list .career-tit{
    font-size: clamp(3.6rem, 6.2vw, 3rem);
    font-weight: 600;
    margin: 1.5rem 0;
    border-left: 0.8rem solid #fff;
    padding-left: 1.5rem;
    line-height: 1;
}

.b-cont3 .bottom .career-list .space{
    margin-top: 3rem;
}

.b-cont3 .bottom .career-list .list-wrap{
    padding: 1.5rem 0;
}
@media screen and (max-width:1480px){
    .b-cont3 .bottom .inner3 .inner .img img{
        max-width: fit-content;
        width: 45vw;
    }
}

@media screen and (max-width:1080px){
    .b-cont3 .b-title .sm-tit{
        padding-left: 0;
    }
    .b-cont3 .top .b-title .big-tit{
        padding-inline: 0;
    }
}

@media screen and (max-width:768px){
    .b-cont3 .b-title .big-tit{
        font-size:3.5rem;
    }
    .b-cont3 .b-title .sm-tit {
        text-align: left; 
    }
    .b-cont3 .bottom .inner3,
    .b-cont3 .bottom .inner3 .inner{
        padding-inline:0;
    }
    .b-cont3 .bottom .inner3 .inner{
        display: flex;
        flex-direction: column-reverse;
        gap: 4rem;
    }
    .b-cont3 .bottom .inner3 .inner .img{
        position: static;
        margin-top: -20rem;
        text-align: right;
        border-bottom: 1px solid #fff;
        display: flex;
        justify-content: end;
    }
    .b-cont3 .bottom .career-list{
        padding-inline:4%;
    }
    .b-cont3 .bottom .inner3 .inner .img img{
        width:90vw;
    }
    .b-cont3 .b-title{
        margin-bottom:8rem;
    }
    .b-cont3 .bottom .inner3{
        padding-block:0rem 5rem;
    }
}
@media screen and (max-width:480px){
    .b-cont3 .bottom .inner3 .inner .img{
        margin-top: -9rem;
    }
    .b-cont3 .b-title .sm-tit {
        letter-spacing: -1px;
    }
}

/* .b-cont4 .title h3 b {
    color: #006dac;
} */

[data-aos=zoom-in] {
    transform: scale(.9);
}
.b-cont4 .title h3 {
    font-size: 4.8rem;
    font-weight: 500;
    color: var(--point3);
    text-align: center;
    letter-spacing: -0.05em;
}

.b-cont4 .title h3 b {
    color: var(--point2);
    font-weight: 700;
}

.b-cont4 .title h4 {
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 5rem;
    line-height: 1.6;
    letter-spacing: -0.03em;
}

.b-cont4 .img h4 {
    font-size: 3.6rem;
    font-weight: 300;
    text-align: center;
    margin-block: 2.5rem 10rem;
}
.b-cont4 .link {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1rem;
}
.b-cont4 .link li a{
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: right;
    padding: 2rem 1rem 3rem;
    border-radius: 2rem;
    background: #eeeef0;
    transition: all 0.3s;
}
.b-cont4 .link li p {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
    letter-spacing: -1px;
    line-height: 1.1;
}
.b-cont4 .link li .plus-btn {
    position: absolute;
    bottom:2rem; 
    right:2rem;
}
.b-cont4 .link li:nth-of-type(3) a > img {
    margin-bottom: 6%;
}
.b-cont4 .link li img {
    transition: all 0.3s;
    max-height: 50%;
}
.b-cont4 .link li a:hover {
    background: var(--point);
}
.b-cont4 .link li:hover p {
    color: #fff;
}
.b-cont4 .link li:hover img{
    filter: grayscale() brightness(10);
}
@media screen and (max-width:1080px){
    .b-cont4 .title h3 {
        line-height: 1.2;
    }
    .b-cont4 .title h3 b {
        line-height: 1.2;
        display: block;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width:768px){
    .b-cont4 .link{
        grid-template-columns: repeat(3, 1fr);
    }
    .b-cont4 .title h3{
        font-size:4rem;
    }
    .b-cont4 .title h4{
        font-size:2rem;
    }
    .b-cont4 .link li p {
        font-size: 2.2rem;
    }
}

@media screen and (max-width:480px){
    .b-cont4 .link{
        grid-template-columns: repeat(2, 1fr);
    }
}

.b-cont5 {
    margin-top:10rem;
    overflow:visible;
    padding-block:18rem 10rem;
}

.b-cont5 .img{
    text-align: center;
    margin-top: -30rem;
    z-index: 2;
    position: relative;
    margin-bottom: 6rem;
}
.b-cont5 .b-title .big-tit {
    letter-spacing: -1px;
}

.b-cont6 {
    padding-block:10vh;
}

.b-cont6 .grid-list ul {
    justify-content: space-between;
    gap:0.5rem;
    width:100%;
}

.b-cont6 .grid-list ul .step-box {
    font-size:3rem;
    font-weight:600;
    color:#142537;
    width:20rem;
    height:20rem;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    position:relative;
    margin:0 auto;
    background-color:#fff;
}

.b-cont6 .grid-list ul li:not(:last-child) .step-box::after {
    content:'';
    position:absolute;
    top:50%;
    right:-7rem;
    transform: translateY(-50%);
    width:3.6rem;
    height:6.3rem;
    background:url(../images/b-cont6-arrow.png) no-repeat center center / cover;
}

.b-cont6 .grid-list ul li.list:first-child .step-box {
    border:10px solid #adddec;
}

.b-cont6 .grid-list ul li.list:nth-child(2) .step-box {
    border:10px solid #59bedc;
}

.b-cont6 .grid-list ul li.list:nth-child(3) .step-box {
    border:10px solid #56adda;
}

.b-cont6 .grid-list ul li.list:nth-child(4) .step-box {
    border:10px solid #9bc1ec;
}

.b-cont6 .grid-list ul li.list:nth-child(5) .step-box {
    border:10px solid #497ddc;
}

.b-cont6 .grid-list ul li.list:last-child .step-box {
    border:10px solid #4965dc;
}

.b-cont6 .grid-list ul .txt-box {
    margin-top:4.5rem;
}

.b-cont6 .grid-list ul .txt-box .caption-box {
    margin-top: 0.5rem;
    background-color: #0762a6;
    height: 22rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    text-align: center;
    border-radius: 1.5rem;
    padding: 1.7rem 1rem;
}

.b-cont6 .grid-list ul .txt-box .caption-box .sub-txt {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: #adddec;
}
.b-cont6 .grid-list ul .txt-box .caption-box .sub-txt-w {
    color: #fff;
}

.b-cont6 .grid-list ul .txt-box .caption-box .caption {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
}

@media screen and (max-width:1440px){
    
    .b-cont6 .grid-list ul .step-box {
        font-size: 2.8rem;
        width: 17rem;
        height: 17rem;
    }
    .b-cont6 .grid-list ul li:not(:last-child) .step-box::after {
        right: -5rem;
        width: 3rem;
        height: 5.3rem;
    }

    .b-cont6 .grid-list ul .txt-box .caption-box .sub-txt{
        font-size:clamp(1.4rem, 1.5vw, 1.6rem);
    }
    
    .b-cont6 .grid-list ul .txt-box .caption-box .caption{
        font-size:clamp(1.6rem, 1.8vw, 2rem);
    }
}

@media screen and (max-width:768px){
    .m-grid-3 ul{
        grid-template-columns: repeat(3, 1fr);
    }
    .b-cont6 .grid-list ul{
        gap: 5rem 0.5rem;
    }
    .b-cont6 .grid-list ul .step-box {
        width: 20rem;
        height: 20rem;
    }
    .b-cont6 .grid-list ul li:nth-child(3) .step-box::after{
        display:none;
    }
    .b-cont6 .grid-list ul li:not(:last-child) .step-box::after {
        right: -10rem;
    }
    .b-cont6 .grid-list ul .txt-box .caption-box{
        height:18rem;
        padding: 2.3rem 1rem;
    }
    .b-cont6 .grid-list ul .txt-box .caption-box .sub-txt {
        font-size: clamp(1.6rem, 1.6vw, 1.8rem);
    }
    .b-cont6 .grid-list ul .txt-box .caption-box .caption {
        font-size: clamp(1.7rem, 1.9vw, 2.2rem);
    }
}

@media screen and (max-width:480px){   
    .s-grid-2 ul{
        grid-template-columns: repeat(2, 1fr);
    }
    .b-cont6 .grid-list ul li:nth-child(3) .step-box::after{
        display:block;
    }
    .b-cont6 .grid-list ul li:nth-child(2) .step-box::after,
    .b-cont6 .grid-list ul li:nth-child(4) .step-box::after{
        display:none;
    }
    .b-cont6 .grid-list ul li:not(:last-child) .step-box::after {
        right: -8rem;
    }
    .b-cont6 .grid-list ul .step-box {
        width: 17rem;
        height: 17rem;
    }
}

@media screen and (max-width:360px){
    .b-cont6 .grid-list ul li .step-box::after{
        display:none !important;
    }
}

/* b-face-box */
.b-title:has(+ .b-face-box) {
    position: relative;
    z-index: 3;
}

.b-face-box {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 40%));
    align-items: flex-end;
    /*margin-top: -5%;*/
    justify-content: space-between;
}
.b-face-box .center-img {
    position: absolute;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
    max-width: 60%;
}
.b-face-box .box {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    z-index: 2;
    justify-content: flex-end;
    height: 100%;
}
.b-face-box .box .txt {
    background: #fff;
    width: 75%;
    padding-block: 4rem;
    border-radius: 15rem;
    border: 1px solid #bfbfbf;
    position: absolute;
    z-index: -1;
    left:0;
    top:50%;
    transform: translateY(-50%);
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.27) inset;
    font-size: 3rem;
    text-align: left;
}
.b-face-box .box .txt div {
    width: fit-content;
    margin-inline: 0 auto;
    text-align: center;
    letter-spacing: -1px;
}
.b-face-box .box .txt h4 {
    padding-block: 0.25rem;
    border-radius: 5rem;
    background: var(--point);
    color: #fff;
    max-width: 25rem;
    margin: 0 auto 1.5rem;
}
.b-face-box .box .txt p {
    line-height: 1.2;
}
.b-face-box .box .img {
    max-width: 80%;
}
.b-face-box .box-left {
    justify-content: flex-start;
}
.b-face-box .box-left .txt {
    left:auto;
    right:0;
    text-align: right;
    padding-right: 6rem;
}
.b-face-box .box-right .txt  {
    padding-left: 6rem;
}
.b-face-box .box-left .txt div {
    width: fit-content;
    margin-inline: auto 0;
}
.b-face-box .box-right .img {
    margin-right: 10%;
}
@media (min-width:1921px) {
    .b-face-box{
        margin-top:0;
    }
    .b-face-box .box-left .img{
        margin-left:-8%;
    }
    .b-face-box .box-right .img{
        margin-right:2%;
    }
}
@media (max-width:1920px) {
    .inner3:has(.b-face-box) {
        padding-inline:0
    }
    .b-title:has(+ .b-face-box) {
        padding-inline: 4%;
    }
    .b-face-box {
        margin-top: 2%;
    }
    .b-face-box .box .img{
        max-width: 60%;
    }
    .b-face-box .box-right .img {
        max-width: 50%;
        margin-right: 5%;

    }
    .b-face-box .box .txt {
        padding-block: 3rem;
        font-size: 2.7rem;
    }
    .b-face-box .box-left .txt {
        padding-left: 4rem;
    }
    .b-face-box .box-right .txt {
        padding-right: 4rem;
    }
}
@media (max-width:1400px) {
    .b-face-box {
        margin-top: 0;
    }
    .b-face-box .box .img{
        max-width: 55%;
    }
    .b-face-box .box-right .img {
        max-width: 45%;
    }
    .b-face-box .box .txt {
        font-size: 2.5rem;
    }
}

@media (max-width:1280px) {
    .b-face-box .box .txt {
        font-size: 2.3rem;
    }

}

@media (max-width:1080px) {
    .b-face-box  {
        grid-template-columns: repeat(2, minmax(auto, 50%));
        margin-top: min(9rem,10%);
        margin-bottom: 14rem;
    }
    .b-face-box .box {
        align-content: flex-end;
    }
    .b-face-box .box .txt {
        position: static;
        order:3;
        transform: translateY(0);
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        width: min(500px,90%);
    }
    .b-face-box .box .img{
        max-width: 70%;
    }
    .b-face-box .box-right .img {
        max-width: 60%;
    }
    .b-face-box .box-left .txt {
        border-radius: 0 10rem 10rem 0;
        border-left: 0;
    }
    .b-face-box .box-right .txt {
        border-radius: 10rem 0 0 10rem;
        border-right: 0;
    }
    .b-face-box .box-left .txt div,
    .b-face-box .box-right .txt div {
        margin: 0;
    }
}
@media (max-width:768px) {
    .b-face-box .box .txt h4 {
        font-size: 2.1rem;
        padding: 0.25rem 1.5rem;
    }
    .b-face-box .box .txt p {
        font-size: 2.1rem;
    }
    .b-face-box .box-left .txt {
        padding-inline: 2rem 4rem;
    }
    .b-face-box .box-right .txt {
        padding-inline: 4rem 2rem;
    }
}
@media (max-width:420px) {
    .b-face-box  {
        margin-bottom: 10rem;
    }
}
/* b-boxTxt */
.b-boxTxt {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 3rem;
    text-align: center;
    margin-top: 9rem;
}
.b-boxTxt .box {
    width: calc(50% - 15rem);
    max-width: 460px;
}
.b-boxTxt h4 {
    font-size: 3rem;
    font-weight: 700;
    padding-block: 0.75rem;
    border-radius: 5rem;
    background: var(--point);
    color: #fff;
    margin-block: 5rem 1.5rem;
} 
.b-boxTxt p {
    font-size: max(18px,2.2rem);
    line-height: 3rem;
    border-bottom: 1px solid var(--point);
    padding-block:2.5rem;
}
.b-boxTxt p b {
    font-weight: 700;
}
.b-boxTxt .boxTxt {
    width: 18rem;
}
.b-boxTxt .boxTxt p {
    font-weight: 700;
}
.b-boxTxt .boxTxt p:first-child {
    border-bottom: 0;
}
.b-boxTxt .boxTxt p:last-child {
    padding-block: 4rem;
}
.b-boxTxt .box2 h4{
    background: #0f4178;
}
.b-boxTxt .box2 p {
    font-weight: 500;
    color: #288adb;
}
@media (max-width:1080px) {
    .b-boxTxt .box1,
    .b-boxTxt .boxTxt {
        display: none;
    }
    .b-boxTxt .box2,
    .b-boxTxt .box2 img {
        width: 100%;
        max-width: 100%;
    }
    .b-boxTxt .box2 br {
        display: none;
    }
    .b-boxTxt .box1 .hide {
        display: none;
    }
    .b-boxTxt h4{
        font-size:2.6rem;
    }
}
@media (max-width:420px) {
    .b-boxTxt .box2 br {
        display: block;
    }
    .b-boxTxt .box1 .hide {
        display: block;
    }
}

.b-boxTxt2{
    margin-top:10rem;
    display:flex;
    justify-content: space-between;
    flex-flow: row wrap;
}
.b-boxTxt2 .box .txt{
    text-align: center;
    margin-top:4rem;
}
.b-boxTxt2 .box .txt h3{
    font-size:2.7rem;
    font-weight:700;
    margin-bottom:2rem;
}
.b-boxTxt2 .box .txt p{
    font-size:2rem;
    font-weight:300;
    line-height:1.5;
}

@media (max-width:1080px) {
    .b-boxTxt2{
        flex-direction: column;
        gap:4rem;
    }   
}

.b-circle-box {
    margin-top: 9rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.b-circle-box .box {
    width: min(310px,22vw);
    height: min(310px,22vw);
    border: 1px solid var(--point);
    border-radius: 50%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}
.b-circle-box .box::before {
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    width: calc(100% - 3px);
    height: calc(100% - 2px);
    border-radius: 50%;
    border: 4px solid var(--point2);
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
}
.b-circle-box .box:nth-of-type(2n):before {
    transform: translate(-50%,-50%) rotate(135deg);
}
.b-circle-box .box h3 {
    margin-block: 1.5rem 1rem;
    font-size: clamp(20px,2.1vw, 28px);
    font-weight: 700;
    letter-spacing: -1px;
}
.b-circle-box .box p {
    font-size: clamp(16px,1.5vw, 22px);
    font-weight: 300;
    letter-spacing: -1px;
}
.b-circle-box .box img {
    max-height: 25%;
}
@media (max-width:1080px) {
    .b-circle-box .box {
        width: min(500px,42vw);
        height: min(500px,42vw);
    }
    .b-circle-box .box h3 {
        margin-top: 1.5rem;
        font-size: clamp(15px,4vw, 42px);
        font-weight: 500;
    }
    .b-circle-box .box p {
        font-size: clamp(11px,2.8vw, 28px);
        font-weight: 300;
    }
}
@media (max-width:500px) {
    .b-circle-box .box img {
        max-height: 20%;
    }
}

.b-boxImg-3 {
    margin-top: 3rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.b-boxImg-3 .box {
    width: 30%;
    max-width: 34rem;
    text-align: center;
}
.b-boxImg-3 .box h3 {
    font-size: 3rem;
    font-weight: 500;
    padding-block: 0.5rem;
    border-radius: 5rem;
    background: var(--point);
    color: #fff;
    margin-top: 1rem;
}
.b-boxImg-3 .box .img {
    height: 22rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.b-boxImg-3 .boxImg {
    width: 40%;
}
@media (max-width:1080px) {
    .b-boxImg-3 {
        position: relative;
        padding-bottom: 3rem;

    }
    .b-boxImg-3 .box .img {
        display: none;
    }
    .b-boxImg-3 .boxImg {
        width: 100%;
        margin-left: -8%;
        text-align: center;
    }
    .b-boxImg-3 .box {
        position: absolute;
        bottom:5px;
        left:0;
        width: 47%;
    }
    .b-boxImg-3 .box:last-child {
        left: auto;
        right:0;
    }
    .b-cont9 {
        padding-bottom: 14rem !important;
    }
}
@media (max-width:768px) {
    .b-cont9 .b-title .sm-tit{
        text-align: center;
    }
}
@media (max-width:500px) {
    .b-boxImg-3 .box h3 {
        font-size: 2.2rem;
    }
}

@media (max-width: 380px) {
    .b-boxImg-3 .box h3 {
        font-size: 1.8rem;
    }
}

.b-wide-imgs-2 {
    margin-top: 12rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
}
@media (max-width:1080px) {
    .b-wide-imgs-2 img {
        width: 100%;
    } 
}

.b-boxes-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 3rem;
    margin-top: 12rem;
}

@media (max-width:1080px) {
    .b-boxes-4 {
        grid-template-columns: repeat(2,1fr);
        gap: 6rem 4rem;
    }
}

/* .b-boxes css */
.b-boxes .txt {
    margin-top: 4rem;
}
.b-boxes .txt h3 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
}
.b-boxes .txt h4 {
    font-size: 2.7rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
    letter-spacing: -0.1rem;
    line-height: 1.2;
}
.b-boxes .txt p {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -0.075rem;
}

.b-boxes .txt p +p {
    margin-top: 2rem;
}

@media (max-width:1080px) {
    .b-boxes .txt {
        margin-top: 3rem;
    }
    .b-boxes .img,
    .b-boxes img {
        width: 100%;
    }

    .b-boxes .txt p br{
        /* display:none; */
        text-align: left;
    }
}

@media (max-width:500px) {
    .b-boxes {
        gap: 5rem 2rem;
    }
    .b-boxes .txt h4 {
        font-size: 2.4rem;
        letter-spacing: -0.1rem;
        margin-bottom: 1.5rem;
    }
    .b-boxes .txt h3 {
        font-size: 2.8rem;
    }
    .b-boxes .txt p{
        font-size:4vw;
    }
}


/* b-cont12 */

.b-cont12 .b-title .big-tit .thin{
    display:inline-block;
    font-size: 3.8rem;
    line-height: 2.5;
}

.b-cont12 .b-title b{
    font-weight: 600;
}
.b-cont12 .b-title .big-tit {
    font-size: 5rem;
    letter-spacing: -2px;
    line-height: 0.9;
}
.b-cont12 .grid-list{
    margin-top:12rem;
}

.b-cont12 .grid-list ul{
    justify-content: space-between;
    gap:0.5rem;
    width:100%;
}

.b-cont12 .grid-list ul .step-box{
    font-size:3rem;
    font-weight:600;
    color:#142537;
    width:20rem;
    height:20rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    position:relative;
    margin:0 auto;
    background-color:#fff;
    text-align: center;
}

.b-cont12 .grid-list ul .step-box img{
    margin-bottom:1rem;
}

.b-cont12 .grid-list ul li:not(:last-child) .step-box::after{
    content:'';
    position:absolute;
    top:50%;
    right:-75%;
    transform: translateY(-50%);
    width:3.6rem;
    height:6.3rem;
    background:url(../images/b-cont6-arrow.png) no-repeat center center / cover;
}

.b-cont12 .grid-list ul li.list:first-child .step-box{
    border:10px solid #adddec;
}

.b-cont12 .grid-list ul li.list:nth-child(2) .step-box{
    border:10px solid #59bedc;
}

.b-cont12 .grid-list ul li.list:nth-child(3) .step-box{
    border:10px solid #56adda;
}

.b-cont12 .grid-list ul li.list:nth-child(4) .step-box{
    border:10px solid #9bc1ec;
}

.b-cont12 .grid-list ul li.list:nth-child(5) .step-box{
    border:10px solid #497ddc;
}

.b-cont12 .grid-list ul li.list:last-child .step-box{
    border:10px solid #4965dc;
}

.b-cont12 .grid-list ul .txt-box{
    margin-top:4.5rem;
}
.b-cont12 .grid-list ul .txt-box .txt{
    font-size:2rem;
    font-weight:300;
    text-align: center;
}
@media screen and (max-width:1440px){
    .b-cont12 .grid-list ul .step-box {
        font-size: 2.8rem;
        width: 17rem;
        height: 17rem;
    }
    .b-cont12 .grid-list ul .step-box span{
        font-size: 2rem;
    }
    .b-cont12 .grid-list ul li:not(:last-child) .step-box::after {
        width: 3rem;
        height: 5.3rem;
    }

    .b-cont12 .grid-list ul .txt-box .txt{
        font-size: clamp(1.6rem, 1.6vw, 1.8rem);
    }
}
@media screen and (max-width:768px){
    .m-grid-2 ul{
        grid-template-columns: repeat(2, 1fr);
    }
    .b-cont12 .grid-list ul{
        gap: 5rem 0.5rem;
    }
    .b-cont12 .grid-list ul .step-box {
        width: 20rem;
        height: 20rem;
    }
    .b-cont12 .grid-list ul li .step-box img{
        max-width: fit-content;
        width: 8rem;
    }
    .b-cont12 .grid-list ul li:nth-child(2) .step-box::after{
        display:none;
    }
    .b-cont12 .grid-list ul li:not(:last-child) .step-box::after{
        right:-17vw;
    }
    .b-cont12 .b-title .big-tit {
        font-size: 3.7rem;
        line-height: 1.4;
    }
    .b-cont12 .b-title .big-tit .thin {
        font-size: 3.4rem;
        line-height: 1.4;
        margin-bottom: 4rem;
    }
}
@media screen and (max-width:480px){   
    .b-cont12 .grid-list ul li:not(:last-child) .step-box::after {
        right: -15vw;
    }
    .b-cont12 .grid-list ul .step-box {
        width: 17rem;
        height: 17rem;
    }
}
@media screen and (max-width:360px){
    .b-cont12 .grid-list ul li .step-box::after{
        display:none !important;
    }
}

/* b-cont13 */

.b-cont13{
    position:relative;
    background:url(../images/jp-img11.jpg) no-repeat center center / cover;
}



.b-cont13 .left .img{
    width: 100%;
    height: 100%;
}

.b-cont13 .left .img img{
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
}

.b-cont13 .inner2{
    z-index:1;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}

.b-cont13 .inner2 .right{
    background-color:#142537;
    color:#fff;
    padding:12% 7%;
}

.b-cont13 .inner2 .right .point-green{
    color:#84ea8e;
}

.b-cont13 .inner2 .right .list-wrap .list{
    font-size:2.8rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    letter-spacing: -1px;
}

.b-cont13 .inner2 .right .list-wrap .list .txt,
.b-cont13 .inner2 .right .list-wrap .list .txt *,
.b-cont13 .inner2 .right .list-wrap .list .cost{
    font-weight:700;
}

.b-cont13 .inner2 .right .list-wrap .list .cost{
    color: #6bc3fe;
}

.b-cont13 .inner2 .right > .txt{
    font-size:2.6rem;
    font-weight:300;
    margin-block:4rem;
}

.b-cont13 .inner2 .right .num-txt .txt{
    font-size:2rem;
    font-weight:500;
}

.b-cont13 .inner2 .right .num-txt .num{
    font-size:3.6rem;
    font-weight:600;
}

@media screen and (max-width:1440px){
    .b-cont13 .inner2 .right .list-wrap .list{
        font-size:2.6rem;
    }
    .b-cont13 .inner2 .right > .txt{
        font-size:2.4rem;
    }
    .b-cont13 .inner2 .right .num-txt .txt{
        font-size:1.8rem;
    }
    .b-cont13 .inner2 .right .num-txt .num{
        font-size:3.2rem;
    }
}
@media screen and (max-width:1080px){
    .b-cont13 .inner2 .right .list-wrap .list{
        font-size:2.2rem;
    }
    .b-cont13 .inner2 .right > .txt{
        font-size:2rem;
    }
    .b-cont13 .inner2 .right .num-txt .txt{
        font-size:1.6rem;
    }
    .b-cont13 .inner2 .right .num-txt .num{
        font-size:2.8rem;
    }
}
@media screen and (max-width:768px){
    .b-cont13{
        position: relative;
        background: none;
    }
    .b-cont13 .inner2 .right .list-wrap .list{
        font-size:1.8rem;
    }
    .b-cont13 .inner2 .right > .txt{
        font-size:2rem;
    }
    .b-cont13 .inner2 .right .num-txt .txt{
        font-size:1.4rem;
    }
    .b-cont13 .inner2 .right .num-txt .num{
        font-size:4rem;
    }
}
@media screen and (max-width:480px){
    .b-cont13 {
        padding-bottom: 0;
    }
    .b-cont13 .inner2 {
        grid-template-columns: 1fr;
        padding-inline: 0;
    }
}
/* .ft-sec.sec11 */

.ft-sec.sec11 {
    background: #5896bf;
    padding-block: 14rem;
    color: #fff;
}
.ft-sec.sec11 .inner {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.ft-sec.sec11 .txt {
    text-align: center;
    margin-bottom: 10rem;
    width: 100%;
}
.ft-sec.sec11 .txt h3 {
    font-size: 4.3rem;
    font-weight: 700;
}
.ft-sec.sec11 .txt h4 {
    font-size: 2rem;
    margin-top: 4rem;
    color: #b8cfe1;
    line-height: 1.6;
}
.ft-sec.sec11 .left {
    width: 60%;
}
.ft-sec.sec11 .left .form {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
}
.ft-sec.sec11 .left .form .name {
    margin-right: 1.5rem;
    width: 30%;
}
.ft-sec.sec11 .left .form .phone {
    width: calc(70% - 15rem);
}
.ft-sec.sec11 .left .form label {
    font-size: 2.4rem;
    font-weight: 300;
    color: #b8cfe1;
    margin-bottom: 2rem;
    display: block;
}
.ft-sec.sec11 .left .form input {
    height: 8rem;
    font-size: 2.4rem;
    padding: 2rem 3rem;
    width: 100%;
}
.ft-sec.sec11 .left .form button {
    height: 8rem;
    width: 13rem;
    border:0;
    background: var(--point);
    color: #fff ;
    font-size: 2.4rem;
}
.ft-sec.sec11 .left .agree-wrap {
    width: 100%;
    margin-top: 2rem;
}
.ft-sec.sec11 .left .agree-wrap label {
    font-size: max(14px,1.6rem);
    font-weight: 300;
    padding: 1.5rem 3.5rem 1.5rem 2rem;
    border:1px solid #b8cfe1;
    border-radius: 5rem;
    display: inline-block;
    margin-right: 4rem;
}
.ft-sec.sec11 .left .agree-wrap label:has(input[type="checkbox"]:checked) {
    background: var(--point);
    border-color: var(--point);
}
.ft-sec.sec11 .left .agree-wrap input[type="checkbox"] {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    cursor: pointer; 
    height: 15px; 
    outline: 0; 
    width: 20px;
    border:0;
    margin: 0;
    margin-right: 1rem;
} 
.ft-sec.sec11 .left .agree-wrap input[type="checkbox"]::after { 
    border: solid #b8cfe1; 
    border-width: 0 1px 1px 0; 
    content: ''; 
    height: 50%; 
    left: 40%; 
    position: relative; 
    top: 16%; 
    transform: rotate(45deg); 
    display: block;
    width: 25%; 
} 
.ft-sec.sec11 .left .agree-wrap a {
    font-size: max(14px,1.6rem);
    font-weight: 300;
}

.ft-sec.sec11 .right {
    width: 35%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 4rem;
    align-items: start;
    text-align: center;
}
.ft-sec.sec11 .right li a {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}
.ft-sec.sec11 .right li .img {
    width: max(65px,8rem);
    height: max(65px,8rem);
    background: #8ab6d2;
    border-radius: 50%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}
.ft-sec.sec11 .right li .img img {
    filter: brightness(10) grayscale(1);
}

.ft-sec.sec11 .right li .img.qr img{
    filter:none;
} 
.ft-sec.sec11 .right li:hover .img {
    background: #deeaf2;
}
.ft-sec.sec11 .right li:hover .img img {
    filter: none
}
.ft-sec.sec11 .right li p {
    margin-top: 3rem;
    font-size: max(14px,2rem);
}

.blocker{
    padding:0 !important;
}
@media (max-width:1080px) {
    .ft-sec.sec11 .left .form input {
        padding-inline: 1.5rem;
    }
    .ft-sec.sec11 .txt h4 {
        font-size: 2.6rem;
    }
    .ft-sec.sec11 .left {
        width: 100%;
    }
    .ft-sec.sec11 .left .agree-wrap {
        text-align: center;
    }
    .ft-sec.sec11 .left .agree-wrap label {
        margin-right: 0;
    }

    .ft-sec.sec11 .right {
        width: 100%;
        justify-content: center;
        margin-top: 6rem;
    }
}

@media screen and (max-width:768px){
    .ft-sec.sec11 .txt h3{
        font-size: 3.6rem;
    }
    .ft-sec.sec11 .txt h4{
        font-size:2.2rem;
    }
    .ft-sec.sec11 .left .form label{
        font-size:2rem;
    }
    .ft-sec.sec11 .left .agree-wrap input[type="checkbox"]{
        margin-right:0;
    }
    .ft-sec.sec11 .left .agree-wrap label{
        padding:1.5rem 1.85rem 1.5rem 1rem;
    }
}