﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
.guide_style {
    background-color: rgba(0,72,155,1) !important;
    background-image: none !important;
    border-radius: 10px !important;
    text-align: center;
    color: #fff !important;
    padding: 20px !important;
}

.rs_style {
    background-color: rgba(183,89,87,1) !important;
}

.med_style {
    background-color: rgba(56,112,169,1) !important;
}

.eng_style {
    background-color: rgba(167,103,19,1) !important;
}

.muses_style {
    background-color: rgba(75,129,17,1) !important;
}

h3.rs_style, h3.med_style, h3.eng_style, h3.muses_style {
    padding: 10px  !important;
    margin: 10px auto !important;
}

.guide_section {
    margin: 0px auto 60px;
    padding: 0px 0px 30px;
    border-bottom: 1px dashed #ccc;
}

.guide_ctxt {
    text-indent: 0px;
    text-align: center;
    margin: 0px 0px 20px 0px;
}

.g_info {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0px auto 60px;
}

.g_info .g_img {
    width: 250px;
    text-align: center;
}

.g_info .g_img img {
    border-radius: 10px;
}

.g_info .g_txt {
    width: calc(100% - 270px);
}

.g_data {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.g_data .g_life {
    width: 320px;
}

.g_data .g_budget {
    width: calc(100% - 340px);
}

.g_data .g_budget dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0px 0px 0px 20px;
    padding: 0px;
}

.g_data .g_budget dt {
    width: 130px;
    margin: 0px;
    padding: 10px 0px;
    border-bottom: 1px dashed #ccc;
    color: #000;
    font-weight: bold;
}

.g_data .g_budget dd {
    width: calc(100% - 150px);
    margin: 0px;
    padding: 10px 0px 10px 20px;
    border-bottom: 1px dashed #ccc;
}



/*auto generated region*/

#BaseTable
{

}
#SystemMenu
{

}
#HeaderPane
{

}
#Middle
{

}
#LeftPane
{

}
#ContentPane
{

}
#RightPane
{

}
#FooterPane
{

}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
.guide_style {
    background-color: rgba(0,72,155,1) !important;
    background-image: none !important;
    border-radius: 10px !important;
    text-align: center;
    color: #fff !important;
    padding: 20px !important;
}

.rs_style {
    background-color: rgba(183,89,87,1) !important;
}

.med_style {
    background-color: rgba(56,112,169,1) !important;
}

.eng_style {
    background-color: rgba(167,103,19,1) !important;
}

.muses_style {
    background-color: rgba(75,129,17,1) !important;
}

h3.rs_style, h3.med_style, h3.eng_style, h3.muses_style {
    padding: 10px  !important;
    margin: 10px auto !important;
}

.guide_section {
    margin: 0px auto 60px;
    padding: 0px 0px 30px;
    border-bottom: 1px dashed #ccc;
}

.guide_ctxt {
    text-indent: 0px;
    text-align: center;
    margin: 0px 0px 20px 0px;
}

.g_info {
    margin: 0px auto 60px;
}

.g_info .g_img {
    width: 250px;
    margin: 0px auto;
    text-align: center;
}

.g_info .g_img img {
    border-radius: 10px;
}

.g_info .g_txt {
}

.g_data {
}

.g_data .g_life {
}

.g_data .g_budget {
}

.g_data .g_budget dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.g_data .g_budget dt {
    width: 100px;
    margin: 0px;
    padding: 10px 0px;
    border-bottom: 1px dashed #ccc;
    color: #000;
    font-weight: bold;
    font-size: small;
}

.g_data .g_budget dd {
    width: calc(100% - 130px);
    margin: 0px;
    padding: 10px 0px 10px 20px;
    border-bottom: 1px dashed #ccc;
    font-size: small;
}
}
