@charset "UTF-8";

.about-wrap {
    position: relative; 
    height: 620px; 
    color: #fff; 
    text-align: center;
    background-image: url('../img/sub_company.jpg'); 
    background-size: cover;
    background-position: center bottom;
}
.about-inner {
    height: 100%;
    padding-top: 50%;
    margin: 0 30px;
    top: 0;
    line-height: 28px;
}
.ab-tit {padding-bottom: 70px; font-size: 2.5em;}

.company-wrap {
    position: relative;
    height: 100vh;
}
.company-wrap::before {
    content: '';
    display: block;
    position: absolute;
    top: -90px;
    width: 100%;
    border-top: 1px solid #ddd;
}
.intro h3{
    float: left;
    width: 170px;
    height: 90px;
    margin-top: -70px;
    padding: 0 0 0 30px;
    z-index: 10;
    font-size: 1.8em;
    font-weight: 200 !important;
    text-align: center;
}
.intro > h3 > a {position: relative; display: block;}
.active1 {font-weight: 700;}
.active1::before {
    content: '';
    display: block;
    width: 150px;
    margin-top: -22px;
    padding-bottom: 18px;
    border-top: 5px solid #fff;
}
.company-wrap h3 a {color: #fff;}
.company-wrap ul {
    position: absolute;
}
.intro-list {
    position: absolute;
    width: 100%;
    height: 100.5%;
    background-image: url('../img/sub_m_company_bg.png');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}
.ceo-list {
    position: absolute;
    width: 100%;
    height: 100.5%;
    background-image: url('../img/sub_m_blue_bg.png');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}
.intro-tit::before{
    content: '';
    display: block;
    width: 130px;
    margin-left: -5px;
    padding-bottom: 5px;
    border-top: 2px solid #000;
}
.intro-tit {padding: 30px; font-size: 1.3em;}
.ceo-list {display: none;}
.intro-list p {padding: 30px; line-height: 35px; font-size: 1.1em;}
.ceo-txt {padding: 10px 30px; line-height: 100px; font-size: 1.3em !important;}
.ceo-txt-in {padding: 10px 30px;  line-height: 35px; color: #aaa !important;}
.ceo-list {height: 100%;}
.ceo-list li > .boss {padding: 30px;}
@media screen and (max-width: 339px) { 
    .intro h3{
        width: 120px;
        font-size: 1.2em;
    }
    .active1::before {
        width: 100px;
    }
    .ceo-txt {padding: 10px; line-height: 40px;}
    .ceo-txt-in {padding: 10px;}
    .galgaxy {padding: 0 !important;}
}
@media screen and (max-width: 767px) {
    .ceo-txt {font-size: 1em !important;}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .about-inner{padding-top: 25%;}
    .intro-list {background-image: url('../img/sub_black_t.png');}
    .ceo-list {background-image: url('../img/sub_blue_t.png');}
}
@media screen and (min-width: 1280px) {
    .about-inner{padding-top: 15%;}
    .intro h3{width: 350px; padding: 0 0 0 200px;}
    .intro-list {background-image: url('../img/sub_black_t.png');}
    .ceo-list {background-image: url('../img/sub_blue_t.png');}
    .ceo-txt {padding: 30px; line-height: 100px; font-size: 1.3em !important;}
    .ceo-txt-in {padding: 30px;  line-height: 35px; color: #aaa !important;}  
    .boss-wrap {position: relative;}
    .ceo-list li > .boss {position: absolute !important; max-width: 300px !important; bottom: -100px; right: 0 !important;}
}
@media screen and (min-width: 1550px) {}