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

.title_box {margin-bottom:60px}
.wrapper {max-width:1440px}
.sec_hero .txt_wrap .logo {max-width:270px}
.sec_hero .txt_wrap .tit .color {color:var(--primary)}
.sec_hero .view_more .round {background:#F2F2DA}

.sec_info {background:linear-gradient(125deg, #333143 20%, #DAD9C7)}
.sec_info .cont {color:#FFFFFF}

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

.font-cormorant {font-family: "Cormorant Garamond", serif;}
.sec_04 {background:url('img/sec_04_bg.jpg') no-repeat center/cover;color:#ffffff;padding:var(--sec-padding) 0 0}
.sec_04 .color_area {margin-top:var(--sec-padding)}
.sec_04 .color_area .box {border:solid 1px #F2F2DA;padding:40px}
.sec_04 .color_area .box > .tit {display:block;font-size:36px;font-weight:700;color:#F2F2DA;margin-bottom:20px}
.sec_04 .color_area .color_list {display:grid;grid-template-columns:repeat(3, 1fr);gap:30px}
.sec_04 .color_area .color_list > div {width:100%;height:330px;font-size:14px}
.sec_04 .color_area .color_list > div:last-child {display:flex;flex-direction:column;gap:30px}
.sec_04 .color_area .color_list > div:last-child .item {height:100%}
.sec_04 .color_area .color_list .item {background:#333143;border-radius:20px;padding:24px}
.sec_04 .color_area .color_list .item strong {display:block;font-size:18px;margin-bottom:10px}
.sec_04 .color_area .color_list .item_02 {background:#F2F2DA;color:#333143}
.sec_04 .color_area .color_list .item_03 {background:#1F1F1F}
.sec_04 .color_area .color_list .item_04 {background:#FFFFFF;color:#333143}
.sec_04 .font_area > div {margin-top:60px}
.sec_04 .font_area > div .tit {display:block;color:#F2F2DA;font-size:36px;font-weight:700;margin-bottom:20px}
.sec_04 .font_area > div .tit .small {font-weight:600;font-size:20px;color:#ffffff;margin-left:20px;display:inline-block}
.sec_04 .font_area > div p {font-size:44px;line-height:1.3;color:#F2F2DA}
.sec_04 .font_area > div p.small {font-size:20px;line-height:1.5;color:#ffffff;margin-top:12px}
.sec_04 .img_wrap {margin-top:100px;position:relative}
.sec_04 .img_wrap::before {content:'';display:block;width:100%;height:40%;background:#F2F2DA;position:absolute;bottom:0;left:0}
.sec_04 .img_wrap img {width:100%;position:relative;z-index:2}

.sec_05 {background:#F2F2DA;padding:100px 0 var(--sec-padding)}
.page_view .list > div {box-shadow:none}
.page_view .list > div img {display:block;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.page_view .list div img+img {margin-top:80px}
.page_view .list > div:nth-child(2) {margin:0 !important}

.sec_07 {background:url('img/sec_07_bg.jpg') no-repeat center/cover}
.sec_07 .title_box * {color:#ffffff !important}


@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}
    .sec_hero .txt_wrap .logo {max-width:200px}
    .sec_03 .over_view {margin-top:80px}

    .sec_04 .font_area > div {margin-top:45px}
    .sec_04 .font_area > div .tit {font-size:28px;}
    .sec_04 .font_area > div .tit .small {font-size:17px}
    .sec_04 .font_area > div p {font-size:34px}
    .sec_04 .font_area > div p.small {font-size:18px}
    .sec_04 .img_wrap {margin-top:70px}

    .sec_05 {padding-top:65px}
    .page_view .list div img+img {margin-top:50px}
}

@media all and (max-width: 1023px) {
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px;}
    .sec_hero .txt_wrap .logo {max-width:156px}

    .sec_03 .over_view {margin-top:48px}
    .sec_04 .font_area > div {margin-top:30px}
    .sec_04 .font_area > div .tit {font-size:22px;}
    .sec_04 .font_area > div .tit .small {font-size:14px;margin-left:10px}
    .sec_04 .font_area > div p {font-size:24px}
    .sec_04 .font_area > div p.small {font-size:16px}
    .sec_04 .color_area .box {padding:20px}
    .sec_04 .color_area .box > .tit {font-size:22px;margin-bottom:16px;text-align:center}
    .sec_04 .color_area .color_list {display:flex;flex-direction:column;gap:10px}
    .sec_04 .color_area .color_list .item {height:150px;border-radius:10px;padding:16px;font-size:12px}
    .sec_04 .color_area .color_list .item strong {font-size:15px;margin-bottom:5px}
    .sec_04 .color_area .color_list > div:last-child {gap:10px}
    .sec_04 .img_wrap {margin-top:40px}

    .sec_05 {padding-top:35px}
    .page_view .list {margin-top:24px}
    .page_view .list div img+img {margin-top:20px}
}