/*================= 메인 =================*/ #main {} #main .mainSwiper {overflow: hidden;} #main .txtArea {top: 34%; z-index: 99; color: #fff; text-align: center;} #main .txtArea .subt {font-size: 2.2rem; line-height: 1; padding-bottom: 2.6rem;} #main .txtArea .tit {font-size: 6.2rem; font-weight: bold; line-height: 1} #main .txtArea .util {display: flex; align-items: center; gap: 1.2rem; margin-top: 6rem;} #main .txtArea .util .navBtn {} #main .txtArea .util .utilInn {display: flex; align-items: center; gap: 1.5rem;} #main .txtArea .util .num {font-size: 1.8rem;} #main .txtArea .util .num.cur {font-weight: bold;} #main .txtArea .util .num.total {opacity: 0.8; } #main .txtArea .util .barWrap {width: 13rem; height: 2px;} #main .txtArea .util .barWrap .bar {width: 100%; height: 100%; background: rgba(255,255,255,0.5)} #main .txtArea .util .barWrap .bar .fill {width: 0; height: 100%; background: #fff;} #main .txtArea .util .playBtn {width: 4rem; height: 4rem;} #main .txtArea .util .playBtn.pause {background: url('../img/main_slide_pause.svg') center/contain no-repeat;} #main .txtArea .util .playBtn.play {background: url('../img/main_slide_play.svg') center/contain no-repeat;} #main .lstArea {display: flex; position: absolute; bottom: 0; z-index: 99; width: 100%} #main .lstArea .lst {width: calc(100% / 5); border-top: 1px solid rgba(255,255,255,0.4)} #main .lstArea .lst::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #005596; background: linear-gradient(90deg,rgba(0, 85, 150, 1) 0%, rgba(36, 136, 212, 1) 100%); top: 0; left: 0; opacity: 0; transition: 0.2s;} #main .lstArea .lst + .lst::before {content: ''; display: block; position: absolute; width: 1px; height: 100%; background: rgba(255,255,255,0.4); left: 0; top: 0; z-index: 2;} #main .lstArea .lst a {display: flex; padding: 3.5rem 5rem 3rem 5.5rem; background: rgba(0,0,0,0.30); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); flex-direction: column; align-items: baseline; gap: 0.3rem; z-index: 1;} #main .lstArea .lst .tit {font-size: 2rem; font-weight: bold; color: #fff;} #main .lstArea .lst .ico {margin-left: auto;} #main .lstArea .lst:hover::after {opacity: 1;} #main .lstArea .lst:hover .ico {filter: grayscale(1) brightness(100);} #main .lstArea .lst + .lst:hover::before {display: none;} @media all and (max-width: 880px){ #main .txtArea {top: 30%;} #main .txtArea .subt {font-size: 3rem; padding-bottom: 3rem;} #main .txtArea .tit {font-size: 7rem; line-height: 1.3} #main .txtArea .util {gap: 1.2rem;} #main .txtArea .util .navBtn {} #main .txtArea .util .navBtn img {width: 2.7rem;} #main .txtArea .util .utilInn {} #main .txtArea .util .num {font-size: 2.4rem;} #main .txtArea .util .playBtn {width: 4.5rem; height: 4.5rem;} #main .lstArea {flex-wrap: wrap} #main .lstArea .lst {} #main .lstArea .lst:nth-child(1) {width: calc(100% / 2);} #main .lstArea .lst:nth-child(2) {width: calc(100% / 2);} #main .lstArea .lst:nth-child(3) {width: calc(100% / 3);} #main .lstArea .lst:nth-child(4) {width: calc(100% / 3);} #main .lstArea .lst:nth-child(5) {width: calc(100% / 3);} #main .lstArea .lst a {align-items: center; gap: 1.3rem; flex-direction: column-reverse; padding: 3.5rem 0;} #main .lstArea .lst .tit {font-size: 2.3rem;} #main .lstArea .lst .ico {width: 5rem; margin: auto} } /**영문 추가**/ #main.en .txtArea {top: 30%} #main.en .txtArea .tit {line-height: 1.2} @media all and (max-width: 880px){ #main.en .txtArea {top: 26%} } /*================= 게시판 - 리스트 =================*/ #board {margin-top: 5rem;} #board .total {font-size: 1.8rem; margin-bottom: 2rem;} #board .total b {color: var(--fcb);} #board .boardTable {table-layout: fixed;} #board .boardTable .col1 {width: 8rem;} #board .boardTable .col2 {width: auto;} #board .boardTable .col3 {width: 15rem;} #board .boardTable .col4 {width: 15rem;} #board .boardTable .col5 {width: 15rem;} #board .boardTable thead {border: 1px solid #212121; border-right: 0; border-left: 0; background: #F9F9F9} #board .boardTable tbody {} #board .boardTable tr {} #board .boardTable th {font-size: 1.8rem; padding: 1.5rem 0; font-weight: bold;} #board .boardTable td {font-size: 1.6rem; color: #555; text-align: center; padding: 1.69rem 0; border-bottom: 1px solid #E0E0E0} #board .boardTable td a {text-align: left; padding: 0 2rem; display: block; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #board .paging {display: flex; justify-content: center; margin-top: 7rem; gap: 0.5rem;} #board .paging a {border: 1px solid #ccc; border-radius: 0.4rem; color: #555; font-size: 1.6rem; width: 4rem; height: 4rem; display: grid; place-items: center;} #board .paging a.selected {background: var(--fcb); border: 1px solid var(--fcb); font-weight: bold; color: #fff;} #board .paging a.prev {padding-left: 1.5rem; background: url('../img/ic_paging_last.png') left 1.5rem center / 1rem 1rem no-repeat;} #board .paging a.prev2 {padding-left: 1.5rem; background: url('../img/ic_paging_next.svg') left 1.5rem center / 1rem 1rem no-repeat;} #board .paging a.next {padding-right: 1.5rem; background: url('../img/ic_paging_prev.svg') right 1.5rem center / 1rem 1rem no-repeat;} #board .paging a.next2 {padding-right: 1.5rem; background: url('../img/ic_paging_first.png') right 1.5rem center / 1rem 1rem no-repeat;} @media all and (max-width: 880px){ #board {} #board .total {font-size: 2rem;} #board .boardTable {} #board .boardTable .col1 {width: 8.95%;} #board .boardTable .col2 {width: auto} #board .boardTable .col3 {display: none} #board .boardTable .col4 {width: 14.92%;} #board .boardTable .col5 {width: 19.4%;} #board .boardTable th {font-size: 2rem;} #board .boardTable td {font-size: 2rem;} #board .boardTable th:nth-child(3), #board .boardTable td:nth-child(3) {display: none} #board .paging {} #board .paging a {font-size: 1.8rem; width: 5rem; height: 5rem;} #board .paging a.selected {} #board .paging a.prev {padding-left: 0.8rem; background-position: left 1.7rem center;} #board .paging a.prev2 {padding-left: 0.8rem; background-position: left 1.7rem center;} #board .paging a.next {padding-right: 0.8rem; background-position: right 1.7rem center;} #board .paging a.next2 {padding-right: 0.8rem; background-position: right 1.7rem center;} } /*================= 게시판 - 상세 =================*/ #board .postTop {background: #F5F6F7; padding: 4rem; border-top: 1px solid #121212;} #board .postTop .title {font-size: 2.2rem; font-weight: bold; margin-bottom: 2.6rem;} #board .postTop .info {display: flex; font-size: 1.6rem;} #board .postTop .info li {color: #555} #board .postTop .info li + li {padding-left: 1.4rem; margin-left: 1.4rem;} #board .postTop .info li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 55%; background: #ccc; left: 0; top: 50%; transform: translateY(-50%);} #board .postTop .info li b {margin-right: 1rem; color: #212121} #board .postCont {padding: 5rem 0;} #board .postCont img {max-width: 100%} #board .postCont p {margin-top: 5rem; font-size: 1.6rem;} #board .postFile {border: 1px solid #E5E5E5; border-radius: 0.4rem; padding: 1.3rem 2rem; align-items: center; display: flex; align-items: center;} #board .postFile .ftit {display: flex; align-items: center; padding-right: 2rem; margin-right: 2rem; gap: 1rem; font-size: 1.6rem; color: #333;} #board .postFile .ftit::before {content: ''; display: block; position: absolute; width: 1px; height: 50%; background: #ccc; right: 0; top: 50%; transform: translateY(-50%);} #board .postFile .ftit img {} #board .postFile .fname {font-size: 1.6rem; color: #333;} #board .postNav {margin-top: 2rem; border: 1px solid #555; border-right: 0; border-left: 0;} #board .postNav .navLst {color: #555; font-size: 1.6rem; display: flex; align-items: center;} #board .postNav .postPrev {} #board .postNav .postNext {border-top: 1px dotted;} #board .postNav .postTit {padding: 2rem; display: flex; gap: 2rem; align-items: center; f} #board .postNav .postTit img {} #board .postNav .postSubj {padding: 2rem; flex: 1;} #board .postNav .postSubj.none {color: #aaa} #board .postNav .postDate {padding: 2rem 3rem; margin-left: auto;} #board .backBtn {margin-top: 8rem; text-align: center;} #board .backBtn .btn {display: inline-block; font-size: 1.8rem; color: #fff; font-weight: bold; padding: 1.7rem 7rem; border-radius: 0.5rem; background: var(--fcb);} @media all and (max-width: 880px){ #board .postTop {padding: 4rem 3rem;} #board .postTop .title {font-size: 2.8rem;} #board .postTop .info {font-size: 2.2rem; line-height: 1;} #board .postTop .info li + li::before {height: 75%} #board .postFile .ftit {font-size: 2rem;} #board .postFile .ftit img {width: 2.4rem;} #board .postFile .fname {font-size: 2rem;} #board .postNav .navLst {font-size: 2rem;} #board .postNav .postSubj {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #board .postNav .postDate {font-size: 1.6rem; padding: 2rem} #board .backBtn {} #board .backBtn .btn {padding: 1.45rem 6.25rem; font-size: 2.2rem;} } /*================= 센터장 인사말 =================*/ #greeting {gap: 14rem; padding-top: 5rem;} #greeting .txtPanel {} #greeting .txtPanel .title {font-size: 2.8rem; font-weight: bold; margin-bottom: 4rem;} #greeting .txtPanel .title span {background: linear-gradient(180deg, #007BD9, #163473); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;} #greeting .txtPanel .lstArea {} #greeting .txtPanel .lstArea .lst {} #greeting .txtPanel .lstArea .lst + .lst {margin-top: 3rem;} #greeting .txtPanel .lstArea .ltit {color: #005596; font-size: 2rem; margin-bottom: 0.8rem; padding-left: 2.3rem; background: url('../img/greeting_ic.svg') left center / 1.3rem no-repeat;} #greeting .txtPanel .lstArea .lwrt {font-size: 1.6rem; text-align: justify;} #greeting .txtPanel .prgArea {font-size: 1.6rem; margin-top: 2rem;} #greeting .profPanel {width: 32.7rem; flex-shrink: 0; } #greeting .profPanel .imgArea {} #greeting .profPanel .nameArea {font-size: 1.6rem; gap: 1.5rem; justify-content: flex-end;} /* 2026.03.04 modify */ #greeting .profPanel .nameArea span {font-size: 2.6rem;} /* 2026.03.04 modify */ @media all and (max-width: 880px){ #greeting {flex-direction: column-reverse; align-items: center; gap: 6rem;} #greeting .txtPanel {} #greeting .txtPanel .title {font-size: 3.4rem; text-align: center; margin-bottom: 6rem;} #greeting .txtPanel .title span {} #greeting .txtPanel .lstArea {} #greeting .txtPanel .lstArea .lst {} #greeting .txtPanel .lstArea .lst + .lst {margin-top: 4rem;} #greeting .txtPanel .lstArea .ltit {font-size: 2.8rem;} #greeting .txtPanel .lstArea .lwrt {font-size: 2.4rem} #greeting .txtPanel .prgArea {font-size: 2.4rem; margin-top: 3rem;} #greeting .profPanel {width: 35rem;} #greeting .profPanel .imgArea {} #greeting .profPanel .nameArea {justify-content: center;} #greeting .profPanel .nameArea span {font-size: 2.6rem;} /* 2026.03.04 modify */ } /**영문 추가**/ #greeting.en {gap: 0; justify-content: space-between;} #greeting.en .txtPanel .title {font-size: 2.6rem;} #greeting.en .txtPanel .lstArea {max-width: 72rem;} #greeting.en .txtPanel .lstArea .ltit {background: url(../img/greeting_ic.svg) left top 1rem / 1.3rem no-repeat;} #greeting.en .profPanel .nameArea {flex-direction: column; gap: 0; align-items: flex-end; margin-top: 2.2rem;} @media all and (max-width: 880px){ #greeting.en {gap: 6rem;} #greeting.en .txtPanel .title {font-size: 3.4rem;} #greeting.en .txtPanel .lstArea {} #greeting.en .txtPanel .lstArea .ltit {background: url(../img/greeting_ic.svg) left top 1.5rem / 1.3rem no-repeat;} #greeting.en .profPanel {width: 100%;} #greeting.en .profPanel .imgArea {width: 35rem; margin: 0 auto;} #greeting.en .profPanel .nameArea {align-items: center;} } /*================= 설립 목적/연혁 =================*/ #mission {margin-top: 5rem;} #mission .panel {} #mission .panel .ptit {margin-bottom: 3rem; font-size: 2.4rem; font-weight: bold; gap: 1.1rem;} #mission .panel .ptit img {width: 2rem;} #mission .panel01 {} #mission .panel01 .titArea {margin-bottom: 4rem;} #mission .panel01 .titArea .subt {color: var(--fcb); font-size: 1.6rem;} #mission .panel01 .titArea .tit {font-size: 2.8rem; font-weight: bold; padding-top: 0.5rem;} #mission .panel01 .boxArea {} #mission .panel01 .boxArea .box {border-radius: 2rem; padding: 2rem; gap: 5rem;} #mission .panel01 .boxArea .bxtit {background: #fff; width: 36rem; border-radius: 2rem; text-align: center; padding: 5rem 0; flex-shrink: 0;} #mission .panel01 .boxArea .bxtit .ico {width: 5.9rem;} #mission .panel01 .boxArea .bxtit .txt {font-size: 2rem; font-weight: bold; padding-top: 2.4rem;} #mission .panel01 .boxArea .bxlst {} #mission .panel01 .boxArea .bxlst li {font-size: 1.8rem; line-height: 1.8; padding-left: 1.5rem;} #mission .panel01 .boxArea .bxlst li::before {content: ''; display: block; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%);} #mission .panel01 .boxArea .bxlst li + li {margin-top: 1.1rem;} #mission .panel01 .boxArea .box01 {background: #EBF1F7} #mission .panel01 .boxArea .box01 .bxtit .txt span {color: #005596} #mission .panel01 .boxArea .box01 .bxlst li::before {background: #005596} #mission .panel01 .boxArea .box02 {background: #EBF7F5; margin-top: 2rem} #mission .panel01 .boxArea .box02::before {content: ''; display: block; position: absolute; width: 0.2rem; height: 2rem; background: url('../img/mission_line.png') center/contain no-repeat; bottom: 100%; left: 50%;} #mission .panel01 .boxArea .box02 .bxtit .txt span {color: #33AD92} #mission .panel01 .boxArea .box02 .bxlst li::before {background: #33AD92} #mission .panel02 {margin-top: 10rem} #mission .panel02 .hstSwiper {overflow: hidden; max-width: 118.7rem; padding-bottom: 4.5rem;} #mission .panel02 .hstSwiper .lst {border: 1px solid #E0E0E0; padding: 2.8rem 3.5rem; height: 19.2rem; border-radius: 1rem; transition: 0.1s;} #mission .panel02 .hstSwiper .lst::before {content: ''; display: block; position: absolute; width: 11.4rem; height: 10.7rem; background: url('../img/nav_bg.png') center/contain no-repeat; right: -0.2rem; bottom: -0.2rem;} #mission .panel02 .hstSwiper .lst .year {font-size: 3rem; font-weight: bold; color: #005596; margin-bottom: 1.5rem; transition: 0.1s;} #mission .panel02 .hstSwiper .lst .cont {} #mission .panel02 .hstSwiper .lst .cont li {font-size: 1.6rem; letter-spacing: -0.03rem; transition: 0.1s;} #mission .panel02 .hstSwiper .lst .cont li + li {padding-top: 0.5rem;} #mission .panel02 .hstSwiper .lst:hover {background: #005596; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);} #mission .panel02 .hstSwiper .lst:hover .year {color: #fff;} #mission .panel02 .hstSwiper .lst:hover .cont li {color: #fff;} #mission .panel02 .hstSwiper .hstPg {bottom: 0; top: auto; height: 0.5rem; background: #E0E0E0; border-radius: 2rem; overflow: hidden;} #mission .panel02 .hstSwiper .hstPg span {background: #163474; border-radius: 2rem;} @media all and (max-width: 880px){ #mission {} #mission .panel .ptit {font-size: 3.4rem; margin-bottom: 4rem;} #mission .panel .ptit img {width: 2.5rem;} #mission .panel01 .titArea .subt {font-size: 2.1rem;} #mission .panel01 .titArea .tit {font-size: 3.4rem;} #mission .panel01 .boxArea .box {flex-direction: column; padding: 3rem; gap: 3rem;} #mission .panel01 .boxArea .bxtit {width: 100%;} #mission .panel01 .boxArea .bxtit .ico {width: 6rem;} #mission .panel01 .boxArea .bxtit .txt {font-size: 2.8rem; line-height: 1.5;} #mission .panel01 .boxArea .bxlst {} #mission .panel01 .boxArea .bxlst li {font-size: 2.2rem;} #mission .panel01 .boxArea .bxlst li::before {top: 2rem;} #mission .panel02 .hstSwiper .lst {height: 23.5rem;} #mission .panel02 .hstSwiper .lst .cont li {font-size: 2.2rem;} } /**영문 추가**/ #mission.en .panel01 .boxArea .bxlst li::before {transform: none; top: 1.4rem;} #mission.en .panel02 .hstSwiper .lst {height: 25.8rem;} @media all and (max-width: 880px){ #mission.en .panel01 .boxArea .bxlst li::before {} #mission.en .panel02 .hstSwiper .lst {height: 34rem;} } /*================= 조직구성 =================*/ #organiz {margin-top: 7rem;} #organiz .img {max-width: 105.5rem; margin: 0 auto} @media all and (max-width: 880px){ #organiz {margin-top: 8rem;} #organiz .img {} } /*================= 교류 및 협력 & 양해각서 =================*/ #bannerList {gap: 2.5rem; margin-top: 4rem;} #bannerList .lst {width: calc((100% - 5rem) / 3); border-radius: 0.4rem; border: 1px solid #D9D9D9} #bannerList .lst:hover {border: 1px solid #212121;} #bannerList .lst a {display: block; text-align: center; padding: 4.5rem 0;} #bannerList .lst a img {width: 21rem;} @media all and (max-width: 880px){ #bannerList {margin-top: 5rem; gap: 1.4rem;} #bannerList .lst {width: calc((100% - 1.4rem) / 2);} #bannerList .lst a {} #bannerList .lst a img {} } /*================= 숙소 안내 =================*/ #lodging {margin-top: 7rem;} #lodging .txtArea {margin-bottom: 7rem;} #lodging .txtArea .tit {padding-bottom: 1.6rem; font-size: 2.2rem; font-weight: bold} #lodging .txtArea .tit span {color: var(--fcb);} #lodging .txtArea .wrt {color: #333; font-size: 1.8rem;} #lodging .gallArea {margin-top: 7rem} #lodging .gallArea .tit {margin-bottom: 3rem; font-size: 2.4rem; font-weight: bold; padding-left: 3.1rem;} #lodging .gallArea .tit::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #lodging .gallArea .lst {display: flex; flex-wrap: wrap; gap: 2rem;} #lodging .gallArea .lst li {border-radius: 1rem; overflow: hidden; height: 27rem; cursor: pointer;} #lodging .gallArea .lst li::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: 0.2s; z-index: 1} #lodging .gallArea .lst li::after {content: ''; display: block; position: absolute; width: 5rem; height: 5rem; background: url('../img/lodg_ic.png') center/contain; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.2s; z-index: 1} #lodging .gallArea .lst li:hover::before {opacity: 1;} #lodging .gallArea .lst li:hover::after {opacity: 1;} #lodging .gallArea .lst li img {height: 100%; object-fit: cover;} #lodging .gallArea .lst.grid4 li {width: calc((100% - 6rem) / 4);} #lodging .gallArea .lst.grid3 li {width: calc((100% - 4rem) / 3);} #lodging .modal {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; display: none;} #lodging .modal .modalBg {background: rgba(0,0,0,0.6); height: 100%} #lodging .modal .modalBox {position: absolute; border-radius: 2rem; background: #fff; padding: 4rem; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;} #lodging .modal .modalBox .modalImg {width: 100%; max-width: 70rem; height: 100%;} #lodging .modal .modalBox .modalImg img {height: 100%; object-fit: cover;} #lodging .modal .modalBox .closeBtn {font-size: 1.6rem; padding: 1rem 3.6rem; border: 1px solid #E0E0E0; border-radius: 0.5rem; margin-top: 4rem;} @media all and (max-width: 880px){ #lodging {} #lodging .txtArea {} #lodging .txtArea .tit {font-size: 3.4rem;} #lodging .txtArea .wrt {font-size: 2.2rem;} #lodging .gallArea {} #lodging .gallArea .tit {font-size: 3.4rem; padding-left: 3.6rem;} #lodging .gallArea .tit::before {width: 2.5rem; height: 2.5rem;} #lodging .gallArea .lst {} #lodging .gallArea .lst li {} #lodging .gallArea .lst.grid4 li {width: calc((100% - 2rem) / 2)} #lodging .gallArea .lst.grid3 li {width: calc((100% - 2rem) / 2)} #lodging .modal {} #lodging .modal .modalBg {} #lodging .modal .modalBox {width: var(--innerMo)} #lodging .modal .modalBox .modalImg {width: 100%;} #lodging .modal .modalBox .closeBtn {font-size: 2.2rem;} } /*================= 오시는 길 =================*/ #direction {margin-top: 4rem;} #direction .mapArea {} #direction .mapArea .hide {display: none;} #direction .mapArea .cont {display: none;} #direction .mapInfo {background: #fff; padding: 5rem 7rem; border-radius: 2rem 2rem 0 0; margin-top: -3rem; display: flex; align-items: center; justify-content: space-between; z-index: 1} #direction .mapInfo .mapLogo {width: 36.4rem;} #direction .mapInfo .mapLst {} #direction .mapInfo .mapLst .lst {display: flex; align-items: center; gap: 2rem; font-size: 1.8rem;} #direction .mapInfo .mapLst .lst + .lst {margin-top: 1.7rem;} #direction .mapInfo .mapLst .lst .tit {font-weight: bold; display: flex; align-items: center; gap: 1rem;} #direction .mapInfo .mapLst .lst .tit img {width: 3.2rem;} #direction .mapInfo .mapLst .lst .wrt {letter-spacing: -0.04rem;} #direction .traffic {margin-top: 8rem;} #direction .traffic .title {margin-bottom: 3.4rem; font-size: 2.4rem; font-weight: bold; padding-left: 3.1rem;} #direction .traffic .title::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #direction .traffic .tabLst {display: flex; text-align: center;} #direction .traffic .tabLst li {width: calc(100% / 3); padding: 1.9rem 0; border-radius: 1.5rem 1.5rem 0 0; background: #F4F4F4; font-size: 2rem; font-weight: bold; color: #555; cursor: pointer; border: 1px solid #E0E0E0;} #direction .traffic .tabLst li.on {background: #005596; background: linear-gradient(90deg,rgba(0, 85, 150, 1) 0%, rgba(22, 52, 115, 1) 100%); color: #fff; border: 0;} #direction .traffic .tabBox {padding: 5rem; border: 1px solid #ccc; border-top: 0; display: none;} #direction .traffic .tabBox.on {display: block;} #direction .traffic .tabBox .infoLst {} #direction .traffic .tabBox .infoLst + .infoLst {padding-top: 3rem; margin-top: 3rem; border-top: 1px dotted #ccc;} #direction .traffic .tabBox .infoTit {display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem;} #direction .traffic .tabBox .infoTit .tit {font-size: 2rem; font-weight: bold; padding-left: 2.6rem;} #direction .traffic .tabBox .infoTit .tit::before {content: ''; display: block; position: absolute; width: 1.3rem; height: 1.3rem; background: url('../img/ic_traf_tit.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #direction .traffic .tabBox .infoTit .subt {font-size: 1.6rem; color: var(--fcb)} #direction .traffic .tabBox .infoCont {} #direction .traffic .tabBox .infoCont + .infoCont {margin-top: 3rem;} #direction .traffic .tabBox .infoCont .wrt1 {font-size: 1.6rem; color: #333;} #direction .traffic .tabBox .infoCont .wrt1 span.red {color: #DE0000} #direction .traffic .tabBox .infoCont .wrt2 {margin-top: 1rem; font-size: 1.4rem; color: #555} #direction .traffic .tabBox .infoCont .wrt3 {padding: 0.3rem 1.6rem; border: 1px solid var(--fcb); border-radius: 4rem; color: var(--fcb); font-size: 1.6rem; display: inline-block; margin-bottom: 1rem;} @media all and (max-width: 880px){ #direction {margin-top: 6rem;} #direction .mapArea {} #direction .mapInfo {padding: 5rem 4rem; flex-direction: column; gap: 5rem;} #direction .mapInfo .mapLogo {} #direction .mapInfo .mapLst {width: 100%;} #direction .mapInfo .mapLst .lst {font-size: 2.2rem; flex-direction: column; align-items: baseline;} #direction .mapInfo .mapLst .lst + .lst {margin-top: 3.2rem;} #direction .traffic {} #direction .traffic .title {font-size: 3.4rem; padding-left: 3.6rem;} #direction .traffic .title::before {width: 2.5rem; height: 2.5rem;} #direction .traffic .tabLst {} #direction .traffic .tabLst li {padding: 1.9rem 0; font-size: 2.8rem;} #direction .traffic .tabBox {padding: 4rem;} #direction .traffic .tabBox .infoLst {} #direction .traffic .tabBox .infoLst + .infoLst {} #direction .traffic .tabBox .infoTit {flex-direction: column; align-items: baseline;} #direction .traffic .tabBox .infoTit .tit {font-size: 2.8rem;} #direction .traffic .tabBox .infoTit .subt {font-size: 2rem;} #direction .traffic .tabBox .infoCont {} #direction .traffic .tabBox .infoCont .wrt1 {font-size: 2rem;} #direction .traffic .tabBox .infoCont .wrt2 {font-size: 1.8rem;} #direction .traffic .tabBox .infoCont .wrt3 {font-size: 2rem; padding: 0.3rem 1.6rem;} } /**영문 추가**/ #direction .mapInfo .mapLogo {width: 37rem;} #direction .mapInfo .mapLst .lst .tit {min-width: 11rem;} /*================= 일정안내 =================*/ #schedule {margin-top: 7rem;} #schedule .title {margin-bottom: 5rem; font-size: 2.4rem; font-weight: bold; padding-left: 3.1rem;} #schedule .title::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #schedule .cont {} #schedule .cont + .cont {padding-top: 4rem; margin-top: 3rem; border-top: 1px dotted #ccc;} #schedule .cont .scTit {font-size: 2rem; font-weight: bold; padding-left: 2.6rem; color: var(--fcb);} #schedule .cont .scTit::before {content: ''; display: block; position: absolute; width: 1.3rem; height: 1.3rem; background: url('../img/ic_traf_tit.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #schedule .cont .scLst {color: #333; font-size: 1.6rem; margin-top: 1rem;} #schedule .cont .scLst li {padding-left: 2.6rem;} #schedule .cont .scLst li::before {content: ''; display: block; position: absolute; width: 0.3rem; height: 0.3rem; left: 1rem; top: 50%; transform: translateY(-50%); border-radius: 50%; background: #333;} @media all and (max-width: 880px){ #schedule {margin-top: 5rem;} #schedule .title {font-size: 3.4rem; padding-left: 3.6rem; margin-bottom: 4rem;} #schedule .title::before {width: 2.5rem; height: 2.5rem;} #schedule .cont {} #schedule .cont .scTit {font-size: 2.8rem;} #schedule .cont .scLst {font-size: 2.4rem;} #schedule .cont .scLst li {line-height: 1.7;} #schedule .cont .scLst li::before {} } /*================= 홍보동영상 =================*/ #video {margin-top: 4rem;} #video .vdoArea {max-height: 66.5rem;} #video .vdoArea video {width: 100%; height: 100%; object-fit: cover} @media all and (max-width: 880px){ #video {margin-top: 5rem;} #video .vdoArea {} #video .vdoArea video {} } /*================= 개요 =================*/ #overview {margin-top: 7rem;} #overview .titArea {margin-bottom: 1.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;} #overview .titArea img {width: 1.8rem;} #overview .titArea .tit {font-size: 2.6rem; font-weight: bold; background: linear-gradient(180deg, #007BD9 0%, #163473 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} #overview .boxArea {max-width: 111.7rem; margin: 0 auto;} #overview .boxArea .boxLine {width: 56rem; margin: 0 auto;} #overview .boxWrap {gap: 2.1rem; display: flex; padding-top: 2.8rem;} #overview .boxWrap .box {width: calc((100% - 2.1rem) / 2);} #overview .boxWrap .box .boxTit {font-size: 1.8rem; font-weight: bold; color: #fff; padding: 1.4rem 3.8rem; border-radius: 4.5rem; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); width: max-content; top: -2.8rem; text-align: center} #overview .boxWrap .box .boxTxt {height: 27rem; border-radius: 1rem; padding: 7rem 4rem 0;} #overview .boxWrap .box .boxTxt::before {content: ''; display: block; position: absolute; width: 15rem; height: 21.6rem; right: 0; bottom: 0; background: url('../img/over_box_bg.png') center/contain no-repeat;} #overview .boxWrap .box .boxTxt li {font-size: 1.6rem; padding-left: 1.5rem; text-align: justify;} #overview .boxWrap .box .boxTxt li::before {content: ''; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; position: absolute; left: 0; top: 0.9rem;} #overview .boxWrap .box .boxTxt li + li {margin-top: 1rem;} #overview .boxWrap .boxA .boxTit {background: var(--fcb)} #overview .boxWrap .boxA .boxTxt {background: #EBF1F7;} #overview .boxWrap .boxA .boxTxt li::before {background: #005596} #overview .boxWrap .boxB .boxTit {background: var(--fcg)} #overview .boxWrap .boxB .boxTxt {background: #EBF7F5;} #overview .boxWrap .boxB .boxTxt li::before {background: #33AD92;} #overview .txtArea {margin-top: 5rem; padding: 5rem; border: 1px solid #E0E0E0; border-radius: 1rem;} #overview .txtArea .txtLst {} #overview .txtArea .txtLst .lst {display: flex; gap: 1rem; align-items: baseline;} #overview .txtArea .txtLst .lst + .lst {margin-top: 2rem;} #overview .txtArea .txtLst .lst img {top: 0.3rem;} #overview .txtArea .txtLst .lst span {font-size: 1.8rem; text-align: justify;} @media all and (max-width: 880px){ #overview {margin-top: 5rem;} #overview .titArea {margin-bottom: 0.5rem;} #overview .titArea img {} #overview .titArea .tit {font-size: 3.4rem; background: none;} #overview .titArea .tit span {background: linear-gradient(180deg, #007BD9 0%, #163473 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} #overview .boxArea {} #overview .boxArea .boxLine {width: 34rem;} #overview .boxWrap {padding-top: 4rem;} #overview .boxWrap .box {} #overview .boxWrap .box .boxTit {text-align: center; font-size: 2.2rem; padding: 0.9rem 5rem; line-height: 1.4; top: -4rem;} #overview .boxWrap .box .boxTxt {height: 51.8rem; padding: 8rem 3rem 0;} #overview .boxWrap .box .boxTxt li {font-size: 2.2rem; letter-spacing: -0.08rem;} #overview .boxWrap .box .boxTxt li::before {top: 1.3rem;} #overview .boxWrap .box .boxTxt li + li {margin-top: 2rem;} #overview .txtArea {padding: 5rem 4rem;} #overview .txtArea .txtLst {} #overview .txtArea .txtLst .lst {} #overview .txtArea .txtLst .lst + .lst {margin-top: 2.5rem;} #overview .txtArea .txtLst .lst img {width: 2.1rem;} #overview .txtArea .txtLst .lst span {font-size: 2.2rem; letter-spacing: -0.06rem;} } /**영문 추가**/ #overview.en .boxWrap .boxA .boxTit {padding: 0.5rem 3.8rem; line-height: 1.3;} #overview.en .boxWrap .box .boxTxt {padding: 5.5rem 4rem 0; height: 29.6rem;} @media all and (max-width: 880px){ #overview.en .boxWrap .box .boxTit {padding: 2.5rem 0; width: 100%; border-radius: 70rem;} #overview.en .boxWrap .boxA .boxTit {padding: 1.3rem 0;} #overview.en .boxWrap .box .boxTxt {height: 68rem; padding: 10rem 3rem 0;} } /*================= 국제사법협력 추진 내역 =================*/ #history {margin-top: 7rem;} #history .hstTab {width: 90.3rem; margin: 0 auto; display: flex; gap: 2rem; margin-bottom: 8rem;} #history .hstTab li {width: calc((100% - 4rem) / 3); padding: 1.5rem 0; text-align: center; font-size: 1.8rem; border: 1px solid #E0E0E0; border-radius: 0.5rem; cursor: pointer;} #history .hstTab li.on {color: #fff; font-weight: bold; background: #246DA5; border: 1px solid #246DA5;} #history .hstTab li:hover {color: #fff; font-weight: bold; background: #246DA5; border: 1px solid #246DA5;} #history .hstArea {display: none} #history .hstArea.on {display: block;} #history .hstTit {margin-bottom: 3rem; font-size: 2.4rem; padding-left: 3.1rem; font-weight: bold;} #history .hstTit::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain no-repeat; left: 0; top: 50%; transform: translateY(-50%);} #history .fileLst {display: flex; gap: 2.5rem;} #history .fileLst .lst {width: calc((100% - 5rem) / 3); border: 1px solid #D9D9D9; border-radius: 1rem; overflow: hidden; transition: 0.2s;} #history .fileLst .lst a {padding: 3rem; display: flex; flex-direction: column; align-items: baseline; gap: 3rem;} #history .fileLst .lst .linkIc {margin-left: auto; width: 2rem; filter: contrast(0); transition: 0.2s;} #history .fileLst .lst .tit {font-size: 2rem; font-weight: bold; display: flex; align-items: center; gap: 0.6rem} #history .fileLst .lst .tit .fileIc {width: 2.4rem;} #history .fileLst .lst:hover {box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); border: 1px solid var(--fcb)} #history .fileLst .lst:hover .linkIc {filter: contrast(1);} #history .hstNation {margin-top: 4rem; padding: 5rem; background: #F9F9F9;} #history .hstNation .lstArea {} #history .hstNation .lstArea .lst {} #history .hstNation .lstArea .lst + .lst {padding-top: 3rem; margin-top: 3rem; border-top: 1px dotted #ccc} #history .hstNation .lstArea .lst .tit {margin-bottom: 2rem; font-size: 2rem; font-weight: bold; color: var(--fcb); padding-left: 2.6rem;} #history .hstNation .lstArea .lst .tit::before {content: ''; display: block; position: absolute; width: 1.3rem; height: 1.3rem; background: url('../img/ic_traf_tit.svg') center/contain no-repeat; left: 0; top: 50%; transform: translateY(-50%);} #history .hstNation .lstArea .lst .wrt {font-size: 1.6rem; color: #333; text-align: justify;} #history .hstDetail {} #history .hstDetail + .hstDetail {margin-top: 7rem;} #history .hstDetail .dtTit {padding: 1.7rem 3rem; background: #005596; background: linear-gradient(90deg,rgba(0, 85, 150, 1) 0%, rgba(36, 136, 212, 1) 100%); border-radius: 1rem;} #history .hstDetail .dtTit span {display: inline-block; font-size: 2.2rem; font-weight: bold; color: #fff; padding-left: 2.3rem;} #history .hstDetail .dtTit span::before {content: ''; display: block; position: absolute; width: 1.3rem; height: 1.3rem; background: url('../img/ic_tit_line_w.svg') center/contain; left: 0; top: 50%; transform: translateY(-50%);} #history .hstDetail .dtLst {padding: 3rem 3rem 4rem; border: 1px solid #E0E0E0; border-radius: 1rem;} #history .hstDetail .dtLst li {font-size: 1.8rem; line-height: 1.8; padding-left: 1.5rem;} #history .hstDetail .dtLst li + li {margin-top: 1.1rem;} #history .hstDetail .dtLst li::before {content: ''; display: block; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #555; left: 0; top: 1.3rem;} @media all and (max-width: 880px){ #history {margin-top: 5rem;} #history .hstTab {gap: 1rem; width: 100%; margin-bottom: 10rem;} #history .hstTab li {width: calc((100% - 2rem) / 3); font-size: 2.4rem; line-height: 1.5} #history .hstArea {} #history .hstTit {font-size: 3.4rem; padding-left: 3.6rem;} #history .hstTit::before {width: 2.5rem;} #history .fileLst {gap: 1rem;} #history .fileLst .lst {width: calc((100% - 2rem) / 3);} #history .fileLst .lst a {padding: 2.5rem;} #history .fileLst .lst .linkIc {} #history .fileLst .lst .tit {font-size: 2.4rem;} #history .fileLst .lst .tit .fileIc {} #history .hstNation {padding: 5rem 4rem;} #history .hstNation .lstArea {} #history .hstNation .lstArea .lst {} #history .hstNation .lstArea .lst .tit {font-size: 2.8rem;} #history .hstNation .lstArea .lst .wrt {font-size: 2.2rem; letter-spacing: -0.04rem;} #history .hstDetail {} #history .hstDetail .dtTit {} #history .hstDetail .dtTit span {font-size: 2.8rem;} #history .hstDetail .dtLst {padding: 3rem 2rem 4rem;} #history .hstDetail .dtLst li {font-size: 2.2rem;} #history .hstDetail .dtLst li::before {top: 1.6rem;} } /**영문 추가**/ #history.en .hstTab li {padding: 0.7rem 0; line-height: 1.3;} @media all and (max-width: 880px){ #history.en .hstTab li {line-height: 1.5; padding: 1.5rem 0;} #history.en .hstTit::before {transform: none; top: 1.6rem;} } /*================= 외국법관 연수 프로그램 =================*/ #program {margin-top: 7rem;} #program .prgTit {font-size: 2.4rem; font-weight: bold; padding-left: 3.1rem; margin-bottom: 2rem;} #program .prgTit::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain no-repeat; left: 0; top: 50%; transform: translateY(-50%);} #program .info {} #program .info .infoWrt {font-size: 1.8rem; margin-bottom: 3rem; text-align: justify;} #program .info .applyBox {padding: 4rem 5rem; background: #EBF1F7; border-radius: 1rem; display: flex; align-items: center; gap: 4.3rem;} #program .info .applyBox .ico {width: 9.8rem; flex-shrink: 0;} #program .info .applyBox .txt {width: 100%} #program .info .applyBox .txt .tit {font-size: 2.2rem; font-weight: bold; margin-bottom: 0.8rem;} #program .info .applyBox .txt .wrt {font-size: 1.6rem;} #program .info .applyBox .txt .lst {display: flex; padding-top: 1.7rem; margin-top: 1.7rem; border-top: 1px dotted #ccc; font-size: 1.6rem; gap: 3.8rem;} #program .info .applyBox .txt .lst li {} #program .info .applyBox .txt .lst li b {color: var(--fcb); margin-right: 1.4rem;} #program .schedule {margin-top: 7rem;} #program .schdTable {} #program .schdTable thead {} #program .schdTable tbody {} #program .schdTable tr {} #program .schdTable th {font-size: 1.8rem; padding: 2rem 0; color: #fff; border-radius: 2rem 2rem 0 0; text-transform: uppercase; font-weight: bold;} #program .schdTable th.day1 {background: #91B6D2;} #program .schdTable th.day2 {background: #6D9DC3;} #program .schdTable th.day3 {background: #4885B4;} #program .schdTable th.day4 {background: #246DA5;} #program .schdTable th.day5 {background: #005596;} #program .schdTable td {font-size: 1.6rem; text-align: center; padding: 2rem; border: 1px solid #E0E0E0} #program .schdTable tr.lunch {} #program .schdTable tr.lunch td {padding: 1rem 2rem; background: #F4F4F4} #program .schdPrg {font-size: 1.6rem; color: #555; text-align: right; margin-top: 2rem;} #program .gallery {margin-top: 7rem;} #program .gallery .dayArea {} #program .gallery .dayArea + .dayArea {margin-top: 10rem;} #program .gallery .dayArea .dayTit {margin-bottom: 3rem; font-size: 2.4rem; color: var(--fcb); padding-left: 2.6rem; font-weight: bold;} #program .gallery .dayArea .dayTit::before {content: ''; display: block; position: absolute; width: 1.3rem; height: 1.3rem; background: url('../img/ic_traf_tit.svg') center/contain no-repeat; left: 0; top: 50%; transform: translateY(-50%);} #program .gallery .dayArea .dayLst {gap: 4rem 2.7rem; display: flex; flex-wrap: wrap} #program .gallery .dayArea .dayLst .lst {width: calc((100% - 2.7rem) / 2);} #program .gallery .dayArea .dayLst .lst .img {border-radius: 0.5rem; overflow: hidden;} #program .gallery .dayArea .dayLst .lst .tit {font-size: 2rem; font-weight: bold; padding: 2.5rem 0 0.5rem;} #program .gallery .dayArea .dayLst .lst .wrt {font-size: 1.6rem;} @media all and (max-width: 880px){ #program {margin-top: 5rem;} #program .prgTit {font-size: 3.4rem; margin-bottom: 2rem; padding-left: 3.6rem;} #program .prgTit::before {width: 2.5rem;} #program .info {} #program .info .infoWrt {font-size: 2.2rem;} #program .info .applyBox {padding: 4rem; gap: 3.5rem; align-items: flex-start;} #program .info .applyBox .txt .tit {font-size: 2.8rem;} #program .info .applyBox .txt .wrt {font-size: 2rem;} #program .info .applyBox .txt .lst {flex-direction: column; gap: 1.2rem; font-size: 2rem;} #program .schedule {margin-top: 10rem;} #program .schdTable {table-layout: fixed;} #program .schdTable th {font-size: 2.4rem; padding: 1.2rem 0;} #program .schdTable td {font-size: 2.2rem; padding: 1.5rem;} #program .schdTable tr.lunch {} #program .schdTable tr.lunch td {padding: 0.5rem;} #program .schdPrg {font-size: 2rem;} #program .gallery {margin-top: 10rem;} #program .gallery .dayArea {} #program .gallery .dayArea .dayTit {font-size: 2.8rem;} #program .gallery .dayArea .dayLst .lst .tit {font-size: 2.4rem;} #program .gallery .dayArea .dayLst .lst .wrt {font-size: 2rem;} } /**영문 추가**/ @media all and (max-width: 880px){ #program .schdTable td {padding: 1.5rem 1rem; overflow-wrap: anywhere; word-break: break-word; white-space: normal;} } /*================= 베트남 사법연수 =================*/ #vietnam {margin-top: 7rem;} #vietnam .panel {} #vietnam .panel + .panel {margin-top: 10rem;} #vietnam .panel .tit {font-size: 2.4rem; font-weight: bold; padding-left: 3.1rem; margin-bottom: 2rem;} #vietnam .panel .tit::before {content: ''; display: block; position: absolute; width: 2rem; height: 2rem; background: url('../img/ic_tit.svg') center/contain no-repeat; left: 0; top: 50%; transform: translateY(-50%);} #vietnam .panel .wrt {font-size: 1.8rem; margin-bottom: 2rem;} #vietnam .panel .box {padding: 4rem 5rem; background: #EBF1F7; border-radius: 1rem; gap: 4.3rem; display: flex;} #vietnam .panel .box .ico {width: 9.8rem; flex-shrink: 0} #vietnam .panel .box .txt {} #vietnam .panel .box .txt .btit {font-size: 2.2rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px dotted #ccc; font-weight: bold;} #vietnam .panel .box .txt .blst {} #vietnam .panel .box .txt .blst li {font-size: 1.6rem; padding-left: 1.5rem; line-height: 1.8} #vietnam .panel .box .txt .blst li + li {margin-top: 0.5rem;} #vietnam .panel .box .txt .blst li::before {content: ''; display: block; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #005596; left: 0; top: 1.1rem;} #vietnam .panel .tableBox {} #vietnam .panel .tableBox + .tableBox {margin-top: 2rem;} #vietnam .panel .tableBox .tbtit {font-size: 1.8rem; font-weight: bold; color: var(--fcb); padding-bottom: 1rem;} #vietnam .panel .tableBox .vtTable {} #vietnam .panel .tableBox .vtTable thead {} #vietnam .panel .tableBox .vtTable tbody {} #vietnam .panel .tableBox .vtTable tr {} #vietnam .panel .tableBox .vtTable th {background: var(--fcb); color: #fff; font-weight: bold; font-size: 1.8rem; padding: 0.8rem 0;} #vietnam .panel .tableBox .vtTable th:nth-child(1) {border-radius: 1rem 0 0 0; border-right: 1px solid #E0E0E0} #vietnam .panel .tableBox .vtTable th:nth-child(3) {border-radius: 0 1rem 0 0; border-left: 1px solid #E0E0E0} #vietnam .panel .tableBox .vtTable td {font-size: 1.6rem; text-align: center; padding: 1rem 2rem; border: 1px solid #E0E0E0; width: calc(100% / 3)} @media all and (max-width: 880px){ #vietnam {margin-top: 5rem;} #vietnam .panel {} #vietnam .panel + .panel {} #vietnam .panel .tit {font-size: 3.4rem; padding-left: 3.6rem;} #vietnam .panel .tit::before {width: 2.5rem; transform: none; top: 1.8rem;} #vietnam .panel .wrt {font-size: 2.4rem; margin-bottom: 3rem;} #vietnam .panel .box {padding: 4rem;} #vietnam .panel .box .txt .btit {font-size: 2.8rem;} #vietnam .panel .box .txt .blst {} #vietnam .panel .box .txt .blst li {font-size: 2rem;} #vietnam .panel .box .txt .blst li::before {top: 1.4rem;} #vietnam .panel .tableBox {} #vietnam .panel .tableBox + .tableBox {margin-top: 3rem;} #vietnam .panel .tableBox .tbtit {font-size: 2.4rem;} #vietnam .panel .tableBox .vtTable {} #vietnam .panel .tableBox .vtTable tr {} #vietnam .panel .tableBox .vtTable th {font-size: 2.2rem; padding: 0.75rem 0;} #vietnam .panel .tableBox .vtTable td {padding: 1rem 2rem; font-size: 2.2rem; letter-spacing: -0.03rem;} } /**영문 추가**/ #vietnam.en .panel .tit::before {transform: none; top: 1rem;} @media all and (max-width: 880px){ #vietnam.en .panel .tit::before {top: 1.4rem;} } /*================= 연락처 =================*/ #contact {margin-top: 5rem;} #contact .box {background: url('../img/contact_bg.jpg') center/cover; padding: 4rem; border-radius: 1rem; justify-content: space-between;} #contact .box .logo {width: 38.5rem; margin-left: 7rem;} #contact .box .info {width: 54.2rem; background: #fff; padding: 4rem 5rem; border-radius: 1rem;} #contact .box .info .tit {font-size: 2.2rem; margin-bottom: 2rem; font-weight: bold;} #contact .box .info .lst {} #contact .box .info .lst li {font-size: 1.8rem;} #contact .box .info .lst li + li {margin-top: 1.5rem;} #contact .box .info .lst li img {width: 3.2rem;} #contact .box .info .lst li b {padding: 0 2rem 0 1rem;} @media all and (max-width: 880px){ #contact {} #contact .box {background: url('../img/contact_bg_mo.jpg') center/cover; padding: 5rem 4rem; flex-direction: column; gap: 4rem;} #contact .box .logo {width: 36rem; margin: 0} #contact .box .info {width: 100%;} #contact .box .info .tit {font-size: 2.8rem;} #contact .box .info .lst {} #contact .box .info .lst li {font-size: 2.4rem;} #contact .box .info .lst li + li {margin-top: 1.6rem;} #contact .box .info .lst li img {width: 3.5rem;} #contact .box .info .lst li b {padding: 0 2.5rem 0 1.5rem;} } /**영문 추가**/ #contact.en .box .logo {width: 39.2rem;} @media all and (max-width: 880px){ #contact.en .box .logo {} } /****/