@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap");
@import url("../../css/fonts.css");


a{transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;}

.center-align{text-align:center;}
.left-align{text-align:left;}
.txt-hidden{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}


.mt10{margin-top:10px!important;}
.mt20{margin-top:20px!important;}
.mt24{margin-top:24px!important;}
.mt30{margin-top:30px!important;}
.mt32{margin-top:32px!important;}
.mt40{margin-top:40px!important;}
.mt48{margin-top:48px!important;}
.mt50{margin-top:50px!important;}
.mt60{margin-top:60px!important;}
.mt80{margin-top:80px!important;}
.mt100{margin-top:100px!important;}
.mt120{margin-top:120px!important;}
.mt160{margin-top:160px!important;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb24{margin-bottom:24px;}
.mb30{margin-bottom:30px;}
.mb32{margin-bottom:32px;}
.mb40{margin-bottom:40px;}
.mb48{margin-bottom:48px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb80{margin-bottom:80px;}
.mb100{margin-bottom:100px;}
.mb120{margin-bottom:120px;}
.mb160{margin-bottom:160px;}

.mr16{margin-right:16px;}

.pt0{padding-top:0px!important;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt80{padding-top:80px;}
.pt100{padding-top:100px;}
.pt120{padding-top:120px;}
.pt160{padding-top:160px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb80{padding-bottom:80px;}
.pb100{padding-bottom:100px;}
.pb120{padding-bottom:120px;}
.pb160{padding-bottom:160px;}

.pd16{padding:16px;}

.pl16{padding-left:16px;}

.topOrder01{position:relative; z-index:1;}
.topOrder02{position:relative; z-index:2;}

.font-m{font-weight:600!important;}
.font-b{font-weight:900!important;}
.font-w{font-weight:600!important;}
.font-small{font-size:16px!important;}


.purple{color:#920883;}
.orange{color:#e87400!important;}

.bg-gray5{background:#555;}
.bg-orange{background:#f18e18;}
.bg-purple{background:#920783;}


.light-btn{border:1px solid #ccc; color:#666; border-radius:4px; padding:2px 12px; font-size:16px;}
.light-btn:hover{opacity: 0.5;}


.square-btn{width:240px; padding:16px 0; font-size:20px; color:#fff; border-radius:8px; margin:0 8px;}
.square-btn:hover{opacity: 0.5; transition:0.4s ease;}

.basic-list li{margin-bottom:16px;}
.basic-list li:last-child{margin-bottom:0;}

.line-list{padding-left:16px;}
.line-list li{margin-bottom:4px; font-size:18px;}
.line-list li:last-child{margin-bottom:0;}
.line-list li::marker{content:'- '!important;}

.line-list.taxi-time-mb li{margin-bottom:8px; font-size:18px;}


.billiard-list{padding-left:16px;}
.billiard-list li{margin-bottom:16px;}
.billiard-list li:last-child{margin-bottom:0;}
.billiard-list li::marker{content:'※ ';}

.dot-list{padding-left:16px;}
.dot-list li{margin-bottom:4px;}
.dot-list li:last-child{margin-bottom:0;}
.dot-list li::marker{content:'· '!important;}

.noneMarker::marker{content:''!important;}
.verticalMid{vertical-align: middle;}


table{width:100%; border-collapse: collapse; font-size:18px;}
table thead tr th{padding:24px 0; font-weight:500;}
table thead tr{border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#f5f5f5;}
table tbody tr{border-bottom:1px solid #ccc;}
table tbody tr td{padding:28px 0; text-align:center; font-weight:300;}

.foreign-bridge .tab-container {position: sticky; top: 0; z-index: 999; border-top:1px solid #fff; background-color:rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin:0;}
.foreign-bridge .tabs {display: flex; justify-content: center; align-items: center; list-style: none; margin: 0 auto; max-width: 1200px; width:100%;}
.foreign-bridge .tabs li{width:50%; text-align:center; }
.foreign-bridge .tabs li a {text-decoration: none;  color:#fff; font-size:20px; font-weight: 400; display: flex; overflow:hidden; min-height: 80px; justify-content: center; align-items: center;}
.foreign-bridge .tabs li a span{font-weight: 500; font-size:18px; background:#fff; color:#333; padding:4px 16px; border-radius: 64px;}
.foreign-bridge .tabs li a:hover{background-color: rgba(255,255,255,0.25); color: #fff; }
.foreign-bridge .tabs li a.active { background-color: rgba(255,255,255,0.35); color: #fff; font-weight: bold; font-size:24px; border-left:1px solid #fff; border-right:1px solid #fff;}

.tab-container.is-stuck {background-color:rgba(255,255,255,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #e5e5e5; box-shadow: 2px 2px 4px 0px rgba(70, 70, 70, 0.2);}
.tab-container.is-stuck .tabs li a {color: #333; font-size:16px; min-height: 64px;}
.tab-container.is-stuck .tabs li a.active {background-color: #132d5c; color: #fff; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size:20px;}

.tab-panel{display: none;}
.tab-panel.active{display: block;}

.foreign-bridge p{font-weight: 300;}
.foreign-bg{background:linear-gradient( rgba(0,0,0,1), rgba(0,0,0,0.3)), url('../img/travel-bg.jpg') no-repeat top center; background-size: cover; background-attachment: fixed;}
.foreign-bg .foreign-top{height: 100vh;}
.foreign-wrap{width:1200px; margin:0 auto; padding:88px 0; text-align:center;}
.foreign-wrapSub{width:1200px; margin:0 auto; padding:160px 0; text-align:center;}
.foreignTitle h2{font-size:64px; font-weight: bold; color:#fff;}
.foreignTitle p{font-size:40px; font-weight: 300; color:#fff;}
.foreign-Cardbox{margin-top: 40px; animation: rotation 1.5s infinite linear; }
.foreign-Cardbox .rot {width: 350px; height: 500px; margin: auto; perspective: 1000px;}
.foreign-Cardbox .rot .foreignCard {width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotationPause 3s infinite ease-in-out;}
.foreign-Cardbox .rot .foreignCard img{border:1px solid #fff; border-radius:16px; filter:drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 0 20px rgba(255,255,255,0.15));}
.foreignCard .front, .foreignCard .back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.foreignCard .front {transform: rotateY(0deg);}
.foreignCard .back {transform: rotateY(180deg);}



.foreign-bottom{background:#fff;}

.foreign-cont{text-align:left; margin-bottom:120px;}
.foreign-cont.last{margin-bottom:0;}
.foreign-cont .cont-tit{font-size:32px; font-weight: 600;}
.foreign-cont.sub-cont{margin-bottom:80px;}
.foreign-cont.sub-cont:last-child{margin-bottom:0;}
.foreign-cont.mpass .cont-tit{margin-bottom:40px;}

.foreignCard-list .list-detail{display:flex; justify-content: space-between; align-items: flex-start; padding-bottom:80px; margin-bottom:80px; border-bottom:1px solid #ccc;}
.foreignCard-list .list-detail:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0;}
.foreignCard-list .list-detail .cardInfo{width:56%; padding-top:8px;}

.foreign-bridge .infoTitle{font-size:32px; font-weight: 600; margin-bottom:40px;}
.foreign-bridge .infoPS{position: relative; font-size:24px; font-weight: 400; padding-left:36px; margin-bottom:16px;}
.foreign-bridge .infoPS::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius:6px;
    padding:4px;
    background: url("../img/arrow.png") no-repeat center;
    background-color: #000; 
    transform: translateY(-50%);
}
.foreign-bridge .foreign-cont li{font-weight: 300; font-size:18px; margin-bottom:4px;}
.foreignCard-list .list-detail .foreCard-img{padding:0 48px;}
.foreignCard-list .list-detail .foreCard-img img{box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25); border-radius: 12px;}
.foreignCard-list .list-detail .foreCard-img.grid{width:32%; display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; justify-items: center; align-items: stretch; padding:0;}
.foreignCard-list .list-detail .foreCard-img.grid img{box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.25);}

.seconHalf{display:flex; justify-content: space-between; align-items: flex-end;}

.foreign-bridge .btn-list{display:flex; gap: 8px;}
.foreign-bridge table tr td{vertical-align: middle;}


.btn-list a{display:inline-block; background:#132d5c; color:#fff; padding:24px 32px; font-size:18px; border-radius:12px;}
.btn-list a:hover{opacity: 0.5;}
.btn-list.lang a{background:#fff; border:1px solid #ccc; padding:24px 0; color:#333; width:150px; text-align:center;}
.btn-list.lang a:hover{background:#132d5c; border:1px solid #132d5c; color:#fff; opacity: 1;}
.wowpass-btn{display:inline-block; background:#fff; border:1px solid #ccc; padding:8px 24px; border-radius:8px; font-size:18px; font-weight: 600;}
.wowpass-btn:hover{background:#132d5c; border:1px solid #132d5c; color:#fff;}

.grayBox{background:#f5f5f5; padding:24px 32px; border-radius: 12px;}


.foreignCard-list .list-detail .cardInfo .MpassTitle{font-size:24px; margin-bottom:40px;}



.foreigners .head {right: 22%; z-index: 9999;}
.foreigners .modal{width: 980px; height: 100%; top:0; overflow-y: auto; border-radius: 0; height: 100vh; max-height: 100vh;}
.foreigners .modal .layerPopup-cont{padding:0;}
.foreign-bridge .modal-wrapper.open .modal{transform: translate(-50%, 0%)!important;}


.scroll-icon, .scroll-icon:before {position: absolute; left: 50%;}
.scroll-icon {width: 30px; height: 48px; margin-left:-15px; bottom: 6%; border: 1px solid #fff; border-radius: 28px; position: absolute; left: 50%; opacity: 1; transition: opacity 0.5s ease;}
.scroll-icon:before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    top: 6px;
    left: 12px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
}
.scroll-icon:after{content: 'Scroll'; position:absolute; bottom:-48%; left:50%; margin-left:-18px; font-size:14px; color:#fff; letter-spacing: 0;}


footer{padding: 32px 64px; border-top:1px solid #ccc;}


@keyframes scroll {
    0% {opacity: 1;}
    100% {opacity: 0; top: 40px;}
}

@keyframes rotationPause {
    0% { transform: rotate(0deg) rotateY(0deg); }
    40% { transform: rotate(0deg) rotateY(180deg); }
    60% { transform: rotate(0deg) rotateY(180deg); }
    100% { transform: rotate(0deg) rotateY(360deg); }
}













/* Tablet */
@media only screen and (max-width: 1366px) {
    .scroll-icon{display:unset;}
}

/* Tablet 아이패드 에어 - 가로형 */
@media only screen and (max-width: 1180px) {
    .foreignTitle h2{font-size:56px;}
    .foreignTitle p{font-size:32px;}
    .foreign-wrap, .foreign-wrapSub{width:1024px;}
    .foreign-Cardbox .rot{width:300px; height:400px;}
    .foreign-Cardbox .rot .foreignCard img{width:72%; border-radius: 8px;}

    .foreign-cont .cont-tit{font-size:28px;}
    .foreign-bridge .infoTitle{font-size:28px;}
    .foreign-bridge .infoPS{font-size:20px;}

    .btn-list a{padding:20px 28px; font-size:16px;}
    .btn-list.lang a{padding:20px 0;}
    .wowpass-btn{font-size:16px;}

    .foreignCard-list .list-detail .foreCard-img.grid{width:38%;}
    .foreignCard-list .list-detail .cardInfo .MpassTitle{font-size:20px;}

    .foreigners .head{display:none;}
    .foreigners .mobile-close{position:relative; bottom: 0; width: 100%; background: #920883; color: #fff; padding: 16px 0; text-align: center; border-radius: 0 0 16px 16px;}
    .foreigners .mobile-close a{color:#fff;}
}


/* Tablet 아이패드 미니 - 가로형 */
@media only screen and (max-width: 1024px) {
    .foreign-wrap{padding:72px 0;}
    .foreign-wrapSub{width:820px; padding:120px 0;}

    .grayBox{padding:16px 24px;}
    .seconHalf{align-items: flex-start;}
    .foreign-bridge .btn-list{flex-direction: column;}
    .foreign-bridge .btn-list.lang{flex-direction:unset;}

    .foreignCard-list .list-detail .cardInfo{padding-top:0; width:64%;}
    .foreignCard-list .list-detail .foreCard-img{padding:0; text-align:right; width:28%;}
    .foreignCard-list .list-detail .foreCard-img img{max-width:100%;}
    .foreignCard-list .list-detail .foreCard-img.grid{max-width:32%; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
}


/* Tablet 아이패드 에어 - 세로형 */
@media only screen and (max-width: 820px) {
    .foreign-wrap, .foreign-wrapSub{width:auto;}
    .foreign-wrap{padding:88px 48px;}
    .foreign-wrapSub{padding:100px 48px;}

    .foreignTitle h2{font-size:64px; line-height: 1.2; margin-bottom:16px;}
    .foreign-Cardbox .rot {width: 380px; height: 540px;}

    .seconHalf{flex-direction: column;}
    .foreign-bridge .btn-list{flex-direction:unset;}
    .foreign-bridge .seconHalf .btn-list{margin-top:16px;}
    .foreignCard-list .list-detail .foreCard-img.grid{grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}


    .foreigners .modal{width:100%; max-width: 100vh;}
    .foreigners .modal .layerPopup-cont img{max-width:100%;}
    .foreigners .mobile-close{position:relative;}

    .foreign-bridge  table tbody tr td {font-size: 16px;}
    

}


@media only screen and (max-width: 768px) {
    .foreign-wrap{padding:72px 48px;}
    .foreign-Cardbox .rot {width: 360px; height: 500px;}
    .foreignCard-list .list-detail .foreCard-img.grid {grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));}

    .foreign-bridge table.responsive{border:1px solid #eee; overflow: hidden; border-right:0; border-left:0;}
    .foreign-bridge table.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { display: block; }
    .foreign-bridge table.responsive tbody tr{border-bottom:1px solid #eee; border-top: 1px solid #eee; border-radius:8px; overflow:hidden;}
	
	.foreign-bridge .responsive thead tr { position: absolute; top: -9999px; left: -9999px;}
	.foreign-bridge .responsive td { border: none; border: 1px solid #eee;  position: relative; padding-left: 50%; text-align:right; padding:24px 16px 24px 180px;}
    .foreign-bridge table.responsive tbody tr td:first-child{text-align:right;}
	.foreign-bridge .responsive td:before {display:flex; align-items: center; position: absolute; font-weight: 400; top: 0; left:0; width: 40%; height:100%; z-index:0; white-space:unset; padding:0 16px; background:#3b5585; color:#fff; content: attr(data-table-header); text-align:left;}

}



@media screen and (max-width: 480px) {
    #jp p, #jp li, #ch p, #ch li{word-break: break-all!important;}

    footer{text-align:center;}
    .m-dnone{display:none;}
    .foreign-wrap{padding:56px 32px;}
    .foreign-wrapSub{padding:64px 32px;}
    .foreignTitle h2{font-size:40px;}
    .foreignTitle p{font-size:24px;}

    .foreign-Cardbox .rot {width: 300px; height: 420px;}

    .foreign-bridge .tabs li a{font-size:16px; min-height: 72px;}
    .foreign-bridge .tabs li a.active{font-size:18px;}
    .foreign-bridge .tab-container.is-stuck .tabs li a.active{font-size:18px;}

    .foreign-cont{margin-bottom:80px;}
    .foreign-cont .cont-tit{font-size:24px;}
    .foreign-cont.mpass .cont-tit{margin-bottom:32px;}
    .foreign-bridge .seconHalf .btn-list{flex-direction: column;}
    .btn-list{width:100%;}
    .btn-list a{padding:16px 0; text-align:center;}
    .btn-list.lang{display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; justify-items: center; align-items: stretch;}
    .btn-list.lang a{width:100%;}
    .wowpass-btn{width:100%; padding:8px 0; text-align:center;}

    .foreign-bridge .infoTitle{font-size:24px; margin-bottom:32px;}
    .foreign-bridge .foreign-cont li{font-size:16px;}

    .foreignCard-list .list-detail{flex-direction: column; padding-bottom: 60px; margin-bottom: 60px;}
    .foreignCard-list .list-detail .cardInfo{width:100%;}
    .foreignCard-list .list-detail .foreCard-img{width:50%; margin:0 auto 24px;}

    .foreignCard-list .list-detail .foreCard-img.grid{width: 100%; max-width: 90%; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));}

    .mpass .foreignCard-list .list-detail .foreCard-img{width:80%; margin:40px auto 0;}

    .foreignCard-list .list-detail .cardInfo .MpassTitle{font-size:18px;}
}


@media only screen and (max-width: 414px) {
    .foreign-wrap {padding: 48px 24px;}
    .foreign-Cardbox{margin-top:24px;}
    .foreignTitle h2{font-size:32px;}
    .foreignTitle p{font-size:20px;}
}



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

}



@media only screen and (max-width: 375px) {
    .scroll-icon{display:none;}
    .foreign-Cardbox .rot {width: 240px; height: 340px;}
}