@charset "utf-8";
/* CSS Document */

.main {background: url("/common/images/merit/mainBg.png"); height: 250px;}
.main .right {position: absolute; bottom: 0; right: 0;}
.onCircle {background: url("/common/images/merit/circle.png") center top no-repeat; padding-top: 5px;}
.bgArea {background: url("/common/images/merit/bg.png");}
#glh02,#glh04 {background: rgba(238,238,238,0.3);}
#glh03 .sectionTitle:before, #glh03 .sectionTitle:after {width: 32%;}
#glh04 .sectionTitle:before, #glh04 .sectionTitle:after {width: 35%;}
.dataBlock {width: 920px; margin: 0 auto; overflow: hidden;}
.txt, .img {width: 50%;}
.txt {padding: 0 4%; box-sizing: border-box;}
.txt h2 {line-height: 1.4; font-size: 18px; margin-bottom: 3%;}
.left h2 {color: #6c9f2f;}
.right h2 {color: #d82432;}
.txt p {margin: 3% auto; display: inline-block; line-height: 1.7}

@media screen and (max-width:896px) {
    .main .right {right: -10%;}
    .dataBlock,.txt, .img {width: 100%; float: none;}
    .img img {margin: 0 auto; display: block;}
    .txt {margin: 5% auto 7%;}
    .banner {margin: 0 auto;}
    #glh02, #glh04{background: rgba(238,238,238,0.4);}
}
@media screen and (max-width: 480px) {
    .main .right {right: -20%;}
    .txt h2 {font-size: 3.8vw;}
}
@media screen and (max-width: 380px) {
    .txt p {font-size: 3.5vw;}
    .banner p {font-size: 3vw;}
}