@charset "UTF-8";

/* header */
header {position: fixed; z-index: 9999999; width: 100%; height: 80px; padding: 0 20px; border-bottom: 1px solid #edf1f6; box-sizing: border-box; background-color: #fff; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between;}
header nav .gnb {width: auto; display: -ms-flexbox; display: -webkit-box; display: flex;}
header nav .gnb li {padding: 0 24px;}
header nav .gnb li a {font-size: 18px; font-weight: 400; color: #444;}
header nav .gnb li.on a {color: #0091E7; font-weight: 500;}
header .header-right {width: auto; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
header .lang-wrap {display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
header .lang-wrap i {display: block; color: #999; margin-right: 6px;}
header .lang-wrap .lang-select {position: relative;}
body.eng header .lang-wrap .lang-select button, body.eng header .lang-wrap .lang-select .dropdown a {font-weight: 400;}
header .lang-wrap .lang-select button {position: relative; display: block; background-color: #fff; border: 1px solid #e0e0e0; padding: 6px 32px 6px 14px; font-size: 14px; color: #888; font-weight: 300; border-radius: 4px; cursor: pointer;}
header .lang-wrap .lang-select button::after {position: absolute; right: 14px; top: 50%; content: ""; display: block; width: 5px; height: 5px; margin-top: -2px; border-bottom: 1px solid #a0a0a0; border-right: 1px solid #a0a0a0; transform: translateY(-50%) rotate(45deg); transition: all 0.2s;}
header .lang-wrap .lang-select.open button::after {transform: rotate(-135deg);}
header .lang-wrap .lang-select .dropdown {display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; width: 100%; background-color: #fff; box-sizing: border-box; border-radius: 4px; border: 1px solid #e0e0e0}
header .lang-wrap .lang-select.open .dropdown {display: block;}
header .lang-wrap .lang-select .dropdown a {display: block; width: 100%; padding: 6px 0px; box-sizing: border-box; text-align: center; font-size: 13px; color: #909090; font-weight: 300;}
header .lang-wrap .lang-select .dropdown a:hover {background-color: #F2F7FA;}
header .btn-m-menu {display: none; position: relative; width: 22px; height: 18px; margin-left: 20px;}
header .btn-m-menu span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #7f7f7f;}
header .btn-m-menu, header .btn-m-menu span {transition: all .4s; box-sizing: border-box;}
header .btn-m-menu span:first-of-type {top: 0;}
header .btn-m-menu span:nth-of-type(2) {top: 8px;}
header .btn-m-menu span:last-of-type {bottom: 0;}
header .btn-m-menu.open span:first-of-type {-webkit-transform: translateY (8px) rotate (-45deg); transform: translateY(8px) rotate(-45deg);}
header .btn-m-menu.open span:nth-of-type(2) {opacity: 0;}
header .btn-m-menu.open span:last-of-type {-webkit-transform: translateY (-8px) rotate (45deg); transform: translateY(-8px) rotate(45deg);}
.m-menu {display: none; position: fixed; z-index: 9999998; top: 70px; right: 0; width: 100%; height: calc(100vh - 70px); background-color: #fff; transform: translateX(100%); transition: all .5s;}
.m-menu.open {display: block; transform: translateX(0%);}
.m-menu ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; line-height: 2.25;}
.m-menu ul li a {font-size: 20px; color: #444;}
.m-menu ul li.on a {color: #0091E7; font-weight: 500;}

/* footer */
footer {position:relative; width: 100%; border-top: 1px solid #edf1f6;}
footer .footer-inner {padding: 36px 0 40px; text-align: center;}
footer .footer-logo {display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center;}
footer .footer-logo a {display: block; margin: 0 20px;}
footer .footer-logo a img {height: 36px;}
footer h2.footer-title {margin-top: 30px; font-size: 1.75em; font-weight: 700; letter-spacing: 1px; color: #4f4f4f;}
footer address {margin-top: 16px; letter-spacing: -.5px;}
footer address i {display: block; color: #777; font-size: 1.125em; font-weight: 300; line-height: 1.45;}
footer address i span {margin: 0 6px; color: #aaa; font-size: 1em; font-weight: 300;}
footer address p {margin-top: 8px; color: #9CA4AE; font-weight: 300;}
footer .copy {margin-top: 36px; font-size: .875em; font-weight: 300; color: #aaa;}
footer .go-top {position: absolute; right: 20px; top: 23px; width: 46px; height: 46px; background-color: #0997ed; color: #fff; border-radius: 10px; font-size: 0; line-height: 0; box-shadow: 0 0 8px 0 rgba(125,125,125,0.3);}
footer .go-top::after {position: absolute; display: block; content: "\F145"; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: bootstrap-icons !important; font-size: 30px;}
body.eng footer h2.footer-title {letter-spacing: 0;}
body.eng footer address i {font-weight: 400; color: #7f7f7f;}
body.eng footer address p {font-weight: 400;}
body.eng footer .copy {font-weight: 400;}

/* heading */
.heading-01 {position: relative; padding-bottom: 24px; margin-bottom: 40px; line-height: 1.35; font-size: 1.75em; font-weight: 700;}
.heading-01::after {position: absolute; left: 0; bottom: 0;; display: block; content: ""; width: 30px; height: 3px; background-color: #0091e7;}
.heading-02 {position: relative; padding-left: 20px; margin-bottom: 20px; font-size: 1.25em; font-weight: 600;}
.heading-02::before {position: absolute; left: 0; top: 14px; transform: translateY(-50%); display: block; content: ""; width: 12px; height: 12px; background: url(/images/icon_heading02.png) no-repeat center/contain;} 
.heading-03 {position: relative; padding-left: 14px; font-size: 1em; font-weight: 600;}
.heading-03::before {position: absolute; left: 0; top: 5px; display: block; content: ""; width: 6px; height: 12px; background: url(/images/icon_heading03.png) no-repeat center/contain;} 

/* box */
.common-box {width: 100%; padding: 24px; box-sizing: border-box; background-color: #f4f7f9; border-radius: 4px;}
.common-box h5.heading-03 {margin-bottom: 10px;}
.common-box p {color: #555; word-break: keep-all;}

/* table */
table.table {width: 100%; border-top: 1px solid #c9d1dc; border-bottom: 1px solid #c9d1dc;}
table.table th {background-color: #f2f7fa; padding: 12px 0; color: #333; font-weight: 500; border-bottom: 1px solid #c9d1dc; border-right: 1px solid #c9d1dc;}
table.table td {padding: 18px 0; color: #555; border-right: 1px solid #c9d1dc;}
table.table th, table.table td {vertical-align: middle; text-align: center;}
table.table th:last-of-type, table.table td:last-of-type {border-right: none} 

.table-container {position: relative; width: 100%; margin: 20px 0 40px;}
.table-container .table-info {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8) url(/images/icon-swipe.png) no-repeat center top 46%/32px;}
.table-container .table-info p {position: absolute; top: calc(50% + 30px); left: 50%; transform: translate(-50%,-50%); font-size: 1em; color: #fff; font-weight: 300;}
.table-container img {width: 100%;}

/* tab */
.tab-nav {display: -ms-flexbox; display: -webkit-box; display: flex; gap: .5rem; flex-wrap: wrap;}
.tab-nav li {flex: 1 1 80px;}
.tab-nav li a {display: block; text-align: center; font-size: 1.125em; color: #777; padding: 16px 0; border: 1px solid #C9D1DC; border-radius: 8px;}
.tab-nav li.on a {background-color: #0573B5; border-color: #0573B5; color: #fff; font-weight: 500;}
.tab-pane {display: none;}
.tab-pane.on {display: block;}

.list-title::before {position: absolute; left: 0; top: 0px; display: block; font-family: bootstrap-icons !important;}
.list-title.point::before {content: "\F805";}
.list-title.calendar::before {content: "\F1F6";}
.list-title.clock::before {content: "\F293";}
.list-title.receipt::before {content: "\F725";}
.list-title.map::before {content: "\F3E7";}
.list-title.mail::before {content: "\F32C";}
.list-title.tel::before {content: "\F5B4";}
.list-title.user::before {content: "\F4CF";}
.list-title.chart::before {content: "\F4E8";}
.list-title.megaphone::before {content: "\F483";}
.list-title.check::before {content: "\F224";}

/* ////////////////////////////////////////////////////////////////////////////////////////// */

main {padding-top: 80px;}
.common-inner {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
section:not(.main-visual, .sub-faq) {margin-top: 80px;}
section:last-child {margin-bottom: 120px;}
.btn-fill {display: block; width: 180px; padding: 12px 0; text-align: center; color: #fff !important; background-color: #0099F3; font-weight: 500; border-radius: 4px; box-shadow: 0 0 8px 0 rgba(125,125,125,0.3); transition: all .2s;}
.btn-fill.closed {background-color: #9aa1a5; cursor: default;}
.btn-download {display: block; width: 295px; margin-top: 20px; padding: 14px 0;}
.btn-download:hover {background-color: #333;}
.list li {position: relative; padding-left: 14px; line-height: 1.6;}
.list li::before {display: block; content: ""; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; background-color: #92bee7; border-radius: 50%;}

/* home */
.main-visual {border-bottom: 1px solid #edf1f6;}
.main-visual .common-inner {position: relative; width: 100%; height: calc(100vh - 80px); background: url(/images/img_main.png) no-repeat left 20px center/auto 740px;}
.main-visual .title-area {position: absolute; width: 505px; top: 50%; right: 20px; transform: translateY(-50%);}
.main-visual .title-area h2 {margin-bottom: 20px; font-family: 'paralucent', sans-serif; font-size: 54px; font-weight: 500; line-height: 1; letter-spacing: -.25px;}
.main-visual .title-area p {line-height: 1.45; font-size: 18px; color: #6f6f6f; font-weight: 300; letter-spacing: -.5px; word-break: keep-all;}
body.eng .main-visual .title-area p {font-weight: 400;}
body.eng .main-visual .title-area p span {display: block; margin-top: 10px;}
.main-visual .title-area .video-wrap {margin-top: 24px; border-radius: 16px; overflow: hidden;}
.main-visual .title-area .video-wrap video {display: block; width: 100%;}
.main-visual .scroll-wrap {position: absolute; font-family: 'Lato', sans-serif; left: 50%; bottom: 32px; transform: translateX(-50%); color: #b1b8c0; font-size: 14px; font-weight: 400; letter-spacing: -.25px;}
.main-visual .scroll-wrap .scroll {position: relative; margin-top: 8px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border: 1px solid #d0d7e1; border-radius: 50%; -webkit-animation: down 3s infinite; animation: down 3s infinite;}
.main-visual .scroll-wrap .scroll::before {position: absolute; content: ""; display: block; top: 7px; left: 8px; width: 7px; height: 7px; border-right: 1px solid #d0d7e1; border-bottom: 1px solid #d0d7e1; transform: rotate(45deg);}
@keyframes down {
	0% {
		transform: translateX(-50%) translateY(0);
	}
	20% {
		transform:translateX(-50%) translateY(12px);
	}
	40% {
		transform: translateX(-50%) translateY(0);
	}
}

@-webkit-keyframes down {
	0% {
		transform: translateX(-50%) translateY(0);
	}
	20% {
		transform: translateX(-50%) translateY(12px);
	}
	40% {
		transform: translateX(-50%) translateY(0);
	}
}
.main-info .highlight {display: inline-block; margin-bottom: 32px; padding: 4px 10px; background-color: #e3f0fc; color: #555; font-size: 18px; font-weight: 500; border-radius: 4px;}
.main-extension .btn-download {margin-top: 20px;}
.main-link .link-wrap {display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between;}
.main-link .link-wrap .btn-link {display: block; width: calc(50% - 10px); padding: 68px 44px; box-sizing: border-box; background: #ebf5ff url(/images/img_visa.png) no-repeat right 32px center/120px; border-radius: 4px;}
.main-link .link-wrap .btn-link:last-child {background-image: url(/images/img_program.png);}
.main-link .link-wrap .btn-link span {position: relative; display: inline-block; color: #4f4f4f; font-size: 20px; font-weight: 500;}
.main-link .link-wrap .btn-link span::before, .main-link .link-wrap .btn-link span::after {position: absolute; display: block; content: ""; background-color: #1dacff;}
.main-link .link-wrap .btn-link span::before {width: 24px; height: 1px; right: -35px; top: 58%;}
.main-link .link-wrap .btn-link span::after {width: 9px; height: 1px; right: -36px; top: 44%; transform: rotate(45deg);}

/* visa */
section.sub-flow .common-inner {border-bottom: 1px solid #C9D1DC;}
section.sub-visas {margin-top: 80px;}
section.sub-visas .sub-intro-box {position: relative; margin: 36px 0 56px ; width: 100%; height: 360px; background-color: #EFF5FD; background-repeat: no-repeat; background-position: right 60px center; background-size: 400px auto; border-radius: 10px;}
body.eng section.sub-visas .sub-intro-box p {width: 56%;}
section.sub-visas #visa-tab1 .sub-intro-box {background-image: url(/images/img_visaD-8-4.png);}
section.sub-visas #visa-tab2 .sub-intro-box {background-image: url(/images/img_visaD-10-2.png);}
section.sub-visas .sub-intro-box .text {position: absolute; left: 60px; top: 50%; transform: translateY(-50%);}
section.sub-visas .sub-intro-box .text h3 {margin-bottom: 28px; font-size: 2em; font-weight: 600;} 
section.sub-visas .sub-intro-box .text p {color: #555; letter-spacing: -.25px; line-height: 1.6;}
section.sub-visas .heading-02:not(:first-of-type) {margin-top: 36px;}
section.sub-visas .common-box {margin-bottom: 20px;}
section.sub-visas .btn-download {margin-top: 36px;}


/* program */
section.sub-overview .video-wrap {margin-bottom: 50px; border-radius: 20px; overflow: hidden;}
section.sub-overview video {display: block; width: 100%;}
section.sub-program .program-step-wrap .step-box {margin-bottom: 32px; padding: 28px; border: solid 1px #c9d1dc; border-radius: 10px;}
section.sub-program .program-step-wrap .step-box:nth-of-type(2n) {background-color: #F4F7F9;}
section.sub-program .program-step-wrap .step-box .text-blue.text-bold {font-family: "din-2014", "Lato", "Pretendard", sans-serif;}
section.sub-program .program-step-wrap .step-box .step-title {margin: 12px 0 16px; font-size: 1.25em; font-weight: 600;}
section.sub-program .program-step-wrap .step-box .list, section.sub-program .program-step-wrap .step-box .desc {color: #666;}
section.sub-program .program-step-wrap .step-box .desc span {display: block; margin-bottom: 6px;}


/* application */
/* badge */
.badge {padding: 2px 8px; color: #fff; font-family: "din-2014", "Lato", "Pretendard", sans-serif; font-size: 0.938em; font-weight: 600; border-radius: 2px;}
.badge.badge-01 {background-color: #0DA95B;}
.badge.badge-02 {background-color: #16C7B6;}
.badge.badge-03 {background-color: #018A7D;}
.badge.badge-04 {background-color: #00A7D6;}
.badge.badge-05 {background-color: #2450C1;}
.badge.badge-06 {background-color: #4A14CA;}
.badge.badge-07 {background-color: #4A526E;}
.badge.badge-08 {background-color: #F5C001;}
.badge.badge-09 {background-color: #F58501;}

.sub-application .program-box {position: relative; margin-bottom: 32px; padding: 32px 0; border: 1px solid #c9d1dc; border-radius: 10px;}
.sub-application .program-box.important {border-color: #27abf7; background-color: #f6fcff;}
.sub-application .program-box>*:not(.btn-fill) {padding: 0 28px;}
.sub-application .program-box .badge-wrap {margin-bottom: 16px;}
.sub-application .program-box .program-title {font-size: 1.25em; font-weight: 600;}
.sub-application .program-box .program-desc {margin: 12px 0; color: #777;}
.sub-application .program-box .program-list li {display: -ms-flexbox; display: -webkit-box; display: flex; color: #777;}
.sub-application .program-box .program-list li:not(:last-of-type) {margin-bottom: 6px;}
.sub-application .program-box .list-title {position: relative; width: 210px; padding-left: 24px; font-weight: 500; color: #666;}
.sub-application .program-box .highlighter {color: #0091E7; font-weight: 600; background-color: #e8f4ff;}
/* body.kor .sub-application .program-box .list-title {width: 90px;} */ /* 한글로 표기시 주석 해제 */
.sub-application .program-box .next-wrap {border-top: 1px solid #c9d1dc; margin-top: 24px; padding-top: 20px; color: #777;}
.sub-application .program-box .next-wrap .next-title {color: #666; font-weight: 500; margin-bottom: 12px;}
.sub-application .program-box .btn-fill {position: absolute; top: 32px; right: 28px;}
.sub-application-close .btn-fill {background-color: #9aa1a5; cursor: default;} 
.sub-application .empty {padding: 4rem 0; text-align: center; color: #777; font-size: 1.125em; font-weight: 500;}
.btn-more {display: none; width: 100%; padding: 12px 0; border: 1px solid #c9d1dc; background-color: #f4f7f9; border-radius: 50px; color: #9299a3; font-size: 1em; cursor: pointer;}


/* faq */
section.sub-faq {padding: 80px 0 100px;}
.sub-faq .faq-box {padding: 32px; background-color: #fff; border-radius: 10px;}
.sub-faq .faq-box li:not(:last-of-type) {margin-bottom: 28px;}
.sub-faq .faq-box li .faq-q {position: relative; margin-bottom: 10px; padding-left: 24px; font-weight: 600; font-size: 1.125em;}
.sub-faq .faq-box li .faq-q::before {position: absolute; display: block; left: 0; top: 2px; content: "\F504"; font-family: bootstrap-icons !important; font-size: 15px; color: #0091e7;}
.sub-faq .faq-box li .faq-a {padding-left: 24px; color: #777;}
.sub-contact .table-container .table-info {z-index: 11;}
.sub-contact .table-container .btn-map {position: absolute; z-index: 10; left: 10px; bottom: 20px; font-size: 0.938em;}
.sub-contact .common-box .heading-02 {margin-bottom: 12px;}
.sub-contact .common-box .heading-02 span {margin-left: 8px; font-size: 14px; font-weight: 400; color: #777;}
.sub-contact .common-box ul li.list-title {position: relative; padding-left: 24px; color: #777;}
.sub-contact .common-box ul li:not(:last-of-type) {margin-bottom: 4px;}
.sub-contact .common-box ul li.list-title::before {color: #909a99; font-size: 0.938em; top: 1px;}


/* products */
.product-box-wrap {display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; justify-content: space-between;}
.product-box-wrap .product-box {width: 400px; margin-bottom: 32px; border: 1px solid #c9d1dc; border-radius: 10px; overflow: hidden; transition: all .2s;}
/* .product-box-wrap .product-box:nth-last-child(-n+3) {margin-bottom: 0;} */
.product-box-wrap .product-box .img-wrap {width: 100%; height: 225px; overflow: hidden;}
.product-box-wrap .product-box .img-wrap img {display: block; width: 100%;}
.product-box-wrap .product-box .product-title {display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; padding: 20px 18px; }
.product-box-wrap .product-box .product-title p {transition: all .2s;}
.product-box-wrap .product-box .product-title p:first-child {font-size: 1.125em; font-weight: 600;}
.product-box-wrap .product-box .product-title p:last-child {font-size: 26px; color: #83949d;}
.product-box-wrap .product-box:hover {border-color: #27abf7;}
.product-box-wrap .product-box:hover .product-title p {color: #0091E7;}
section.sub-video {margin-top: 80px;}
section.sub-web {margin-bottom: 0; padding: 100px 0 120px;}
.modal {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .85); backdrop-filter: blur(10px); z-index: 99999999; overflow: hidden;}
.modal .btn-close {position: absolute; top: 1rem; right: 1rem; background-color: transparent; border: none; color: #fff; font-size: 1.75rem; cursor: pointer;}
.modal .video-wrap {position: absolute; top: 50%; left: 50%; width: 1024px; transform: translate(-50%, -50%);}
.modal .video-wrap video {width: 100%; height: auto;}