/* --- --- --- body --- --- --- */

.wallpaper{
    background-image: url('JOJOJOJOsoft_Web/WallpaperTiling.png'); background-repeat: repeat; min-width: 768px;
}
.main_div{
    max-width: 768px; min-width: 668px; margin-left: auto; margin-right: auto;
}

/* --- --- --- bar_top --- --- --- */

.bar_top .bar_top_bg .bar_top_bg_left{
    background-image: url('JOJOJOJOsoft_Web/psd/header_bar_left.png'); background-size: 100% 100%; width: 50px; height:169px;
}
.bar_top .bar_top_bg .bar_top_bg_center{
    background-image: url('JOJOJOJOsoft_Web/psd/header_bar_center.png'); background-size: 100% 100%; width: calc(100% - 100px); height:169px;
}
.bar_top .bar_top_bg .bar_top_bg_right{
    background-image: url('JOJOJOJOsoft_Web/psd/header_bar_right.png'); background-size: 100% 100%; width: 50px; height:169px;
}

.bar_top .bar_top_menu{
    width:100%; height: 169px; margin-left: auto; margin-right: auto;
    position: relative;  padding-top: 30px; padding-left: 50px; padding-right: 50px; box-sizing: border-box;
}
.bar_top .bar_top_menu .bar_top_menu_logo{
    background-image: url('JOJOJOJOsoft_Web/psd/txt_logo.png'); background-size: 100% 100%; width: 329px; height:96px;
}

.bar_top_menu_button_group{
    margin-top: -5px;
    display: flex; flex-wrap: wrap; justify-content: flex-end;
}
.bar_top .bar_top_menu a{
    background-image: var(--btn_top_dis);
    background-size: 100% 100%;
    margin-top: 1px; margin-left: 15px; margin-bottom: 3px;
    width: 138px; height:50px;
}
#btn_page_vos{
    order: 1;
}
#btn_lang{
    order: 2;
}
#btn_page_billy{
    order: 3;
}
#btn_page_contact{
    order: 4;
}

.bar_top .bar_top_menu a .logo_vos{
    margin-left: -10px; width: 49px; height: 49x;
}
.bar_top .bar_top_menu a .button_vos{
    line-height: 20%; letter-spacing: -2px; text-align: center;
}
.bar_top .bar_top_menu a .button_vos .button_text1{
    font-size: 0.6em;
}
.bar_top .bar_top_menu a .button_vos .button_text2{
    font-size: 0.5em;
}

.bar_top .bar_top_menu a .logo_billy{
    margin-left: -10px; margin-right: -10px; width: 45px; height: 45x; 
}
.bar_top .bar_top_menu a .button_billy{
    line-height: 20%; letter-spacing: -2px; text-align: left;
}
.bar_top .bar_top_menu a .button_billy .button_text1{
    font-size: 0.6em;
}
.bar_top .bar_top_menu a .button_billy .button_text2{
    font-size: 0.5em;
}

.bar_top .bar_top_menu a .logo_contact{
    margin-left: -10px; margin-right: -10px; width: 36px; height: 36x;
}
.bar_top .bar_top_menu a .button_contact{
    line-height: 20%; letter-spacing: -2px; text-align: center;
}
.bar_top .bar_top_menu a .button_contact .button_text1{
    font-size: 0.6em;
}
.bar_top .bar_top_menu a .button_contact .button_text2{
    font-size: 0.5em;
}

.bar_top .bar_top_menu #btn_lang{
    margin-left: 40px;
}
.bar_top .bar_top_menu #btn_lang a{
    float: right; margin-top: 0px; margin-left: 5px; width: 50px; height: 50px; border-radius: 10px;
}
.bar_top .bar_top_menu #btn_lang a .lang{
    font-size: 0.5em;
}

/* --- --- --- bar_submenu --- --- --- */
.bar_submenu{
    user-select: none;
    margin-top: -20px; margin-left: 35px;
    width:700px; height:110px;
    display: flex; justify-content:flex-start; flex-wrap: wrap;
}
.bar_submenu a{
    margin-top: 0px;
}
.bar_submenu a p{
    font-size: 0.7em;
    letter-spacing: -2px;
}

/* --- --- --- gallaery --- --- --- */
.bar_middle{
    flex-wrap: wrap;
}

.gallary{
    user-select: none;
    margin-left: 32px; width: 700px; position: relative; box-sizing: border-box;
}
.gallary_box{
    width: 700px; height: 393px;
}
.gallary_img{
    position: absolute; z-index: 0;
    width: 700px;
    height: 393px;
}
.gallary_img img{
    width: 700px; height: 393px;
}
.gallary_img iframe{
    width: 700px; height: 393px;
    border: none;
}

.gallary_arrow_left{
    position: absolute; z-index: 1; float: left; left:-20px; top: 180px
}
.gallary_arrow_left img{
    width: 50px; height: 50px;
}
.gallary_arrow_right{
    position: absolute; z-index: 1; float: right; right:-20px; top: 180px
}
.gallary_arrow_right img{
    width: 50px; height: 50px;
}

.gallary_roll{
    max-width: 700px;
}

/* --- --- --- platform group --- --- --- */
#platform_group_vos{
    display: flex; margin-top: 20px; margin-left: -10px;
}
#platform_group_billy{
    display: flex; margin-top: 20px; margin-left: -10px;
}
#platform_group_contact{
    display: flex; justify-content:flex-start; height: 90px;
}
#platform_group_contact p{
    margin-top: 50px;
}

.platform_group img{
    border: 2px solid transparent;
    border-radius: 15px;
    width: 200px;
}
.platform_group .social_icon{
    margin-left: 10px;
    margin-top: 10px;
    width: 75px; height: 75px;
}
/* --- --- --- description --- --- --- */
.description{
    margin-left: 32px;
    width: 700px;
    user-select: none;
}
.description .description_txt{
    width: 700px;
    min-height: 600px;
}

.description .description_txt h1{
    margin-top: 0px;
    line-height: 1.6;
    font-size: 1.4em; /* 40px/16=2.5em, 2.5*16=40px, 2*16=32px */
}
.description .description_txt #title_name{
    margin-top: 20px; height: 50px;
}
.description .description_txt p{
    text-transform: uppercase;
    line-height: 1.6;
    font-size: 0.9em; /* 14px/16=0.875em, 0.875*16=14px, 1.5*16=24px */
    letter-spacing: -1px;
}