/* common */
.subpage { overflow: hidden; position:relative; text-align: center;}
.subpage > section {padding: 90px 0; position: relative; }
/* .subpage > section:nth-of-type(even) {background: #f7f7f7;} */
.sub_inner { max-width: 1600px; width: 100%; margin:0 auto; position: relative; padding:0 50px; }
.sub_tit {margin-bottom: 60px; }
.sub_tit h2::after {content: ''; display: block; width: 101px; height:7px;  background: #32327f; margin:17px auto 0;}
.sub_tit p {margin-top: 40px; }
/* font size */
.fs_55 {font-size: 55px; font-weight: 700; color:#070707; line-height: 1.2; }
.fs_36 {font-size: 36px; font-weight: 700; color:#070707; line-height: 1.3; }
.fs_30 {font-size: 30px; font-weight: 700; color:#070707; line-height: 1.3; }
.fs_27 {font-size: 27px; font-weight: 400; color:#000; line-height: 1.4;}
.fs_26 {font-size: 26px; font-weight: 700; color:#000; line-height: 1.4;}
.fs_24 {font-size: 24px; font-weight: 400; color:#070707; line-height: 1.7; letter-spacing: -.72px;}
.fs_20 {font-size: 20px; font-weight: 400; color:#070707; line-height: 1.7; letter-spacing: -.72px;}
.fs_18 {font-size: 18px; font-weight: 300; color:#333; line-height: 1.7;  }

/*Content CSS*/
#sec1 {padding-bottom: 0;}
.metavers {background: #191919; padding: 150px 0 170px; font-family:'Noto Sans KR'; color:#fff;}
.metavers .top_logo {display: flex; align-items: center ;justify-content: space-between; max-width: 1200px; margin: 0 auto 180px; }

/* product */
.product {margin-bottom: 190px; }
.product h2 {margin: 60px 0 175px;}


/* qna */
.qna_wrap .qna + .qna { margin-top: 150px; }
.qna .question {display: inline-block; width: 520px; padding: 15px 0 20px; border-radius: 37.5px;  border-style: solid; position: relative;
background-image: linear-gradient(to bottom, #2c2c2c, #2c2c2c), linear-gradient(to top, #fafffc, #ffb9b6, #d699c4, #a5dff9, #fdfdff); color:#fff;
letter-spacing: -1.5px; font-weight: 700; font-family:'Noto Sans KR';}
.qna .question::before {content: ""; position: absolute; inset: 0; border-radius: 37.5px; padding: 2px; -webkit-mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: linear-gradient(to right, #fafffc, #ffb9b6, #d699c4, #a5dff9, #fdfdff);}
.qna .question span {color:#f2aaca; }

.qna h3.fs_48 {font-weight: 700; color:#fdfdff; letter-spacing: -2.4px;  font-size: 48px;  font-family:'Noto Sans KR';}
.qna h4.fs_27 {font-weight: 400; color:#fdfdff;line-height: 1.5; letter-spacing: -1.35px;  font-family:'Noto Sans KR';}
.qna p.fs_24 {color:#eee; line-height: 1.5; letter-spacing: -1.2px; font-family:'Noto Sans KR';}
.qna p.fs_18 {color:#eee; line-height: 1.33; letter-spacing: -.9px; font-family:'Noto Sans KR'; font-weight: 500; }

.qna .icon_list {display: flex; flex-wrap: wrap; justify-content:space-between; max-width:890px; margin: 0 auto; }
.qna .icon_list.col2 > li {width: calc(50% - 50px); }
.qna .icon_list.col2 > li:nth-child(n+3) {margin-top: 55px ;}
.qna .icon_list.col3 > li {width: calc(33.3% - 55px); }
.qna .icon_list h4.fs_27 {font-weight: 700; margin: 15px 0 5px;}

.qna .txt_box h4.fs_27 {margin:55px 0 25px;}

/* qna2 */
.qna2 .question {margin-bottom: 90px;}
.qna2 .icon_list {margin-top: 90px; }
.qna2 .icon_cont + .icon_cont {margin-top: 180px; }
.qna2 .icon_box h3 {margin: 50px 0 25px; }

/* qna3 */
.qna3 .box_wrap {max-width: 916px; margin: 90px auto 0;}
.qna3 .box {display: flex; flex-direction: row; border:1.5px solid #f2aaca; }
.qna3 .box_wrap .box:nth-child(2n) {flex-direction: row-reverse;}
.qna3 .box + .box {margin-top: 24px;}
.qna3 .box .txt {width: calc(50% + 7px); padding: 5px 20px 5px 35px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.qna3 .box .txt h5 {color:#f2aaca; font-weight: 700; letter-spacing: -1.35px; margin-bottom: 10px;}
.qna3 .box .txt p {letter-spacing: -1.35px;}

/* contact */
#sec1 .contact {width: 100%; background:url("../img/contact_bg.jpg") 80% 50%/cover no-repeat; padding: 70px 0; margin-top: 155px; text-align: left;}
#sec1 .contact > div {max-width: 1016px; margin: 0 auto; padding: 0 50px; }
#sec1 .contact h3 { color: #fff; background-image: linear-gradient(to right, #fafffc, #ffb9b6, #d699c4, #a5dff9, #fdfdff), linear-gradient(to bottom, #fff, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1.5px; display: inline-block; font-weight: 500; }
#sec1 .contact p {color:#fdfdff; letter-spacing: -1.2px; margin:25px 0 25px; font-weight: 500;}
#sec1 .contact a {display: flex; align-items: center; justify-content: center; width: 181px; height: 50px; border:1.5px solid #fff; font-size: 24px; font-weight: 700;
letter-spacing: -1.2px; color:#fdfdff; line-height: 1.5; transition: all .3s; padding-bottom: 3px;}
#sec1 .contact a i {display: block; width: 12px; height: 22px; background:url("../img/contact_arrow.png") 50%/contain no-repeat; margin-left: 17px; transition: background-image .3s;
position: relative; top:1px;}
#sec1 .contact a:hover {background-color: #fff; color:#000; }
#sec1 .contact a:hover i {background-image: url("../img/contact_arrow_hv.png");}







@media screen and (max-width: 1600px) {
    /* common */
    /* .subpage br:not(.space) {display: none;} */

    /* content */


}

@media screen and (max-width: 1024px) {
    /* common */
    .subpage > section {padding: 70px 0; text-align: center;}
    .sub_inner {padding:0 30px;}
    .sub_tit {display: block; margin-bottom: 40px;}
    .sub_tit h2 {margin: 0;}
    .sub_tit p {margin-top: 30px; }

    /* font size */
    .fs_55 {font-size: 40px; }
    .fs_36 {font-size: 30px;}
    .fs_30 {font-size: 25px;}
    .fs_27 {font-size: 23px; }
    .fs_26 {font-size: 22px; }
    .fs_24 {font-size: 20px; line-height: 1.65;}
    .fs_20 {font-size: 18px; line-height: 1.65;}
    .fs_18 {font-size: 16px;}

    /* content */
    .metavers {padding: 100px 0;}
    .metavers .top_logo {margin: 0 auto 100px;}
    .metavers .top_logo img {max-height: 40px;}
    .product {  margin-bottom: 120px;}
    .product h3 img {width: 180px;}
    .product h2 {margin:50px auto 100px; }
    .product h2 img {width: 550px;}
    .product .img img {width: 500px;}

    .qna_wrap .qna + .qna { margin-top: 130px; }
    .qna .txt_box h4.fs_27 {margin: 40px 0 20px;}

    .qna .icon_list br {display: none;}
    .qna .icon_list.col2 > li {width: calc(50% - 20px);}
    .qna .icon_list.col3 > li {width:calc(33.3% - 20px);}

    /* qna2 */
    .qna2 .question {margin-bottom: 60px;}
    .qna2 .icon_box h3 {font-size: 38px; margin: 40px 0 20px;}
    .qna2 .icon_cont + .icon_cont {margin-top: 100px;}
    .qna2 .icon_list{margin-top: 70px;}

    /* qna3 */
    .qna3 .box_wrap {margin-top: 60px; max-width: 450px;}
    .qna3 .box_wrap br {display: none; }
    .qna3 .box {display: block; }
    .qna3 .box .txt {padding: 20px; width: 100%; text-align: center;}

    /* contact */
    #sec1 .contact {margin-top: 100px; padding: 50px 0; position: relative; z-index: 1; text-align: center;}
    #sec1 .contact::before {content: ''; display: block; width: 100%; height: 100%; z-index: -1; position: absolute; left: 0; top:0; z-index: -1; background: rgba(0,0,0,.4);}
    #sec1 .contact > div {padding: 0 30px;}
    #sec1 .contact p {margin: 20px 0;}
    #sec1 .contact a {margin:0 auto; font-size: 20px; height: 45px; width: 160px;}





}

@media screen and (max-width: 640px) {
    /* common */
    .subpage br:not(.space) {display: none;}
    .subpage > section {padding: 50px 0;}
    .sub_inner {padding:0 20px;}
    .sub_tit h2::after {margin: 12px auto 0; height: 5px; width: 70px;}
    .sub_tit p {margin-top: 20px; }
    /* font size */
    .fs_55 {font-size: 30px; }
    .fs_36 {font-size: 26px;}
    .fs_30 {font-size: 22px;}
    .fs_27 {font-size: 19px; }
    .fs_26 {font-size: 18px; }
    .fs_24 {font-size: 17px; }
    .fs_20 {font-size: 16px; }
    .fs_18 {font-size: 14px;}

    /* content */
    .metavers {padding: 70px 0;}
    .metavers .top_logo {margin: 0 auto 60px;}
    .metavers .top_logo img {max-height:25px;}
    .product {  margin-bottom: 90px;}
    .product h3 img {width: 140px;}
    .product h2 {margin:30px auto 60px; }
    .product h2 img {width: 400px;}
    .product .img img {width: 350px;}

    .qna .txt_box h4.fs_27 { margin: 30px 0 10px;}
    .qna_wrap .qna + .qna {margin-top: 100px;}
    .qna .question {width: 100%; max-width: 360px; padding: 10px 10px 15px; }
    .qna .icon_list i img {width: 80px; }
    .qna .icon_list h4.fs_27 {margin: 10px 0 5px;}
    .qna .icon_list.col2 > li {width: calc(50% - 10px);}
    .qna .icon_list.col2 > li:nth-child(n+3) {margin-top: 30px;}
    .qna .icon_list.col3 > li {width: calc(33.3% - 7px);}
    .qna .icon_list p {font-size: 12px;}
    .qna .icon_list.col3 p {font-size: 11px;}

    /* qna2 */
    .qna2 .question {margin-bottom: 40px;}
    .qna2 .icon_cont + .icon_cont {margin-top: 80px;}
    .qna2 .icon_box h3 { font-size: 30px; margin: 20px 0 10px;}
    .qna .icon_box i {display: inline-block;}
    .qna .icon_box i img {max-width: 80%;}
    .qna2 .icon_list {margin-top: 40px;}

    /* qna3 */
    .qna3 .box_wrap {margin-top: 40px;}
    .qna3 .box .txt {padding: 15px;}
    .qna3 .box + .box {margin-top: 10px;}
    .qna3 .box .txt h5 {margin-bottom: 5px;}

    /* contact */
    #sec1 .contact {background-position:80% 50%; padding: 30px 0;}
    #sec1 .contact::before {background: rgba(0,0,0,.5);}
    #sec1 .contact > div {padding: 0 20px;}
    #sec1 .contact p {margin: 15px 0 20px;}
    #sec1 .contact a {margin:0 auto; font-size: 16px; height: 40px; width: 140px;}
    #sec1 .contact a i {width: 8px; margin-left: 10px; top:2px;}


}