/* first_view(title) */
.first_view{
    height: 1030px;
    width: 100%;
    background: url("../image/img-m-kv.png");
    background-repeat: no-repeat;
    background-size: cover;
    left: 0px;
    padding-top: 90px;
}

.first_view > img{
    padding-left: 150px;
    padding-top: 372px;
    width: 288px;
    height: 140px;
    font-size: 20px;
}

.first_view > div{
    color: white;
    font-family: "nanumBarun-gothicBold";
    border: 1px solid white;
    text-align: center;
    position: relative;
    padding: 10px;
    padding-top: 20px;
    font-size: 22px;
    width: 200px;
    height: 30px;
    left:180px;
    top: 45px;
}

/* intro */
.intro{
    height: 1100px;
    width: 100%;
    background-color: #252628;
}

.introWrapper > div:nth-child(1){
    position: absolute;
    color: white;
    text-align: center;
    padding-left: 100px;
    z-index: 3;
}

.introWrapper > div:nth-child(1) > div:nth-child(1){
    font-family: "roboto-bold";
    font-size: 40px;
    padding-bottom: 30px;
}

.introWrapper > div:nth-child(1) > div:nth-child(2){
    font-family: "nanumBarun-gothic";
    font-size: 21px;
}


.introWrapper > div:nth-child(2){
    z-index: 2;
}

.introWrapper > div:nth-child(2) > img:nth-child(1) {
    position: absolute;
    padding-left: 318px;
    padding-top: 250px;
    height: 318px;
    width: 318px;
    z-index: 2;
}

.introWrapper > div:nth-child(2) > img:nth-child(2) {
    position: absolute;
    left: -50px;
    padding-top: 50px;
    height: 318px;
    width: 318px;
    z-index: 2;
}

.introWrapper > div:nth-child(2) > img:nth-child(3) {
    position: absolute;
    padding-left: 400px;
    padding-top: 50px;
    height: 318px;
    width: 318px;
    z-index: 2;
}


.introWrapper > div:nth-child(3){
    position: absolute;
    padding-left: 25px;
    padding-top: 300px;
    text-align: center;
    z-index: 3;
}

.introWrapper > div:nth-child(3) > a > div {
    width: 588px;
    height: 405px;
    background: url("../image/img-m-video-field_1.png");
    background-size: cover;
}

.introWrapper > div:nth-child(3) > a > div > img {
    width: 124px;
    height: 124px;
    padding-top: 150px;
}

/* convenient */
.convenient{
    height: 570px;
    width: 100%;
}

.convenientWrapper{
    position: absolute;
    background-color: #ffffff;
    z-index: 3;
    width: 100%;
}

.convenientWrapper > div:nth-child(1){
    text-align: center;
}


.convenientWrapper > div:nth-child(1) > div:nth-child(1) {
    font-family: "roboto-bold";
    font-size: 50px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.convenientWrapper > div:nth-child(1) > div:nth-child(2) {
    font-family: "nanumBarun-gothic";
    font-size: 21px;
    line-height: 180%;
}

.convenientWrapper > div:nth-child(4){
    position: relative;
    left: 60px;
    width: 100px;
    top: 50px;
}


.convenientWrapper > div:nth-child(4) > img{
    /*position: absolute;*/
    width: 400px;
    height: 400px;
    position: absolute;
    left: 40px;
}


.convenientWrapper > div:nth-child(4) > img:nth-child(1){
    opacity: 1;
}

.convenientWrapper > div:nth-child(4) > img:nth-child(2){
    opacity: 0;
}


.convenientWrapper > div:nth-child(5){
    position: absolute;
    padding-left: 40px;
    padding-top: 130px;
}

.convenientWrapper > div:nth-child(5) > div{
    font-family: "nanumBarun-gothicBold";
    font-size: 26px;
    width: 300px;
    line-height: 170%;
    padding-top: 45px;
    position: absolute;
}

.convenientWrapper > div:nth-child(5) > div:nth-child(1){
    opacity: 1;

}

.convenientWrapper > div:nth-child(5) > div:nth-child(2){
    opacity: 0;
}


.convenientWrapper > div:nth-child(5) > div > p{
    padding-bottom: 90px;
    text-align: right;
    padding-right: 100px;
}




#svgWrapper01, #svgWrapper02{
    position: absolute;
    z-index: 10;
}

.line01, .line02{
    stroke: #000;
    stroke-width: 0.5;
}




/* forceFeedback */
.forceFeedback{
    height: 570px;
    width: 100%;
    background-color: #f0f0f2;
}

.forceFeedbackWrapper > div:nth-child(1) {
    text-align: center;
}

.forceFeedbackWrapper > div:nth-child(1) > div:nth-child(1){
    font-family: "roboto-bold";
    font-size: 50px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.forceFeedbackWrapper > div:nth-child(1) > div:nth-child(2){
    font-family: "nanumBarun-gothic";
    font-size: 21px;
    line-height: 180%;
}

.forceFeedbackWrapper > div:nth-child(2) > img{
    position: absolute;
    height: 586px;
    width: 586px;
    padding-left: 50px;
    padding-top: 50px;
}


.forceFeedbackWrapper > div:nth-child(2) > img:nth-child(1){
    opacity: 1;
}

.forceFeedbackWrapper > div:nth-child(2) > img:nth-child(2){
    opacity: 0;
}

.forceFeedbackWrapper > div:nth-child(3){
    position: absolute;
    padding-left: 25px;
    padding-top: 300px;
    text-align: center;
    z-index: 3;
}

.forceFeedbackWrapper > div:nth-child(3) > a > div{
    width: 588px;
    height: 405px;
    background: url("../image/img-m-video-field_2.png");
    background-size: cover;
}


.forceFeedbackWrapper > div:nth-child(3) > a > div > img{
    width: 124px;
    height: 124px;
    padding-top: 150px;
}

/* vrinteraction */
.vrinteraction{
    width: 100%;
    height: 800px;
    background: linear-gradient(180deg, rgba(0,228,255,1) 0%, rgba(0,132,255,1) 100%); 
}

.vrinteraction > div:nth-child(1){
    text-align: center;
    color: white;
}

.vrinteraction > div:nth-child(1) > div:nth-child(1){
    font-family: "roboto-bold";
    font-size: 50px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.vrinteraction > div:nth-child(1) > div:nth-child(2){
    font-family: "nanumBarun-gothic";
    font-size: 21px;
    line-height: 180%;
}


/* cell number */
.carousel{
    width: 100%;
    height: 100%;
    padding-top: 100px;
}

.previous, .next{
    display: none;
}

.carousel-cell{
    width: 100%;
}

.carousel-cell:nth-child(1){
    background: url('../image/img-m-interaction-01.png');
    background-size: cover;
}

.carousel-cell:nth-child(2){
    background: url('../image/img-m-interaction-02.png');
    background-size: cover;
}

.carousel-cell:nth-child(3){
    background: url('../image/img-m-interaction-03.png');
    background-size: cover;
}

.flickity-page-dots{
    top: 430px;
}

.flickity-page-dots .dot{
    background: rgba(0, 0, 0, 0);
    border: 2px solid white;
    opacity: 1;
    width: 7px !important;
    height: 7px !important;
}

.flickity-page-dots .dot.is-selected{
    background: white;
}

/* biometric */
.biometric{
    width: 100%;
    height: 770px;
}

.biometric > div:nth-child(1){
    text-align: center;
}

.biometric > div:nth-child(1) > div:nth-child(1){
    font-family: "roboto-bold";
    font-size: 50px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.biometric > div:nth-child(1) > div:nth-child(2){
    font-family: "nanumBarun-gothic";
    font-size: 21px;
    line-height: 180%;
}

.biometric > div:nth-child(2) > img{
    height: 245px;
    width: 558px;
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.biometric > div:nth-child(3){
    text-align: center;
    font-family: "nanumBarun-gothicBold";
    font-size: 27.5px;
    color: #868686;
}

/* specification */
.specification{
    width: 100%;
    height: 750px;
    background-color: black;
    color: white;
    margin-bottom: 125px;
}

.specification > div:nth-child(1){
    text-align: center;
}

.specification > div:nth-child(1) > div:nth-child(1){
    font-family: "roboto-bold";
    font-size: 50px;
    padding-top: 100px;
    padding-bottom: 30px;
}

.specification > div:nth-child(1) > div:nth-child(2){
    font-family: "nanumBarun-gothic";
    font-size: 21px;
    line-height: 180%;
}

.specification > div:nth-child(2){
    padding-top: 50px;
}

/* specitificationTable */
.specitificationTable{
    padding-left: 10px;
    border-collapse: collapse;
    width: 90%;
    position: absolute;
}

.specitificationTable> tbody > tr > td:nth-child(1){
    font-family: "nanumBarun-gothicBold";
    line-height: 250%;
    width: 240px;
    font-size: 14px;
    padding-left:35px;
}

.specitificationTable> tbody > tr > td:nth-child(2){
    font-family: "nanumBarun-gothicLight";
    text-align: right;
    line-height: 250%;
    width: 450px;
    font-size: 14px;
    padding-right:35px;
}

.specitificationTable > tbody > tr:nth-child(1){
    border-top: 2px solid;
    border-color: rgba(255, 255, 255, 0.5);;
}

.specitificationTable > tbody > tr:nth-child(n) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.specitificationTable > tbody > tr:last-child {
    border-bottom: 2px solid;
    border-color: rgba(255, 255, 255, 0.5);;
}