#page-wrapper {
    position   : relative;
    min-height : 724px;
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    }

.dark-theme {
  background: #171717;
  color: #FFFFFF;
}

.light-theme {
  background: #FFFFFF;
  color: #333333;
}

#header {
    height     : 54px;
    background: #171717;
}

#header .head_line {
    width               : 100%;
    height              : 3px;
    background-position : center center;
    top                 : 0px;
    position            : absolute;
    z-index             : 20;
}

#header #head_wrap {
    max-width  : 1200px;
    margin     : 0 auto;
    height     : inherit;
    background : transparent;
    position   : relative;
    z-index    : 10;
    padding: 0 40px;
}

#header h1 {
    display  : inline-block;
    width    : 120px;
    height   : 40px;
    padding-top: 12px;
    padding-bottom: 5px;
}

#header h1 > a > img {
    width : 100%;
}

#header nav {
    display  : inline-block;
    /* width    : 590px; */
    height   : 20px;
    position : absolute;
    left     : 190px;
    top      : 10px;
}

#header nav li {
    display      : inline-block;
    margin-right : 18px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-14)/var(--unnamed-line-spacing-18) var(--unnamed-font-family-montserrat);
    letter-spacing: var(--unnamed-character-spacing-0-14);
    color: var(--unnamed-color-ffffff);
    text-align: left;
    font: normal normal bold 14px/18px Montserrat;
    letter-spacing: 0.14px;
    color: #FFFFFF;
}

#header nav li.now {
    font-weight : bold;
}

#header nav li a {
    color : white;
}

#header nav li a:hover {
    color      : #F59121;
    transition : all 0.5s;
}

#header nav li a.active {
    color : #f1592b;
}

#header nav #nav_logo a img {
    display : none;
}

.navPannel {
    display : none;
}

#header #bars {
    display : none;
}

#header .utility {
    display  : flex;
    justify-content: center;
    position : absolute;
    right    : 40px;
    top: 8px;
}


#header .utility .icon_search {
    color       : white;
    font-size   : 24px;
    line-height : 28px;;
}

#header .utility .img_member {
    border-radius  : 14px;
    height         : 27px;
    vertical-align : top;
    margin-left    : 15px;
    cursor         : pointer;
}

#header .utility .btn_live {
    display        : inline-block;
    vertical-align : top;
    color          : #ffffff;
    border         : 1px solid #e86340;
    border-radius  : 4px;
    padding        : 7px 10px;
    font-size      : 12px;
    margin-left    : 10px;
}

#header .utility .btn_live:hover {
    font-weight      : normal;
    background-color : #252525;
    /* -webkit-transition: background-color 100ms ease-out;
    -ms-transition: background-color 100ms ease-out;
    transition: background-color 100ms ease-out; */
    cursor           : pointer;
}

#header .utility .btn_upload {
    display        : inline-block;
    vertical-align : top;
    color          : #ffffff;
    border         : 1px solid orange;
    border-radius  : 4px;
    padding        : 7px 10px;
    font-size      : 12px;
    margin-left    : 10px;
}

#header .utility .btn_upload:hover {
    font-weight      : normal;
    background-color : #252525;
    /* -webkit-transition: background-color 100ms ease-out;
    -ms-transition: background-color 100ms ease-out;
    transition: background-color 100ms ease-out; */
    cursor           : pointer;
}

#header .utility .btn_mahotama {
    background: url('/user/img/alert_icon.png') no-repeat center;
    background-size: 82% auto;
    width: 27px;
    height: 27px;
    overflow: hidden;
    background-position: 0 -54px;
}

#header .utility .btn_message {
    background: url('/user/img/alert_icon.png') no-repeat center;
    background-size: 82% auto;
    width: 24px;
    height: 23px;
    overflow: hidden;
    background-position: 0 0;
}
#header .utility .tama-charge:hover .btn_mahotama {
  cursor           : pointer;
  background-position: 0 -81px;
}
#header .utility .new-message-alert:hover .btn_message {
    cursor           : pointer;
    background-position: 0 -24px;
}
#header .utility .btn_mahotama_count,
#header .utility .btn_message_count {
   background: #d42f2f;
    color: #fff;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: -10px;
}
#header .utility .btn_message_count.zero {
  background: #888;
}
#header .utility .tama-charge,
#header .utility .new-message-alert {
  display: flex;
  align-items: flex-end;
  margin-left: 10px;
}

#header .utility .nickname {
    display        : inline-block;
    vertical-align : middle;
    font-size      : 14px;
    color          : white;
    margin-left    : 5px;
}

#header .utility .btn_login {
    display        : inline-block;
    vertical-align : super;
    margin-top: 6px;
    margin-left    : 20px;
    letter-spacing: var(--unnamed-character-spacing-0-14);
    color: var(--unnamed-color-ffffff);
    text-align: left;
    font: normal normal 500 16px/18px Montserrat;
    letter-spacing: 0.14px;
    color: #FFFFFF;
}

#header .utility .btn_join {
    display: inline-block;
    vertical-align: super;
    margin-top: 6px;
    margin-left: 20px;
    letter-spacing: var(--unnamed-character-spacing-0-14);
    color: var(--unnamed-color-ffffff);
    text-align: left;
    font: normal normal 500 16px/18px Montserrat;
    letter-spacing: 0.14px;
    color: #FFFFFF;
}

    #header .utility .login-modal, #header .utility .join-modal, #header .utility .translation-icon {
     display : flex;
    }

@media (max-width : 1024px) {
    #header .utility .btn_login,
    #header .utility .btn_join {
        display : block;
    }
    #header .utility .login-modal, #header .utility .join-modal, #header .utility .translation-icon {
            display : none;
    }
}


#footer {
    width: auto;
    padding: 40px 80px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    }

#footer #foot_wrap {
    box-sizing: border-box;
    padding: 0 80px;
    width        : 100%;
    position         : relative;
    overflow         : hidden;
    display: flex;
    justify-content: space-between;
}

#footer #foot_wrap a {
    transition: none;
}

#footer #foot_wrap a:hover {
    transition: 0.2s;
}

.inner {
    width  : 1280px;
    margin : 0 auto;
}

.join-inner {
    width  : 600px;
    margin : 0 auto;
}

.contact-inner {
    max-width  : 900px;
    margin : 0 auto;
}

#footer .logo {
    margin-left : 17px;
    margin-top  : 56px;
    display     : inline-block;
}

#footer .util {
    margin-left : 63px;
    margin-top  : 50px;
    display     : inline-block;
}

#footer .nav:after {
    content : " ";
    display : block;
    clear   : both;
}

#footer .nav li {
    display        : inline-block;
    float          : left;
    color          : white;
    font-size      : 13px;
    margin         : 0 7px;
    letter-spacing : -0.5px;
    font-weight    : 300;
}

#footer .nav li a, #footer .nav li a span {
    color     : white;
    font-size : 14px;
}

#footer .nav_m {
    display : none;
}

#footer .copyright {
    display    : inline-block;
    margin-top : 8px;
}

#footer .copyright li {
    color          : #c6c6c6;
    font-size      : 12px;
    letter-spacing : -0.5px;
    margin-left    : 7px;
}
#footer .btn_right {
    display: flex;
    align-items: center;
}
#footer .btn_contact {
    width: 95px;
    height: 50px;
    text-align: center;
    color: white;
    cursor: pointer;
    border-radius: 15px;
    margin-right: 15px;
    background: linear-gradient(to right, #f1b157 0%, #e1633a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .btn_contact span {
    width: 89px;
    height: 44px;
    border-radius: 13px;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    color: orange;
}
#footer .btn_contact:hover span {
  background: transparent;
  color: #fff;
  transition: all 0.2s;
}
#footer .btn_page_top {
    border     : 1px solid #95959b;
    width      : 55px;
    height     : 55px;
    text-align : center;
    color      : white;
    cursor     : pointer;
}

#footer .btn_page_top i {
    display    : block;
    margin-top : 5px;
    font-size  : 22px;
}

#footer .btn_page_top p {
    font-size : 11px;
    color     : white;
}

#footer .btn_page_top:hover {
    background-color   : #353535;
    transition: all 0.2s;
}
#footer .btn_page_top:hover i {
    color: #fff;
}
#footer .btn_page_top:hover span {
    color : black;
}

#footer .util .lang-select {
    width              : 110px;
    margin-top         : -3px;
    padding            : 0em 1em;
    font-family        : inherit;
    background         : #fff url(/common/img/user/down-arrow.jpg) no-repeat 96% 30%;
    background-size    : 22%;
    border             : 1px solid #999;
    background-color   : white;
    border-radius      : 0px;
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    height             : 21px;
}

.dn {
    display : none;
}

.flex0 {
    display : block !important;
}

.main section {
    width  : 1200px;
    margin : 0 auto;
}

/*_search // S*/
#mainForm {
    margin     : 0;
    margin-top : 15px;
    padding    : 0;
    position   : relative;
}

#mainForm .input-append {
    display : flex;
}

#mainForm .search-query {
    border                : 1px solid #969696;
    width                 : 100%;
    padding-right         : 38px;
    padding-right         : 39px \9;
    padding-left          : 5px;
    padding-left          : 6px \9;
    padding-top           : 4px;
    padding-bottom        : 4px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom         : 0;
    -webkit-border-radius : 3px;
    -moz-border-radius    : 3px;
    border-radius         : 3px;
}

#mainForm button {
    border                : 0;
    background            : none;
    /** belows styles are working good */
    padding               : 2px 5px;
    margin-top            : 2px;
    position              : absolute;
    top                   : 0px;
    right                 : 5px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom         : 0;
    -webkit-border-radius : 3px;
    -moz-border-radius    : 3px;
    border-radius         : 3px;
}

.search-query:focus + button {
    z-index : 3;
}

/*_search // E*/

/* mypage dropdown */
.dropdown-menu {
    display         : none;
    list-style-type : none;
    position        : absolute;
    z-index         : 1000;
    top             : 35px;
    right           : 0;
    min-width       : 170px;
    padding         : 5px 0;
    margin          : 2px 0 0;
    font-size       : 14px;
    background      : #fff;
    border          : 1px solid rgba(0, 0, 0, .15);
    /* border-radius: 4px; */
    box-shadow      : 0 6px 12px rgba(0, 0, 0, .175);
}

.datepicker.dropdown-menu {
    display         : none;
    list-style-type : none;
    position        : absolute;
    z-index         : 1000;
    top             : 35px;
    right           : auto !important;
    min-width       : 170px;
    padding         : 5px 0;
    margin          : 2px 0 0;
    font-size       : 14px;
    background      : #fff;
    border          : 1px solid rgba(0, 0, 0, .15);
    /* border-radius: 4px; */
    box-shadow      : 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu > li > span {
    display         : block;
    color           : black;
    padding         : 5px 10px;
    line-height     : 1.5;
    text-decoration : none;
}

.dropdown-menu > li:first-child {
    text-align : center;
}

.dropdown-menu > li:first-child > span {
    font-weight   : bold;
    border-bottom : 1px solid #dddddd;
}

.dropdown-menu > li:last-child > a {
    border-top : 1px solid #dddddd;
}

.dropdown-menu > li > a {
    font-weight     : 500;
    display         : block;
    color           : black;
    padding         : 3px 10px;
    line-height     : 1.5;
    text-decoration : none;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background : #e8e8e8;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color : inherit !important;
    background-image : inherit !important;;
    color            : inherit !important;;
}

.hy-drawer-content {
    display : none;
}

@media all and (max-width : 1279px) {
    .inner {
        width : 100%;
    }

    ._inner {
        width : 100% !important;
    }
}

@media all and (max-width : 1024px) {
    #header {
        height : 53px;
    }

    #header #head_wrap {
        width    : 100%;
        height   : 100%;
        left     : 0;
        position : relative;
        top      : 0;
    }

    #header .inner {
        -webkit-overflow-scrolling : touch;
        height                     : 100%;
        left                       : 0;
        overflow-x                 : hidden;
        overflow-y                 : auto;
        position                   : absolute;
        top                        : 0;
    }

    #header h1 {
        position  : absolute;
        left: 110px;
        transform: translateX(-50%);
        width     : 120px;
        height    : 40px;
        top       : 11px;
        z-index   : 1;
        position: absolute;
        padding: 0;
    }

    #header #bars {
        display   : block;
        color     : white;
        font-size : 1.8em;
        position  : absolute;
        top: 13px;
        left: 15px;
        z-index: 10;
    }

    #header .inner #nav {
        display : none;
    }


    #header #menuEl {
        color : white;
    }

    #header .utility .u2.upload_btn {
        display : none;
    }

    #header .utility {
        display: flex;
        top : 8px;
        padding-right: 60px;
    }

    #header .utility .icon_search {
        font-size : 24px;
    }

    #header .utility .btn_live {
        display : none;
    }

    #header .utility .btn_upload {
        display : none;
    }

}

#nav .profile-img-wrap {
    display         : flex;
    justify-content : space-between;
    position        : relative;
    height          : 130px;
}

#nav .profile-img-wrap > img {
    height            : 100%;
    position          : absolute;
    left              : 50%;
    top               : 50%;
    -webkit-transform : translateX(-50%) translateY(-50%);
    transform         : translateX(-50%) translateY(-50%);
}

#nav .profile-img-wrap .profile-img {
    margin     : 10px;
    text-align : center;
    z-index    : 1;
}
#nav .profile-img-wrap .profile-img:hover {
    color      : #E9821D !important;
}

#nav .profile-img-wrap .profile-img img {
    height        : auto !important;
    margin        : 0px !important;
    border-radius : 50%;
}

#nav .profile-img-wrap .profile-img .nickname {
    margin-top  : 10px;
    word-break  : break-all;
    line-height : 20px;
    font: normal normal 500 14px/30px Montserrat;
}

#nav #nav_logo a img {
    display : inline-block;
    height  : 28px;
    margin  : 26px 0px 23px 26px;
}

#nav .profile-img-wrap a img {
    display : inline-block;
    height  : 28px;
    margin  : 26px 0px 23px 26px;
    width   : 70px;
}

#nav #nav_logo #btn_nav_close {
    display   : inline-block;
    font-size : 38px;
    float     : right;
    cursor    : pointer;
    z-index   : 1;
    height    : 40px;
}

.screen {
    position                    : fixed;
    top                         : 0;
    right                       : 0;
    bottom                      : 0;
    left                        : 0;
    z-index                     : 10;
    transition                  : all 0.5s;
    pointer-events              : none;
    background                  : rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color : transparent;
}

.hy-drawer-profile-content,
.hy-drawer-content {
    display : block;
}

.hy-drawer-content #nav li a{
    line-height: 2;
    letter-spacing: 0;
    font: normal normal 500 16px/38px Montserrat;
    transition: none;
    }

.hy-drawer-content #nav li a:hover{
    color: #F59121;
    transition: 0.5s ;
    }


.hy-drawer-content #nav li a span {
    line-height: 1;
    font: normal normal 500 16px/38px Montserrat;
    }


.hy-drawer-profile-content.hy-drawer-left.hy-drawer-opened,
.hy-drawer-content.hy-drawer-left.hy-drawer-opened {
    left : 0 !important;
}

.hy-drawer-profile-content.hy-drawer-left,
.hy-drawer-content.hy-drawer-left {
    position: fixed;
    left: -330px;
    border: 1px solid #707070;
}

.hy-drawer-left .content-wrap {
    padding: 74px 20px 0;
    height: auto;
    position: relative;
    }

#nav #drawer_nav_logo {
    position: absolute;
    top: 18px;
    left: 18px;
}

.drawer-bg-gradation.light-theme {
    display: block;
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 9%, #E48C2C 50%, #E4572D 64%, #8F391F 79%, #171717 100%) 0% 0% no-repeat padding-box;
  }

.drawer-bg-gradation.dark-theme {
    display: block;
    background: transparent linear-gradient(180deg, #171717 0%, #36150B 21%, #7C2F18 39%, #E4572D 63%, #de8623 82%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
 }

.hy-drawer-content .btn_nav_close {
    display: block;
}

.hy-drawer-content .btn_nav_close .bk-close-icon{
    display: block;
}

.hy-drawer-content .btn_nav_close .wh-close-icon{
    display: none;
}

.hy-drawer-profile-content .btn_nav_close {
    display: block;
}

.hy-drawer-profile-content .btn_nav_close .bk-close-icon{
    display: block;
}

.hy-drawer-profile-content .btn_nav_close .wh-close-icon{
    display: none;
}


.hy-drawer-profile-content,
.hy-drawer-content {
    position                   : fixed;
    bottom                     : 0;
    top                        : 0;
    z-index                    : 100;
    overflow-x                 : hidden;
    overflow-y                 : auto;
    contain                    : strict;
    width                      : 323px;
    background                 : #ffffff;
    transition                 : all 0.5s;
    transform                  : translateX(0);
    -webkit-overflow-scrolling : touch;
}

#nav li.now {
    font-weight : bold;
}

.hy-drawer-content.hy-drawer-left li,
.hy-drawer-profile-content.hy-drawer-left li {
    display    : block;
    padding    : 0 10px;
    cursor: pointer;
}

.hy-drawer-profile-content .artist-btn-group a {
    justify-content : center;
}

.hy-drawer-profile-content .artist-btn-group a:last-child {
    border : 0px;
}

#nav .btn-group-wrapper {
    border-bottom: 1px solid #9E9E9F;
    margin: 0 20px;
    padding-bottom: 10px;
}


#nav li.artist-btn-group {
    display: block;
    padding-top: 10px;
}

#nav li i[class^='xi-'] {
    display      : none;
    font-size    : 28px;
    margin-right : 5px;
}

#nav li a {
    position: relative;
    opacity: 1;
    display: block;
    text-align: center;
    line-height: 2;
    letter-spacing: 0;
    font: normal normal 500 16px/38px Montserrat;
    transition: none;
}

#nav li a:hover {
    color : #E9821D !important;
}

#nav li a span {
    position : relative;
    font: normal normal 500 16px/38px Montserrat;
}


#foot_img_area {
    display        : flex;
    flex-direction : column;
    margin-bottom  : 20px;
    display        : none;
}


.LR_btn_area {
    width               : 2560px;
    position            : relative;
    height              : 180px;
    left                : 50%;
    overflow            : hidden;
    margin-left         : -1280px;
    background          : #fff url('/user/img/footer_img/footer_img25602.jpg') no-repeat;
    background-size     : auto 100%;
    background-position : 50% 0;
    margin-top          : -21px;
    display             : flex;
    justify-content     : center;
}

#footer .foot_line {
    width               : 100%;
    height              : 3px;
    background-position : center center;
    background-size: 100% 100%;
}

.LR_btn_area_wrap {
    width           : 1160px;
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
}

.foot_left_content_wrap,
.foot_right_content_wrap {
    display: flex;
    flex-direction: row;
    width: 50%;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}
.foot_right_content_wrap {
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: 10px;
}

.footer_left_img {
    display     : flex;
    align-items : flex-end;
    margin-right: 40px;
}

.left_btn_area,
.right_btn_area {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.right_btn_area {
    align-items  : flex-end;
}
.mahotukai_img {
  margin-left: 40px;
  width: 150px;
}
.left_btn {
    display        : flex;
    flex-direction : row;
}

.left_btn > a {
    width               : 130px;
    height              : 34px;
    border-radius       : 17px;
    background          : #000;
    opacity             : 0.8;
    background          : url('/user/img/footer_img/app_downbtn.png') no-repeat;
    background-size     : auto 100%;
    background-position : 0 0;
    display             : block;
}

.left_btn > a.foot_app_and_btn {
    margin-right : 10px;
}

.left_btn > a.foot_app_ios_btn {
    background-position : -135px 0;
}

.fan_page_linkbtn {
    width: 234px;
    height: 34px;
    border-radius: 17px;
    border: 2px solid #fff799;
    box-sizing: border-box;
    color: #fff799;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.fan_page_linkbtn:hover{
	background: #fff799;
    color: #ff8200;
    transition: all 0.2s;
}

.left_text01,
.right_text01 {
    color         : #fff;
    font-size     : 16px;
    margin-bottom : 8px;
}

.left_text02,
.right_text02 {
    display       : flex;
    margin-bottom : 15px;
}

.left_text02 > div {
    font-size: 26px;
    /* font-family: Oswald, sans-serif !important; */
    /* left: -2em; */
    font-weight: 500;
    font-style: italic;
}

.right_text02 > div {
    font-size: 26px;
    /* font-family: Oswald, sans-serif !important; */
    /* left: -2em; */
    font-weight: 500;
    font-style: italic;
}

.left_text02_orange,
.right_text02_orange {
    color : #fff799;
}

.left_text02_black,
.right_text02_black {
    color : #fff;
}

@media (max-width: 1199px) {
  .LR_btn_area{
    width: 100%;
    left: 0;
    margin-left: 0;
  }
  .LR_btn_area_wrap {
    width: 100%;
    padding: 0 20px;
  }
  .footer_left_img {
    margin-right: 15px;
  }
  .mahotukai_img {
    margin-left: 15px;
  }
  .left_text02 > div,
  .right_text02 > div {
    font-size: 22px;
  }
}
@media (max-width: 1023px) {
    .left_text01,
    .right_text01 {
      font-size: 12px;
  }
  .left_text02 > div,
  .right_text02 > div {
      font-size: 18px;
  }
  .fan_page_linkbtn {
      width: 160px;
      height: 30px;
      font-size: 12px;
  }
  .left_btn > a {
      width: 115px;
      height: 30px;
  }
  .left_btn > a.foot_app_ios_btn {
      background-position: -118px 0;
  }
  .LR_btn_area {
    height: 120px;
  }
  .left_btn > a.foot_app_and_btn {
    margin-right: 5px;
  }
  .footer_left_img {
    margin-right: 10px;
  }
  .footer_left_img > img {
    width: 100px;
  }
  .mahotukai_img {
    margin-left: 10px;
    width: 95px;
  }
  .left_text02, .right_text02 {
      margin-bottom: 10px;
  }
  .left_btn_area {
      margin-top: 0;
      width: auto;
  }
  .right_btn_area {
      margin-top: 0;
      width: auto;
  }
  .foot_left_content_wrap,
  .foot_right_content_wrap {
      justify-content: center;
  }
  .LR_btn_area_wrap {
      padding: 0;
  }
}
@media (max-width: 767px) {
  .LR_btn_area {
      width: 100%;
      height: 250px;
      background: #fff url(/user/img/footer_img/footer_img7673.jpg) no-repeat;
      background-position: center;
  }
  .LR_btn_area_wrap {
    flex-direction: column;
  }
  .foot_left_content_wrap,
  .foot_right_content_wrap {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .foot_right_content_wrap {
    margin-top: 10px;
  }
  .left_btn_area {
      margin-top: 0px;
  }
  .right_btn_area {
      margin-top: 0px;
  }
}
@media (max-width: 425px) {
  .left_text02 > div,
  .right_text02 > div {
      font-size: 17px;
  }
}
@media (max-width: 374px) {
  .left_text02 > div,
  .right_text02 > div {
      font-size: 16px;
  }
}









#footer .logo {
    margin  : 0px 0;
    display : block
}

#footer .nav {
    display : block
}

#footer .nav li:first-child {
    margin-left : 0px;
}

#footer .copyright {
    margin-top : 0px;
    display    : block
}

#footer .copyright li {
    margin-left : 0px;
}

#footer .util {
    margin : 5px 0px;
}

#footer .util {
    line-height : 1.3em;
}

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

.lang-select.mb_move {
    display : none;
}

@media (max-width : 1199px) {
}

@media (max-width : 768px) {
    #footer .nav > ul {
        display   : flex;
        flex-wrap : wrap;
    }

    #footer .nav li:last-child {
        margin     : 0;
        width      : 100%;
        margin-top : 5px;
    }
}

@media all and (max-width : 600px) {
    .join-inner .join_detail_wrap .content .join-form .input-form input {
        width: 100% !important;
        padding: 6px !important;
        margin-top: 5px;
        box-sizing: border-box;
        height: 34px !important;
    }
    .join-inner .join_detail_wrap .content .join-form .input-form select {
        width: 100% !important;
        padding: 6px !important;
        margin-top: 5px;
        box-sizing: border-box !important;;
        height: 34px !important;
    }
    .join-inner .join_detail_wrap .content .join-form .input-form.textarea-form {
      flex-wrap: wrap;
    }
    .join-inner .join_detail_wrap .content .join-form .input-form textarea {
        width: 100% !important;
        padding: 6px !important;
        margin-top: 5px;
        box-sizing: border-box;
        height: 100px !important;
    }
    .input-form-wrapper .input-form .pw-pattern-error,
    .input-form .pw-error,
    .input-form .account-error,
    .pw-pattern-exp,
    .input-form .verify-email-completed,
    .input-form .verify-email-not-completed {
        margin-left: 0px !important;
    }

    #page-wrapper {
        overflow : hidden;
    }

    body {
        min-width : 320px;
    }

    #footer {
        height : auto;
    }

    #footer .nav {
        display : none
    }

    #footer .nav_m {
        display    : inline-block;
        margin-top : 1em;
    }

    #footer .nav_m > ul:nth-child(2) {

        display   : flex;
        flex-wrap : wrap;
        width     : 90%;
    }

    #footer .nav_m li:last-child {
        margin : 0;
    }

    #footer .nav_m ul:after {
        content : " ";
        display : block;
        clear   : both;
    }

    #footer .nav_m li {
        display        : inline-block;
        float          : left;
        color          : white;
        font-size      : 13px;
        margin         : 0 7px;
        letter-spacing : -0.5px;
    }

    #footer .nav_m li:first-child {
        margin-left : 0px;
    }

    #footer .nav_m li a, #footer .nav_m li a span {
        color     : white;
        font-size : 14px;
    }
    #footer .btn_contact {
         margin-right: 0;
    }
    #footer .btn_page_top {
        width   : 41px;
        height  : 41px;
        display : none;
    }

    #footer .btn_page_top i {
        margin-top : 10px;
    }

    #footer .btn_page_top p {
        display : none;
    }

    .lang-select.mb_move {
        display            : block;
        width              : 100px;
        padding            : 0em 1em;
        font-family        : inherit;
        border             : 1px solid #999;
        background-color   : white;
        border-radius      : 0px;
        -webkit-appearance : none;
        -moz-appearance    : none;
        appearance         : none;
        height             : 26px;
        background         : #fff url(/common/img/user/down-arrow.jpg) no-repeat 96% 21%;
        background-size    : 25%;
    }

    .inner {
        width : 100%;
    }

    .join-inner {
        width : 100%;
    }

    ._inner {
        width : 100% !important;
    }

    ::-webkit-input-placeholder {
        font-size : 14px;
    }

    /* Firefox 4-18 */
    :-moz-placeholder {
        font-size : 14px;
    }

    /* Firefox 19+ */
    ::-moz-placeholder {
        font-size : 14px;
    }

    /* IE10+ */
    input[placeholder], [placeholder], *[placeholder] {
        font-size : 14px !important;
    }

    #mainForm .input-append {
        width : 100%;
    }
}

@media all and (min-width : 1440px) {
    /* #footer .btn_page_top{
      margin-right: 260px;
    } */
}

.left-menu-li.qna-wrap {
    padding-top: 25px !important;
}

.left-menu-li > a.qna_btn {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    background-size: auto 100%;
    height: 40px;
    font-size: 13px;
    border: 2px solid #ccc;
    width: 160px;
    margin: 0 auto;
}

.left-menu-li > a.qna_btn:hover {
    background-color: #4A4C58;
    transition: all 0.2s;
}

.bg-toggle {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #6C6C6C;
    border-radius: 40px;
    display: flex;
    padding: 5px;
    align-items: center;
    cursor: pointer;
}

.bg-toggle .bg-toggle-text {
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal bold 10px/13px Montserrat;
    color: #333333;
    letter-spacing: 0px;
    padding: 0 3px;
}

.bg-toggle .bg-icon {
    background: #F59121 0% 0% no-repeat padding-box;
    border-radius: 40px;
    width: 18px;
    height: 18px;
}

.utility .language-switch {
    cursor: pointer;
    margin-left: 20px;
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  letter-spacing: var(--unnamed-character-spacing-0-12);
  color: #ffffff;
  text-align: left;
  font: normal normal 600 12px/15px Montserrat;
    position: absolute;
    background-color: #262626;
    top: 40px;
    width: 95px;
    height: 58px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 8px 10px;
    z-index: 1;
    flex-direction: column;
    justify-content: space-between;
}

.lang-dropdown-content.open {
    display: flex;
}

.lang-dropdown:hover .lang-dropdown-content:hover{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.5s;
}

.dropdown-content a {
    color: #ffffff;
}

.dropdown-content a:hover {
    color: #F59121;
    transition: 0.5s;
}

.language-switch img {
    margin-top: 3px;
}

.utility .btn_language {
    display: inline-block;
    vertical-align: super;
    margin-left: 5px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-14)/var(--unnamed-line-spacing-18) var(--unnamed-font-family-montserrat);
    letter-spacing: var(--unnamed-character-spacing-0-14);
    text-align: left;
    letter-spacing: 0.14px;
    color: #FFFFFF;
}

.footer_sns_area {
        text-align: left;
        font: normal normal normal 12px/20px Noto Sans JP;
        letter-spacing: 0px;
        padding: 0 0 0 20px;
}

.sns-icon-list ul {
    display: flex;
}

.sns-icon-list ul li {
    cursor: pointer;
}

.sns-icon-list li a{
    display: block;
}

.sns-icon-list img {
    margin-right: 20px;
}

.contact-tex.mb-m {
    margin-bottom: 20px;
}

.contact-text-info {
    margin-bottom: 20px;
}

.footer_list_area {
    text-align: left;
    font: normal normal normal 12px/20px Noto Sans JP;
    letter-spacing: 0px;
    opacity: 1;
    padding: 0 20px;
}

.footer_contact_area .contact-box {
    margin-bottom: 20px;
}

.footer_contact_area .title {
    text-align: left;
    font: normal normal bold 14px/20px Noto Sans JP;
    letter-spacing: 0px;
}

.footer_contact_area .description {
    text-align: left;
    font: normal normal normal 12px/20px Noto Sans JP;
    letter-spacing: 0px;
}


.footer_contact_area .copyright-text {
    font: normal normal normal 8px/14px Noto Sans JP;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
}

.modal-footer-area {
    width: 100%;
    height: 56px;
    position: fixed;
    bottom: 0;
    display: flex;
    background: #171717;
    align-items: center;
}

.modal-footer-area.light-theme {
    background: #ffffff;
}

.modal-footer-area .icon-list {
    display: flex;
    justify-content: center;
    width: 100%;
}

.modal-footer-area .icon-list-dark {
    display: flex;
    justify-content: center;
    width: 100%;
    background: #ffffff;

}

.modal-footer-area .logo-img {
    width: 35%;
    padding-right: 20px;
}

.modal-footer-area .logo-img-dark {
    width: 35%;
    padding-right: 20px;
}

.modal-footer-area .logo-img img{
    width: 100%;
}

.modal-footer-area .logo-img-dark img{
    width: 100%;
}

.modal-nav-area .modal-nav-border {
        border-bottom: 2px solid #9E9E9F;
        margin: 10px auto;
        width: 1px;
}

.modal-nav-area li a:hover {
    color: #F6972B;
}

.modal-custom-area {
    display: flex;
    justify-content: space-around;
}

.modal-custom-area .language_area,.modal-custom-area .theme_area{
    text-align: center;
}


.modal-custom-area h2 {
    text-align: center;
    font: normal normal 500 16px/38px Montserrat !important;
    letter-spacing: 0px;
}

.theme_area .theme-select input{
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
    }

.theme_area li {
    padding: 10px 0;
}

.theme_area label, .language_area label {
    cursor :pointer;
    font: normal normal 14px/28px Montserrat;
}

.theme-select .theme_white.active + label,  .theme-select .theme_black.active + label {
    color: #F6972B !important;
    transition: 0.5s;
}

.theme_area li:hover {
    color: #F6972B;
    }

.language_area li {
    padding: 10px 0;
}

.lang-select label:hover, .lang-select input:checked + label {
    color: #F6972B;
    transition: 0.5s;
}


.arrow_down_icon  {
    text-align: center;
}

.arrow_down_icon .bk-arrow {
    display:block;
    margin: 0 auto;
}

.arrow_down_icon .wh-arrow {
    display:none;
    margin: 0 auto;
}

.language_area .lang-select input{
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
    }
.modal-footer-area .icon-list-dark, .modal-footer-area .logo-img-dark {
    display: none;
}

.btn_nav_close {
        position: absolute;
        top: 15px;
        right: 10px;
        cursor: pointer;
}

#nav #drawer_nav_logo a img {
    display: inline-block;
    height: 28px;
}

.modal-nav-area li {
    padding: 7px 0;
}

.copyright-text-mobile {
    display: none;
}

.theme_select_area #theme_white_footer {
    width: 16px;
    height: 16px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid #171717;
}

.theme_select_area #theme_black_footer {
    width: 16px;
    height: 16px;
    background: #333333 0% 0% no-repeat padding-box;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid #ffffff;
}

.selected_theme_icon {
    border: 1px solid #9E9E9F;
    border-radius: 8px;
    width: 64px;
    height: 10px;
    padding: 5px 3px;
    font: normal normal normal 8px/18px Noto Sans JP;
    line-height: 10px;
    text-align: center;
}

.theme_select_area li {
    display: flex;
    padding-bottom: 5px;
    }

.theme_select_area.light-mode #theme_white_footer, .theme_select_area.light-mode .selected_theme_icon.dark-theme{
    display: none;
}

.theme_select_area.dark-mode #theme_black_footer, .theme_select_area.dark-mode .selected_theme_icon.light-theme {
    display: none;
}

.custom-lang-select {
        padding: 2px 5px;
        width: 90px;
        height: 30px;
        font: normal normal normal 14px/20px Noto Sans JP;
        text-align: center;
        text-align-last: center;
        border: 1px solid #333;
        background-color: #fff;
}

.footer_logo_area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

    .footer_custom_area {
    display: flex;
    justify-content: space-between;
    }

    .sns-icon-list.light-theme .dark-mode{
    display: none;
    }

    .sns-icon-list.light-theme .light-mode{
    display: flex;
    }

    .sns-icon-list.dark-theme .light-mode{
    display: none;
    }

    .sns-icon-list.dark-theme .dark-mode{
    display: flex;
    }



@media screen and (max-width : 1200px) {
    #footer {
    padding: 40px 20px;
    height: auto;
    width: 100%;
    }
    #foot_wrap {
    padding: 0;
    }

}

@media screen and (max-width : 768px) {
    #footer {
    padding: 32px 0;
    margin-top: -0.6px;
    }

    #foot_wrap {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 206px;
    }

    .footer_sns_area .contact-text, .footer_sns_area .contact-text-info,.footer_sns_area .contact-tex.mb-m  {
    display: none;
    }

    #footer .logo {
    text-align: center;
    }

    .footer_list_area {
    text-align: center;
    margin-bottom: 20px;
    }

    .footer_contact_area .copyright-text{
    display: none;
    }

    .footer_contact_area .contact-box{
    margin-bottom: 10px;
    }

    .contact-box .description {
    text-align: center;
    }

    .footer_list_area:nth-child(1) {
    display: none;
     }

    .footer_list_area:nth-child(2) {
    display: none;
     }

     .copyright-text-mobile {
    display:block;
    order: 5;
    text-align: center;
    font: normal normal normal 8px/14px Noto Sans JP;
    letter-spacing: var(--unnamed-character-spacing-0);
     }

    .footer_sns_area {
    order: 1;
    margin-bottom: 20px;
    padding: 0;
    }

    .footer_sns_area  .sns-icon-list ul  {
    justify-content: center;
    }

    .footer_contact_area {
    order: 2;
    text-align: center;
    }

    .footer_logo_area {
    order: 3;
    margin-bottom: 10px;
    }

    .footer_list_area {
    order: 4;
    }

    .footer_custom_area {
    display: none;
    }
}

@media screen and (max-width : 600px) {
    #header h1 {
        left: 100px;
    }
    #header #bars {
       left: 5px;
    }
    #header .utility {
    right: 30px;
    top: 8px;
}
}

.sl-nav {
  display: inline;
}
.sl-nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.sl-nav ul li span {
  color: #fff;
}
.sl-nav li {
  cursor: pointer;
}
.sl-nav li ul {
  margin: 0;
  padding: 0;
  top: -10px;
  list-style: none;
  position: relative;
  display: none;
}
.sl-nav li:hover ul {
  position: absolute;
  top:36px;
  right: -18px;
  display: block;
  background: #000;
  width: 80px;
  padding-top: 0px;
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0px 0px 5px white;
}
.sl-nav li:hover .triangle {
  position: absolute;
  top: 22px;
  right: 8px;
  z-index: 10;
  height: 14px;
  overflow: hidden;
  width: 30px;
  background: transparent;
}
.sl-nav li:hover .triangle:after {
  content: '';
  display: block;
  z-index: 20;
  width: 15px;
  transform: rotate(45deg) translateY(0px) translatex(10px);
  height: 15px;
  background: #000;
  border-radius: 2px 0px 0px 0px;
  box-shadow: 0px 0px 5px white;
}
.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 9px;
  z-index: 2;
  font-size: 15px;
  color: #fff;
}
.sl-nav li ul li:last-of-type {
  padding-bottom: 10px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover,
.sl-nav li ul li span.active {
  color: #f7931e;
}
.translation-icon-border {
  border-bottom: 2px solid #555;
}

/* 표준 */
::placeholder {
  color: #aaa;
  opacity: 1;
}

/* 웹킷 기반 브라우저 (Chrome, Safari 등) */
::-webkit-input-placeholder {
  color: #aaa;
}

/* Firefox */
::-moz-placeholder {
  color: #aaa;
}

/* IE, Edge (구버전) */
:-ms-input-placeholder {
  color: #aaa;
}