.subportal_grid{
    font-family:'Jeju Gothic',sans-serif;
    width:min(1440px,95vw);
    margin-block:4px;
    display:grid;
    grid-template-columns:
        2.2fr
        repeat(10, 1fr)
        2.2fr;
    grid-template-rows: repeat(10, 100px);
    gap:var(--gap);
}

/* 카드 배치 */

.korea          {grid-column:6 / span 3; grid-row:5 / span 4;}
.asia	    	{grid-column:5 / span 4; grid-row:1 / span 4;}
.europe	        {grid-column:2 / span 3; grid-row:2 / span 4;}
.africa	        {grid-column:2 / span 2; grid-row:7 / span 4;}
.angloamerica	{grid-column:9 / span 3; grid-row:2 / span 4;}
.latinamerica	{grid-column:10 / span 2; grid-row:6 / span 4;}
.oceania        {grid-column:8 / span 2; grid-row:9 / span 2;}

/* void 배치 */

.vl1{grid-column:1; grid-row:1 / span 2;}
.vl2{grid-column:1; grid-row:3 / span 5;}
.vl3{grid-column:1; grid-row:8 / span 3;}

.vr1{grid-column:12; grid-row:1 / span 4;}
.vr2{grid-column:12; grid-row:5 / span 2;}
.vr3{grid-column:12; grid-row:7 / span 4;}

.v01{grid-column:2 / span 3; grid-row:1 / span 1;}
.v02{grid-column:9 / span 3; grid-row:1 / span 1;}
.v03{grid-column:5 / span 1; grid-row:5 / span 1;}
.v04{grid-column:2 / span 4; grid-row:6 / span 1;}
.v05{grid-column:4 / span 2; grid-row:7 / span 2;}
.v06{grid-column:9 / span 1; grid-row:6 / span 3;}
.v07{grid-column:4 / span 1; grid-row:9 / span 2;}
.v08{grid-column:5 / span 3; grid-row:9 / span 2;}
.v09{grid-column:10 / span 2; grid-row:10 / span 1;}

/* hover 효과 */

.asia:hover,
.asia.is-active,
.europe:hover,
.europe.is-active {
    background: var(--blue);
    color: white;
}

.africa:hover,
.africa.is-active,
.angloamerica:hover,
.angloamerica.is-active {
    background: var(--yellow);
}

.korea:hover,
.korea.is-active,
.latinamerica:hover,
.latinamerica.is-active,
.oceania:hover,
.oceania.is-active {
    background: var(--red);
}

/* =========================================================
   Travel city list
   ========================================================= */

.portal_card.is-city-list {
    padding: 0;
    

    display: flex;
    flex-direction: column;

    overflow: hidden;

    text-align: left;

    cursor: default;
}

.travel-city-viewport {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

    background: #000;

    padding-block: 24px;
}

.travel-city-viewport.no-scroll {
    padding-block: 0;
}

.travel-city-scroll {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    gap: var(--gap);

    overflow-y: auto;

    background: #000;

    scrollbar-width: none;
}

.travel-city-scroll::-webkit-scrollbar {
    display: none;
}

.travel-scroll-up,
.travel-scroll-down {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    width: 32px;
    height: 20px;

    padding: 0;

    border: 0;

    background: #000;
    color: #fff;

    font-size: .7rem;

    cursor: pointer;
}

.travel-scroll-up {
    top: 0;
}

.travel-scroll-down {
    bottom: 0;
}

.travel-city-list {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;
    flex-flow: row wrap;

    align-content: flex-start;
    align-items: flex-start;

    gap: var(--gap);

    width: 100%;

    overflow-y: auto;

    background: #000;
}

/* region title */

.travel-region-title {
    flex: 0 0 50px;

    box-sizing: border-box;

    padding: 6px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background: inherit;
    color: inherit;

    border-bottom: var(--gap) solid #000;

    text-align: left;
}

.travel-region-title .ko {
    font-size: 1rem;
}

.travel-region-title .en {
    font-size: .9rem;
}

/* =========================================================
   City card
   ========================================================= */

.travel-city {
    flex: 1 1 auto;

    width: max-content;
    height: 75px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    padding: .5rem .65rem;

    background: #fff;

    border: 0;

    font-family: inherit;
    color: black;
    text-decoration: none;

    text-align: left;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;
}


/* 국문명 + 국기 */

.travel-city-ko-row {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.travel-city-ko {
    font-size: .9rem;
    line-height: 1.35;

    white-space: nowrap;
}

.travel-city-flag {

    position:relative;
    top:-1px;

    height: 1rem;

    object-fit: contain;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5));

    flex-shrink: 0;
}


/* 현지어 */

.travel-city-local {
    font-family: "Travel Noto", sans-serif;

    font-size: .8rem;
    font-style: italic;
    line-height: 1.35;

    white-space: nowrap;
}

.travel-city-local.lang-ja {
    font-family: "Travel Noto JP", sans-serif;
}

.travel-city-local.lang-ko {
    font-family: "Travel Noto KR", sans-serif;
}

.travel-city-local.lang-zh-CN {
    font-family: "Travel Noto SC", sans-serif;
}

.travel-city-local.lang-zh-TW {
    font-family: "Travel Noto TC", sans-serif;
}

/* 영문명 */

.travel-city-en {
    font-size: .8rem;
    line-height: 1.35;

    white-space: nowrap;
}



/* hover */

.travel-city:hover {
    background: #000;
    color: #fff;
}

@media screen and (max-width:767px){
    
    .subportal_grid{
            grid-template-columns:
                repeat(10,1fr);
    }

    /* 카드 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

    .asia	    	{grid-column:4 / span 3; grid-row:1 / span 5;}
    .europe	        {grid-column:1 / span 3; grid-row:2 / span 3;}
    .africa	        {grid-column:1 / span 2; grid-row:5 / span 3;}
    .angloamerica	{grid-column:8 / span 3; grid-row:1 / span 3;}
    .latinamerica	{grid-column:9 / span 2; grid-row:4 / span 4;}
    .oceania        {grid-column:6 / span 2; grid-row:7 / span 2;}

    /* void 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

    .vl1,.vl2,.vl3,.vr1,.vr2,.vr3{display:none;}

    .v01{grid-column:1 / span 3; grid-row:1 / span 1;}
    .v02{grid-column:7 / span 1; grid-row:1 / span 3;}
    .v03{grid-column:3 / span 1; grid-row:5 / span 1;}
    .v04{grid-column:7 / span 2; grid-row:4 / span 2;}
    .v05{grid-column:3 / span 6; grid-row:6 / span 1;}
    .v06{grid-column:1 / span 2; grid-row:8 / span 1;}
    .v07{grid-column:3 / span 3; grid-row:7 / span 2;}
    .v08{grid-column:8 / span 1; grid-row:7 / span 1;}
    .v09{grid-column:8 / span 3; grid-row:8 / span 1;}

}