.toolspec,
.visualinfo {
    padding: 10px
}

.subvisual .visualwrap,
.toolinfo ul,
.visualinfo {
    display: flex
}

.curriculum .ccwrap ul>li:hover>span,
.subvisual {
    background-color: #232323
}

.apply::before,
.subvisual::before {
    content: '';
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.apply::before,
.subvisual,
.subvisual::before {
    background-repeat: no-repeat;
    text-align: left;
}

.apply li>div,
.goalwhy li:hover>div,
.goalwhy li>div {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

.apply li .apptxt,
.mrcgood li,
.toolinfo li,
.toolspec dt,
.toolspec summary{
    text-align: center
}

.apply>*,
.subvisual>* {
    position: relative;
    z-index: 10
}

/* visual */
.subvisual::before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .1
}

.driving .subvisual::before {background-image: url(../img/sub_driving/visual.jpg)}
.farm .subvisual::before {background-image: url(../img/sub_farm/visual.jpg)}
.printer .subvisual::before {background-image: url(../img/sub_printer/visual.jpg)}
.arduino .subvisual::before {background-image: url(../img/sub_arduino/visual.jpg)}
.visualtit>span,
.visualtxt .baedge>* {
    display: inline-block
}

.subvisual .visualwrap>li {
    width: 50%
}
.visualinfo {
    flex-direction: column;
    justify-content: space-between;
    min-width: 500px
}

.visualimg {
    position: relative;
}
.visualimg .ratioImg {
    padding-bottom: 66%;
    border: 1px solid rgba(255, 255, 255, .2)
}
.visualimg a{position: relative; display: block;}
.visualimg a svg{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80px; transition: .2s ease-in-out;}
.visualimg a svg .squre{fill: #f00; transition: .2 ease-in-out;}
.visualimg a svg .triangle{fill: #fff;}
.visualimg a:hover .squre{fill: #f20;}
.visualtit>span {
    color: #fff
}

.visualbtn {
    padding-top: 10px
}

.visualbtn .btn {
    width: 100%;
    font-weight: 800;
    text-align: center;
    border: 1px solid #232323;
    border-radius: 4px;
    background-color: #375fcd
}

.visualbtn .btn:hover {
    border: #375fcd
}

.visualtxt .baedge {
    padding-bottom: 2px
}

.visualtxt .baedge>* {
    color: #090909;
    background-color: #eee;
    padding: 4px 12px;
    border-radius: 4px;
    margin-right: 8px
}
@media (min-width:1081px){
    .visualimg {padding: 10px;}
    .visualimg .ratioImg {border-radius: 10px;}
}
@media (max-width:1080px) {
    .visualimg .ratioImg {border-radius: 10px 10px 0 0;}
    .visualinfo {
        padding: 30px;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 0 0 10px 10px;
        background-color: rgba(0, 0, 0, .8)
    }
    .visualbtn .btn {max-width: none;}
}

@media (max-width:1080px) and (min-width:501px) {
    .subvisual .visualwrap{flex-direction: column;}
    .subvisual .visualwrap>li {
        width: 70%; min-width: 460px;
        margin: auto
    }
}

@media (max-width:800px) {
    .subvisual {
        background-size: 80%
    }
    .subvisual .visualwrap {
        flex-direction: column
    }


    .visualinfo {
        min-width: auto;
        padding: 20px
    }

    .visualtxt .baedge>* {
        padding: 3px 6px;
        margin-right: 0
    }
}
@media (max-width:500px) {
    .subvisual .visualwrap>li {
        width: 100%
    }
}

/* visual */



.curriculum .btn,
.curriculum .ccwrap ul>li::before,
.curriculum .ccwrap span {
    background-color: #414b57;
    transition: .3s ease-in-out
}

.visualtxt .visualtit {
    margin: 4px 0 0
}

.kdtabpc li:hover>a,
.toolinfo,
.toolspec dl:hover dd,
.visualtxt .baedge> :hover {
    background-color: #f9f9f9
}

.visualtxt .visualcopy {
    color: #fff;
    padding-top: 6px
}

.visualtxt .visualcopy p {
    position: relative;
    padding-bottom: 4px;
    padding-left: 118px;
    font-weight: 500
}

.apply li .apptit{padding-bottom: 10px;}
.goalwhy li h5{padding-bottom: 4px;}
.price {
    border-top: 1px solid #414b57;
    margin-top: 10px; padding-top: 10px; padding-bottom: 10px;
}
.originP {color: #aaa;}
.originP>span {text-decoration: line-through}
.selfP{color: #fff;}
@media (min-width:441px){
    .price {position: relative; padding-left: 118px;}
    .originP{position: absolute; left: 0; top: 12px;}
}
.visualtxt .visualcopy p>span {
    position: absolute;
    left: 0;
    color: #ddd;
    font-weight: 400
}
.visualtxt .visualcopy p .difficult{
    display: inline-flex; align-items: center; height: 20px;
    border: 2px solid #c5e5ff; border-radius: 4px; padding: 4px;
}
.visualtxt .visualcopy p .difficult>span{
    width: 20px; height: 10px; margin: 1px;
    border: 1px solid transparent; border-radius: 2px;
}
.visualtxt .visualcopy p .difficult.lv3>span:nth-child(1),
.visualtxt .visualcopy p .difficult.lv3>span:nth-child(2),
.visualtxt .visualcopy p .difficult.lv3>span:nth-child(3){background-color: #c5e5ff;}
.visualtxt .visualcopy p .difficult.lv2>span:nth-child(1),
.visualtxt .visualcopy p .difficult.lv2>span:nth-child(2){background-color: #c5e5ff;}
.visualtxt .visualcopy p .difficult.lv1>span:nth-child(1){background-color: #c5e5ff;}
.apply,
.curriculum .ccwrap,
.curriculum .ccwrap ul,
.curriculum .ccwrap ul>li,
.kdtabpc ul,
.toolspec summary {
    position: relative
}


.apply .title,
.goal .title,
.saleP {
    color: #fff
}

.saleP>span {
    font-size: 2em; font-weight: 600;
    color: #f06100; line-height: 1;
}


.goal {
    background-color: #090909
}

.goalwhy li>div {
    width: 100%;
    max-width: 900px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 15px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, .1);
    overflow: hidden;
    transition: .3s ease-in-out
}

.goalwhy li:hover>div {
    transform: translateY(-5px)
}

.goalwhy li>div>.goalimg{
    width: 100%
}
.goalwhy li>div>.goalimg>.ratioImg{padding-bottom: 66%;}
.goalwhy li>div>.goaltxt,
.toolspec dd {
    flex: 1;
    text-align: left;
}

.goalwhy li h5,
.goalwhy li p {
    margin: 6px 0; line-height: 1.2;
}

@media (min-width:901px) {
    .goalwhy li {width: 100%;padding: 20px}
    .goalwhy li>div {display: flex;align-items: center}
    .goalwhy li:nth-child(odd)>div {flex-direction: row}
    .goalwhy li:nth-child(2n)>div {flex-direction: row-reverse}
    .goalwhy li>div>.goalimg {max-width: 360px}
    .goalwhy li>div>.goaltxt {padding: 40px}
}

@media (max-width:900px) {
    .goal .goalwhy {display: flex}
    .goalwhy li {width: 50%;padding: 10px}
    .goalwhy li>div>.goaltxt {padding: 20px; min-height: 220px;}
}

.curriculum .ccwrap details {
    max-width: 900px;
    border: 1px solid #ddd; border-radius: 15px;
    padding: 10px 0; margin: 0 auto 10px;
    transition: .3s ease-in-out
}

.curriculum .ccwrap details:hover,
.curriculum .ccwrap details[open] {
    background-color: #f9f9f9;
    border-color: #aaa
}
.curriculum .ccwrap details>.cctit {
    position: relative;
    display: flex;
    padding: 12px 0 12px 50px;
    cursor: pointer;
    font-weight: 600
}

.curriculum .ccwrap details>.cctit>span {
    position: absolute; right: 0;
    display: flex; align-items: center;
    font-weight: 600
}

.curriculum .ccwrap ul:before { content: '';
    position: absolute; left: 32px; top: -20px; bottom: 20px;
    width: 1px;
    background-color: #aaa
}

.curriculum .ccwrap ul>li {
    color: #414b57;
    padding: 8px 50px;
    transition: .3s ease-in-out;
    text-align: left;
}

.curriculum .ccwrap ul>li::before { content: '';
    position: absolute; left: 24px; top: 13px; width: 9px; height: 9px;
    border: 4px solid #f9f9f9; border-radius: 50%
}

.curriculum .ccwrap ul>li:hover,
.kdtabpc li.kdtab5.on>a,
.toolspec dl:hover dt {background-color: #eee}
.curriculum .ccwrap details[open] ul>li::before {border-color: #f9f9f9}
.curriculum .ccwrap details[open] ul>li:hover:before {border-color: #eee}
.curriculum .ccwrap span {
    position: absolute;right: 20px;top: 50%; transform: translateY(-50%);
    color: #fff;font-size: .8em;
    padding: 0 6px;
    border-radius: 4px
}

.curriculum .ccwrap svg {
    position: absolute;left: 20px;
    background-color: #fff;
    border: 2px solid #414b57;
    z-index: 10
}

.curriculum .ccwrap details[open] svg {
    transform: rotateX(180deg)
}
.curriculum .ccwrap details.not>.cctit{cursor: not-allowed;}
.curriculum .ccwrap details.not svg{opacity: .3;}

.curriculum .btn {
    border: 1px solid #414b57;
    margin-top: 0;
    border-radius: 8px;
        max-width:900px;
}

@media (max-width:400px) {
    .curriculum .ccwrap details>.cctit>span {
        display: none
    }
}

.curriculum .cctab {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-bottom: 1px solid #aaa
}

.curriculum .cctab button {
    font-size: 1.2em;
    padding: 10px 30px;
    margin-bottom: -1px;
    border: 1px solid #aaa;
    transition: .3s ease-in-out .3s
}

.apply li>div,
.mrcgood li>div,
.toolspec dd,
.toolspec dt,
.toolspec summary,
.toolspec>div{
    transition: .3s ease-in-out
}

.apply {
    overflow: hidden;
    background-color: #090909
}

.apply::before {
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: 0
}

.driving .apply::before,
.python .apply::before {
    background-image: url(../img/sub_driving/apply.png);
    opacity: .6
}
.printer .apply::before {
    background-image: url(../img/sub_printer/apply.jpg);
    opacity: .2
}

.apply ul {
    display: flex;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto
}

.apply li {
    width: 100%;
    max-width: 400px;
    padding: 10px
}

.apply li:hover>div {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    transform: translateY(-5px)
}

.apply li .ratioImg {
    border-radius: 10px 10px 0 0;
    border: 1px solid #eee;
    padding-bottom: 66%;
}

.apply li .apptxt {
    border-radius: 0 0 10px 10px;
    padding: 20px;
    background-color: #fff
}

@media (max-width:820px) {
    .apply ul {
        flex-wrap: wrap
    }
}

.mrcgood ul {
    display: flex;
    flex-wrap: wrap
}

.mrcgood .col_2 li {
    width: calc(100% / 2);
}

.mrcgood li {
    width: calc(100% / 3);
    padding: 10px
}

.mrcgood li>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    background-color: #c5e5ff
}

.mrcgood li:hover>div {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
    transform: translateY(-5px)
}

@media (min-width:1000px) {
    .mrcgood li>div {
        height: 160px
    }
}

@media (max-width:1000px) {
    .mrcgood li {
        width: 100%;
        padding: 10px 0
    }

    .mrcgood li>div {
        max-width: 600px;
        padding: 30px 20px;
        margin: 0 auto
    }

    .mrcgood li>div>p {
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .1)
    }
}


.toolinfo li {
    width: 100%;
    padding: 10px
}
.toolinfo li>div {
    width: 100%
}
.toolinfo li>.toolimg {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
    transition: .3s ease-in-out
}

.toolinfo li>.toolimg:hover,
.toolspec:hover>div {
    border-color: #aaa
}

.toolinfo li>div .ratioImg {
    padding-bottom: 60%;
    background-size: contain
}
.arduino .toolinfo li>div .ratioImg{padding-bottom: 50%;}
.toolspec summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 10px;
    background-color: #fff;
    cursor: pointer
}

.toolspec[open] summary {
    background-color: #f9f9f9;
    border-radius: 8px 8px 0 0
}

.toolspec:not([open]):hover summary {
    background-color: #eee;
    border-color: #aaa
}

.toolspec[open]:hover summary {
    background-color: #eee;
    border-top-color: #aaa;
    border-right-color: #aaa;
    border-left-color: #aaa
}

.toolspec summary>span {
    display: flex;
    align-items: center;
    font-weight: 600;
    border-radius: 100px;
    margin-top: 1px;
    margin-bottom: -1px
}

.toolspec[open] summary>span {
    transform: rotate(180deg)
}

.toolspec>div {
    display: flex;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-top-width: 0
}

.toolspec>div>div {
    display: flex;
    flex-direction: column
}

.toolspec dl {
    display: flex;
    flex: 1;
    width: 100%;
    border-top: 1px solid #ddd
}

.toolspec dl:first-child {
    border-top: none
}

.toolspec dd,
.toolspec dt {
    padding: 20px;
    background-color: #fff
}

.toolspec dt {
    width: 160px;
    background-color: #f9f9f9
}

@media (min-width:801px) {
    .curriculum .cctab button {
        margin-right: -1px
    }

    .curriculum .cctab button:last-child {
        margin-right: 0
    }

    .toolspec>div>div {
        width: 100%;
        border-right: 1px solid #ddd
    }

    .toolspec>div>div:last-child {
        border-right: none
    }
}

@media (max-width:800px) {

    .ccwrap svg,
    .curriculum .ccwrap svg {
        left: 10px
    }

    .curriculum .ccwrap details>.cctit,
    .curriculum .ccwrap ul>li {
        padding-left: 40px
    }

    .curriculum .ccwrap ul:before {
        left: 22px
    }

    .curriculum .ccwrap ul>li::before {
        left: 14px
    }

    .curriculum .ccwrap span {
        right: 10px
    }

    .curriculum .cctab button {
        margin-bottom: -1px
    }

    .curriculum .cctab button:last-child {
        margin-bottom: 0
    }

    .toolspec>div {
        flex-direction: column
    }
}

@media (max-width:600px) {
    .goal .goalwhy,
    .toolinfo ul {
        flex-direction: column
    }

    .goalwhy li {
        width: 100%;
    }

    .toolinfo li,
    .toolspec {
        padding: 5px 0
    }
    .mrcgood .col_2 li {
        width: calc(100% / 1);
    }
}

@media (max-width:480px) {
    .toolspec dt {
        width: 60px;
        padding: 10px 0
    }

    .toolspec dd {
        overflow-x: auto;
        padding: 10px 4px
    }
}

.kdtabpc {
    border-bottom: 1px solid #aaa
}

.kdtabpc ul {
    display: flex;
    max-width: 1200px;
    padding: 0 40px;
    margin: -45px auto -1px;
    z-index: 10
}

.kdtabpc li>a {
    display: inline-block;
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid #aaa;
    border-radius: 15px 15px 0 0;
    background-color: #f9f9f9
}

.kdtabpc li {
    margin-right: -1px
}

.kdtabpc li.on>a {
    border-bottom-color: transparent
}

.kdtabpc li.on>a,
.kdtabpc li:hover>a {
    padding-bottom: 15px;
    margin-top: -5px
}

.kdtabpc li.kdtab1.on>a {
    background-color: #090909;
    color: #fff
}

.kdtabpc li.kdtab2.on>a,
.kdtabpc li.kdtab4.on>a,
.kdtabpc li.kdtab6.on>a {
    background-color: #fff
}

.kdtabpc li.kdtab3.on>a {
    background-color: #1d1f21;
    color: #fff
}



.modal {
    display: none; justify-content: center; align-items: center;
    position: fixed; z-index: 2000; left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: fixed; left: 50%; top:80px; transform: translateX(-50%);
    width: 100%; height: calc(100% - 80px); max-width:600px;
    margin: auto;
    background-color: #fff;
}

@media (min-width:700px){
    .modal-content {max-height: 740px;border-radius: 8px 8px 0 0;bottom: 0;}
}
.modal-tit{
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 15px; border-bottom: 1px solid #ddd;
}
.close {color: #aaa;font-size: 28px;font-weight: bold;}
.close:hover,
.close:focus {color: black;text-decoration: none;cursor: pointer;}
.modal iframe{ width: 100%; height: 100%; border: none;}
.openModal {cursor:pointer;}



.officeAuto .goal{background-color: #f9f9f9;}
.officeAuto .goal .title{color: #1d1f21;}
.officeAuto .goalwhy li>div{color: #1d1f21;}