/*  Define
    // Media Query Size
    //------------------------------------------------
    Extra small:    <576px;
    Small:          >=576px;
    Medium:         >=768px;
    Large:          >=992px;
    Extra large:    >=1200px;

    // Fonts
    //------------------------------------------------
    $font-family-serif:       'Merriweather', 'Georgia', 'Times', 'Nanum Myeongjo', 'Batang';
    $font-family-sans-serif:  'Ubuntu', -apple-system, BlinkMacSystemFont, 'Malgun Gothic';
    $font-family-monospace:   SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    $font-family-condensed:   'Open Sans Condensed', 'Malgun Gothic';

    // Color
    //------------------------------------------------
    $white:         #fff;
    $gray-100:      #f8f9fa;
    $gray-200:      #e9ecef;
    $gray-300:      #dee2e6;
    $gray-400:      #ced4da;
    $gray-500:      #adb5bd;
    $gray-600:      #6c757d;
    $gray-700:      #495057;
    $gray-800:      #343a40;
    $gray-900:      #212529;
    $black:         #000;

    $blue:    #007bff;
    $indigo:  #6610f2;
    $purple:  #6f42c1;
    $pink:    #e83e8c;
    $red:     #dc3545;
    $orange:  #fd7e14;
    $yellow:  #ffc107;
    $green:   #28a745;
    $teal:    #20c997;
    $cyan:    #17a2b8;

    $red-dark:          #cb000e;
    $red-light:         #ea4836;

    $blue-dark:         #0063d0;
    $blue-light:        #d1effe;
    $blue-highlight:    #61bae5;

    $green-light:       #eff8e4;
    $green-highlight:   #c6fe7c;

    $yellow-dark:       #de9800;

    $text-color:        #212529;
    $hover-color:       #eff8e4;
    $active-bg-color:   #eff8bc;

    // etc
    //------------------------------------------------
    $border-radius: .25rem;
 */

/*  Basic */
    @charset "utf-8";
    @import url("https://fonts.googleapis.com/css?family=Lato:400,500,600,700|Noto+Sans+KR:400,500,700|Noto+Serif+KR");

    :root {
        --font-gothic:      Lato, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
        --font-serif:       'Noto Serif KR', Georgia, Times, Batang, serif;
        --font-monospace:   SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
        --black:        #1C1C1C;
        --red:          #F12809;
        --red-dark:     #cb000e;
        --red-light:    #ea4836;
        --blue-dark:    #0063d0;
        --blue-light:   #d1effe;
        --green-dark:   #195C28;
        --green-light:  #E9FEE1;
        --yellow-dark:  #D5B200;
        --yellow-light: #FFFEBD;
        --gray-100:     #f8f9fa;
        --gray-200:     #e9ecef;
        --gray-300:     #dee2e6;
        --gray-400:     #ced4da;
        --gray-500:     #adb5bd;
        --gray-600:     #6c757d;
        --gray-700:     #495057;
        --gray-800:     #343a40;
        --gray-900:     #212529;
        --line:     rgb(236,236,236);

        /* school_type */
        --color-language:   #007bff; /* blue */
        --color-degree:     #28a745; /* green */
        --color-transfer:   #ffc107; /* yellow */
        --color-foundation: #fd7e14; /* orange */
        --color-premaster:  #dc3545; /* red */
        --color-secondary:  #6f42c1; /* purple */

        /* register_root */
        --color-counsel:    #28a745; /* green */
        --color-process:    #007bff; /* blue */
        --color-seminar:    #dc3545; /* red */
        --color-ukadmin:    #495057; /* gray-700 */

        /* etc */
        --color-customer:   #6610f2; /* indigo */
    }

    ::-moz-selection { background: var(--blue-light) }
    ::selection { background: var(--blue-light) }

    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: var(--font-gothic);
        font-size: 0.75rem;
    }

    pre {
        font-family: var(--font-monospace);
        font-size: 1rem;
    }

    a {
        background-color: transparent;
        cursor: pointer;
    }

    a:link,
    a:visited {
        color: var(--black);
        text-decoration: none
    }

    a:hover,
    a:focus,
    a:active {
        color: var(--red);
        text-decoration: none
    }

    body,
    button,
    input,
    select,
    optgroup,
    textarea {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        color: var(--black);
    }

    html[lang="ko-KR"] body,
    html[lang="ko-KR"] button,
    html[lang="ko-KR"] input,
    html[lang="ko-KR"] select,
    html[lang="ko-KR"] optgroup,
    html[lang="ko-KR"] textarea {
        font-size: 17px;
        font-weight: 400;
        line-height: 1.7;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        color: var(--black);
    }

    b,strong {
        font-weight: 700
    }

    hr {
        width: 50px;
        margin: 2rem auto !important;
        border-top: 1px solid var(--red-light) !important
    }

/*  Bootstrap override */
    .btn {
        border-radius: 0
    }

    .btn-danger {
        background-color: var(--red);
        border-color: var(--red)
    }
    .btn-outline-danger {
        border-color: var(--red)
    }
    .btn-danger:hover,
    .btn-outline-danger:hover {
        border-color: var(--red-dark);
        background-color: var(--red-dark)
    }

    .form-control {
        border-radius: 0
    }

    .carousel-indicators li {
        border-radius: 50%;
        width: 5px;
        height: 5px
    }

/*  Layout */
    #site-header {
        background-color: rgba(255,255,255,1);
        z-index: 1022
    }

    #site-header-top {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }

    #mobile-header-menu {
        border-top: solid 1px var(--gray-300);
    }

    #header-menu {
        display: none;
    }

    #header-logo {
        line-height: 1;
        text-align: center;
    }
    #header-logo img {
        height: 20px;
        margin: 0;
        transition: all 0.2s ease
    }

    #nav-icon,
    #header-logo,
    #header-menu,
    #header-search {
        flex: 1 0 auto;
    }

    #header-search {
        display: flex;
        justify-content: flex-end;
    }

    #header-search form {
        display: none;
    }

    #header-search.form-open form {
        display: flex;
        transition: all .2s ease;
        position: absolute;
        top: 0;
        right: 2rem;
        z-index: 1024;
        height: 50px;
        align-items: center;
        padding: 0 1rem;
        background-color: #fff
    }

    #header-search.form-open #toggle-search span {
        display: block;
        padding: 1rem 0;
    }

    #header-search.form-open #toggle-search i,
    #header-search.form-open #toggle-search img {
        opacity: 0
    }

    #header-search.form-open #toggle-search em,
    #header-search.form-open #toggle-search em::after,
    #header-search.form-open #toggle-search em::before {
        display: block;
        position: relative;
        height: 1px;
        width: 18px;
        background-color: #000;
        backface-visibility: hidden
    }

    #header-search.form-open #toggle-search em::before,
    #header-search.form-open #toggle-search em::after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        transition: transform .2s
    }

    #header-search.form-open #toggle-search em {
        background-color: rgba(33, 37, 41, 0)
    }

    #header-search.form-open #toggle-search em::before {
        transform: rotate(-45deg)
    }

    #header-search.form-open #toggle-search em::after {
        transform: rotate(45deg)
    }

    #header-search form input[type="text"] {
        border-color: var(--line);
        border-radius: 0.25rem 0 0 0.25rem;
        border-right: none
    }
    /*#header-search form input[type="text"]::placeholder {
        font-size: small;
    }
    #header-search form input[type="text"]::-webkit-input-placeholder {
        font-size: small;
    }
    #header-search form input[type="text"]:-ms-input-placeholder {
        font-size: small;
    }*/
    #header-search form input[type="text"]:focus {
        box-shadow: none;
    }
    #header-search form button {
        border: solid 1px var(--line);
        border-left: none;
        border-radius: 0 0.25rem 0.25rem 0;
        color: var(--gray-500);
        background-color: #fff;
    }
    #header-search form button img {
        height: 13px;
    }

/*  nav-icon */
    #nav-icon {
        height: 50px;
        right: 0
    }
    #nav-icon em, #nav-icon em::after, #nav-icon em::before {
        display: block;
        position: relative;
        height: 1px;
        width: 18px;
        background-color: #000;
        backface-visibility: hidden
    }
    #nav-icon em {
        top: 25px;
        transform: translateY(-25%);
        transition: background-color .2s
    }
    #nav-icon em::before, #nav-icon em::after {
        position: absolute;
        content: '';
        left: 0;
        transition: transform .2s
    }
    #nav-icon em::before {
        transform: translateY(-6px)
    }
    #nav-icon em::after {
        transform: translateY(6px)
    }
    #site-header.nav-open #nav-icon em {
        background-color: rgba(33, 37, 41, 0)
    }
    #site-header.nav-open #nav-icon em::before {
        transform: rotate(-45deg)
    }
    #site-header.nav-open #nav-icon em::after {
        transform: rotate(45deg)
    }

/*  #site-nav */
    #site-nav {
        line-height: 1;
        border-top: solid 1px var(--gray-300);
    }
    #site-nav > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        font-size: medium;
    }

    /* 최상위 메뉴 */
    #site-nav > ul > li {
        padding: .5rem .3rem
    }
    #site-nav > ul > li > a {
        color: var(--gray-500);
    }

    /* When #nav-icon clicked */
    #site-header.nav-open #header-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: block;
    }
    #site-header.nav-open #site-nav > ul {
        flex-direction: column;
        margin: 1rem 0;
    }
    #site-header.nav-open #site-nav > ul > li {
        padding-left: 1rem;
    }

    /* sub menu */
    #site-nav > ul > li > ul {
        display: none;
        list-style: none;
        margin: 0;
        padding: 1rem;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 120px;
        width: calc(100% - 120px);
        height: 100%;
        background-color: rgba(247,247,247,1);
        border-top: solid 1px var(--gray-300);
    }
    #site-nav > ul > li > ul ul {   /* hide sub-sub menu */
        display: none;
    }
    #site-header.nav-open #site-nav > ul > li > ul.on {
        display: block;
    }
    #site-nav > ul > li > ul li {
        padding: .5rem .3rem
    }
    #site-nav > ul > li > ul .nav-sub-wrap section {
    }
    #site-nav > ul > li > ul .nav-sub-wrap section.divider {
        border-top: solid 1px rgb(236, 236, 236);
        margin-top: 1rem;
        padding-top: 1rem
    }

/*  #site-nav, nav-icon media queries */
    @media only screen and (min-width: 576px) {
        #header-logo img {
            height: 22px;
        }
        #nav-icon {
            display: none
        }
        #header-logo {
            text-align: left
        }
        #header-menu {
            display: block;
            position: static;
            border-top: none;
            width: auto;
            margin: 0 auto;
        }
        #header-logo,
        #header-menu,
        #header-search {
            flex: 0 0 auto;
        }

        #site-nav {
            border-top: none;
        }
        #site-nav > ul > li {
            padding: 0 .3rem;
        }
        #site-nav > ul > li > a {
            color: var(--black);
            font-size: 16px;
            line-height: 62px
        }
        #site-nav > ul > li.active > a,
        #site-nav > ul:hover > li > a {
            color: var(--gray-500);
            display: block;
        }
        #site-nav > ul > li.active > a,
        #site-nav > ul > li:hover > a {
            color: var(--red);
            padding-top: 2px;
            line-height: 58px;
            border-bottom: solid 2px var(--red);
        }

        /* sub-menu */
        #site-nav > ul > li > ul.on {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            border-top: solid 1px var(--line);
            border-bottom: solid 1px var(--line);
            box-shadow: 0 3px 3px rgba(0,0,0,0.1);
            position: absolute;
            top: 62px;
            left: 0;
            display: flex;
            justify-content: center;
            background-color: rgba(255,255,255,1);
            transition: top 0.2s ease
        }
        #site-nav > ul > li > ul ul {
            display: block;
        }
        #site-nav > ul > li > ul .nav-sub-wrap {
            display: flex;
        }
        #site-nav > ul > li > ul .nav-sub-wrap section {
            margin: .5rem 1rem;
        }
        #site-nav > ul > li > ul .nav-sub-wrap section.divider {
            border-top: none;
            border-left: solid 1px rgb(236, 236, 236);
            padding-left: 1rem;
            padding-top: 0;
            margin-top: .5rem;
        }
        #site-nav > ul > li > ul li {
            padding: 0;
        }
        #site-nav > ul > li > ul ul {
            list-style: none;
            padding: 0;
            margin: 0
        }
        #site-nav > ul > li > ul .nav-sub-wrap section > li:not(:last-child) {
            margin-bottom: .3rem;
        }
        #site-nav > ul > li > ul li a {
            font-size: 14px;
            font-weight: 500;
            display: block;
            padding: .5rem
        }
        #site-nav > ul > li > ul li.active > a {
            color: var(--red)
        }
        #site-nav > ul > li > ul li > ul > li > a {
            font-size: 13px;
            color: var(--gray-500);
            font-weight: normal;
        }
        #site-nav > ul > li > ul li > ul > li.active > a,
        #site-nav > ul > li > ul li > ul > li > a:hover {
            color: #3c3c3c;
            text-decoration: underline;
        }

        main {
            padding-top: 0
        }

        #header-search.form-open form {
            top: 5px;
        }
    }

    @media only screen and (min-width: 768px) {
        #header-search form {
            display: flex;
            transition: all .2s ease;
        }
        #header-search form input[type="text"] {
            max-width: 160px;
            height: auto
        }
        #toggle-search {
            display: none;
        }
        #header-logo img {
            height: 22px;
        }
        #site-nav > ul > li {
            padding: 0 .5rem;
        }
    }

    @media only screen and (min-width: 992px) {
        #header-logo img {
            height: 30px;
        }
        #site-nav > ul > li {
            padding: 0 1rem;
        }
    }

/*  seo-header */
    header#seo-header {
        display: none;
        background-color: rgba(0,0,0,1);
        color: #e7e7e7;
    }
    header#seo-header .abstract {
        display: flex;
        align-items: center;
        font-size: small;
        padding: .5rem
    }
    header#seo-header .abstract:hover {
        opacity: 0.7;
        cursor: pointer;
    }
    header#seo-header .abstract img {
        width: 40px;
        height: 40px;
        margin-right: 1rem;
    }
    header#seo-header .abstract .title {
        color: #cb000e;
        margin-right: 1rem;
    }
    header#seo-header .canonical {
        color: var(--yellow-dark);
    }

    header#seo-header .form {
        display: none;
        position: absolute;
        width: 100%;
        z-index: 1023;
        background-color: #000;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 1rem;
    }
    header#seo-header .form label {
        font-size: small;
        font-weight: bold;
        color: #ced4da;
        line-height: 1;
        font-family: "Lato", "Noto Sans KR", sans-serif;
        margin-right: 1rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
    }
    header#seo-header .form label input {
        margin: 0 .5rem;
    }
    header#seo-header .form input[type=text],
    header#seo-header .form input[type=file],
    header#seo-header .form textarea {
        display: block;
        width: 100%;
        background: rgba(0,0,0,0.8);
        color: #fff;
        border: solid 1px rgba(255,255,255,0.3);
        padding: .5rem;
    }
    header#seo-header .form .item {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    header#seo-header .seo-image div {
        flex: 1;
    }
    header#seo-header .seo-image .image-wrap {
        max-width: 220px
    }
    header#seo-header .seo-image img {
        max-width: 200px;
        border: solid 1px #fff;
    }

    @media only screen and (min-width: 576px) {
        header#seo-header { display: block; }
        header#seo-header .form .item { flex-wrap: wrap; }
    }

/*  page-header, depth2, breadcrumb - new */
    header#page-header {
        position: relative;
    }
    header#page-header .banner h1 {
        position: fixed;
        top: 0;
        left: 50%;
        width: 200px;
        margin-left: -100px;
        z-index: 1022;
        background-color: #fff;
        font-size: 12pt;
        line-height: 50px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header#page-header .banner h1 img {
        margin-left: .5rem
    }
    header#page-header .banner #parent-menu {
        position: fixed;
        top: 9px;
        left: 3rem;
        z-index: 1022;
    }
    header#page-header .banner #parent-menu img {
    }
    header#page-header .banner #d2menu {
        display: none;
    }
    header#page-header .banner #d2menu.on {
        display: block;
        position: fixed;
        top: 50px;
        background-color: var(--gray-100);
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    header#page-header .banner #d2menu li {
        margin: 0;
        padding: 0;
        line-height: 1;
        border-top: solid 1px var(--gray-200)
    }
    header#page-header .banner #d2menu li:last-child {
        border-bottom: solid 1px var(--gray-200)
    }
    header#page-header .banner #d2menu li a {
        display: block;
        padding: .8rem;
    }

    nav#depth2menu {
        padding: 0;
        top: 50px;
        background-color: rgba(255,255,255,1);
        border-style: solid;
        border-width: 1px 0;
        border-color: var(--gray-200);
        overflow: hidden;
    }
    nav#depth2menu ol {
        list-style: none;
        display: flex;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        padding: 0 .5rem;
    }
    nav#depth2menu ol li {
        padding: .1rem .5rem;
        margin: 0;
    }
    nav#depth2menu ol li a {
        line-height: 1;
        font-weight: normal;
        font-size: 10pt;
        white-space: nowrap
    }
    nav#depth2menu ol li.active {
        border-bottom: solid 2px var(--black);
    }
    /*nav#depth2menu .d2handle {
        display: none;
    }*/
    nav#depth2menu .d2handle {
        display: block;
        position: fixed;
        top: 51px;
        height: 33px;
        line-height: 33px;
        right: 0;
        padding: 0 1rem 0 .5rem;
        background-color: #fff;
    }
    nav#depth2menu.open {
        overflow: auto
    }
    nav#depth2menu.open ol {
        flex-wrap: wrap;
    }

    nav#depth2menu .breadcrumb {
        display: none;
        background-color: transparent;
        margin: 0;
        border-radius: 0;
        border-bottom: solid 1px var(--gray-200);
        padding: .35rem 1rem;
        font-size: 10pt
    }
    nav#depth2menu .breadcrumb li {
        padding: 0;
    }
    nav#depth2menu .breadcrumb-item+.breadcrumb-item::before {
        content: ">";
        margin-left: .5rem
    }
    nav#depth2menu .breadcrumb .breadcrumb-item.active a {
        color: var(--orange);
        font-weight: 500
    }
    nav#depth2menu.open .breadcrumb {
        display: flex;
    }

    #page-header .breadcrumb {
        display: none;
    }

    @media only screen and (min-width: 576px) {
        header#page-header .banner {
            min-height: 200px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            animation: fading .3s ease-in-out;
        }
        header#page-header .banner .overlay {
            background-color: rgba(0,0,0,0.3);
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        header#page-header .banner h1 {
            display: block !important;
            position: static;
            background-color: transparent;
            line-height: 1;
            width: auto;
            color: #fff;
            margin: 0;
            text-shadow: 0px 0px 5px #111;
            font-size: 2rem
        }
        header#page-header .banner #parent-menu img,
        header#page-header .banner img.chevron {
            display: none;
        }
        header#page-header .banner #d2menu,
        header#page-header .banner #d2menu.on {
            display: none;
        }

        nav#depth2menu {
            top: 62px;
            background-color: rgba(245,245,245,1);
        }
        nav#depth2menu ol {
            justify-content: space-around;
        }
        nav#depth2menu ol li {
            padding: .5rem .5rem .3rem .5rem
        }
        nav#depth2menu ol li a {
            font-size: 11pt;
        }
        nav#depth2menu ol li.active {
            border-color: var(--red-light);
        }
        nav#depth2menu ol li.active a {
            color: var(--red-light)
        }
        /*nav#depth2menu.overflowed .d2handle {
            display: none;
        }*/
        nav#depth2menu .d2handle {
            display: none;
        }

        nav#depth2menu .breadcrumb,
        nav#depth2menu.open .breadcrumb {
            display: none
        }

        #page-header .breadcrumb {
            display: flex;
            position: absolute;
            top: 0;
            background-color: transparent;
            color: #fff;
            font-size: 10pt
        }
        #page-header .breadcrumb a {
            color: var(--gray-500)
        }
        #page-header .breadcrumb a:hover {
            color: var(--gray-200)
        }
        #page-header .breadcrumb li.active a {
            color: #fff;
            font-weight: bold;
        }
    }

/*  footer */
    footer {
        margin-top: 2rem;
        margin-bottom: 50px;
    }

    footer section,
    .site-main-footer section {
        padding: 1rem 0;
    }

    footer section h4,
    .site-main-footer section h4 {
        margin-bottom: 1rem;
        font-size: 1rem;
        font-weight: normal;
        text-align: center;
    }

    .site-main-footer section.application {
    }
    .site-main-footer section.application .wrap {
        background-image: url('/files/image/application-bg.jpg');
        background-size: cover;
        padding: 2rem 1rem 1rem 1rem
    }
    .site-main-footer section.application .description h4 {
        color: #fff;
        font-size: 24px
    }
    .site-main-footer section.application .description p {
        color: #fff;
        font-size: small;
        text-align: center;
    }
    .site-main-footer section.application .application-form {
        background-color: #fff;
        padding: 1rem;
        border-radius: 1rem;
    }
    .site-main-footer section.application .application-form .form-item {
        margin-bottom: .3rem
    }
    .site-main-footer section.application .application-form .form-control {
        border-color: #ececec;
        border-radius: .25rem;
    }
    .site-main-footer section.application .application-form .form-control:focus {
        border-color: #3c3c3c;
        box-shadow: none;
    }
    .site-main-footer section.application .application-form .form-control::placeholder {
        font-size: small;
        line-height: 2
    }
    .site-main-footer section.application .application-form .bootstrap-select .dropdown-toggle .filter-option {
        font-size: small;
    }
    .site-main-footer section.application .application-form .required {
        position: relative;
    }
    .site-main-footer section.application .application-form .required:before {
        content: " ";
        background-color: var(--red);
        display: block;
        position: absolute;
        top: .6rem;
        left: .6rem;
        height: 3px;
        width: 3px;
        border-radius: 50%
    }
    .site-main-footer section.application .application-form .two-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 0 .3rem 0;
    }
    .site-main-footer section.application .application-form .two-col label {
        margin: 0;
        padding-left: 12px;
        font-size: small;
        font-weight: bold;
    }
    .site-main-footer section.application .application-form .two-col label.required:before {
        top: 0;
    }
    .site-main-footer section.application .application-form .two-col .choice {
        font-size: small;
    }
    .site-main-footer section.application .application-form .two-col .choice span {
        margin-left: 1rem;
        display: inline-flex;
        align-items: center;
    }
    .site-main-footer section.application .application-form .two-col .choice input {
        margin-right: .25rem
    }
    .site-main-footer section.application .application-form .fa-select {
        border: solid 1px #ececec;
        border-radius: .25rem
    }
    .site-main-footer section.application .application-form .fa-agree {
        font-size: small;
    }
    .site-main-footer section.application .application-form .fa-agree input {
        margin-right: .25rem
    }
    .site-main-footer section.application .application-form .fa-agree a {
        color: var(--blue);
        font-weight: bold;
    }
    .site-main-footer section.application .application-form .fa-submit {
        margin-top: 1rem;
    }
    .site-main-footer section.application .application-form .fa-submit button {
        width: 100%;
        font-weight: normal;
        border-radius: .5rem
    }
    .site-main-footer section.application .application-form .fa-submit button i {
        display: none;
    }

    footer section.branch {
        padding: 3rem 0;
        background-color: rgb(247,247,247);
    }

    footer section.branch .-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    footer section.branch .-row .-col {
        margin: .5rem 0
    }

    footer section.branch img.office {
        width: 100%
    }

    footer section.branch .info {
        padding: 1rem;
        padding-bottom: .5rem;
        background-color: #fff
    }

    footer section.branch h6 {
        font-weight: bold;
        font-size: 1rem
    }

    footer section.branch h6 a {
        font-size: 1rem;
        color: var(--red)
    }

    footer section.branch address {
        font-size: 0.85rem;
        color: var(--gray-600)
    }

    footer section.branch .btns {
        display: flex;
    }

    footer section.branch a {
        font-weight: 500;
        width: 100%;
        margin: 1rem 0;
        padding: .5rem
    }
    footer section.branch a.btn-danger {
        color: #fff
    }
    footer section.branch a.btn-outline-danger {
        color: var(--red)
    }
    footer section.branch a:hover {

    }

    footer section.footer {
        border-top: solid 1px #ececec;
    }

    #footer-logo {
        line-height: 1;
        display: flex;
        justify-content: space-between;
        margin-bottom: 2rem
    }
    #footer-logo img {
        height: 24px;
        margin: 0;
    }

    #footer-menu {
        margin: 1rem 0 1rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-weight: 500;
        line-height: 1
    }
    #footer-menu nav {
        padding: .5rem 0
    }
    #footer-menu nav a:not(:last-child) {
        margin-right: 0.5rem
    }

    .footer-icons img {
        width: 24px
    }
    .footer-icons a:hover img {
        /*transform: scale(0.95);*/
    }

    .footer-pc {
        display: none;
    }

    .footer-info {
        font-size: small;
        color: var(--gray-600);
        margin-bottom: 1rem
    }
    .footer-info p {
        margin: 0;
        margin-right: 1rem
    }
    a.ssl_logo img {
        height: 24px
    }
    /*.footer-info .email {
        display: inline-flex;
        align-items: center;
    }*/
    .footer-info .email img {
        margin-left: .2rem;
        margin-bottom: 5px
    }
    .footer-info a.tel {
        display: block;
    }

    @media only screen and (min-width: 576px) {
        footer {
            margin-bottom: 0;
        }

        footer section,
        .site-main-footer section {
            padding: 2rem 0;
        }

        footer section h4,
        .site-main-footer section h4 {
            margin-bottom: 2rem;
            font-size: 1.5rem;
            font-weight: normal;
            text-align: center;
        }

        footer section.branch {
            padding: 4rem 0;
        }

        footer section.branch .-row {
            flex-direction: row;
        }

        footer section.branch .-row .-col {
            max-width: 400px;
            margin: .5rem;
        }

        footer section.branch h6 {
            font-size: 1.5rem;
            font-weight: 500
        }

        footer section.branch h6 a {
            font-weight: bold;
        }
        .footer-info a.tel {
            display: inline;
            margin-left: 1rem
        }
    }

    @media only screen and (min-width: 768px) {
        .site-main-footer section.application .wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem;
            min-height: 400px;
            border-radius: 1rem
        }
        .site-main-footer section.application .description {
            flex: 1;
        }
        .site-main-footer section.application .application-form {
            flex: 1;
            max-width: 300px;
            padding: 1rem
        }
        .site-main-footer section.application .description h4 {
            text-align: left;
        }
        .site-main-footer section.application .description p {
            text-align: left;
        }

        footer section.footer .-row {
            display: flex;
            justify-content: flex-start;
        }

        #footer-logo {
            margin-right: 3rem;
            margin-bottom: 0;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        #footer-logo img {
            height: 35px;
        }

        a.ssl_logo {
            position: absolute;
            top: 1.2rem;
        }
        #footer-logo a.ssl_logo img {
            height: 30px;
        }

        #footer-menu {
            margin: 0;
            padding-bottom: 1rem;
            flex: 1 0 auto;
            width: 100%
        }
        .footer-info {
            width: 100%;
            display: flex;
            margin-bottom: .5rem
        }
    }

    @media (min-width: 992px) {
        .site-main-footer section.application .wrap {
            padding: 2rem 4rem;
            border-radius: 2rem;
            min-height: 500px;
        }
        .site-main-footer section.application .application-form {
            padding: 2rem;
            max-width: 420px;
        }
        .site-main-footer section.application .description h4 {
            font-size: 1.75rem;
        }
        .site-main-footer section.application .description p {
            font-size: medium;
        }

        footer section.footer .-row {
            justify-content: space-around;
        }

        #footer-logo {
            justify-content: center;
        }
        .footer-mobile {
            display: none;
        }
        .footer-pc {
            display: block;
        }
        .footer-pc .footer-icons {
            display: flex;
            align-items: center;
        }
        .footer-pc span {
            font-weight: bold;
            margin-right: .5rem
        }
        .footer-pc a {
            margin-left: .5rem;
        }
    }

    .login-menu {
        margin-top: 1rem;
        display: flex;
        justify-content: flex-end;
    }
    .login-menu a {
        margin: 0;
    }

/*  System */
    figure img { max-width: 100%; } /* ckeditor */

    .black-gradient {
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 35%,rgba(0,0,0,0.75) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 35%,rgba(0,0,0,0.75) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
    }

/*  modal */
    .modal {
        z-index: 9995;
        display: none;
        padding-top: 100px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7)
    }

    .modal-content {
        margin: auto;
        background-color: #fff;
        position: relative;
        border-radius: .25rem;
        padding: 0;
        outline: 0;
        width: 90%;
        max-height: 90%;
        animation: animatezoom 300ms
    }

    #log-content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    @media only screen and (min-width: 768px) {
        .modal-content {
            width: 600px
        }
    }

    .modal-image {
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        padding: 0;
        outline: 0;
        width: 100%;
        animation: fading 300ms
    }

    .modal-header {
        padding: .5rem 1rem;
        background-color: var(--gray-100)
    }

    .modal-title {
        font-family: var(--font-gothic);
        font-weight: bold;
        color: var(--gray-600);
    }

/*  Misc */
    .table-center {
        text-align: center !important
    }
    .-center {
        display: inline-block;
        width: 100%;
        text-align: center !important
    }

    .-animate-zoom {
        animation: animatezoom 300ms
    }

    @keyframes animatezoom {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    @keyframes x-zoom {
        from {
            transform: scaleX(0)
        }

        to {
            transform: scaleX(1)
        }
    }

    @keyframes fading {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    .btn-flat {
        line-height: 1;
        padding: 0 .5rem
    }

    #login-form {
        display: flex;
        flex-wrap: wrap;
    }
    #login-form button {
        width: 100%
    }
    #login-form input,
    #login-form button {
        margin-bottom: .2rem;
        text-align: center;
    }

    @media (min-width: 420px) {
        #login-form {
            flex-wrap: nowrap;
        }
        #login-form button {
            width: auto;
            white-space: nowrap;
        }
    }

/*  Misc */
    i.line {
      border: solid black;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 3px;
    }

    .right {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }

    .left {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }

    .up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }

    .down {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }

    .footnote, .footnote-right {
        font-size: small;
        color: var(--gray-600);
        position: relative;
        margin: 0;
        margin: 1rem 0;
        padding: .5rem;
        list-style: none;
    }

    .footnote li, .footnote-right li {
        padding: .2rem 0;
        margin: 0;
        line-height: 1em;
    }

    .footnote::before, .footnote-right::before {
        width: 30%;
        border-top: 1px solid var(--gray-500);
        position: absolute;
        content: '';
        top: 0
    }

    .footnote::before {
        left: 0
    }

    .footnote-right {
        text-align: right;
    }
    .footnote-right::before {
        right: 0
    }

    .footnote label, .footnote-right label {
        display: inline-block;
        padding: 0;
        margin: 0;
        min-width: 80px;
    }

/*  ckeditor5 */
    figure.image {
        max-width: 100%;
    }
    figure.image.image_resized {
    }
    figure.image-style-align-left {
        float: left;
    }
    figure.image-style-align-center {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    figure.image-style-align-right {
        float: right;
    }

    .application-btns {
        text-align: center;
    }
    .application-btns a {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 1rem 3rem;
        transition: transform .2s;
    }
    .application-btns a:hover {
        /*transform: scale(1.2);*/
    }

    span.keyword {
        background-color: #ffc107;
        border-bottom: solid 1px #fd7e14
    }

/*  bbs - converted from gnuboard */
    section.read.gnu article p {
        margin: 0;
        line-height: 1.8;
    }
    section.read.gnu article br {
        display: block;
        content: "";
        padding-bottom: 10px;
    }

/*  page-menu */
    nav.page-menu {
        margin: 2rem 0;
    }
    nav.page-menu .pagination {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    nav.page-menu .pagination li {
        margin: .2rem .4rem;
        text-align: center;
        font-size: small;
    }
    nav.page-menu .pagination li a.page-link {
        border: none;
        line-height: 1;
        padding: .35rem .5rem
    }

    nav.page-menu .pagination li.prev a.page-link,
    nav.page-menu .pagination li.prev-group a.page-link,
    nav.page-menu .pagination li.next a.page-link,
    nav.page-menu .pagination li.next-group a.page-link{
        border: solid 1px var(--gray-300);
        border-radius: .25rem
    }
    nav.page-menu .pagination li.active a.page-link {
        border: solid 1px var(--black);
        background-color: var(--black);
        border-radius: .25rem
    }

    /*@media only screen and (min-width: 768px) {
        nav.page-menu .pagination {
            flex-wrap: wrap;
            justify-content: center;
        }
        nav.page-menu .pagination li {
            margin: 1px 0;
            flex: 0;
        }
        nav.page-menu .pagination li.prev,
        nav.page-menu .pagination li.prev-group,
        nav.page-menu .pagination li.next,
        nav.page-menu .pagination li.next-group {
            flex: 0 0 auto
        }
    }*/

/*  tag */
    label.related, label.tagged {
        display: block;
        text-align: center;
        color: var(--gray-600);
        font-size: x-large;
        margin: 2rem 0;
    }
    label.related:after, label.tagged:after {
        display: block;
        content: '';
        border-top: solid 2px var(--orange);
        width: 40px;
        margin: 1rem auto;
    }

    .tag-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: .5rem
    }
    .tag-list i {
        margin-right: .5rem
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 2rem 0 1rem 0;
    }
    .tags i {
        margin-right: .5rem
    }

    .tag {
        border: solid 1px var(--gray-400);
        background-color: #fff;
        color: var(--gray-500);
        font-size: small;
        line-height: 1;
        padding: .2rem .5rem;
        margin: 0 .3rem .3rem 0;
        transition: all .5s;
    }
    .tag:hover {
        border-color: var(--gray-800);
        /*background-color: var(--gray-800);
        color: #fff*/
    }
    a.tag {
        color: var(--gray-500);
    }
    a.tag:hover {
        border-color: var(--gray-800);
        background-color: var(--gray-800);
        color: #fff
    }
    .tag .school_type {
        margin-left: .2rem
    }

    .ts-container {
        display: flex;
        flex-wrap: wrap;
    }
    .ts-container .tag i {
        margin-left: .3rem;
        color: var(--red-dark);
        transition: all .2s
    }
    .ts-container .tag i:hover {
        color: var(--red-light);
        cursor: pointer;
        /*transform: scale(1.2);*/
    }

    .header-tag {
        margin: 2rem auto -1px auto;
        font-size: small;
    }
    .header-tag .tag {
        border-color: var(--gray-400);
        border-radius: 0;
        background-color: var(--gray-400);
        color: var(--gray-800);
        margin: 0 .3rem .3rem 0;
        padding: .2rem .5rem
    }
    .header-tag .tag.school {
        background-color: #111;
        border-color: #111;
        color: #fff;
    }

    .tagged {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;
    }
    .tagged li {
        line-height: 1.2;
        padding: .5rem;
        border-top: solid 1px var(--gray-300)
    }
    .tagged li.active {
        background-color: var(--yellow-light)
    }
    .tagged li .date {
        font-size: small;
        float: right;
        color: var(--gray-500)
    }

    .search-select {
        background-color: #fff;
        border: solid 1px var(--gray-400);
    }


/*  school-type */
    .LANGUAGE { color: var(--color-language) !important; border-color: var(--color-language) !important }
    .DEGREE { color: var(--color-degree) !important; border-color: var(--color-degree) !important }
    .TRANSFER { color: var(--color-transfer) !important; border-color: var(--color-transfer) !important }
    .FOUNDATION { color: var(--color-foundation) !important; border-color: var(--color-foundation) !important }
    .PREMASTER { color: var(--color-premaster) !important; border-color: var(--color-premaster) !important }
    .SECONDARY { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important }

    .invert.LANGUAGE { background-color: var(--color-language) !important; color: #fff !important }
    .invert.DEGREE { background-color: var(--color-degree) !important; color: #fff !important }
    .invert.TRANSFER { background-color: var(--color-transfer) !important; color: #fff !important }
    .invert.FOUNDATION { background-color: var(--color-foundation) !important; color: #fff !important }
    .invert.PREMASTER { background-color: var(--color-premaster) !important; color: #fff !important }
    .invert.SECONDARY { background-color: var(--color-secondary) !important; color: #fff !important }


/*  .related-school */
    .related-school ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
    }
    .related-school ul li {
        flex: 0 0 45%;
        margin-right: 1rem;
    }
    .related-school ul li:last-child {
        margin-right: 0
    }
    .related-school .school-card {
        display: block;
    }
    .related-school .school-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: .5rem;
        margin-bottom: 5px
    }
    .related-school .school-card h6 {
        text-transform: uppercase;
        font-size: 8pt;
        text-align: center;
    }
    .related-school .school-card h5 {
        font-size: 10pt;
        font-weight: bold;
        text-align: center;
        word-break: keep-all
    }

    @media only screen and (min-width: 576px) {
        .related-school ul li {
            flex-basis: 31%;
        }
        .related-school .school-card img {
            height: 200px
        }
    }

    @media only screen and (min-width: 768px) {
        .related-school ul li {
            flex-basis: 23%;
        }
    }
    @media only screen and (min-width: 992px) {
        .related-school ul li {
            flex-basis: 18.6%;
        }
        .related-school .school-card img {
            height: 240px
        }
    }

/*  misc */
    figure.media {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }

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

/*  homepage renewal contact navigation */
    body {
        padding-bottom: calc(77px + env(safe-area-inset-bottom));
    }

    footer {
        margin-bottom: 0;
    }

    #toggle-search {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 44px;
        height: 50px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
    }

    #toggle-search span,
    #toggle-search em {
        display: block;
    }

    #toggle-search img {
        width: 18px;
        height: 18px;
    }

    #header-search-keyword {
        color: #6e7379;
        font-weight: 500;
    }

    #header-search-keyword::placeholder {
        color: #6e7379;
        font-weight: 500;
        opacity: 1;
    }

    #desktop-contact-menu {
        display: none;
    }

    #mobile-contact-menu {
        position: fixed;
        z-index: 1040;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(77px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
    }

    .mobile-contact-action {
        position: relative;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 0 2px;
        border: 0;
        border-right: solid 1px #ededed;
        border-radius: 0;
        background: #fff;
        color: #222;
        font-family: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
        text-decoration: none;
    }

    .mobile-contact-action:last-child {
        border-right: 0;
    }

    .mobile-contact-action img {
        display: block;
        width: 45px;
        height: 42px;
        margin: 0;
        object-fit: contain;
    }

    .mobile-contact-action span {
        display: block;
        overflow: hidden;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.15;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-contact-action--kakao span {
        letter-spacing: -.5px;
    }

    .mobile-contact-action strong,
    .contact-action strong {
        color: #e75143;
        font-weight: 500;
    }

    .mobile-contact-action:hover,
    .mobile-contact-action:active {
        color: #222 !important;
        text-decoration: none;
    }

    .branch-phone-modal[hidden] {
        display: none;
    }

    .branch-phone-modal {
        position: fixed;
        z-index: 1050;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .branch-phone-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(33, 33, 33, .5);
    }

    .branch-phone-modal__dialog {
        position: relative;
        z-index: 1;
        width: min(350px, 100%);
        min-height: 284px;
        height: 284px;
        padding: 23px 20px 20px;
        border-radius: 5px;
        background: #fff;
    }

    .branch-phone-modal__dialog h2 {
        margin: 0 0 23px;
        color: #000;
        font-size: 18px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -.9px;
        text-align: center;
        word-break: keep-all;
    }

    .branch-phone-modal__actions {
        display: grid;
        gap: 15px;
    }

    .branch-phone-modal__action {
        display: grid;
        grid-template-columns: 45px max-content;
        align-items: center;
        justify-content: start;
        gap: 0;
        width: 100%;
        height: 59px;
        min-height: 59px;
        padding: 0 12px 0 58px;
        border-radius: 5px;
        background: #f1f1f1;
        color: #000;
        font-family: inherit;
        font-size: 19px;
        font-weight: 600;
        line-height: 23px;
        letter-spacing: -.95px;
        text-align: center;
        text-decoration: none;
    }

    .branch-phone-modal__action img {
        display: block;
        width: 45px;
        height: 42px;
        object-fit: contain;
    }

    .branch-phone-modal__action-label {
        white-space: nowrap;
    }

    .branch-phone-modal__action strong {
        color: #e75143;
        font-weight: 600;
    }

    .branch-phone-modal__action-copy,
    .branch-phone-modal__action:hover .branch-phone-modal__action-copy,
    .branch-phone-modal__action:active .branch-phone-modal__action-copy {
        color: #000;
    }

    .branch-phone-modal__action:hover,
    .branch-phone-modal__action:active {
        background: #e9e9e9;
        color: #222 !important;
        text-decoration: none;
    }

    .branch-phone-modal__close {
        width: 100%;
        min-height: 40px;
        height: 40px;
        margin-top: 23px;
        padding: 10px 40px;
        border: solid 1px #bbb;
        border-radius: 5px;
        background: #fff;
        color: #444;
        font-family: inherit;
        font-size: 13px;
        line-height: 18px;
        letter-spacing: -.65px;
    }

    body.branch-phone-modal-open {
        overflow: hidden;
    }

    #toggle-search:focus-visible,
    .contact-action:focus-visible,
    .mobile-contact-action:focus-visible,
    .branch-phone-modal__action:focus-visible,
    .branch-phone-modal__close:focus-visible {
        outline: solid 3px #1f6feb;
        outline-offset: 2px;
    }

    @media only screen and (min-width: 768px) {
        body {
            padding-bottom: 0;
        }

        #site-header-top {
            flex-wrap: nowrap;
            gap: clamp(12px, 2vw, 28px);
        }

        #header-menu {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        #header-search {
            flex: 0 1 210px;
            align-items: center;
            width: 210px;
            min-width: 170px;
            margin-left: auto;
        }

        #header-search form {
            width: 100%;
            height: 29px;
            align-items: center;
        }

        #toggle-search {
            display: none;
        }

        #header-search form input[type="text"] {
            width: 100%;
            min-width: 0;
            max-width: none;
            height: 29px;
            padding: .25rem .55rem;
            font-size: 12px;
        }

        #header-search form button {
            flex: 0 0 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 29px;
            padding: 0;
        }

        #header-search form button img {
            width: 15px;
            height: 14px;
            object-fit: contain;
        }

        #mobile-contact-menu {
            display: none;
        }

        #desktop-contact-menu {
            position: fixed;
            z-index: 1021;
            top: 50%;
            right: 30px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 90px;
            height: 280px;
            padding: 10px 0;
            border-radius: 5px;
            background: #fff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
            transform: translateY(-50%);
        }

        #desktop-contact-menu::before,
        #desktop-contact-menu::after {
            content: "";
            position: absolute;
            z-index: 1;
            left: 15px;
            width: 60px;
            height: 1px;
            background: #dedede;
            pointer-events: none;
        }

        #desktop-contact-menu::before {
            top: 95px;
        }

        #desktop-contact-menu::after {
            top: 185px;
        }

        .contact-action {
            display: flex;
            flex: 0 0 80px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 80px;
            min-height: 80px;
            padding: 5px 2px;
            border-radius: 3px;
            background: #fff;
            color: #222;
            font-size: 12px;
            line-height: 1.25;
            text-align: center;
            text-decoration: none;
        }

        .contact-action img {
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 auto 5px;
            object-fit: contain;
        }

        .contact-action span {
            display: block;
            word-break: keep-all;
        }

        .contact-action:hover {
            background: #f7f7f7;
            color: #222 !important;
            text-decoration: none;
        }
    }

/*  homepage renewal main footer */
    .site-main-footer {
        margin: 0;
        padding: 0;
    }

    .branch-guide {
        padding: 30px 0 34px;
        background: #f3f3f3;
    }

    .branch-guide > .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .branch-guide h2 {
        margin: 0 0 24px;
        color: #222;
        font-size: 23px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
    }

    .branch-guide__list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
    }

    .branch-guide__card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 220px;
        padding: 20px 15px 16px;
        border-radius: 10px;
        background: #fff;
        color: #222;
    }

    .branch-guide__card::after {
        content: "";
        position: absolute;
        top: 61px;
        right: 15px;
        left: 15px;
        height: 1px;
        background: #dedede;
    }

    .branch-guide__card:last-child {
        min-height: 245px;
    }

    .branch-guide__card h3 {
        margin: 0 0 30px;
        font-size: 20px;
        font-weight: 700;
        line-height: 25px;
    }

    .branch-guide__card dl {
        display: grid;
        gap: 10px;
        margin: 0;
        font-size: 15px;
        line-height: 23px;
    }

    .branch-guide__card dl > div {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 39px;
    }

    .branch-guide__card dl > div:last-child {
        grid-template-columns: 61px minmax(0, 1fr);
        gap: 12px;
    }

    .branch-guide__card dt,
    .branch-guide__card dd {
        margin: 0;
    }

    .branch-guide__card dt {
        display: flex;
        align-items: center;
        min-height: 28px;
        font-size: 16px;
        font-weight: 700;
    }

    .branch-guide__card dd,
    .branch-guide__card dd a {
        color: #535353;
        word-break: keep-all;
    }

    .branch-guide__card dd {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 28px;
        letter-spacing: -.75px;
    }

    .branch-guide__address dd {
        flex-direction: column;
        align-items: flex-start;
    }

    .branch-guide__address-text {
        display: flex;
        align-items: center;
        min-height: 28px;
    }

    .branch-guide__detail,
    .branch-guide__map {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        font-weight: 500;
        line-height: 23px;
        text-align: center;
        text-decoration: none;
    }

    .branch-guide__detail {
        position: absolute;
        top: 20px;
        right: 15px;
        width: 85px;
        height: 25px;
        border: solid .5px #535353;
        background: #fff;
        color: #535353;
        font-size: 13px;
    }

    .branch-guide__map {
        flex: 0 0 auto;
        width: 64px;
        height: 25px;
        border: solid 1px #5cc468;
        background: #5cc468;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

    .branch-guide__card dd .branch-guide__map {
        color: #fff;
    }

    .branch-guide__detail:hover {
        background: #f3f3f3;
        color: #222 !important;
    }

    .branch-guide__map:hover {
        background: #4eae59;
        border-color: #4eae59;
        color: #fff !important;
    }

    .branch-guide__detail:focus-visible,
    .branch-guide__map:focus-visible {
        outline: solid 3px #1f6feb;
        outline-offset: 2px;
    }

    @media only screen and (min-width: 768px) {
        .branch-guide {
            min-height: 342px;
            padding: 45px 0 25px;
        }

        .branch-guide h2 {
            margin-bottom: 35px;
            font-size: 32px;
        }

        .branch-guide__list {
            flex-direction: row;
            justify-content: center;
            gap: 30px;
        }

        .branch-guide__card {
            flex: 0 1 475px;
            height: auto;
            min-height: 195px;
            padding: 15px;
        }

        .branch-guide__card:last-child {
            min-height: 195px;
        }

        .branch-guide__card h3 {
            margin-bottom: 30px;
            font-size: 24px;
            line-height: 29px;
        }

        .branch-guide__card::after {
            top: 55px;
        }

        .branch-guide__card dl {
            gap: 8px;
            font-size: 15px;
            line-height: 23px;
        }

        .branch-guide__address dd {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }

        .branch-guide__address-text {
            min-width: 0;
        }

        .branch-guide__detail {
            top: 18px;
            width: 66px;
            height: 22px;
            font-size: 11px;
        }

        .branch-guide__map {
            flex-basis: 50px;
            width: 50px;
            height: 20px;
            margin-left: 4px;
            font-size: 11px;
        }
    }

    @media only screen and (min-width: 1200px) {
        .branch-guide__card {
            height: 195px;
        }

        .branch-guide__address dd {
            flex-wrap: nowrap;
            white-space: nowrap;
        }
    }