@charset "utf-8";
html, body {
    font-size: 16px;
}

/* :not(#wrapper) {
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0) 
} */
/* COMMON.CSS */
html {
    font-size: 16px;
}

body {
    background-color: #222;
    font-size: 16px;
    font-size: 1rem;
    font-family: 'NotoKr', 'Titillium Web', AppleSDGothicNeo, 'Dotum', Sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

#wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

.skip-navi {
    width: 1px;
    height: 1px;
    position: absolute;
    top: -1px;
    left: -1px;
}

.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    top: -1px;
    left: -1px;
    text-indent: -9999px;
}

.skip-navi {
    text-indent: -9999px;
}

.clearfix {
    clear: both;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*공통요소*/
.row-w {
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.ellipsis {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.btn-wrap {
    margin-top: 20px;
    text-align: center;
}

.btn-more, .btn-more:visited {
    z-index: 30;
    position: absolute;
    display: inline-block;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    line-height: 23px;
    border-radius: 3px;
    text-align: center;
    font-size: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    border: 2px solid #000;
    background: #000;
    color: #fff;
    opacity: 0.5;
}

.btn-more:hover, .btn-more:active {
    border: 2px solid #df810f;
    background: #df8104;
    color: #fff;
}

.color-ry {
    color: #ff9922;
}

.color-ry2 {
    color: #df8104;
}

.color-ry3 {
    color: #a66405;
}

.color-r {
    color: #bf0303;
}

.color-grey {
    color: #8a8a8a;
}

.color-wh {
    color: #fff;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.btn-top {
    z-index: 9999;
    position: fixed;
    display: none;
    bottom: 150px;
    right: 2rem;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    font-size: 30px;
    text-align: center;
    color: #282828;
    background: #ff9922;
    cursor: pointer;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.btn-top span.fa {
    margin-top: 5px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    display: block;
}

.btn-top:hover {
    background: #8a5312;
}

.btn-top span.btn-top-txt {
    display: block;
    width: 60px;
    height: 16px;
    line-height: 10px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 100;
    color: #282828;
}

.btn-toggle {
    display: none;
}

table {
    border-collapse: collapse;
    cell-padding: 0;
    cell-spacing: 0;
}

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/*레이아웃*/
.mobileHeader, .mobileGnb {
    display: none;
}

/* 모바일 커런트 메뉴 표시 */
.mobileHeader, .mbSub {
    display: none;
}

#desktopHeader {
    position: absolute;
    z-index: 8880;/* 컴바인 베뉴 v wallet 8880 보다 낮아야 함 */
    width: 100%;
    background: rgba(39, 35, 32, 0.9);
    color: #fff;
    border-top: 1px solid #332b25;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8)
}

#desktopHeader .underline-desktop-header {
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 52px;
    background: rgba(0, 0, 0, 0.25);
}

#desktopHeader #logo {
    float: left;
    display: inline-block;
    width: 84px;
    height: 29px;
    padding-top: 8px;
    margin-left: 40px;
    width: 5.52rem;
    height: 1.8125rem;
    padding-top: 0.5rem;
    margin-left: 2.5rem;
}

#desktopHeader #gnb {
    width: auto;
    float: left;
    margin-left: 52px;
    margin-left: 3.25rem;
    z-index: 9999;
}

#desktopHeader #util {
    float: right;
    margin-right: 22px;
}

#desktopHeader #gnb > li {
    float: left;
    margin-right: 40px;
    margin-right: 2.5rem;
    width: 150px;
    width: 9.375rem;
}

#desktopHeader #gnb > li > a {
    float: left;
    height:55px;
    box-sizing: border-box;
    padding-top: 18px;
    padding-bottom: 19px;
    padding-top: 1.125rem;
    padding-bottom: 1.1875rem;
    font-weight: bold;
    font-size: 16px;
    font-size: 1rem;
    color: #df8104;
    border-bottom: 2px solid transparent;
}

#desktopHeader #gnb > li:hover > a , #desktopHeader #util > li:first-child:hover > a{
    border-bottom: 2px solid #df8104;
}

#desktopHeader #gnb > li > .sub-menu {
    z-index: 999999;
    opacity: 0;
    display: none;
    clear: both;
    padding-top: 11px;
    padding-bottom: 14px;
}

#desktopHeader #gnb > li > .sub-menu li {
    z-index: 999999;
    float: none;
}

#desktopHeader #gnb > li > .sub-menu li a {
    z-index: 999999;
    display: inline-block;
    color: #fff;
    line-height: 1.2;
    height: 14px;
    font-size: 16px;
    font-size: 1rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1)
}

#desktopHeader #gnb > li > .sub-menu li:hover a {
    color: #df8104;
}

.bg-layer-pc {
    display: none;
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 330px;
    top: -330px;
    opacity: 1;
    background: rgba(6, 4, 4, 0.85);
}

.bg-layer-mobile {
    display: none;
    z-index: 9998;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(6, 4, 4, 0.85);
}

#desktopHeader #util > li {
    float: left;
    margin-right: 29px;
}

#desktopHeader #util > li:nth-child(1) {
    width:92px;
}

#desktopHeader #util > li.download, #desktopHeader #util > li.game-start {
    margin-right: 0px;
}

#desktopHeader #util > li > a {
    float: left;
    box-sizing: border-box;
    display: inline-block;
    height: 55px;
    height: 3.4375rem;
    padding-top: 19px;
    padding-bottom: 19px;
    padding-top: 1.1875rem;
    padding-bottom: 1.1875rem;
    font-weight: bold;
    font-size: 16px;
    font-size: 1rem;
    color: #df8104;
    border-bottom: 2px solid transparent;
}

#desktopHeader #util > li.download a, #desktopHeader #util > li.game-start a {
    color: #131313;
    background: #df8104;
    border-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}

#desktopHeader #util > li.download:hover > a, #desktopHeader #util > li.game-start:hover > a {
    border-bottom: 0;
    color: #fff;
}

/* 게임스타트 버튼 추가 */
#desktopHeader #util > li > .sub-menu {
    z-index: 999999;
    opacity: 0;
    display: none;
    clear: both;
    padding-top: 11px;
    padding-bottom: 14px;
}
#desktopHeader #util > li > .sub-menu li a {
    z-index: 999999;
    display: inline-block;
    color: #fff;
    line-height: 1.2;
    height: 14px;
    font-size: 18px;
    font-size: 1.125rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0px 1px 1px rgb(0 0 0);
}
#desktopHeader #util > li > .sub-menu li:hover a {
    color: #df8104;
}


a {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

input[type="button"],
input[type="button" i],
button {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 9.5px 20px;
    align-items: flex-start;
    border: 0;
    vertical-align: top;
    font-size: 20px;
    font-family: 'Notokr', 'Titillium Web', AppleSDGothicNeo, 'Dotum', Sans-serif;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background-color: #df8104;
    cursor: pointer;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
}

input[type="button"].btn-line,
input[type="button" i].btn-line,
button.btn-line {
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.52);
    color: #df8104;
    border: 4px solid #df8104;
}

input[type="button"]:hover,
input[type="button" i]:hover,
button:hover {
    color: #131313;
    background-color: #df8104;
}

input[type="button"].btn-line:hover,
input[type="button" i].btn-line:hover,
button.btn-line:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 4px solid #df8104;
}

#content {
    position: relative;
    width: 100%;
}

#isLauncher #combineMenu{display: none !important}
#isLauncher #desktopHeader #gnb {width: calc(100% - 12rem);}
#isLauncher #desktopHeader #util {display: none;}
#isLauncher #valofe-footer{display: none !important}
#isLauncher .btn-main{display:none}
#isLauncher .mobileGnb > li.hidden-launcher{display: none;}
#isLauncher .sub #content{min-height:calc(100vh - 60px);}
#isLauncher .isLauncher{display: none !important}


@media screen and (max-width: 1530px) {
    /*rem 비율 조정 14px = rem;*/
    html {
        font-size: 13px;
    }

    #desktopHeader #logo {
        padding-top: 7px;
        margin-left: 9px;
    }

    #desktopHeader #gnb {
        margin-left: 80px;
        margin-left: 5rem;
    }

    #desktopHeader #gnb > li {
        width: 100px;
    }

    #desktopHeader #gnb > li:nth-child(1) {
        line-height: 23px;
    }

    #desktopHeader #gnb > li:nth-child(2) {
        line-height: 23px;
    }

    #desktopHeader #gnb > li:nth-child(3) {
        line-height: 23px;
    }

    #desktopHeader #gnb > li:nth-child(4) {
        /*line-height: 11px;*/
    }

    #desktopHeader #gnb > li:nth-child(5) {
        line-height: 23px;
    }

    #desktopHeader #gnb > li:nth-child(6) {
    }

    #desktopHeader #util {
        margin-right: 22px;
    }

    #desktopHeader #util > li:nth-child(1) {
        line-height: 23px;
    }

    #desktopHeader #util > li.download, #desktopHeader #util > li.game-start {
        margin-top: 5px;
    }

    #desktopHeader .underline-desktop-header {
        top: 45px;
    }
}

@media screen and (max-width: 1280px) {
    /*rem 비율 조정 13px = rem;*/
    html {
        font-size: 13px;
    }

    #desktopHeader #logo {
        margin-top: 5px;
        margin-left: 12px;
        padding-top: 2px;
        padding-left: 0px;
        /*padding-top: 0.1rem;*/
    }

    #desktopHeader #gnb > li {
        width: 100px;
    }

    #desktopHeader #gnb > li:nth-child(1) {
        line-height: 22px
    }

    #desktopHeader #gnb > li:nth-child(2) {
        line-height: 22px
    }

    #desktopHeader #gnb > li:nth-child(3) {
        line-height: 22px
    }

    #desktopHeader #gnb > li:nth-child(4) {
/*        line-height: 11px;*/
        width: 60px;
    }

    #desktopHeader #gnb > li:nth-child(5) {
        line-height: 22px;
        width: 60px;
    }

    #desktopHeader #gnb > li:nth-child(6) {
        width: 60px;
    }

    #desktopHeader #gnb > li > a {
        padding-bottom: 18px;
        padding-bottom: 1.125rem;
    }

    #desktopHeader #util > li:first-child {
        line-height: 22px;
    }

    #desktopHeader #util > li.download, #desktopHeader #util > li.game-start {
        margin-top: 5px;
    }

    #desktopHeader .underline-desktop-header {
        top: 45px;
    }

    .row-w {
        max-width: 94% !important; /* overflow:hidden; */
        margin: 0 auto;
    }
}

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

}

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


    #isLauncher #combineMenu{display:block;}
    #isLauncher #combine_menu_long{display:block;}
    #isLauncher #combineMenu .wrap-cbm{display:none !important;}

    #desktopHeader {
        display: none;
    }

    /*.mobileHeader {
        z-index: 8800;
        position: relative;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        border-top: 1px solid #232323;
        background: rgba(19, 19, 19, 1);
        color: #fff;
    }
    */
    .mobileHeader #mobileLogo {
        float: left;
        display: inline-block;
        width: 84px;
        height: 29px;
        padding-top: 8px;
        margin-left: 16px;
    }

    /*
    .mobileHeader #btnMoblieGnb {
        position: absolute;
        right: 16px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 37px;
        padding-top: 11px;
        color: #fff;
        font-size: 16px;
        text-align: right;
    }

    .mobileHeader #btnMoblieGnb:hover {
        color: #df8104;
    }
    */

    .mobileHeader #btnMobileDownload {
        position: absolute;
        right: 16px;
        display: inline-block;
        width: 30px;
        height: 30px;
        padding-top: 8px;
        color: #fff;
        background: #df8104;
        font-size: 16px;
        text-align: right;
    }
    /*
    .mobileHeader #btnMobileDownload:hover {
        color: #131313;
    }

    .mobileGnb {
        z-index: 8870;
        display: block;
        opacity: 1;
        position: fixed;
        top: 0;
        right: -360px;
        width: 300px;
        padding: 0px 0px 22px;
        background: #1f1f24;
        color: #fff;
    }
    */

    .mobileGnb h1.tit-mobile {
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        line-height: 18px;
        padding: 0px 22px 22px;
        border-bottom: 1px solid #27292d;
    }

    .mobileGnb h1.tit-mobile img {
        vertical-align: middle;
        float: right;
        margin-top: 8px;
    }

    a.mobileGnbClose {
        display: inline-block;
        margin-top: 23px;
        width: 15px;
        height: 15px;
        float: left;
        background: url(/static/images/common/btn-mobile-menu-close.png) 0 0 no-repeat;
    }

    .mobileGnb > h2 {
        box-sizing: border-box;
        width: 100%;
        padding: 22px;
        border-bottom: 1px solid #27292d;
        background: #131313;
        overflow: hidden;
    }

    .mobileGnb > h2 #news, .mobileGnb > h2 #event, .mobileGnb > h2 #community {
        float: left;
        color: #fff;
        font-size: 14px;
    }

    .mobileGnb > h2 #community {
        margin-top: 2px;
    }

    .mobileGnb > h2 a:after {
        content: '';
        background: #fff;
        height: 12px;
        width: 1px;
        display: inline-block;
        margin: 2px 21px 0px;
    }

    .mobileGnb > h2 a:last-child:after {
        display: none
    }

    .mobileGnb > h2 #news:hover,
    .mobileGnb > h2 #event:hover,
    .mobileGnb > h2 #community:hover {
        color: #df8104;
    }

    .mobileGnb > h2 #news {
        margin-left: 0;
    }

    .mobileGnb > li {
        float: none;
        padding-left: 22px;
        padding-right: 22px;
        border-bottom: 1px solid #27292d;
    }

    .mobileGnb > li > a {
        display: block;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 18px 0;
        color: #fff;
        font-size: 14px;
    }

    .mobileGnb > li > a > .blit-arrow {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 21px;
        box-sizing: border-box;
        width: 9px;
        height: 8px;
        vertical-align: middle;
        background: url(/static/images/common/blit-mobile-list.png) 0 0 no-repeat;
    }

    .mobileGnb > li:hover > a {
        color: #df8104;
    }

    .mobileGnb > li.on > a > .blit-arrow,
    .mobileGnb > li:hover > a > .blit-arrow {
        background: url(/static/images/common/blit-mobile-list-on.png) 0 0 no-repeat;
    }

    .mobileGnb > li > .msub-menu {
        display: none;
        padding-left: 22px;
        border-top: 1px solid #27292d;
    }

    .mobileGnb > li > .msub-menu > li > a {
        display: block;
        box-sizing: border-box;
        width: 100%;
        color: #fff;
        font-size: 13px;
        padding: 16px 0;
    }

    .mobileGnb > li > .msub-menu > li:last-child {
        padding-bottom: 60px;
    }

    .mobileGnb > li > .msub-menu > li:hover > a {
        color: #df8104;
    }

    /*480*/
    #wrapper {
        top: -60px;
    }

    /* 상단 중복 */
    .mobileHeader {;
        position: absolute;
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 61px;
        border-top: 1px solid #232323;
        background: #131313;
        color: #fff;
        top: 0;
        right: 0;
        box-sizing: border-box;

        /* combine menu width:100px -> 100% */
        /* combine menu width:100px -> 100% */
        width: calc(100% - 100px);
        margin-left: 100px;;
        background: transparent;
        z-index: 8888;
        /* combine menu width:100px -> 100% */
        /* combine menu width:100px -> 100% */
    }

    .mobileHeader #mobileLogo {
        display: none;
    }

    .mobileHeader #btnMoblieGnb {
        position: absolute;
        right: 16px;
        top: 0px;
        display: inline-block;
        width: 30px;
        height: 30px; /* line-height:40px; */
        color: #fff;
        font-size: 16px;
        text-align: right;
        /* 상단 */
        line-height: 37px;
        padding-top: 11px;
    }

    .mobileHeader #btnMoblieGnb:hover {
        color: #df8104;
    }

    .mobileHeader #btnMobileDownload {
        display: none;
    }

    .mobileHeader #btnMobileDownload:hover {
        color: #131313;
    }

    .mobileGnb {
        z-index: 8870;
        display: block;
        opacity: 1;
        position: fixed;
        top: 0;
        right: -360px;
        width: 300px;
        padding: 0px 0px 22px;
        background: #1f1f24;
        color: #fff;
        height:100%;
        overflow-y:auto;
    }

    /* 모바일 커런트 메뉴 표시 */
    .mobileHeader #crtMenuSite {
        position: absolute;
        display: inline-block;
        width: 160px;
        left: 50%;
        /*margin-left: -80px;*/
        text-align: center;
        line-height: 60px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        -webkit-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        -moz-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        -o-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        transition: all .75s cubic-bezier(.23, 1, .32, 1);
        margin-left: -80px;
    }

    .mobileHeader #crtMenuSite .fa-sort-up {
        margin-left: 4px;
        font-size: 16px;
        vertical-align: middle;
    }

    .mobileHeader #crtMenuSite .fa-sort-down {
        margin-left: 4px;
        padding-top: 19px;
        font-size: 16px;
        vertical-align: top;
    }

    /* 모바일 커런트 메뉴 서브 메뉴 표시 */
    /*모바일 로컬메뉴 - 서브 메뉴 */
    .mbSub, #mbSearch {
        display: block;
        z-index: 9000;
        position: absolute;
        opacity: 0;
        visibility: hidden;
        box-sizing: border-box;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 30px 16px 40px;
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        -webkit-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        -moz-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        -o-transition: all .75s cubic-bezier(.23, 1, .32, 1);
        transition: all .75s cubic-bezier(.23, 1, .32, 1);
    }

    .mbSub.on, #mbSearch.on {
        overflow-y: auto;
        height: auto;
        opacity: 1;
        visibility: visible;
        letter-spacing: -1px;
    }

    .mbSub h1 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 3px solid #3F3F3F;
    }

    .mbSub ul {
        width: 100%;
    }

    .mbSub ul > li {
        box-sizing: border-box;
        float: none;
        width: 100%;
        padding: 10px 0 5px;
    }

    .mbSub ul > li > a, .mbSub > ul > li:visited > a {
        font-size: 16px;
        font-weight: bold;
        color: #3F3F3F;
    }

    .mbSub ul > li.on > a, .mbSub ul > li:hover > a, .mbSub > ul > li:focus > a {
        color: #f39a00;
        font-weight: bold;
    }

    .mbSub .dep2 {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px 15px;
        margin-top: 10px;
        background: #FCF3EE;
    }

    .mbSub .dep2 > li > a, .mbSub .dep2 > li > a:visited, .mbSub .dep2 > li > a > .fa {
        font-size: 15px;
        font-size: 0.9375rem;
        color: #000;
    }

    .mbSub .dep2 > li.on > a, .mbSub .dep2 > li > a:hover, .mbSub .dep2 > li > a:focus,
    .mbSub .dep2 > li.on .fa, .mbSub .dep2 > li:hover > .fa, .mbSub .dep2 > li:focus > .fa {
        color: #f39a00;
    }

    /* 모바일 커런트 메뉴 - shadow */
    #mbMenuShadow {
        display: none;
        opacity: 0;
        z-index: 8000 !important;
        width: 100%;
        height: 100%;
        position: fixed;
        padding-bottom: 0px;
        top: 0;
        left: 0;
        background-size: cover;
        background: rgba(0, 0, 0, 0.80);
    }

    #mbMenuShadow.on {
        display: block;
        opacity: 1;
        z-index: 8000 !important;
        width: 100%;
        height: 100%;
        position: fixed;
        padding-bottom: 0px;
        top: 0;
        left: 0;
        background-size: cover;
        background: rgba(0, 0, 0, 0.80);
    }

}

/* 960 */
@media screen and (max-width: 960px) {
}

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

}

/*800 */
@media screen and (max-width: 800px) {

}

/* 768 736*/
@media screen and (max-width: 768px) {
    .row-w {
        max-width: 90% !important;
    }
}

/*  667 640 */
@media screen and (max-width: 667px) {
    /*#footer{}
    #footer .copyright{margin-top:30px;}
    #footer .copyright .footer-logo{display:block;height:40px;width:100%;text-align:center;}
    #footer .copyright .footer-logo .logo{position:absolute;left:50%;margin-left:-34.5px;width:69px;}
    #footer .copyright p{width:100%;margin-left:0;clear:left;}*/
}

/* 568 533 */
@media screen and (max-width: 568px) {
    html {
        font-size: 11px;
    }

}

/* 533 */
@media screen and (max-width: 533px) {

}

/* 480 */
@media screen and (max-width: 480px) {

}

@media screen and (max-width: 460px) {
    #m-menu-wrap #m-menu li ul li.flag {
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 10%;
    }
}

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

}

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

}

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

}

@media screen and (max-width: 320px) {
    html {
        min-width: 300px;
    }
}