@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --primary: #32425C;
}
.wrapper {max-width:1440px}
.font-playfair {font-family: "Playfair Display", serif;}
.title_box {margin-bottom:60px}
.title_box p {color:#565656}

.sec_hero .txt_wrap .logo {max-width:543px}
.sec_hero .txt_wrap .tit .color {color:#B7D2FF}
.sec_hero .view_more .round {background:var(--primary)}

.sec_info {background:var(--primary)}

.sec_03 {padding:var(--sec-padding) 0}
.sec_03 .over_view {margin-top:120px}

.sec_04 {background:#F7F9FC;padding:var(--sec-padding) 0}
.sec_04 .title_box.side {flex-wrap:wrap;gap:20px}
.sec_04 .title_box p {max-width:660px}
.sec_04 .img_wrap {padding-left:calc((50vw - 710px));margin-left:20px}

.sec_05 {padding:var(--sec-padding) 0}
.sec_05 .cont {display:flex;gap:40px}
.sec_05 .cont > div {width:100%}
.sec_05 .cont .tit {display:block;font-size:24px;font-weight:600}
.sec_05 .cont .tit_en {display:block;font-size:34px;font-weight:600;margin-top:10px}
.sec_05 .color {padding:50px;border:solid 1px #999999;border-radius:10px}
.sec_05 .color .list {display:flex;flex-direction:column;gap:20px;margin-top:40px}
.sec_05 .color .list > div {display:flex;align-items:center;justify-content:space-between;height:100px;border-radius:10px;color:#ffffff;font-size:20px;padding:0 40px}
.sec_05 .color .list .item_01 {background:#084784}
.sec_05 .color .list .item_02 {background:#32425C}
.sec_05 .color .list .item_03 {background:#225AC6}
.sec_05 .font {display:flex;flex-direction:column;gap:40px;}
.sec_05 .font > div {flex:1;display:flex;align-items:center;justify-content:space-between;padding:20px 50px;background:#F7F9FC;border-radius:10px}
.sec_05 .font > div:first-child {background:#084784;color:#ffffff}
.sec_05 .font strong {font-size:100px}

.sec_06 {position:relative}
.sec_06::before {content:'';display:block;width:100%;height:600px;background:#084784 url('img/emblem.svg') no-repeat right bottom/500px;position:absolute;top:0;left:0}
.sec_06 .title_box,
.sec_06 .title_box p {color:#ffffff}
.sec_06 .page_view .list > div:nth-child(2) {margin-top:120px}

.sec_07 {background:#F7F9FC;padding:var(--sec-padding) 0}

.sec_09 {position:relative}
.sec_09 .title_box {position:absolute;top:0;left:0;width:100%;padding:var(--sec-padding) 0}

.sec_10 {background:url('img/sec_10_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0;color:#ffffff}
.sec_10 .title_box {margin:0;padding-left:50%}
.sec_10 .title_box p {font-size:34px;color:#ffffff}

.sec_11 {padding:320px 0;background:url('img/sec_11_bg.jpg') no-repeat center bottom/cover}


@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}

    .sec_03 .over_view {margin-top:80px}

    .sec_05 .cont {gap:20px}
    .sec_05 .cont .tit {font-size:20px}
    .sec_05 .cont .tit_en {font-size:25px}
    .sec_05 .color {padding:32px}
    .sec_05 .color .list {margin-top:26px}
    .sec_05 .color .list > div {height:80px;font-size:16px;padding:0 30px}
    .sec_05 .font {gap:30px}
    .sec_05 .font strong {font-size:80px}

    .sec_06::before {height:470px;background-size:30%}
    
    .sec_10 .title_box p {font-size:24px}

    .sec_11 {padding:160px 0}
    .sec_11 .logo {max-width:298px}
    /*
    */
}

@media all and (max-width: 1023px) {
    .sec_10 .title_box {padding:0 10px}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    
    .sec_03 .over_view {margin-top:48px}

    .sec_05 .color {padding:20px}
    .sec_05 .cont {flex-direction:column;}
    .sec_05 .cont .tit {font-size:15px}
    .sec_05 .cont .tit_en {font-size:18px}
    .sec_05 .color .list {margin-top:14px;gap:10px}
    .sec_05 .color .list > div {height:60px;font-size:14px;padding:0 20px}
    .sec_05 .font {gap:20px}
    .sec_05 .font strong {font-size:60px}
    .sec_05 .font > div {height:150px;flex:none;padding:20px}
    
    .sec_06::before {height:340px;background-size:200px}
    .sec_06.page_view .list {margin-top:24px}

    .sec_09 .title_box {padding:80px 0 140px}
    .sec_09 .banner_img {height:100%}
    .sec_09 .banner_img img {width:100%;height:100%;object-fit:cover;}

    .sec_10 .title_box p {font-size:14px}

    .sec_11 {padding:80px 0}
    .sec_11 .logo {width:100%;max-width:120px}
}

@media all and (max-width: 499px) {
    .sec_09 .banner_img {height:300px}
}