@charset "utf-8";

/* html,body {scroll-behavior: smooth;} */

/*header*/
header {position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1); transition: .3s; z-index: 1;}
header nav {height: 100%;}
header nav ul {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
header nav ul li + li {margin-left: 40px;}
header nav a { font-size: 15px; font-weight: 300; letter-spacing: -0.038rem;} 
header nav .copyright {display: none; color: rgba(255, 255, 255, 0.30); font-size: 12px; font-weight: 500; letter-spacing: -0.015rem;}
header.on { height: 60px; border-color:#EEE; background-color: #FFFFFF;}

/*footer*/
footer { padding: 64px 20px 60px; background: #000;}
footer .content {display: flex; align-items: flex-start; justify-content: space-between;}
footer strong {color: #FFFFFF; font-size: 18px; font-weight: 700; letter-spacing: -0.023rem;}
footer .txt-box {margin-left: 69px;}
footer .txt-box p {display: block; color: #FFFFFF; font-weight: 500; line-height: 200%; letter-spacing: -0.02rem;}
footer .txt-box > span { display: block; margin-top: 45px; color: #AFAFAF; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: -0.018rem;}
footer .txt-box > span #copyright-year {color: #AFAFAF; font-weight: 500; line-height: 1.6; letter-spacing: -0.018rem;}


/*공통 설정*/
section { scroll-margin-top: 68px; padding: 90px 20px;}
section:nth-child(even) {background-color: #F8F8FB;}
section:nth-child(odd) {background-color: #fff;}

.content { width: 100%; max-width: 1120px; margin: 0 auto; }

.tit-box h2 { font-family: 'SeoulNamsan',sans-serif; font-weight: 700; font-size: 44px; letter-spacing: -0.11rem; word-break: keep-all; }
.tit-box h3 { display: block; margin-top: 10px;font-size: 32px; font-weight: 600; line-height: 140%; word-break: keep-all;  letter-spacing: -0.04rem;}
.tit-box p { display: block; margin-top: 30px; color: #333; font-size: 24px; font-weight: 300; line-height: 180%; text-align: justify; word-break: break-word; letter-spacing: -0.03rem;}

br.m-show {display: none;}

/*sec-1*/
#sec1 { display: flex; flex-direction: column; justify-content: space-between; padding-top: 175px; padding-bottom: 60px; height: 760px; text-align: center; background: url(../images/hero_new.jpg) no-repeat center 100% / cover; background-position-x: 55%;}
#sec1 > .content { text-align: left; }
#sec1 > .content .title{ color: #FFF; font-size: 27px; font-weight: 300; letter-spacing: -0.02em; }

#sec1 > .content h5 { color: #FFF; font-family: "Noto Sans" , sans-serif; font-size: 138px; font-weight: 800; line-height: 120%; }
#sec1 > .content h5 > span { opacity: 0.9; color: #FFF; font-family: "Noto Sans" , sans-serif; font-size: 138px; font-weight: 200; line-height: 120%; }
#sec1 > .content .desc { padding-top: 12px; color: #FFF; font-size: 24px; font-weight: 300; line-height: 180%; letter-spacing: -0.02em; }

#sec1 > .content.bottom  .title { color: #FFF; font-size: 20px; font-weight: 300; line-height: 180%; letter-spacing: -0.02em; }
#sec1 > .content.bottom .txt_wrap {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#sec1 > .content.bottom h5 { font-family: "Montserrat" ,sans-serif; font-size: 34px; line-height: 180%; letter-spacing: -0.02em; }
#sec1 > .content.bottom h5 > span { opacity: 0.8; font-family: "Montserrat" ,sans-serif; font-size: 34px; line-height: 180%; letter-spacing: -0.02em; }

/*sec-2*/
#sec2 .flex-box {display: flex; align-items: flex-start; margin-top: 74px;}
#sec2 .flex-box .item {margin-right: 53px;}
#sec2 .flex-box strong {display: block; margin-bottom: 10px; color: #222; font-size: 60px; font-weight: 700; letter-spacing: -0.075rem;}
#sec2 .flex-box span {color: #666; font-size: 24px; font-weight: 500; letter-spacing: -0.03rem;}

/*sec-3*/
#sec3 .flex-box {display: flex; justify-content: space-between;}
#sec3 .tit-box {width: 100%;}
#sec3 .tit-box p {text-align: justify; word-break: break-all;}
#sec3 .tit-box + .tit-box {margin-left: 80px;}
#sec3 .logos {margin-top: 70px;}
#sec3 .logos span {width: 100%;}
#sec3 .logos img {width: 100%;}

/*sec-4*/
#sec4 .grid-box {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px;}
#sec4 .item { position: relative; width: calc(100% / 3 - 12px); margin-bottom: 20px; min-height: 360px; padding: 30px; background-color: #FFFFFF; }
#sec4 .item p { color: #000; font-size: 22px; font-weight: 600; letter-spacing: -0.055rem; }
#sec4 .item strong { display: block; margin: 10px 0; color: #000; font-size: 23px; font-weight: 600; letter-spacing: -0.058rem;}
#sec4 .item span { display: block; text-align: justify; word-break: break-all; color: #000; font-size: 18px;font-weight: 300;line-height: 180%; letter-spacing: -0.056rem;}

#sec4 .arr::after { content: ""; position: absolute; bottom: 30px; right: 30px; width: 16px; height: 16px; background: url(../images/ico_arr_link.png) no-repeat center center / contain;}

#sec4 .black {background-color: #000;}
#sec4 .black.arr::after {background-image: url(../images/ico_arr_link_w.png);}
#sec4 .black p,
#sec4 .black strong,
#sec4 .black span {color: #FFFFFF;}

#sec4 .item-1 {background: url(../images/sec-4_img_new_01.jpg) no-repeat center center / cover;}
#sec4 .item-1::before {content: ""; position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid white; pointer-events: none; }
#sec4 .item-2 {background: url(../images/sec-4_img_new_02.jpg) no-repeat center center / cover;}
#sec4 .item-3 {border: 1px solid #EFEFEF; background-color: #F8F8FB;}
#sec4 .item-5 {position: relative; background: url(../images/sec-4_img_new_03.jpg) no-repeat center center / cover;}
#sec4 .item-5::before {content: ""; position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid white; pointer-events: none; }
#sec4 .item-6 {position: relative; background: url(../images/sec-4_img_new_04.jpg) no-repeat center center / cover;}
#sec4 .item-6::before {content: ""; position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid white; pointer-events: none; }
#sec4 .item-7 {background: url(../images/sec-4_img_new_05.jpg) no-repeat center center / cover;}
#sec4 .item-7::before {content: ""; position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid white; pointer-events: none; }
#sec4 .item-8 {border: 1px solid #EFEFEF; background-color: #F8F8FB;}

/*sec-5*/
#sec5 {padding-bottom: 200px;}
#sec5 .flex-box { margin-top: 107px;}
#sec5 .item {display: flex; gap: 37px;}
#sec5 .item:nth-last-of-type(odd) {flex-direction: row-reverse;}
#sec5 .item + .item {margin-top: 120px;}

#sec5 .flex-box .img-box {width: 50%; min-height: 305px;}
#sec5 .flex-box .img-box img {width: 100%; height: 100%; object-fit: cover;}
#sec5 .flex-box .txt-box { position: relative; width: calc(60% - 40px); min-height: 305px; background: #F8F8FB;}
#sec5 .flex-box .txt-box p { position: absolute; top: -22px; transform: translateY(-100%); display: block; width: 100%; white-space: nowrap; font-size: 21px;font-weight: 600; letter-spacing: -0.053rem;}
#sec5 .item:nth-last-of-type(even) .txt-box p {text-align: right;}
#sec5 .item:nth-last-of-type(even) .txt-box p > span {margin-left: 0; margin-right: 10px;}
#sec5 .flex-box .txt-box p > .en { font-family: "NotoSansCJKkr" ,sans-serif; margin-left: 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.053rem;}
#sec5 .flex-box .txt-box > span { color: #333; display: block; text-align: justify; word-break: break-word; font-size: 19px; font-weight: 300; line-height: 180%; letter-spacing: -0.024rem; }
#sec5 .flex-box .txt-box > span.en { font-family: "NotoSansCJKkr" , sans-serif; line-height: 1.7; padding-top: 10px; }

/*sec-6*/
#sec6 .flex-box {display: flex; margin-top: 43px;}
#sec6 .item {width: 100%; height: auto; padding: 30px; background-color: #FFFFFF;}
#sec6 .item + .item {margin-left: 20px;}
#sec6 .item > strong { font-size: 21px; font-weight: 600; letter-spacing: -0.05rem;word-break: keep-all;}
#sec6 .item > p {display: block; margin: 5px 0 20px; color: #888; font-size: 17px;font-weight: 600; letter-spacing: -0.04rem;word-break: keep-all;}
#sec6 .item > span { display: block; color: #333; font-size: 19px; font-weight: 300; line-height: 180%; letter-spacing: -0.023rem;word-break: keep-all;}
#sec6 .item > span.min_height {min-height: 136px;}
#sec6 .item i { display: block; width: 92px; margin-top: 25px;}
#sec6 .item i img {width: 100%;}

#sec6 .item .info_box {margin-top: 20px;}
#sec6 .item .info_box p { white-space: nowrap; color: #333; font-size: 16px; font-weight: 500; line-height: 180%; letter-spacing: -0.02em; }
#sec6 .item .info_box p > a { display: inline-block; padding-left: 10px; text-decoration: underline #333; text-underline-offset: 3px; color: #333; font-size: 16px; font-weight: 500; line-height: 120%; }
#sec6 .item .info_box p > a > em { display: inline-block; width: 20px; height: 20px; background: url(/images/icon_ArrowUpRight.png) no-repeat 100% / cover; vertical-align: middle; margin-bottom: 3px; }
#sec6 .item .info_box .num { display: inline-block; padding-left: 10px; color: #333; font-family: "NotoSansCJKkr", sans-serif; font-size: 16px; font-weight: 300; line-height: 180%; letter-spacing: -0.02em; }
#sec6 .item .info_box > .flex_wrap {display: flex;}
#sec6 .item .info_box > .flex_wrap p {}
#sec6 .item .info_box > .flex_wrap .num_wrap {width: 100%;}
#sec6 .item .info_box > .flex_wrap .num_wrap span {}

#sec_visit {padding-bottom: 136px;}
#sec_visit .content {text-align: center;}
#sec_visit .tit-box p {text-align: center;}

#sec_visit .flex_box {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 63px; row-gap: 10px;}
#sec_visit .flex_box > a {width: calc((100% / 6) - 17px); }
#sec_visit .flex_box > a > img {width: 100%;}

/*sec-7*/
#sec7 .flex-box {display: flex; align-items: center; margin-top: 60px;}
#sec7 .img-box {width: 100%; max-width: 304px;}
#sec7 .img-box img {width: 100%;}
#sec7 .txt-box {width: 100%; max-width: 740px; height: auto; margin-left: 75px;}
#sec7 .txt-box span { color: #666; font-size: 15px; font-weight: 300; line-height: 180%; letter-spacing: -0.035rem;}
#sec7 .txt-box span b {color: #666; font-weight: 600; }
#sec7 .tit-box p {color: #000;}
/*sec-8*/
#sec8 {background: #222;}
#sec8 .flex-box {display: flex;}
#sec8 .tit-box {width: 100%;}
#sec8 .tit-box h2,
#sec8 .tit-box h3 {color: white;}
#sec8 .tit-box p { text-align: justify; word-break: break-all; color: #BBB;}
#sec8 .tit-box + .tit-box {margin-left: 80px;}

#sec8 .img-box {display: flex; margin-top: 87px;}
#sec8 .img-box span {width: 100%;}
#sec8 .img-box span + span {margin-left: 20px;}
#sec8 .img-box img {width: 100%;}

/*sec-9*/
#sec9 {background: url(../images/sec-9_img.jpg) no-repeat center center / cover;}
#sec9 .tit-box h2,
#sec9 .tit-box h3, 
#sec9 .tit-box p {color: white;}


/* sec_global */
#sec_global {}
#sec_global .tit-box p { margin-bottom: 60px; text-align: left; word-break: keep-all; color: #000; }
#sec_global .item_list {display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 50px;}
#sec_global .item_list > li {width: calc(50% - 10px);}
#sec_global .img_box {position: relative; margin-bottom: 20px;}
#sec_global .img_box > img {width: 100%;}
#sec_global .img_box > span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: #FFF; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }

#sec_global .txt_box {}
#sec_global .txt_box > p { color: #333; font-family: "NotoSansCJKkr" ,sans-serif; font-size: 19px; font-weight: 300; line-height: 180%; letter-spacing: -0.02em; }
#sec_global .txt_box > p + p::before {content: ""; display: block; width: 75px; height: 1px; border-top: 1px solid #E4E4E4; margin: 20px 0;}



.br_500 {display: none;}
.br_600 {display: none;}

@media (max-width:1200px) {
    
    .tit-box h2 {font-size: 35px;}
    .tit-box h3 {font-size: 25px;}
    .tit-box p {font-size: 18px;}
    
    #sec1 { height: 725px;}
    #sec1 > .content .title {font-size: 24px;}
    #sec1 > .content h5 ,
    #sec1 > .content h5 > span {font-size: 90px;}
    #sec1 > .content .desc {font-size: 20px;}

    #sec1 > .content.bottom .title {font-size: 18px;}
    #sec1 > .content.bottom h5,
    #sec1 > .content.bottom h5 > span {font-size: 28px;}

    
    #sec2 .flex-box strong {font-size: 46px;}
    #sec2 .flex-box span {font-size: 20px;}

    #sec3 .img-box {margin-left: 40px;}
    
    #sec4 .item p {font-size: 19px;}
    #sec4 .item strong {font-size: 19px;}
    #sec4 .item span {font-size: 16px;}
    
    
    #sec6 .item span {font-size: 17px;}  
    
    #sec7 .tit-box p br {display: none;}
}

@media (max-width:900px) {
    
    br.m-hide {display: none;}
    
    header nav ul li + li {margin-left: 30px;}
    
    footer .content {flex-wrap: wrap; justify-content: flex-start;}
    footer strong {font-size: 16px;}
    footer .txt-box {margin: 25px 0 0; width: 100%;}
    footer .txt-box p {font-size: 14px;}
    footer .txt-box span {font-size: 13px;}
    
    .tit-box h2 {font-size: 28px;}
    .tit-box h3 {font-size: 20px;}
    .tit-box p {font-size: 16px;}
    
    #sec1 { height: 600px; }
    #sec1 > .content .title {font-size: 20px;}
    #sec1 > .content h5 ,
    #sec1 > .content h5 > span {font-size: 70px;}
    #sec1 > .content .desc {font-size: 18px;}

    #sec1 > .content.bottom .title {font-size: 16px;}
    #sec1 > .content.bottom h5,
    #sec1 > .content.bottom h5 > span {font-size: 22px;}

    #sec2 .flex-box {margin-top: 60px; flex-wrap: wrap;}
    #sec2 .flex-box strong {font-size: 38px;}
    #sec2 .flex-box span {font-size: 17px;}
    
    #sec3 .flex-box {flex-wrap: wrap;}
    #sec3 .tit-box + .tit-box {margin: 70px 0 0 ;}
    #sec3 .tit-box h3 br ,
    #sec3 .tit-box p br {display: none;}
    #sec3 .logos {justify-content: flex-start; align-items: flex-start; text-align: left; }
    #sec3 .logos span {width: calc(100% / 5);}
    
    #sec4 {padding-bottom: 70px;}
    #sec4 .item { width: calc(100% / 2 - 10px); aspect-ratio: auto 1/1; min-height: fit-content;}
    
    #sec5 {padding-bottom: 70px;}
    #sec5 .item {flex-direction: column; gap: 24px;}
    #sec5 .item:nth-last-of-type(odd) {flex-direction: column;}
    #sec5 .item + .item {margin-top: 60px;}
    #sec5 .flex-box {margin-top: 40px;}
    #sec5 .flex-box .img-box {width: 100%; min-height: 0;}
    #sec5 .flex-box .txt-box {width: 100%;}
    #sec5 .flex-box .txt-box p {position: static; transform: translate(0); margin-bottom: 15px; white-space: wrap; font-size: 19px;}
    #sec5 .flex-box .txt-box p > .en {font-size: 19px;}
    #sec5 .flex-box .txt-box > span {font-size: 17px;}
    #sec5 .item:nth-last-of-type(even) .txt-box p { display: flex; flex-direction: column; text-align: left; }
    #sec5 .item:nth-last-of-type(even) .txt-box p > span {order: 2;}

    
    #sec6 .flex-box {flex-wrap: wrap;}
    #sec6 .item span { min-height: auto; font-size: 17px;}  
    #sec6 .item > span.min_height {min-height: auto;}
    #sec6 .item + .item {margin: 20px 0 0;}
    
    #sec7 .flex-box {flex-wrap: wrap;}
    #sec7 .txt-box { margin: 75px 0 0; max-width: 100%;}
    #sec7 .img-box {margin: 0 auto;}
    
    #sec8 .flex-box {flex-wrap: wrap;}
    #sec8 .tit-box + .tit-box {margin: 70px 0 0;}
    #sec8 .img-box {flex-wrap: wrap; justify-content: space-between; margin-top: 50px;}
    #sec8 .img-box span {width: calc(100% / 2 - 10px); margin-bottom: 20px;}
    #sec8 .img-box span + span {margin: 0;}

    #sec_global .item_list {}
    #sec_global .item_list > li {width: 100%;}
    
    #sec_visit .flex_box {justify-content: flex-start; gap: 10px; margin-top: 20px;}
    #sec_visit .flex_box > a {width: calc((100% / 4) - 10px);}

    #sec_visit {padding-bottom: 100px;}
}

@media (max-width:768px) {
    #sec1 > .content {text-align: center;}
    #sec1 > .content .title {font-size: 18px;}
    #sec1 > .content h5 ,
    #sec1 > .content h5 > span {font-size: 65px;}
    #sec1 > .content .desc {font-size: 15px;}
    
    #sec1 > .content.bottom .txt_wrap {justify-content: center;}
    #sec1 > .content.bottom .title {font-size: 17px;}
    #sec1 > .content.bottom h5,
    #sec1 > .content.bottom h5 > span {font-size: 18px;}

    #sec_global .tit-box p {margin-bottom: 40px;}
    #sec_global .img_box > span {font-size: 25px;}
    #sec_global .txt_box > p {font-size: 16px;}


}
@media (max-width:600px) {
    header { height: 60px; border: none;}
    header .ham {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: block; width: 32px; height: 32px; z-index: 3; }
    header .ham span {position: absolute; top: 50%; left: 50%; transform: translate(-50%); width: 22px; height: 1.5px; border-radius: 1px; background-color: #000;}
    header .ham span::after {content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 100%; height: 1.5px; border-radius: 1px; background-color: #000;}
    header .ham span::before {content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 100%; height: 1.5px; border-radius: 1px; background-color: #000;}
    
    header nav {position: fixed; top: 0; left: 150%; width: 100%; height: 100dvh; display:flex; align-items: center; justify-content: center; transition: left .3s; background: #000; z-index: 2;}
    header nav ul { display: block; height: auto;}
    header nav ul a { font-size: 22px; color: #FFFFFF;}
    header nav ul li { text-align: center; width: 100%;}
    header nav ul li + li {margin: 50px 0 0;}
    header nav .copyright {position: absolute; left: 0; bottom: 30px; display: block; width: 100%; text-align: center; }
    
    header.on {height: 60px; border-color: none; background: rgba(255, 255, 255, 0.90);}
    header.active nav {left: 0;}
    header.active .ham span::after {top: 0; left: 50%; transform: translateX(-50%) rotate(45deg); background-color: #FFFFFF;}
    header.active .ham span::before {top:0; left: 50%; transform: translateX(-50%) rotate(-45deg); background-color: #FFFFFF;}
    
    footer {padding: 40px 20px;}
    footer strong {font-size: 14px;}
    footer .txt-box {margin-top: 20px;}
    footer .txt-box p {font-size: 12px; max-width: 275px; word-break: keep-all;}
    footer .txt-box span { margin-top: 20px; font-size: 12px;}
    
    section {scroll-margin-top: 60px; padding: 50px 20px;}
    
    .tit-box h2 {font-size: 24px; line-height: 1.6;}
    .tit-box h3 { margin-top: 0; font-size: 18px;}
    .tit-box p {margin-top: 20px; font-size: 14px;}
    
    br.m-show {display: block;}
    
    #sec1 { height: 550px; padding-top: 128px; padding-bottom: 17px;}
    #sec1 > .content .title {font-size: 17px; margin-bottom: 4px;}
    #sec1 > .content h5 ,
    #sec1 > .content h5 > span {font-size: 54px;}
    #sec1 > .content .desc {padding-top: 32px;}

    #sec1 > .content.bottom .title {font-size: 14px; margin-bottom: 4px;}
    #sec1 > .content.bottom h5,
    #sec1 > .content.bottom h5 > span {font-size: 11px;}


    
    #sec2 {padding-bottom: 10px;}
    #sec2 .flex-box { margin-top: 40px;}
    #sec2 .flex-box .item {width: 100px; margin: 0 20px 40px 0;}
    #sec2 .flex-box strong { margin-bottom: 2px; font-size: 32px;}
    #sec2 .flex-box span {font-size: 15px;}
    
    #sec3 {padding-bottom: 40px;}
    #sec3 .tit-box + .tit-box {margin-top: 40px;}
    #sec3 .logos {margin-top: 50px;}
    #sec3 .logos span {width: calc(100%/4); margin-bottom: 10px;}
    
    #sec4 {padding-bottom: 30px;}
    #sec4 .grid-box { margin-top: 25px; }
    #sec4 .item {width: 100%; aspect-ratio:auto; height: auto; min-height: 43vw; padding: 20px 20px 40px;}
    #sec4 .item p,
    #sec4 .item strong {font-size: 16px;}
    #sec4 .item span {font-size: 14px;}
    
    #sec4 .arr::after {bottom: 20px; right: 20px; width: 12px; height: 12px;}

	#sec4 .item.item-2,
	#sec4 .item.item-6,
	#sec4 .item.item-8 {margin-top:0;}
    #sec4 .item-1::before,
    #sec4 .item-5::before,
    #sec4 .item-6::before,
    #sec4 .item-7::before {top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);}
    
    #sec5 {padding-bottom: 30px;}
    #sec5 .flex-box {margin-top: 25px;}
    #sec5 .flex-box .txt-box p {font-size: 18px;}
    #sec5 .flex-box .txt-box p > .en {font-size: 18px;}

    #sec5 .flex-box .txt-box > span {font-size: 16px;}

    
    #sec6 .flex-box {margin-top: 25px;}
    #sec6 .item {padding: 25px;}
    #sec6 .item strong {font-size: 18px;}
    #sec6 .item p {font-size: 15px;}
    #sec6 .item span {font-size: 14px;}
    #sec6 .item i {width: 70px; margin-top: 20px;}

    #sec6 .item .info_box p {font-size: 14px;}
    #sec6 .item .info_box p > a {padding-left: 5px; font-size: 14px;}
    #sec6 .item .info_box p > a > em { width: 18px; height: 18px;}
    #sec6 .item .info_box .num { padding-left: 5px; font-size: 14px;}


    #sec7 .tit-box p br {display: none;}
    #sec7 .img-box {width: 80%; margin: 0 auto;}
    #sec7 .txt-box {margin-top: 60px;}
    #sec7 .txt-box span {font-size: 13px;}
    
    #sec8 .tit-box + .tit-box {margin-top: 50px;}
    #sec8 .img-box span {width: 100%; margin: 0;}
    #sec8 .img-box span + span {margin-top: 20px;}

    #sec_global .item_list {row-gap: 40px;}
    #sec_global .tit-box p {margin-bottom: 20px;}
    #sec_global .img_box > span {font-size: 24px;}
    #sec_global .txt_box > p {font-size: 15px;}
    #sec_global .txt_box > p + p::before {margin: 13px 0;}

    #sec_visit {padding: 50px 20px;}
    #sec_visit .flex_box {justify-content: flex-start; gap: 0px; row-gap: 20px;}
    #sec_visit .flex_box > a {width: calc((100% / 3) - 0px);}

    .br_600 {display: block;}
}

@media screen and (max-width: 500px) {
    #sec5 .item {gap: 20px;}
    #sec5 .item + .item {margin-top: 40px;}
    #sec5 .flex-box .txt-box p {font-size: 16px; margin-bottom: 10px;}
    #sec5 .flex-box .txt-box p > .en {display: block; margin-left: 0; margin-top: 5px; font-size: 16px;}
    #sec5 .flex-box .txt-box > span {font-size: 15px;}

    
    .br_500 {display: block;}
}

@media screen and (max-width: 400px) {

    #sec5 .flex-box .txt-box > span {font-size: 14px;}

    #sec6 .item .info_box p {text-align: center; white-space: wrap;}
    #sec6 .item .info_box p + p {margin-top: 5px;}
    #sec6 .item .info_box .num {display: inline-block;}
    #sec6 .item .info_box > .flex_wrap { margin-top: 5px; flex-wrap: wrap; justify-content: center;}
    #sec6 .item .info_box > .flex_wrap .num_wrap {text-align: center;}

    
}