@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
:root{
    --main_c: #7ea3f6;
    --main_bg: #0b0d1e;
    --desc_c: #c9c9c9;
    --main_tit: 90px;
    --section_tit: 39px;
    --con_tit: 35px;
    --inner_con_tit: 30px;
    --inner_con_desc: 23px;
    --menu_btn: 25px;
    --table_desc: 21px;
    --bottom_desc: 42px;
    --main_tit_padding: 190px;
    --padding: 65px;
    --btn_padding: 150px;
}
body{
    letter-spacing: -0.8px;
}
div,p,span{
    letter-spacing: -0.8px;
    word-break: keep-all;
}
.wrap_1340{
    max-width: 1380px;
    padding-inline: 20px;
    width: 100%;
    margin-inline: auto;
}
.wrap_1280{
    max-width: 1320px;
    padding-inline: 20px;
    width: 100%;
    margin-inline: auto;
}
.wrap_1080{
    max-width: 1120px;
    padding-inline: 20px;
    width: 100%;
    margin-inline: auto;
}
.main_c{
    color: var(--main_c);
}
.m_only{
    display: none;
}
.tit_wrap .con_tit{
    font-size: var(--section_tit);
    color: #fff;
   font-weight: 700;
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 70px;
    line-height: 1.1;
}
.tit_wrap .tit_desc{
    font-size: var(--inner_con_desc);
    color: var(--desc_c);
    text-align: left;
}
.tit_wrap .tit_desc + .tit_desc{
    margin-top: calc(var(--padding) * 2 /3 );
}
.con p{
    font-size: var(--inner_con_desc);
    color: var(--desc_c);
}
div[class^="section"]{
    padding-top: var(--padding);

}
.flex{
    display: flex;
}
.icon_wrap img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.img_wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main_tit {
    font-size: var(--main_tit);
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1;

}

.bottom_area{
    padding-block: var(--btn_padding);
    text-align: center;
}
.bottom_area div{
    font-size: var(--bottom_desc);
    font-weight: 800;
    color: #fff;
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}

.blue_btn{
    display: inline-block;
    font-size: var(--inner_con_tit);
    color: #fff;
    font-weight: 800;
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
    background-color: var(--main_c);
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 460px;
    margin-top: var(--padding);
    border: none;
    transition: 0.4s;
}
.blue_btn:hover{
    transition: 0.2s;
    background-color: #131425;
}
/*--*/

.sub_04{
    padding-top: var(--main_tit_padding);
    background-color: var(--main_bg);
    background-image: url(../../img/sub4/bottom_bg.png);
    background-position: bottom;
    background-repeat: no-repeat; 
}

.sub_menu_wrap{
    margin-top: 45px;
        z-index: 999;
    position: relative;
}
.sub_menu_wrap ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub_menu_wrap li a{
    font-size: var(--menu_btn);
    font-weight: 500;
    color: #848485;
    transition: 0.2s;
}
.sub_menu_wrap li a:where(:hover, .active){
    color: #fff;
    transition: 0.2s;
}
.sub_menu_wrap span{
    display: inline-block;
    height: 25px;
    width: 3px;
    /* background-color: #acadb2; */
    background-color: #848485;
    margin-inline: 20px;
    font-weight: 700;
}
.con_desc_wrap p{
    font-size: var(--inner_con_desc);
    font-weight: 400;
    color: var(--desc_c);
}
.con_desc_wrap p span.big_font{
    font-size: var(--inner_con_tit);
    font-weight: 700;
    color: #fff;
}
.con_desc_wrap.big_font p{
    font-size: var(--inner_con_tit);
    font-weight: 500;
    color: #fff;
}
.con_desc_wrap p.p_circle{
    padding-left: 1em;
    position: relative;
}
.con_desc_wrap p.p_circle::before{
    content:"·";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}
div[class^="section"].section_01{
    padding-top: 70px;
}
.table_list li{
    border-top: 1px solid  #575862;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.table_list li div{
    color: var(--desc_c);
    flex: 1;
    text-align: center;
    padding: 15px 20px;
}
.table_list .table_th div{
    font-size: var(--inner_con_desc);
    font-weight: 700;
    text-align: center;
}
.table_list li >div+div{
    border-left:  1px solid #575862;
}
.table_list .table_td div{
    font-size: var(--table_desc);
    display: flex
;
    align-items: center;
    justify-content: center;
}
.table_list li div:last-of-type{
    flex: 1.8;
}
.table_list .table_td div:last-of-type{
    text-align: left;
}
.table_list li:first-of-type{
    border-top:1px solid #c9c9c9;
}
.table_list li:last-of-type{
    border-bottom:1px solid #c9c9c9;
}
.page_01 .section_01 {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page_01 .section_01 img{
    min-width: 1000px;
    object-position: center;
}
.sub_04 .tit_wrap .con_tit{
    text-align: left;
    margin-bottom: 30px;
}
.con > .con_tit{
    font-size: var(--con_tit);
    color: var(--main_c);
    font-weight: 800;
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}
.page_01 .section_02 .con{
    margin-top: var(--padding);
}
.sub_04._navy {
    padding-top: var(--main_tit_padding);
    background-color: #0a0c1d;
}
.tit_deco {
    position: absolute;
    top: -54%;
    right: calc(39% - 210px);
}
.sub_04.page_02{
   background-color: #0a0c1d;
}
.sub_04 .page_02 .section_01{
    align-items: center;
    justify-content: center;
    padding-top:70px;
    padding-right: 50px;
}

.page_02 .section_01 .icon_wrap{
    max-width: 460px;
}
.page_02 .section_01 .icon_wrap:last-child{
    position: relative;
    margin-left: -140px;
    margin-top: 20px;
    max-width: 460px;
}
.page_02 img.gray_filter {
    opacity: 0.9;
    filter: brightness(0.8) grayscale(0.9) contrast(1.05);
    /* filter: brightness(1) grayscale(0.9) contrast(1.1); */
}
.circles_group {
    max-width: 530px;
    width: 100%;
    position: relative;
    padding-top: 50px;
    text-align: center;
    margin-inline: auto;
    display: inline-block;
    width: calc(50% - 60px);
    height: 320px;
    min-width: 450px;
}
.circle{
    width: 50%;
    aspect-ratio: 1/1;
    max-width: 280px;
    border-radius: 300px;
    background-color: var(--main_c);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #fff;
    font-size: var(--inner_con_desc);
}
.circle:nth-of-type(1){
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0%;
}
.circle:nth-of-type(2){
    background-color: #fff;
    color: #000;
    position: absolute;
    top: 110%;
    left: 30%;
    transform: translate(-50%, -40%);
}
.circle:nth-of-type(3){
    background-color: #b98d81;
    position: absolute;
        top: 110%;
    right: 30%;
    transform: translate(+50%, -40%);
}
.face_img {
    padding-top: 0;
    text-align: center;
    margin-inline: auto;
    display: inline-flex
;
    width: calc(50% - 60px);
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.face_img .icon_wrap{
        width: 100%;
    height: 530px;
}
.page_02 .section_02 .con{
    display: flex
;
    align-items: stretch;
    padding-top: 80px;
}
.page_02 .section_02 .con>.icon_wrap {
    display: inline-block;
    width: 40px;
    margin-inline: 40px -40px;
    margin-top: -60px;
}
.sub_04 .page_03 .section_01{
    align-items: center;
    justify-content: center;
    padding-top: 140px;
}
.page_03 .section_01 .icon_wrap{
    max-width: 400px;
}
.page_03 .section_01 .icon_wrap:last-child{
position: relative;
    margin-left: -160px;
    margin-top: -190px;
    max-width: 500px;
}
img.gray_filter{
opacity: 0.9;
    filter: brightness(0.7) grayscale(0.9);
}
.page_03 .section_02 .tit_wrap +.con{
    margin-top: 0;
}
.page_03 .section_02 .con{
    margin-top: var(--padding);
}
.page_03 .section_02 ._block{
    display: block;
}
.page_03 .section_02 .con_desc_wrap span:last-child{
    padding-left: 5px;
}
.page_03 .section_02 .table_list li >div:nth-last-of-type(2){
    border-right:  1px solid #575862;
    flex: 3.5;
}
.page_03 .section_02 .table_list li >div:nth-last-of-type(1){
    border-left: 0;
    flex: 2.5;
    text-align: center;
}
.page_04 div[class^="section"].section_01{
    max-width: 520px;
    margin-inline: auto;
    padding-top: calc(var(--padding) + 40px);
}
.page_04 .section_02{
    padding-top: calc(var(--padding) + 20px);
}
.page_04 .con_tit span{
    font-weight: 300;
}
.page_04 b{
    font-weight: 500;
}
@media (max-width: 1240px) {
     :root{
    --main_tit: 78px;
    --btn_padding: 70px;
    --menu_btn: 22px;
    }
    .tit_deco {
    top: 60%;
    left: 40%;
    right: unset;
    max-width: 100%;
    transform: translate(-60%, -70%);
}
.page_02 .section_02 .con>.icon_wrap {
    display: inline-block;
    width: 35px;
    margin-inline: 15px -40px;
}
.page_04 .con_tit span{
    display: block;
    font-size: calc(var(--con_tit) - 2px);
    margin-top: 5px;
}
.page_04 b{
    display: none;
}
.con .big_font {
    display: block;
}
}

@media (max-width: 1024px) {
    :root{
    --main_tit: 68px;
    --section_tit: 34px;
    --con_tit: 30px;
    --inner_con_tit: 26px;
    --inner_con_desc: 20px;
    --main_tit_padding: 110px;
    --padding: 60px;
    --table_desc: 21px;
    --bottom_desc: 30px;
    --btn_padding: 60px;
    --menu_btn: 18px;
    }
    .tit_deco{
                top: 420px;
    }
    .sub_menu_wrap span {
    margin-inline: 10px;
}
    .bottom_area div br{
    display: none;
    }
    .page_02 .section_02 .con {
    align-items: stretch;
    padding-top: 20px;
}
 .page_02 .section_02 .face_img {
    gap: 0;
 }
    .page_02 .section_02 .con_desc{
        margin-top:15px;
    }
    .circles_group {
    min-width: 360px;
        height: 270px;
}
.face_img {
    width: calc(40% - 60px);
}
    .face_img .icon_wrap {
        width: 100%;
        height: 370px;
    }
.face_img .icon_wrap img{
    object-position: bottom;
}
        .page_02 .section_02 .con>.icon_wrap {
        width: 30px;
        margin-inline: 15px 0px;
    }
        .page_02 .section_02 .con>.icon_wrap {
        margin-inline: -15px 00;
    }
    .sub_04 .page_03 div[class^="section"].section_01 {
        padding-top: 140px;
        max-width: 620px;
        margin-inline: auto;
        padding-left: 50px;
    }
    .page_03 .table_list .table_td div:first-of-type{
        min-width: 20px;

    }
    .sub_04 .page_02 .section_01 {
    padding-right: 70px;
    padding-left: 70px;
}
    .sub_04 .page_04 div[class^="section"].section_01 {
    max-width: 420px;
    padding-top: calc(var(--padding) + 20px);
}
}
@media (max-width: 768px) {
    :root{
    --main_tit: 58px;
    --section_tit: 34px;
    --con_tit: 30px;
    --inner_con_tit: 26px;
    --inner_con_desc: 18px;
    --padding: 50px;
    --table_desc: 18px;
    --bottom_desc: 26px;
    --btn_padding: 60px;
    --menu_btn: 18px;
    }
        .tit_deco {
        top: 269px;}
    .sub_menu_wrap ul{
        flex-wrap: wrap;
    }
    .sub_menu_wrap li{
        flex: 1 1 50%;
        border: 1px solid #fff;
        text-align: center;
    }
    .sub_menu_wrap li a{
        padding: 15px;
        width: 100%;
        display: inline-block;
    }
    .sub_menu_wrap li:where(.active, :hover){
        background-color: #fff;
    }
    .sub_menu_wrap li:where(.active, :hover) a{
        color: var(--main_bg);
        font-weight: 700;
    }
    .sub_menu_wrap li:nth-of-type(2n-1) {
        border-left: none;
    }
     .sub_menu_wrap li:nth-of-type(2n) {
        border-right: none;
    }
    .sub_menu_wrap span{
        display: none;
    }
    .blue_btn{
        font-size: var(--menu_btn);
        max-width: 300px;
    }
    .table_list li div {
    padding: 10px 15px;
    }
    .sub_04 div[class^="section"].section_01 {
    padding-top: 0;
    }
.sub_04 .page_02 .section_01 {
        padding-right: 70px;
        padding-left: 70px;
        padding-top: 60px !important;
    }
    .circles_group {
    min-width: 280px;
        height: 270px;
}
.circle {
    width: 57%;}
.circle:nth-of-type(2) {
    transform: translate(-57%, -45%);
}
.circle:nth-of-type(3) {
    transform: translate(+57%, -45%);
}
.page_02 .section_02 .con>.icon_wrap {
        margin-inline: -20px 0px;
        width: 25px;
        margin-top: 0;
    }
    .face_img .icon_wrap {
        width: 100%;
        height: 320px;
    }
    .sub_04 .page_03 div[class^="section"].section_01 {
        padding-top: 140px;
        max-width: 550px;
        margin-inline: auto;
        padding-left: 50px;
    }
    .page_03 .section_01 .icon_wrap:last-child {
    margin-left: -130px;
    margin-top: -130px;
}
    .sub_04 .page_04 div[class^="section"].section_01 {
        max-width: 320px;
        padding-top: calc(var(--padding) + 20px);
    }
}
@media (max-width: 640px) {
    :root{
    --main_tit: 42px;
    --section_tit: 30px;
    --con_tit: 24px;
    --inner_con_tit: 20px;
    --inner_con_desc: 16px;
    --table_desc: 16px;
    --bottom_desc: 24px;
    --btn_padding: 40px;
    --menu_btn: 16px;
    }
        .tit_deco {
        top: 229px;
    }
    .page_01 .section_01 img {
    min-width: 700px;
    }
    .page_01 .table_list :where(.table_td, .table_th) div:first-of-type{
        max-width: calc(100% * 5 / 14);
    }
    .page_02 .section_02 .con{
        flex-direction: column;
        margin-top: 40px;
    }
      .circles_group {
        max-width: 420px;
        height: unset;
        aspect-ratio: 1 / 1;
        padding-top: 0;
                width: 100%;
    }
.circle {
    width: 50%;
}
.circle:nth-of-type(1) {
    bottom: unset;
    top: 0;
}
.circle:nth-of-type(2) {
    top: 55%;
          transform: translate(-50%, -40%);
        }
.circle:nth-of-type(3) {
    top: 55%;
            transform: translate(+50%, -40%);
}
.page_02 .section_02 .con>.icon_wrap {
        margin-inline: -20px 0px;
        width: 25px;
        margin-top: -30px;
        text-align: center;
        margin-inline: auto;
        transform: rotate(90deg);
    }
    .page_02 .section_02 .face_img {
        gap: 0;
        max-width: 240px;
        width: 100%;
        margin-top: 50px;
    }
        .face_img .icon_wrap {
        height: auto;
    }
        .sub_04 .page_03 div[class^="section"].section_01 {
        padding-top: 120px;
        max-width: 550px;
        margin-inline: auto;
        padding-left: 30px;
        padding-right: 10px;
    }
    .sub_04 .page_04 div[class^="section"].section_01 {
        max-width: 280px;
        padding-top: calc(var(--padding) + 20px);
    }
}
@media (max-width: 500px) {
    :root{
    --main_tit: 36px;
    --section_tit: 24px;
    --con_tit: 22px;
    --inner_con_tit: 18px;
    --inner_con_desc: 16px;
        --table_desc: 14px;
    --bottom_desc: 22px;
    --menu_btn: 16px;
    }
    .sub_menu_wrap li {
        flex: 100%;
        border: none;
    }
    .sub_menu_wrap li:nth-child(2n-1){
        border-top: 1px solid #fff;
    }
    .sub_menu_wrap li:last-of-type{
        border-bottom: 1px solid #fff;
    }
    .sub_menu_wrap li:nth-of-type(2){
        border-left: 0;
    }
    .sub_menu_wrap li:nth-of-type(2n-1){
        border-right: 0;
    }
    .sub_04 .page_03 div[class^="section"].section_01 {
        max-width: 320px;
    }
}