@charset "utf-8";
@import url("font.css");
/*  */
:root {
    --fontSize: 16px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: 'Paperozi'
}
.only_m {
    display: none;
}

/*  */
html, body {
    height: 100vh;
    font-size: var(--fontSize);
    line-height: 1.5;
}
body {
    background: #215297;
}
/*  */
.wrap {
    display: grid;
    grid-template-rows: 50px 1fr;
    flex-direction: column;
    max-width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1520px;
    height: 100%;    
    padding: 120px 0;
}

.top {
    margin-bottom: 30px;
}

.bottom {
    position: absolute;
    bottom: 0;
    height: 50px;
    padding: 0 20px;
    margin-right: -20px;
    margin-left: -20px;
}
.bottom p {
    color: #9CA3AF;
    font-weight: 500;
    font-size: 0.875rem;
}

.container {    
    display: flex;
    align-items: center;
    gap: 50px;
}

.slogunQuickIcon {
    width: 100%;
}

.slogun {}
.slogun h2 {
    color: #fff;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.25;
}
.slogun h2 em {
    color: #8DC63F;
    font-style: normal;
    line-height: 1;
}
.slogun p {
    margin-top: 10px;
    color: #D1D5DB;
}

.quickIcon {
    margin-top: 84px;
}
.quickIcon ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 220px;
    gap: 18px;
}
.quickIcon li {
    position: relative;
}
.quickIcon li a {
    display: block;
    height: 100%;
    padding: 20px 20px 16px;
    color: #fff;
    font-weight: 500;
    font-size: 0.75rem;    
    background: no-repeat calc(100% - 10px) calc(100% - 6px)/72px 72px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.quickIcon li.item1 a {background-image: url(img_quick_001.svg);}
.quickIcon li.item2 a {background-image: url(img_quick_002.svg);}
.quickIcon li.item3 a {background-image: url(img_quick_003.svg);}
.quickIcon li a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 16px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.25) url(icon_arrow_right.svg) no-repeat 50% 50%/100% 20px;
    border-radius: 40px;
    z-index: 0;
    transform: rotate(-45deg);
    transition: all 0.2s ease-in-out;
}
.quickIcon li a:hover {
    transform: scale(1.05);
}
.quickIcon li a:hover::after {
    transform: rotate(360deg);
}
.quickIcon li.item1 a {background-color: #0067B1;}
.quickIcon li.item2 a {background-color: #8DC63F;}
.quickIcon li.item3 a {background-color: #FBB03F;}
.quickIcon li a strong {
    display: block;
    margin-top: 8px;
    font-weight: 800;
    font-size: 1.5rem;
}

.map {
    flex-shrink: 0;
    position: relative;
    /* width: 100%;
    height: auto; */
    font-size: 0;
    /* background: red; */
}
.map img {
    max-width: 100%;
}
.map svg {
    position: absolute;
    top: 0;
    left: 0;
}
.map svg polygon {
    cursor: pointer;
}
.infoList {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px 14px;
    font-size: 1rem;
    background: #fff;
    border: 1px solid #215297;
    border-radius: 10px;
}
.infoList:not(.active) {
    display: none;
}
.infoList li {
    padding-left: 20px;
    margin-top: 4px;
}
.infoList li:first-of-type {
    margin-top: 0;
}
.infoList li a {
    color: inherit;
    display: block;
    font-weight: 500;    
    text-decoration: none;

}
.infoList li a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.infoList li a:first-of-type {
    text-indent: -20px;
}
.infoList li a:first-of-type::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;    
    margin-right: 8px;
    margin-left: 4px;
    text-indent: 0;
    border-radius: 8px;
    vertical-align: top;
    margin-top: 8px;
}
.infoList li.bg-color1 a:first-of-type::before {background: #F15C21;}
.infoList li.bg-color2 a:first-of-type::before {background: #8DC63F;}
.infoList li.bg-color3 a:first-of-type::before {background: #0067B1;}
.infoList#list_001 {
    top: 31%;
    right: 46%;
}
.infoList#list_002 {
    top: calc(42% + 2px);
    right: 44%;
}
.infoList#list_003 {
    top: 40%;
    right: 20%;
}

@media screen and (min-width: 1200px) and (max-width:1560px) {
    .wrap {
        padding: 40px 20px calc(120px * 0.75);        
    }
    
    .bottom {
        margin-right: 0;
        margin-left: 0;
    }

    .slogunQuickIcon {
        width: 52%;
    }
    .map {
        width: 48%;
    }
    .infoList#list_001 {
        top: 7%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 37%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 9%;
    }      
}
@media screen and (max-width:1199px) {
    /*  */
    .wrap {
        display: flex;
        padding: 40px 20px calc(120px * 0.75);
    }

    .top {
        margin-bottom: 0
    }

    .bottom {
        position: relative;
        height: auto;
        padding: 1.75rem 0 1.25rem;
        margin-right: 0;
        margin-left: 0;
    }

    /*  */
    .container {
        flex-wrap: wrap;
        gap: calc(50px * 0.75);
        justify-content: center;
    }

    .slogunQuickIcon {
        order: 2;
    }

    .quickIcon {
        margin-top: calc(84px * 0.75);
    }
    .quickIcon li {
        height: 220px;
    }

    .map {
        flex-shrink: 1;
    }

    .infoList#list_001 {
        top: 13%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 43%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 19%;
    }        
}
@media screen and (max-width:959px) {
    :root {
        --fontSize: 14px;
    }

    * {
        word-break: keep-all;
    }
    .only_pc {
        display: none;
    }

    /*  */
    .top img {
        height: calc(48px * 0.75);
    }

    /*  */
    .slogun h2 {
        font-size: calc(2.5rem * 0.75);
        word-break: keep-all;
    }

    .infoList#list_001 {
        top: 13%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 42%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 19%;
    }    
}
@media screen and (max-width:767px) {
    .only_m {
        display: block;
    }    

    /*  */
    .wrap {
        padding: 40px 20px;
    }

    .bottom {
        position: relative;
        height: auto;
        padding: 1.75rem 0 1.25rem;
    }

    /*  */
    .infoList#list_001 {
        top: 7%;
    }
    .infoList#list_002 {
        top: 41%;
        right: 37%;
    }
    .infoList#list_003 {
        right: 10%;
    }    
}
@media screen and (max-width:499px) {
    .top {
        margin-bottom: calc(30px * 0.75)
    }

    /*  */
    .quickIcon ul {
        grid-template-columns: 1fr 1fr;
    }
    .quickIcon ul::after {
        content: '';
        background: url(img_quick_bg2.png) no-repeat 100% 100%/auto 180px;        
    }

    .map {
        margin-right: -20px;
        margin-left: -20px;
    }

    .infoList#list_001 {
        top: 53%;
        left: 20px;
    }
    .infoList#list_002 {
        top: 21%;
        right: 29%;
    }
    .infoList#list_003 {
        top: 75%;
        right: 20px;
    }    
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    .width_tablet {
        display: block;
    }
}