@charset "utf-8";

.experience-wrap{width:1280px;margin:0 auto;}
.half{width:50%;}
/* video */
.experience #video1 {position: relative;background: #000;width: 50%; float: right; height: 360px; margin:94px auto 0 auto;}
.experience #video1 img, #video1 iframe { display: block;width:100%; }
.experience #play {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;background: url('../../images/play-button.png')no-repeat 50% 50%;background-size: auto, cover;z-index: 9999;transition: .4s}
.experience #play:hover { background-color: rgba(0,0,0,0.2) !important;  transition: .4s}

.experience .wrapB {width: 1280px;}
.experience .experience-video-wrap{padding:100px 0; text-align: center; background-color:rgba(27,147,230,0.1);}
.experience .experience-top h3{font-size:1.667em;}
.experience .experience-top p{font-size:1.267em;}
.experience h3 {margin-bottom: 15px; font-size:1.267em;}
.experience p {font-size: 1.067em;}
.experience .imgWrap {margin:50px 0; text-align: center; width: 100%; float:left;}
.experience .imgWrap img {max-width: 100%}
.experience .imgWrap img.environment7 {width: 336px;}
.experience  img.environment8 {width: 100%;}
.experience  img.environment9 {width: 100%;}
.experience .imgWrap img + p {width: 100%; float:right; text-align: right; margin-top: 20px; font-size: 1em;}
.experience .apply-inner {
    width: 49%;
    float: left;
}
.experience .apply1 .flexGender .inputTxt {
    text-align: left;
}
.experience .apply1 .applyForm input,
.experience .apply1 .applyForm select, 
.experience .apply1 .applyTxt textarea,
.experience .apply1 .flexGender input[type="radio"] + label span {
    background-color: #fff;    
}
.experience .apply1 .flexGender input[type="radio"]:checked + label span {
    background-color: #00aeef;
}
.experience .apply1 .applyForm input.applyBtn {
    background-color: #00AEEF;
}
.experience .apply1 .applyTxt textarea {
    width: 93%;
    height: 217px;
}
.experience .apply1 .agree {
    text-align: left
}
.experience .product-slider {
    margin-top: 100px;
}
.experience .product-slider .wrapB {
    width: 870px;
}
.experience .product-slider .d img {
    width: 352px;
    margin: 0 auto;
    margin-top: 60px;
}
.experience .product-slider .t img {
    width: 241px;
    margin: 0 auto;
    margin-top: 40px;
}
.experience .product-slider .left,
.experience .product-slider .right {
    width: 50%;
    float: left;
}
.experience .product-slider .right .tag span {
    color: #00AEEF;
    border: 1px solid #00AEEF;
    padding: 0 13px;
    margin-right: 5px;
    font-size: 0.8em;
    height: 28px;
    line-height: 28px;
    display: inline-block;
}
.experience .product-slider .right h2 {
    font-size: 1.467em;
    font-weight: 600;
    margin: 10px 0;
    line-height: 1.3em;
}
.experience .product-slider .right h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px
}
.experience .product-slider .right li {
    margin-bottom: 5px;
}
.experience .product-slider .right .goBtn {
    font-size: 1em;
    padding: 8px 23px;
    margin-top: 40px;
    margin-bottom: 5px;
}
.experience .bx-wrapper .bx-controls-direction a {
    background-image: url(../../images/arrowL.png);
    width: 28px;
    height: 55px;
    background-size: cover;
    background-position: center center;
}
.experience .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -30px;
}
.experience .bx-wrapper .bx-controls-direction a.bx-next {
    transform: rotate(180deg);
    right: -50px;
}

.experience .experience-detail-padding{padding:17px 0 78px 0;}
.experience .experience-detail{margin-top:54px;}
.experience .experience-detail h3{margin-top:33px;}
.experience .experience-detail .text-right{padding-left:67px; width:calc(50% - 67px);}
.experience .experience-detail .line-wrap{width:55%;margin:0 auto; position: relative;}
.experience .experience-detail .line-wrap svg{display:block;vertical-align: middle;}
.experience .experience-detail .line-wrap svg path{transition:.2s;}
.experience .experience-detail .line-wrap svg:before,
.experience .experience-detail .line-wrap svg:after,
.experience .experience-detail .line-wrap svg path:before,
.experience .experience-detail .line-wrap svg path:after{
    box-sizing:border-box
}
.experience .experience-detail .line-wrap svg:nth-child(1){margin:0;padding:0;}
.experience .experience-detail .line-wrap svg:nth-child(2){top:0;left:0;position:absolute;z-index:-1}
.experience .experience-detail #line3,
.experience .experience-detail #line3 svg,
.experience .experience-detail #line4,
.experience .experience-detail #line4 svg{height:150px;}
.experience .back-gray{background-color:#FAFAFA;}
.experience .reference{font-size:0.933em;}
.experience .image-border{box-shadow: 0 0 1px 0 rgba(112,112,112,0.3);}
.experience .back-color{background-color:rgba(225,244,251,1);}
.experience .text-line{border:1px solid rgba(112,112,112,0.3);width:140px;margin:43px 0 40px 0;}
#flexTrial {margin-top: 90px;}
#flexTrial h4 {margin-bottom: 30px; font-size:1.2em;}
#flexTrial .c30 {width: 32%;}
#flexTrial .c30:nth-child(2) {margin: 0 9px}
#flexTrial .c30 h5 { margin: 30px 0 0 0;font-size:1em;}
#flexTrial .c30 p {font-size: 1em; margin-bottom: 28px;}
/*#flexTrial .c30:nth-child(2) p {margin-bottom: 0}*/
#flexTrial .c30:nth-child(3) p {margin-bottom: 28px;}
#flexTrial .deviceLink {width: 100%;float: left;margin: 20px 0; text-align: center}
#flexTrial .deviceLink a {background: #999;width: 235px;border-radius: 5px;margin-bottom: 5px;float: left;color: #fff;padding: 10px 20px;}
#flexTrial .applyBtn {margin: 30px 0 0 0;}
#flexTrial .applyBtn a{background: #003b61;color: #fff;width: 100%;float: left;border-radius: 5px;text-align: center;padding: 12px 0;}
#flexTrial .applyBtn span {font-size: 0.8em;}

.applyForm .radio {width: 100%; float:left; margin-left: 0}
.applyForm .radio:first-of-type {margin-bottom: 10px}
.applyForm .flexCenter select {margin-bottom: 0; cursor: pointer;}
.applyForm .c60 {margin-bottom: 0}
.applyForm input {box-sizing: border-box; width: 100%}
.applyForm input.applyName {width: 100%}
.applyForm input.contact {padding-left: 80px}
.applyForm input.addr {padding-left: 95px}
.applyForm .form50 {width: 49%; float:left;}
.applyForm .form50 .c60 {width: 100%; }
.applyForm .form50 .inputTxt {font-size: .8em;}
.applyForm .form50:nth-of-type(odd) {width: 49%; float: right;}
/* 테블릿 */
@media (max-width: 1024px) {
    /*.experience {padding-top: 60px;}*/
}

/*모바일*/
@media (max-width: 800px) {

    .experience-wrap{width:90%;padding: 0 5%;}
    .experience .experience-detail .half{width:100%;}
    .experience .experience-video-wrap{padding: 100px 0 50px 0;}
    .experience .experience-detail:nth-child(1) .left{float:right;}
    .experience .experience-detail:nth-child(1) .right{float:right;}
    .experience .experience-detail:nth-child(1){margin-top:50px;}
    .experience .imgWrap{margin:30px 0;}
    .experience .experience-detail{margin-top:0;}
    .experience .back-gray{padding:30px 0;}
    .experience .reference{margin-bottom:10px;}
    .experience #video1 {width: 100%; height: 388px; margin: 40px 0 48px 0}
    .experience #video1 img, #video1 iframe {width: 100%;}

    #flexTrial h4 {margin-bottom: 20px;}
    #flexTrial .deviceLink {width:100%; margin: 0 auto; float: left; margin-top: 20px;}
    #flexTrial .deviceLink a {width: 82%;}
    #flexTrial .c30 {text-align: center;}
    #flexTrial .c30 img {width: 100%}
    #flexTrial .c30:nth-child(2) {margin: 0 13px; margin-bottom: 50px;}
    
    .experience .experience-top p {
        font-size: 1.067em;
    }
    .experience .wrapB, .experience .product-slider .wrapB {
        width: 90%;
    }
    .experience .apply-inner {
        width: 100%;
    }
    .experience .apply1 .applyForm label {
        left: 5%;
    }
    .experience .apply1 .applyTxt textarea {
        width: calc(100% - 40px);
    }
    .experience #video1 {
        margin-top: 0;
    }
    .experience .product-slider .left, 
    .experience .product-slider .right {
        width: 100%;
        margin: 0;
    }
    .experience .product-slider .d img {
        width: 75%;
        margin: 0 auto;
    }
    .experience .product-slider .t img {
        width: 50%;
        margin: 0 auto;
    }
    .experience .product-slider {
        margin-top: 50px;
    }
    .experience .bx-wrapper .bx-controls-direction a {
        top: 13%;
    }
    .experience .bx-wrapper .bx-controls-direction a.bx-prev {
        left: 0;
    }
    .experience .bx-wrapper .bx-controls-direction a.bx-next {
        right: 0;
    }
    .apply1 .innerTitle h3 {margin-bottom: 5px;}
    .apply1 .innerTitle span:last-child {
        width: 100%;
        text-align: left;
    }

}

/*모바일*/
@media (max-width: 420px) {
    .experience #video1 {width: 100%; height: auto; }
    .experience #video1 {margin: 40px 0 28px 0;}
    .experience #video1 img, .experience #video1 iframe {width: 100%; height: auto;}

    #flexTrial .c30 {width: 100%; margin-bottom: 50px}

    #flexTrial .applyBtn {margin: 0}
    #flexTrial .c30 img {width: auto;}
    #flexTrial .deviceLink a {width: 90%;padding: 10px 5%;}
    #flexTrial .c30:nth-child(2) {margin: 0 0 50px 0;}
    #flexTrial .c30:nth-child(3) p {margin-bottom: 0;}

    .applyForm input.applyName {width: 70%; padding:10px}
    .applyForm .form50 {width: 100%; float:left;}
    .applyForm .form50:nth-of-type(odd) {width: 100%; float:left;}
    .applyForm .flexGender {margin-bottom: 30px;}
    .applyForm .flexGender .inputTxt {padding: 0;}
    .apply .innerTitle {margin-top: 50px}
}