@charset "utf-8";
@import url('../style/common.css');
@import url('../style/font.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');

header {
    height: 700px;
    background: url('../img/brand/brand_bg.png') 50% 0% no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}

.brand,
.history,
.news-letter
{display: none;}

.brand.on,
.history.on,
.news-letter.on
{display: block;}

/* brand */

.brand .sec1 {
    height: 1180px;
    background-color: #0E76BD;
    position: relative;
    padding-top: 275px;
}

.brand .sec1 .inner_wrap {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    color: #fff;
    width: 95%;
}

.brand .sec1 .inner_wrap h2 {
    position: absolute;
    top: 20px;
    left: 0;
    transform: translateY(-100%);
}

.brand .sec1 .inner_wrap .left {
    float: left;
    width: 49%;
    height: 588px;
    background: url('../img/brand/value/value_visual.png') center no-repeat;
    background-size: cover;
}

.brand .sec1 .inner_wrap .right {
    float: right;
    width: 49%;
}

.brand .sec1 .inner_wrap .right .sub_title {
    text-align: center;
    font-size: 18px;
    padding: 40px 0 70px;
}

.brand .sec1 .inner_wrap .right .sub_title ~ p {
    text-align: justify;
    word-break: keep-all;
    position: relative;
    z-index: 100;
}

.brand .sec1 .inner_wrap .right p:last-child {
    padding-top: 24px;
}

.brand .sec1 img {
    width: 100%;
    height: 258px;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.brand .sec2 {
    width: 98%;
    max-width: 1200px;
    padding-top: 100px;
    margin: 0 auto;
}

.brand .sec2 h3 {
    text-align: center;
    padding-bottom: 80px;
}

.brand .sec2 .content li {
    padding-bottom: 80px;
    overflow: hidden;
    position: relative;
}

.brand .sec2 .content li:last-child {padding-bottom: 0;}

.brand .sec2 .content li div[class^=img_box] {
    width: 47%;
}

.brand .sec2 .content li:nth-child(odd) div[class^=img_box] {float: left;}
.brand .sec2 .content li:nth-child(even) div[class^=img_box] {float: right;}

.brand .sec2 .content li .img_box1 {
    height: 400px;
    background: url('../img/brand/value/value1.png') center no-repeat;
    background-size: cover;
}
.brand .sec2 .content li .img_box2 {
    height: 333px;
    background: url('../img/brand/value/value2.png') center no-repeat;
    background-size: cover;
}
.brand .sec2 .content li .img_box3 {
    height: 458px;
    background: url('../img/brand/value/value3.png') center no-repeat;
    background-size: cover;
}
.brand .sec2 .content li .img_box4 {
    height: 300px;
    background: url('../img/brand/value/value4.png') center no-repeat;
    background-size: cover;
}

.brand .sec2 .content li dl {
    padding-top: 30px;
    width: 49%;
    text-align: justify;
    /* word-break: keep-all; */
}

.brand .sec2 .content li:nth-child(even) dt {text-align: right;}
.brand .sec2 .content li:nth-child(odd) dl {float: right;}
.brand .sec2 .content li:nth-child(even) dl {float: left;}

.brand .sec2 .content li dt {
    padding-bottom: 100px;
    font-size: 2rem;
}

/* history */

.history div[class^=sec] {height: 900px; color: #fff;}
.history div[class^=sec] .inner_wrap {
    width: 95%;
    max-width: 1500px;
    color: #fff;
    margin: 0 auto;
}
.history div[class^=sec] .inner_wrap h3 {padding-bottom: 60px;}
.history div[class^=sec] .inner_wrap p:nth-of-type(2) {padding: 20px 0;}
.history div[class^=sec]:nth-child(odd) {padding-top: 80px;}
.history div[class^=sec]:nth-child(odd) .inner_wrap > div {
    float: left;
    width: 40%;
    min-width: 500px;
    text-align: justify;
}
.history div[class^=sec]:nth-child(even) {padding-top: 200px;}
.history div[class^=sec]:nth-child(even) .inner_wrap > div {
    float: right;
    width: 40%;
    min-width: 500px;
    text-align: justify;
}

.history div[class^=sec] .inner_wrap > div p {
line-height: 1.7;
font-weight: 300;
}

.history .sec1 {
    background: linear-gradient(90deg, rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/brand/history/history1.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec2 {
    background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,1)), url('../img/brand/history/history2.png') 50% 50% no-repeat;
    background-size: cover;
}
.history .sec3 {
    background: linear-gradient(90deg, rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/brand/history/history3.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec4 {
    background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,1)), url('../img/brand/history/history4.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec5 {
    background: linear-gradient(90deg, rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/brand/history/history5.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec6 {
    background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,1)), url('../img/brand/history/history6.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec7 {
    background: linear-gradient(90deg, rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/brand/history/history7.png') 50% 0 no-repeat;
    background-size: cover;
}
.history .sec8 {
    background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,1)), url('../img/brand/history/history8.png') 50% 0 no-repeat;
    background-size: cover;
}

/* news-letter */

.news-letter .content {
    padding-top: 70px;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

.news-letter .content li {
    padding-bottom: 60px;
}

.news-letter .content li:last-child {
    padding-bottom: 0;
}
.news-letter .content li a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--color3);
}

.news-letter .content li a .text_box {
    flex: 0 1 76.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 190px;
    padding-bottom: 10px;
}

.news-letter .content li a .text_box dl dt {
    padding-bottom: 36px;
}

.news-letter .content li a .text_box p span {
    padding-right: 20px;
    font-size: 1.4rem;
    vertical-align: top;
}

.news-letter .content li a .text_box p span.material-icons-outlined {
    padding-right: 3px;
    vertical-align: top;
}

.news-letter .content li a .text_box p span.material-icons-outlined::after {
    content: '\e87e';
    font-size: 18px;
}

.news-letter .content li a .thumnail {
    flex: 0 0 180px;
    height: 180px;
}

.news-letter .content li:nth-child(1) a .thumnail {
    background: url('../img/brand/newsletter/vol.146_2021_11.png') center no-repeat;
    background-size: contain;
}
.news-letter .content li:nth-child(2) a .thumnail {
    background: url('../img/brand/newsletter/vol.145_2021_10.png') center no-repeat;
    background-size: contain;
}
.news-letter .content li:nth-child(3) a .thumnail {
    background: url('../img/brand/newsletter/vol.144_2021_10.png') center no-repeat;
    background-size: contain;
}
.news-letter .content li:nth-child(4) a .thumnail {
    background: url('../img/brand/newsletter/vol.143_2021_10.png') center no-repeat;
    background-size: contain;
}
.news-letter .content li:nth-child(5) a .thumnail {
    background: url('../img/brand/newsletter/vol.142_2021_09.png') center no-repeat;
    background-size: contain;
}
.news-letter .content li:nth-child(6) a .thumnail {
    background: url('../img/brand/newsletter/vol.141_2021_09.png') center no-repeat;
    background-size: contain;
}