@charset "utf-8";

:root {
    --sec-padding: 150px;
}

.index {margin-top:120px}
.index .title_box .sub {display:flex;align-items:center;font-size:17px;font-weight:500;color:#3C87BC;text-transform:uppercase;margin-bottom:25px}
.index .title_box .sub::before {content:'';display:block;width:60px;height:1px;background:#3C87BC;margin-right:35px}
.index .title_box .tit {display:block;font-size:40px;font-weight:600}
.index .title_box p {max-width:612px;font-size:22px;color:#3E3E3E;line-height:1.8;margin:70px 0}

.index .btn_more {display:inline-block}
.index .btn_more img {transition:all .2s}
.index .btn_more:hover img {transform:translateX(10px)}
.index .btn_more span {display:block;font-size:18px;font-weight:700;margin-top:8px}
.index .btn_more span b{font-weight: 700;color: #aaa;}

.sct_01 {position:relative}
.sct_01 .img_wrap {height:870px;max-height:calc(100vh - 120px);width:100%;overflow:hidden}
.sct_01 .img_wrap img {width:100%;height:100%;object-fit:cover;animation:scaleUp 10s alternate both linear}
.sct_01 .txt_wrap {width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:0;color:var(--white);text-align:center}
.sct_01 .txt_wrap .sub {display:block;font-size:24px}
.sct_01 .txt_wrap .sub strong {color:#ECC084}
.sct_01 .txt_wrap p {font-size:70px;font-weight:700;margin-top:30px;text-transform:capitalize;}
.sct_01 .scroll_down {font-size:18px;font-weight:300;color:var(--white);position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.sct_01 .scroll_down span {display:block;transform-origin:right bottom;transform:rotate(90deg) translateY(50%);border-bottom:solid 1px rgba(255,255,255,.5);padding:12px 10px}
.sct_01 .scroll_down span::after {content:'';display:block;width:50%;height:1px;background:var(--white);position:absolute;bottom:-1px;left:0}
@keyframes scaleUp {
    from {transform:scale(1)}
    to {transform:scale(1.1)}
}

.sct_02 {position:relative}
.sct_02 .scroll_txt {display:flex;align-items:center;width:100%;position:absolute;bottom:5%;left:0;z-index:-1}
.sct_02 .scroll_txt::before {content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.8));position:absolute;top:0;left:0;z-index:1}
.sct_02 .scroll_txt p {font-size:300px;font-weight:700;letter-spacing:.05em;color:rgba(0,0,0,.1);white-space:nowrap;animation:sliding 35s linear infinite;font-family: "Playfair Display", serif !important;padding:0 3%}
.sct_02 .inner {display:flex;max-width:1960px}
.sct_02 .img_wrap {width:100%;display:flex;align-items:flex-end;justify-content:center;padding:20px 20px 0}
.sct_02 .img_wrap img {width:95%;max-width:490px}
.sct_02 .txt_wrap {width:100%;padding:170px 6%}
.sct_02 .txt_wrap .sub {color:var(--primary)}
.sct_02 .txt_wrap .sub::before {background:var(--primary)}
.sct_02 .txt_wrap .tit {display:block;font-size:50px;font-weight:400;position:relative}
.sct_02 .txt_wrap .tit::before {content:'';display:block;width:110px;height:94px;background:url('/html/img/index_02_02.svg') no-repeat right top/100%;position:absolute;top:-32%;right:6%}
.sct_02 .txt_wrap .tit strong {font-family:inherit}
@keyframes sliding {
    from {transform:translateX(0);}
    to {transform:translateX(-100%);}
}

.sct_03 {background:url('/html/img/index_03_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0;color:var(--white)}
.sct_03 .cont {margin-top:40px;position:relative}
.sct_03 .swiper,
.sct_03 .sct03_con_wrap
{overflow:hidden}
.sct_03 .sct03_con_wrap .sct03_con_line{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.sct_03 .sct03_con_wrap .sct03_con_line > div{
    width: calc(33.33% - (80px / 3));
}
.sct_03 .swiper-slide,
.sct_03 .sct03_con_wrap .con_box
{border:solid 1px var(--white);background:rgba(255,255,255,.06);border-radius:20px;text-align:center;padding:55px}
.sct_03 .sct03_con_wrap .con_box .sub {display:block;font-size:18px;color:#CF9037}
.sct_03 .sct03_con_wrap .con_box .tit {display:block;font-size:30px;font-weight:600;;margin-top:10px}
.sct_03 .sct03_con_wrap .con_box img {margin:58px 0}
.sct_03 .sct03_con_wrap .con_box a {display:flex;align-items:center;justify-content:center;gap:0 10px;height:52px;border:solid 1px var(--white);border-radius:12px;color:var(--white);font-size:22px;font-weight:600;transition:all .2s}
.sct_03 .sct03_con_wrap .con_box a path {transition:all .2s}
.sct_03 .sct03_con_wrap .con_box a:hover {background:var(--white);color:var(--black)}
.sct_03 .sct03_con_wrap .con_box a:hover path {fill:var(--black)}
.sct_03 .btn_prev,
.sct_03 .btn_next {width:56px;min-width:56px;height:56px;position:absolute;top:50%;left:-136px;transform:translateY(-50%)}
.sct_03 .btn_next {left:auto;right:-136px}

.sct_04 {padding:150px 0 250px;position:relative}
.sct_04::before {content:'';display:block;width:100%;height:310px;background:#02528A;position:absolute;bottom:0;left:0;z-index:-2}
.sct_04::after {content:'';display:block;width:40%;height:100%;background:#F5F6F7;position:absolute;bottom:0;left:0;z-index:-1}
.sct_04 .inner {display:flex;align-items:center;justify-content:center;gap:0 40px}
.sct_04 .title_box .tit {font-size:50px}
.sct_04 .title_box p {max-width:730px}
.sct_04 .img_wrap {width:400px;position:relative}
.sct_04 .img_wrap .img2 {width:75%;position:absolute;bottom:83%;left:75%;z-index:-1}

.sct_05 {padding:var(--sec-padding) 0}
.sct_05 .title_box .tit {font-size:50px}
.sct_05 .list {display:flex;gap:40px;flex-wrap: wrap;margin-top:80px}
.sct_05 .list .item {width: calc(33.33% - (80px / 3));min-width:0;display:block;background:#F7F7F7}
.sct_05 .list .item:hover .img_wrap img {transform:scale(1.05)}
.sct_05 .list .item .img_wrap {overflow:hidden}
.sct_05 .list .item .img_wrap img {transition:all .4s}
.sct_05 .list .item .txt_wrap {padding:35px 40px 54px}
.sct_05 .list .item .txt_wrap .tit {display:block;font-size:24px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sct_05 .list .item .txt_wrap p {font-size:20px;line-height:1.6;color:#3E3E3E;margin-top:20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; max-height: 60px; overflow: hidden;text-overflow: ellipsis;white-space:unset;}
.sct_05 .list .item .txt_wrap .tag {display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:18px;color:#AAA081;margin-top:60px}

@media screen and (max-width: 1700px){
    .sct_03 .btn_prev {left:-78px}
    .sct_03 .btn_next {right:-78px}
}
@media screen and (max-width: 1550px){
    .sct_02 .img_wrap {width:60%}
    .sct_02 .txt_wrap .tit {font-size:44px}

    .sct_03 .inner {max-width:1200px}
}
@media screen and (max-width: 1340px){
    .sct_03 .inner {max-width:1400px}
    .sct_03 .btn_prev, .sct_03 .btn_next {display:none}
}
@media screen and (max-width: 1200px){
    :root {
        --sec-padding: 120px;
    }
    
    .index .title_box .sub {font-size:14px;margin-bottom:20px}
    .index .title_box .sub::before {width:40px;margin-right:20px}
    .index .title_box .tit {font-size:32px}
    .index .title_box p {max-width:500px;font-size:16px;margin:50px 0}

    .index .btn_more img {width:140px}
    .index .btn_more span {font-size:16px}

    .sct_01 .txt_wrap p {font-size:50px}

    .sct_02 .scroll_txt p {font-size:180px}
    .sct_02 .txt_wrap {padding:120px 6%}
    .sct_02 .txt_wrap .tit {font-size:34px}
    .sct_02 .txt_wrap .tit::before {width:80px}

    .sct_03 .swiper-slide,
    .sct_03 .sct03_con_wrap .con_box
    {padding:40px 30px}
    .sct_03 .swiper-slide .sub,
    .sct_03 .sct03_con_wrap .con_box .sub
    {font-size:16px}
    .sct_03 .swiper-slide .tit,
    .sct_03 .sct03_con_wrap .con_box .tit
    {font-size:18px;}
    .sct_03 .swiper-slide img,
    .sct_03 .sct03_con_wrap .con_box img
    {width:80px;margin:20px 0}
    .sct_03 .swiper-slide a,
    .sct_03 .sct03_con_wrap .con_box a
    {font-size:16px;height:48px;border-radius:6px}

    .sct_03 .sct03_con_wrap .sct03_con_line{
        gap: 10px;
    }
    .sct_03 .sct03_con_wrap .sct03_con_line > div{
        width: calc(50% - 5px);
    }
 
    .sct_04 {padding:120px 0 160px}
    .sct_04::before {height:30%}
    .sct_04 .title_box p {max-width:340px}
    .sct_04 .img_wrap {width:300px}

    .sct_05 .title_box .tit {font-size:40px}
    .sct_05 .list {gap:30px;margin-top:60px}
    .sct_05 .list .item .txt_wrap {padding:30px}
    .sct_05 .list .item .txt_wrap .tit {font-size:20px}
    .sct_05 .list .item .txt_wrap p {font-size:16px}
    .sct_05 .list .item .txt_wrap .tag {font-size:14px;margin-top:40px}
}
@media screen and (max-width: 1024px){
    .index {margin-top:80px}

    .sct_01 .img_wrap {max-height:calc(100vh - 80px)}

    .sct_02 .inner {flex-direction:column-reverse;}
    .sct_02 .img_wrap {width:100%;max-width:330px;margin:-40% 0 0 auto}
    .sct_02 .txt_wrap {width:fit-content;padding:120px 80px 120px 0}
}
@media screen and (max-width: 768px){
    :root {
        --sec-padding: 80px;
    }

    .index .title_box .sub {margin-bottom:12px}
    .index .title_box .tit {font-size:28px}
    .index .title_box p {max-width:420px;font-size:15px;margin:40px 0}
    .index .btn_more img {width:120px}
    .index .btn_more span {font-size:14px;margin-top:5px}

    .sct_01 .img_wrap {height:600px}
    .sct_01 .txt_wrap .sub {font-size:20px}
    .sct_01 .txt_wrap p {font-size:40px;margin-top:20px}

    .sct_01 .scroll_down {font-size:14px}
    .sct_01 .scroll_down span {padding:8px}

    .sct_02 .scroll_txt p {font-size:100px}
    .sct_02 .txt_wrap {padding:100px 30px 100px 0}
    .sct_02 .txt_wrap .tit {font-size:24px}
    .sct_02 .txt_wrap .tit::before {width:50px;right:0}
    .sct_02 .txt_wrap p {padding-right:20px}
    .sct_02 .img_wrap {margin-top:-34%}
 
    .sct_03 .swiper,
    .sct_03 .sct03_con_wrap
    {overflow:visible;}
    .sct_03 .swiper-slide,
    .sct_03 .sct03_con_wrap .con_box
    {border-radius:14px;padding:40px 10px 30px}
    .sct_03 .swiper-slide .sub,
    .sct_03 .sct03_con_wrap .con_box .sub
    {font-size:14px}
    .sct_03 .swiper-slide a,
    .sct_03 .sct03_con_wrap .con_box a
    {height:44px;font-size:14px}
    .sct_03 .swiper-slide a svg,
    .sct_03 .sct03_con_wrap .con_box a svg
    {width:10px}

    .sct_04 {padding:80px 0 60px}
    .sct_04::after {width:70%}
    .sct_04 .inner {flex-direction:column;align-items:flex-start;gap:20px 0}
    .sct_04 .img_wrap {width:70%;max-width:300px;margin-left:auto}
    .sct_04 .title_box p {padding-right:40px}
    
    .sct_05 .list {flex-direction:column;gap:20px;margin-top:40px}
    .sct_05 .list .item{width: 100%;}
    .sct_05 .list .item .txt_wrap {padding:24px 20px}
    .sct_05 .list .item .txt_wrap .tit {font-size:18px}
    .sct_05 .list .item .txt_wrap p {font-size:14px;margin-top:16px}
    .sct_05 .list .item .txt_wrap .tag {margin-top:30px}
}
@media screen and (max-width: 370px){
    .sct_03 .sct03_con_wrap .sct03_con_line > div{
        width: 100%;
    }
    .sct_03 .sct03_con_wrap .con_box .tit{
        margin-top: 4px;
    }
}