/* index.css */

/*.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
        background-color: #FBFBFB !important;
    }
    */
/*.ui-content {
	padding: 0;
	margin-top: 23px !important;
}*/
/*그리드 active효과*/
.grid-item :active {
    opacity: 0.8;
}
.grid-container3 :active {
    opacity: 0.8;
    background: #f6f6f6;
}
.grid-container2 :active, .grid-container4 :active, .grid-container3 :hover, .grid-container4 :hover{
    opacity: 0.8;
    background: #f6f6f6;
}
.logo_active :active{
    opacity:0.5;
}
.menu_img {
    color: #333;
    text-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
}
#index_header {
    border:none;
}
.ui-link{
    text-decoration:none;
}
.ui-link ui-btn-left menuitem btn ui-shadow ui-corner-all{

}
.ui-btn-left{
    left:0px;
}
.ui-btn-left{
    position: absolute;
    top: 0px;
}
/*.ui-content {
    min-height: 30.875em;
}*/
    /*
#header_menu {
    background: url("../images/common/menu_icon.png") no-repeat;
    height: 15px;
    width: 20px;
    border-radius: 0;
    background-size: cover;
    display: inline-block;
    position: absolute;
    display: inline-block;
    position: absolute;
    top: 23px;
    left: 336px;
}
    */
    .ui-link ui-btn-left ui-btn ui-shadow ui-corner-all{
    width:20px;
    height:15px;
    border:none;
}
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
    border-color: #ffffff !important;
    border:none !important;
    font-weight:normal ;
}
.ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #FFFFFF !important;
}

.ui-panel {
    background-color: #FBFBFB !important
}

/*.header {
    width: 100%;
    height: 63px;
}*/

.header_title {
    background: url("../images/common/title.png") no-repeat;
    background-size: cover;
    height: 24px;
    width: 124px;
    display: block;
    position: relative;
    top: 0.5em;
    max-width: 100%;
    max-height: 100%;
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
    top: 9px;
}

.header_logo {
    background: url("../images/common/logo.png") no-repeat;
    background-size: cover;
    height: 34px;
    width: 35px;
    display: inline-block;
    position: absolute;
    top: 11px;
    left: 17.75px;
    cursor: pointer;
}

.header_menu {
    background: url("../images/common/menu_icon.png") no-repeat;
    background-size: cover;
    height: 15px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 23px;
    right: 19px;
}

#index_Content {
    width: 100%;
    /*height: calc(100vh - -5vh);*/
    padding-left: 0;
	padding-right: 0;
}

.menu_container {
    padding: 16px;
    height: auto;
}

.menu_txt_wrap {
    background-color: #F5F5F5;
    width: auto;
    height: 90px;
    opacity: 0.9;
    position: relative;
    bottom: -90px;
}

.menu_wrap {
}

.menu_img > img {
}

.mpart {
    color: #5F7A71;
    font-family: SpoqaHanSans-Bold;
    text-align: left;
    font-size: 0.625rem;
    letter-spacing: -0.25px;
    opacity: 1;
}

.mtitle {
    font-family: SpoqaHanSans-Regular;
    text-align: left;
    font-size: 1rem;
    letter-spacing: -1.2px;
    color: #434343;
    opacity: 1;
    font-size: 16px;
    font-weight: 600;
}

.mcontent {
    font-family: SpoqaHanSans-Light;
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: -0.49px;
    color: #646464;
    opacity: 1;
    font-size: 11px;
    word-break: keep-all;
    line-height: 1.3em;
    margin-top: 3px;
}

#menu_wrap1 {
    background: url("../images/common/menu1_img.png") no-repeat;
    background-size: cover;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

#menu_wrap2 {
    background: url("../images/common/menu2_img.png") no-repeat;
    background-size: cover;
    height: 180px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

#menu_wrap3 {
    background: url("../images/common/menu3_img.png") no-repeat;
    background-size: cover;
    height: 180px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

#menu_wrap4 {
    background: url("../images/common/menu4_img.png") no-repeat;
    background-size: cover;
    height: 180px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

#Signup_icon {
    background: url("../images/common/signup_icon.png") no-repeat;
    background-size: cover;
    height: 40px;
    width: 40px;
    display: inline-block;
    position: relative;
    left: 17px;
    top: 17px;
}

#Login_icon {
    background: url("../images/common/Login_icon.png") no-repeat;
    background-size: cover;
    height: 40px;
    width: 40px;
    display: inline-block;
    position: relative;
    left: 17px;
    top: 17px;
}



.m2title {
    text-align: left;
    letter-spacing: -1.05px;
    color: #434343;
    opacity: 1;
    font-family: SpoqaHanSans-Regular;
    font-size: 0.875rem;
    word-break: keep-all;
    display: block;
}

.m2content {
    text-align: left;
    letter-spacing: -0.82px;
    color: #646464;
    opacity: 1;
    font-family: SpoqaHanSans-Light;
    font-size: 0.6875rem;
    word-break: keep-all;
    display: block;
    margin-top: 3px;
}

.m2txt {
    display: inline-block;
    position: relative;
    left: 23px;
    top: 10px;
}

.Signup_wrap {
    border-right: 0.5px solid #C7C7C7;
}

.grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    height: auto;
    margin-top: 4px;
}

.grid-container3 {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 52px;
    width: 100%;
    border-top: 0.5px solid #C7C7C7;
    border-bottom: 0.5px solid #C7C7C7;
}

.grid-container2 {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 74px;
    width: 100%;

    /*position: relative;
    top: 37px;*/
}

.grid-container4 {
    display: flex;
    grid-template-columns: 100%;
    height: 53px;
    width: 100%;
    border-top: 0.5px solid #C7C7C7;
    border-bottom: 0.5px solid #C7C7C7;
    display: flex;
}
.grid-container3 > div > img {
    position: relative;
    left: 25px;
    top: 14px;
}
.grid-container3 > div > div {
    height: fit-content;
    line-height: 18px;
    color: #777777;
    font-size: 13px;
    font-family: 'SpoqaHanSans-Regular';
    width: fit-content;
    white-space: nowrap;
    letter-spacing: -0.54px;
    display: inline-block;
    position: relative;
    left: 38px;
    top: 17px;
    font-weight: bold;
}
/*
.grid-container3 > :nth-child(1) > div {
    top:8px;
}
*/
.grid-container3 > :nth-child(1) {
    border-right: 0.5px solid #C7C7C7;
}
.grid-container3 > :nth-child(2) > :nth-child(2){
    padding-right: 10%;
}
.grid-container4 > div {
    height: fit-content;
    line-height: 24px;
    margin: auto;
    color: #646464;
    font-size: 12px;
    font-family: 'SpoqaHanSans-Regular';
    white-space: nowrap;
    display: flex;
}
.grid-container4 > div > img {
    padding-right: 10px;
}
.menu2_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    opacity: 1;
    border: 0.5px solid #C7C7C7;
    border-top: 0.5px solid #C7C7C7;
}
.fitContent{
    height: fit-content;
}

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

.footer_txt1 {
    text-align: left;
    font-family: SpoqaHanSans-Regular;
    font-size: 0.8125rem;
    letter-spacing: -0.58px;
    color: #000000;
    opacity: 1;
    word-break: keep-all;
}

#footer_termsofuse {
    display: inline-block;
}

#footer_privacy {
    display: inline-block;
}

#footer_contact {
    display: inline-block;
}

.footer_txt2 {
    text-align: left;
    font-family: SpoqaHanSans-Regular;
    font-size: 0.75rem;
    letter-spacing: -0.54px;
    color: #fff;
    opacity: 1;
    word-break: keep-all;
    line-height: 1.35rem;
}

.footer_txt3 {
    text-align: left;
    font-family: SpoqaHanSans-Regular;
    font-size: 0.625rem;
    letter-spacing: -0.2px;
    color: #434343;
    opacity: 0.56;
    word-break: keep-all;
}
.bottom0px {
    position: absolute;
    bottom: 0px;
}
.__pageFooterContainer{margin-top:10px;}


@media all and (max-width:320px){
    .mpart{font-size:0.5625rem !important;}
    .mtitle {font-size: 0.875rem !important;}
    .mcontent {font-size: 0.625rem !important;}
    .footer_txt1 {font-size: 0.75rem !important;}
    .footer_txt2 {font-size: 0.6875rem !important; padding-left: 6px;}
    .footer_txt3 {font-size: 0.5625rem !important; padding-left: 6px;}
    .m2title {font-size: 0.8125rem !important;}
    .m2content {font-size: 0.625rem !important;}
    .paddingLeft16 {padding-left: 0.875rem}
    .paddingBottom16 {padding-bottom: 0.875rem}
    .paddingRight6 {padding-right: 0.3125rem;}
}
@media all and (min-width:321px) {
    .mpart {font-size: 0.625rem !important;}
    .mtitle {font-size: 1rem !important;}
    .mcontent {font-size: 0.75rem !important;}
    .footer_txt1 {font-size: 0.8125rem !important;}
    .footer_txt2 {font-size: 0.75rem !important; }
    .footer_txt3 {font-size: 0.625rem !important; }
    .m2title {font-size: 0.875rem !important;}
    .m2content {font-size: 0.6875rem !important;}
    .paddingLeft16 {padding-left: 1rem}
    .paddingBottom16 {padding-bottom: 1rem}
    .paddingRight6 {padding-right: 0.75rem;}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
    /*#index_Content {
        width: 100%;
        height: 120vh;
        padding: 0;
    }*/
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) {
    /*.ui-content {
        min-height: 120vh;
    }*/
}
@media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) {
    .bottom0px {
        position: absolute;
        bottom: 30px;
    }

    /*#index_Content {
        width: 100%;
        height: calc(100vh - 5vh);
        padding: 0;
    }*/
}
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    .bottom0px {
        position: absolute;
        bottom: 30px;
    }
    /*#index_Content {
        width: 100%;
        height: calc(100vh - 5vh);
        padding: 0;
    }*/
}
@media only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio : 3) {
    /*.ui-content {
        min-height: 106vh;
    }*/
}


 /* 모바일 웹접근성 수정 */
@media screen and (orientation: portrait) {
    .footer_txt2 {
        color: #7A7A7A;
        padding-left: 6px;
    }

    .footer_txt3 {
        padding-left: 6px;
    }
}