@charset "utf-8";

/*
 * service.css
 * Created by Qbist on 2016/06/13.
 * Copyright (c) 2016 Qbist. All rights reserved.
 */

/* program */
.bdr {
    background: url("../img/dot_line_blue.png") repeat-x center bottom;
    margin: 0 auto;
    padding-bottom: 80px !important;
    width: 468px;
}

.font_w{
    font-weight: bold;
    letter-spacing: 2px;
}
.text_center{
    text-align: center;
}
.sub_ttl{
    color: #f08737;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 10px;
}
.sub_txt{
    font-size: 20px;
}

.sub_h3{
    font-size: 30px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.4;
    margin: 0 auto 35px;
}
.sub_h3 span{
    font-size: 40px;
    font-weight: bold;
}

.pro_featureul{
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 60px;
    width: 1060px;
}

.pro_featureli{
    background: url("../img/prgram_rbg.png") no-repeat center / contain;
    height: 330px;
    margin: 0 auto;
    width: 330px;
}

.pro_ttl{
    display: inline-block;
    font-size: 36px !important;
    line-height: 36px !important;
    min-height: 36px !important;
}

.pro_featureh3{
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    margin: 68px auto 30px;
    position: relative;
}

.pro_featureh3::before{
    background: url(../img/program_icon.png);
    background-size: cover;
    content: "";
    display: inline-block;
    height: 23px;
    left: -20px;
    position: absolute;
    top: -16px;
    width: 23px;
}

.pro_featuretxt{
    font-size: 14px;
    line-height: 1.4;
    margin: 0 auto;
    text-align: left;
    width: 230px;
}

.pro_featuretxt span{
    background: #e66464;
    color: #fff;
}

.pro_featurefukiul{
    display: grid;
    font-size: 14px;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
}

.pro_featurefukili{
    background: url("../img/program_fukidashi_002.png") no-repeat center / contain;
    height: 140px;
    margin: 0 auto;
    text-align: left;
    width: 516px;
}
.pro_featurefukili p{
    line-height: 1.2;
    padding: 20px 0 0 130px;
    width: 370px;
}

.pro_featurefukili:first-child{
    background: url("../img/program_fukidashi_001.png") no-repeat center / contain;
}

.pro_featurefukili:first-child p{
    padding: 20px 0 0 120px;
}

.program_txtarea{
    background: url("../img/program_mtxt_bg.png") no-repeat center / contain;
    font-size: 15px;
    height: 154px;
    line-height: 2;
    margin: 0 auto 36px;
    padding: 26px 100px;
    text-align: left;
    width: 701px;
}

.program_txtarea.program_txtarea--s{
    background: url("../img/program_stxt_bg.png") no-repeat center / contain;
    height: 58px;
    padding: 26px 100px;
    width: 701px;
}

.program_txtarea span{
    background:linear-gradient(transparent 60%, #e3ff5b 60%);
    font-weight: bold;
}

.program_subtxt{
    color: #41a0d2;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 auto 35px;
}

.program_img{
    margin-bottom: 40px;
}
.program_tbg{
    background: url("../img/program_bg.png") no-repeat center;
}

.program_dep{
    background: url("../img/program_o_bg.png") no-repeat center / contain;
    color: #fff;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 24px;
    padding: 25px 20px 20px;
    width: 290px;
}

.program_deph4{
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 5px;
}

.program_deptxt{
    font-size: 14px;
    line-height: 1.6;
}

.program_depul{
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto 52px;
}

.program_depli{
    background: url("../img/program_y_bg.png") no-repeat center / contain;
    height: 90px;
    margin: 0 auto;
    padding: 15px 20px 20px;
    width: 290px;
}

.program_dul{
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 1fr;
}

.program_dli{
    font-size: 14px;
    height: 161px;
    line-height: 1.5;
    padding:  0 0 0 0;
    position: relative;
    width: 510px;
}

.program_dli.men{
    background: url("../img/program_d_m.png") no-repeat center / contain;
}

.program_dli.women{
    background: url("../img/program_d_w.png") no-repeat center / contain;
}

.program_dli span{
    left: 110px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 380px;
}

.program_dli h4{
    color: #fff;
    left: 16px;
    position: absolute;
    text-align: left;
    top: 106px;
    width: 80px;
}


.w1060 .btn__wrap{
    margin: 100px auto 200px;
}

    br.sp{
        display: none;
    }

.indexlead {
    color: #777;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: -70px;
    padding-bottom: 100px;
    text-align: center;
}

.serviceIndexWrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1050px;
}

.serviceIndexBox {
    text-align: center;
    width: 330px;
}

.serviceIndexBox dl dt {
    background-color: #46c8c3;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 28px;
    font-size: 2.8rem;
    height: 330px;
    line-height: 1.3;
    padding-top: 190px;
    position: relative;
}

.serviceIndexBox dt.icoIndex01 {
    background: url('../img/service_index01_no.png') no-repeat 80px 25px /52% #46c8c3;
}

.serviceIndexBox dt.icoIndex02 {
    background: url('../img/service_index02_no.png') no-repeat 86px 30px /52% #46c8c3;
}

.serviceIndexBox dt.icoIndex03 {
    background: url('../img/service_index03_no.png') no-repeat 88px 26px /52% #46c8c3;
}

.serviceIndexBox dt.icoIndex01:hover {
    background-image: url('../img/service_index01_on.png');
}

.serviceIndexBox dt.icoIndex02:hover {
    background-image: url('../img/service_index02_on.png');
}

.serviceIndexBox dt.icoIndex03:hover {
    background-image: url('../img/service_index03_on.png');
}

.serviceIndexBox dl dt span {
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
}

.serviceIndexBox dl dt span::after {
    color: #e66464;
    content: '\f0d9';
    display: block;
    font-family: 'icomoon';
    font-size: 24px;
    font-size: 2.4rem;
}

.serviceIndexBox dl dt:hover span,
.serviceIndexBox dl dt:hover span::after {
    color: #f5d237;
}

.serviceIndexBox dl dt a {
    height: 100%;
    left: 0;
    position: absolute;
    text-indent: -999px;
    top: 0;
    width: 100%;
}

.serviceIndexBox dl dd ul {
    margin-top: 30px;
}

.serviceIndexBox dl dd ul li {
    font-size: 24px;
    font-size: 2.4rem;
    padding-bottom: 1em;
}

.serviceIndexBox dl dd ul li a {
    padding-top: 1em;
}

.serviceIndexBox dl dd ul li a::before {
    content: '\f0d9';
    display: block;
    font-family: 'icomoon';
    opacity: 0;
    position: relative;
    top: -5px;
    transition: opacity 0.5s ease-out, transform 0.5s;
}

.serviceIndexBox dl dd ul li a:hover {
    color: #f5d237;
}

.serviceIndexBox dl dd ul li a:hover::before {
    opacity: 1;
    transform: translateY(5px);
}

.btnArea {
    margin: 100px auto;
    text-align: center;
}

.btn_ellipse {
    border-radius: 1.6em;
    display: inline-block;
    font-size: 24px;
    font-size: 2.4rem;
    letter-spacing: 0.2rem;
    margin-bottom: 30px;
    max-width: 720px;
    padding: 0.6em 6em 0.9em;
    width: 90%;
}
/*
.btn_ellipse::after {
    content: url('../img/ico_book_white.png');
    margin-left: 1em;
}

.btn_ellipse::before {
    content: url('../img/ico_book_white.png');
    margin-right: 1em;
}*/

.btn_ellipse.blue {
    background-color: #46c8c3;
}

.btn_ellipse.white {
    background-color: #fff;
}

.btn_ellipse.pub.blue::before,
.btn_ellipse.pub.blue::after {
    color: #fff;
    content: '\e92c';
    font-family: 'icomoon' !important;
    font-size: 36px;
    font-size: 3.6rem;
    padding: 1.5rem;
    position: relative;
    top: 0.5rem;
}
.btn_ellipse.utest.blue::before,
.btn_ellipse.utest.blue::after {
    color: #fff;
    content: '\e900';
    font-family: 'icomoon' !important;
    font-size: 36px;
    font-size: 3.6rem;
    padding: 1.5rem;
    position: relative;
    top: 0.5rem;
}

.btn_ellipse.blue:hover::before,
.btn_ellipse.blue:hover::after {
    color: #ffe400;
}

/* サービス下層 */

#service .mainArea {
    background-color: #46c8c3;
    background-image: url('../img/bg_semicircle_top.png'), url('../img/bg_semicircle_bottom.png');
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: contain;
    padding: 90px 0;
    text-align: center;
}

#service .mainArea .subH-Wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1050px;
}

#service .mainArea .subH-Wrap h2 {
    font-size: 32px;
    font-size: 3.2rem;
    margin: 0 auto;
}

#service .mainArea .subH-Wrap h2 span {
    color: #fff;
    font-size: 16px;
    font-size: 1.6rem;
}

#service .mainArea .subH-Wrap .arrowL {
    color: #fff;
    display: inline-block;
    font-size: 18px;
    line-height: 1.2;
    padding-left: 1.5em;
    position: relative;
    text-align: left;
    top: 10px;
    width: 13em;
}

#service .mainArea .subH-Wrap .arrowL span.icon-angle-double-left {
    font-size: 32px;
    left: 0;
    position: absolute;
    top: -7px;
}

#service .mainArea .subH-Wrap .arrowL:hover {
    color: #f5d237;
}

#service .mainArea .subH-Wrap .arrowR {
    color: #fff;
    display: inline-block;
    font-size: 18px;
    line-height: 1.2;
    padding-right: 1.5em;
    position: relative;
    text-align: right;
    top: 10px;
    width: 13em;
}

#service .mainArea .subH-Wrap .arrowR span.icon-angle-double-right {
    font-size: 32px;
    position: absolute;
    right: 0;
    top: -7px;
}

#service .mainArea .subH-Wrap .arrowR:hover {
    color: #f5d237;
}

#service .mainArea .flex-circle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 60px auto 0;
    max-width: 1050px;
}
#service .mainArea .flex-circle.noLead {
    margin-bottom: 70px;
}
#service .mainArea .circle {
    background: no-repeat center top / 52% #fff;
    background-color: #fff;
    border-radius: 11%;
    box-sizing: border-box;
    font-size: 24px;
    font-size: 2.4rem;
    height: 330px;
    padding-top: 185px;
    position: relative;
    width: 330px;
}

/* 円アイコン */

#service .mainArea .circle.icoProducts01 {
    background: url('../img/products01.png') no-repeat 60px 46px /60% #fff;
}

#service .mainArea .circle.icoProducts02 {
    background: url('../img/products02.png') no-repeat 69px 40px /60% #fff;
}

#service .mainArea .circle.icoProducts03 {
    background: url('../img/products03.png') no-repeat 91px 40px /60% #fff;
}

#service .mainArea .circle.icoPromotion01 {
    background: url('../img/promotion01.png') no-repeat 68px 50px /60% #fff;
}

#service .mainArea .circle.icoPromotion02 {
    background: url('../img/promotion02.png') no-repeat 71px 40px /60% #fff;
}

#service .mainArea .circle.icoPromotion03 {
    background: url('../img/promotion03.png') no-repeat 65px 45px /60% #fff;
}

#service .mainArea .circle.icoPublication01 {
    background: url('../img/publication01.png') no-repeat 70px 50px /60% #fff;
}

#service .mainArea .circle.icoPublication02 {
    background: url('../img/publication02.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoPublication03 {
    background: url('../img/publication03.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoGame01 {
    background: url('../img/game01.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoGame02 {
    background: url('../img/game02.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoGame03 {
    background: url('../img/game03.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoUserTest01 {
    background: url('../img/user_test01.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoUserTest02 {
    background: url('../img/user_test02.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle.icoUserTest03 {
    background: url('../img/user_test03.png') no-repeat 70px 40px /60% #fff;
}

#service .mainArea .circle p {
    line-height: 30px;
    line-height: 3rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#service .mainArea .lead {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 840px;
    padding: 60px 0 5%;
}

#service .w720 {
    align-items: stretch;
    background: url('../img/dot_line_blue.png') no-repeat center bottom;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 720px;
    padding: 70px 0;
}

#service .w1060 {
    margin: 0 auto;
    max-width: 1060px;
    padding: 100px 0 0;
}

#service .w720 .txtBox.full {
    width: 100%;
}

#service .w720.no-bdr {
    background: none;
}

#service .w720 .imgBox {
    height: 240px;
    width: 240px;
}

#service .imgBox img {
    height: 100%;
    width: 100%;
}

#service .w720 .txtBox {
    position: relative;
    width: 450px;
}

#service .w720 .txtBox.full {
    position: relative;
    width: 100%;
}

#service .w720 .txtBox h3 {
    border-left: 10px solid #46c8c3;
    font-size: 26px;
    font-size: 2.6rem;
    margin-bottom: 20px;
    padding-left: 10px;
    position: relative;
}

#service .w720 .txtBox p {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.8;
}

#service .w720 .txtBox h3 .capsule__link {
    background-color: #46c8c3;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 3px 10px 6px;
    position: absolute;
    top: 0;
}
#service .w720 .txtBox h3 .capsule__link.result {
    right: 0;
}
#service .w720 .txtBox h3 .capsule__link.detail {
    right: 140px;
}
#service .w720 .txtBox h3#illust .capsule__link.result {
    right: -20px;
}
#service .w720 .txtBox h3#illust .capsule__link.detail {
    right: 120px;
}

#service .w720 .txtBox h3 .capsule__link span {
    font-size: 16px;
    font-size: 1.6rem;
    padding-right: 0.2em;
    position: relative;
    top: 0.1em;
}

#service .w720 .txtBox h3 .capsule__link:hover {
    color: #ffe400;
}

#service .innerBox {
    border: 1px solid #cacaca;
    padding: 1em;
    padding: 2.3em 0 3em;
    text-align: center;
    width: 100%;
}
#service .innerBox.gamehelp {
    border: 1px dotted #cacaca;
    padding: 1em;
    padding: 1em;
    text-align: left;
    width: 100%;
}

#service .innerBox h4 {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 1.5em;
}

#service .innerBox dl.gameHelp01,
#service .innerBox dl.gameHelp02 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 0.6em 0em 0;
}

#service .innerBox dl.gameHelp01 dt {
    float: left;
    width: 20%;
}

#service .innerBox dl.gameHelp01 dd {
    float: left;
    width: 80%;
}

#service .innerBox dl.gameHelp02 dt {
    float: left;
    width: 20%;
}

#service .innerBox dl.gameHelp02 dd {
    float: left;
    width: 80%;
}

#service .innerBox .lead {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 1em 2em 0;
    text-align: left;
}

/* 下部ナビボタン */

#serviceNav ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
    margin: 0 auto;
    max-width: 1050px;
}

#serviceNav ul li {
    min-width: 300px;
    padding: 0 1% 20px;
    width: 31%;
}

.btn-fall {
    background-color: #fff;
    border: 2px solid #3cb4af;
    border-radius: 3px;
    color: #3cb4af;
    display: inline-block;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.3;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 2;
}

.btn-fall::before,
.btn-fall::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
}

.btn-fall,
.btn-fall::before,
.btn-fall::after {
    box-sizing: border-box;
    transition: all 0.3s;
}

.btn-fall:hover,
.current .btn-fall {
    color: #fff;
}

.current .btn-fall {
    cursor: default;
    pointer-events: none;
}

.btn-fall::after {
    height: 100%;
    top: -100%;
    width: 100%;
}

.btn-fall:hover::after,
.current .btn-fall::after {
    background-color: #3cb4af;
    top: 0;
}

/* 出版 */

#publication {
    margin: 0 auto;
    max-width: 720px;
}

#publication h1 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 1.4;
    margin: 30px auto 50px;
}

#publication .lead {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

#publication .checkList .notice {
    font-size: 14px;
    font-size: 1.4rem;
    padding-top: 0.5em;
}

#publication .checkList li {
    font-size: 16px;
    font-size: 1.6rem;
    margin-bottom: 0.5em;
    text-align: left;
}

#publication .innerBox h2 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.4;
    margin: 0 auto 30px;
    text-align: center;
}

#publication .checkList {
    margin: 0 auto;
    width: 560px;
}

#publication .checkList li span {
    margin-right: 0.5em;
}

#publication img {
    margin: 50px auto 0;
}

#serviceNav {
    margin: 10px 0 70px;
}

/* ユーザーテスト */
#user_test {
    margin: 0 auto;
    max-width: 848px;
}
#user_test h1 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 1.4;
    margin: 30px auto 50px;
}
#user_test .lead {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 35px;
}
#user_test .innerBox {
    box-sizing: border-box;
    padding: 2.5em 7em;
}
#user_test .user_test_flow {
    margin: 1.5em auto 3em;
}
#user_test .user_test_flow .flow_ttl {
    border: 3px solid #231815;
    border-radius: 5px;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 12px;
    padding: 10px;
}
#user_test .user_test_flow .flow_txt {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-bottom: 34px;
    position: relative;
}
#user_test .user_test_flow .flow_txt .txt {
    margin-bottom: 10px;
}
#user_test .user_test_flow .flow_txt::after {
    background: url(../img/arrw.png) no-repeat center bottom;
    bottom: 0;
    content: '';
    display: inline-block;
    height: 34px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 31px;
}
#user_test .user_test_flow .flow_txt:last-child::after {
    background: none;
}
#user_test .user_test_flow .flow_txt:last-child {
    padding-bottom: 0;
}

#user_test .note {
    background-color: #fff;
    border: 3px solid #3cb4af;
    border-radius: 10px;
    line-height: 1.6;
    margin-top: 40px;
    padding: 25px 10px 15px;
    position: relative;
    z-index: 2;
}
#user_test .note .note_ttl {
    background-color: #3cb4af;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    left: 0;
    line-height: 1.6;
    margin: auto;
    padding: 2px;
    position: absolute;
    right: 0;
    top: -18px;
    width: 250px;
}
#user_test .note .note_lead {
    color: #f08237;
    font-size: 13px;
    line-height: 1.6;
}
#user_test .note .note_txt {
    font-size: 13px;
    line-height: 1.6;
}



@media only screen and (max-width: 1050px) {
    .serviceIndexWrap {
        -ms-flex-pack: distribute;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
    }
    .btn_ellipse {
        letter-spacing: 0;
        padding: 0.6em 1em 0.9em;
    }
    .btnArea {
        padding: 0 2%;
    }
    #service .mainArea .flex-circle {
        -ms-flex-pack: distribute;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 100px auto 0;
        max-width: 1050px;
    }
    #service .mainArea .circle {
        margin: 0 2% 4%;
    }
    #service .mainArea .lead {
        padding: 0 2%;
    }
    #service .w720 {
        padding: 70px 2%;
    }
    #serviceNav ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    aside.area-contact p {
        display: block;
        width: 100%;
    }
    .btn-contact-wrap {
        display: block;
        margin-top: 1em;
        width: 100%;
    }
    .btn-basic.contact {
        display: block;
        padding-top: 0.8em;
        width: 100%;
    }
    #service .w1060 {
        margin: 0 auto;
        max-width: 750px;
        padding: 100px 0 0;
    }
    br.sp{
        display: block;
    }

    br.pc{
        display: none;
    }

    .pro_featureul{
        display: block;
        max-width: 750px;
        width: 100%;
    }

    .pro_featurefukiul{
        display: block;
    }

    .pro_featurefukili{
        background: url("../img/sp_program_fukidashi_002.png") no-repeat center / contain;
        width: 516px;
    }

    .pro_featurefukili:first-child{
        background: url("../img/sp_program_fukidashi_001.png") no-repeat center / contain;
        margin-bottom: 40px;
    }

    .pro_featureli{
        margin-bottom: 18px;
    }

    .program_txtarea {
        background: url("../img/sp_program_mtxt_bg.png") no-repeat center / contain;
        height: 216px;
        padding: 30px 40px;
        width: 521px;
    }

    .program_img{
        margin-bottom: 40px;
    }

    .program_img img{
        max-width: 630px;
        width: 90%;
    }

    .program_depul{
        grid-gap: 24px;
        grid-template-columns: 1fr 1fr;
        max-width: 600px;
    }

    .program_txtarea.program_txtarea--s{
        background: url("../img/sp_program_stxt_bg.png") no-repeat center / contain;
        height: 88px;
        padding: 26px 40px;
        width: 521px;
    }

    .program_dep {
        background: url(../img/program_o_bg.png) no-repeat center / contain;
        color: #fff;
        height: 64px;
        margin: 0 auto;
        margin-bottom: 24px;
        max-width: 247px;
        padding: 25px 20px 20px;
        width: 100%;
    }

    .program_depli {
        height: 74px;
        margin: 0 auto;
        padding: 15px 5px 20px;
        width: 247px;
    }

    .pro_featureh3 {
        margin: 56px auto 20px;
    }

    .w1060 .btn__wrap{
        margin: 100px auto 200px;
        width: 98%;
    }

    .program_deph4{
        font-size: 18px;
    }

.program_dul{
    display: block;
    margin: 0 auto;
}

.program_dli{
    margin:0 auto 40px;
}

.program_dli.men{
    background: url("../img/program_d_m.png") no-repeat center / contain;
}

.program_dli.women{
    background: url("../img/program_d_w.png") no-repeat center / contain;
}

.program_dli span{
    left: 110px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 380px;
}

.program_dli h4{
    color: #fff;
    left: 16px;
    position: absolute;
    text-align: left;
    top: 106px;
    width: 80px;
}



}
@media only screen and (max-width: 750px) {
    #service .w720 .txtBox {
        width: 100%;
    }
    #sec01 .w720:nth-child(odd) div:nth-child(1) {
        -ms-flex-order: 2;
        order: 2;
    }
    #sec01 .w720:nth-child(odd) div:nth-child(2) {
        -ms-flex-order: 1;
        order: 1;
    }
    #sec01 .w720:nth-child(odd) div:nth-child(3) {
        -ms-flex-order: 3;
        order: 3;
    }
    #service .w720 .imgBox {
        margin: 20px auto 0;
    }
    #user_test .innerBox {
        padding: 30px 50px;
    }
}

@media only screen and (max-width: 640px) {
    .spNone {
        display: none;
    }
    #service .mainArea,
    #service #sec01,
    #service #sec03 {
        padding-left: 2%;
        padding-right: 2%;
    }
    .serviceIndexWrap {
        -ms-flex-pack: distribute;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .btn_ellipse {
        letter-spacing: 0;
        padding: 0.6em 1em 0.9em;
    }
    .serviceIndexBox {
        margin-bottom: 20px;
    }
    #service .mainArea .flex-circle {
        -ms-flex-pack: distribute;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #service .mainArea .circle {
        margin-bottom: 20px;
    }
    #serviceNav ul {
        border-top: 1px solid #3cb4af;
    }
    #serviceNav ul li {
        border-bottom: 1px solid #3cb4af;
        padding: 0;
        width: 100%;
    }
    .btn-fall {
        border: none;
        height: 100%;
        padding: 1em 0;
    }
    #publication {
        padding: 2%;
    }
    #service .innerBox img {
        height: auto;
        width: 96%;
    }
    #service .innerBox dl.gameHelp01 dt {
        float: none;
        width: 100%;
    }
    #service .innerBox dl.gameHelp01 dd {
        float: none;
        width: 100%;
    }
    #service .innerBox dl.gameHelp02 dt {
        float: none;
        width: 100%;
    }
    #service .innerBox dl.gameHelp02 dd {
        float: none;
        width: 100%;
    }
}
}
}