/*css reset*/
*{ margin:0; padding:0;}
ul,ol,li { list-style:none;}
a { text-decoration:none;}
img,video { vertical-align:top;}
body {line-height:1; font-size:13px; font-family: 'Comfortaa', cursive;}

/* 데스크탑 헤더 영역 */
header {position: absolute; 
        left: 0; top: 0;
        width: 100%; 
        display: flex;
        justify-content: center;}

header .row {width: 60%; 
             display: flex; 
             justify-content: space-between; 
             align-items: center}

header .row .gnb {display: flex;}
header .row .gnb li {line-height: 92px; margin: 0 15px; position: relative;}
header .row .gnb li::after {content: ""; display: block; 
                            width: 0%; height: 2px; 
                            background: #feaaa1; 
                            position: absolute; 
                            bottom: 25px; left: 50%; 
                            transform: translateX(-50%);
                            transition: all 0.3s;}
header .row .gnb li:hover::after {width: 100%;}
header .row .gnb li a {color: #fff; font-size: 0.78125vw; font-weight: bold;}
header .row .gnb li:hover a {color: #feaaa1;}
header .row .invite {width: 14%; height: 42px; 
                     border-radius: 25px;
                     background: linear-gradient(270deg, rgba(246,106,140,1) 0%, rgba(255,174,41,1) 100%);
                     line-height: 42px;
                     color: #fff;
                     border: 2px solid #fff;
                     font-size: 0.78125vw;
                     font-weight: bold;
                     text-align: center;}
header .row .invite:hover {background: linear-gradient(270deg, rgba(246,106,140,0) 0%, rgba(255,174,41,0) 100%);}
header .row .m-btn {display: none;}
/* 데스크탑 헤더 영역 끝 */

/* 데스크탑 중간 영역 시작 */
.cont1 {height: 100vh; 
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../img/bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;}

.cont1 .row {width: 60%; 
             display: flex; 
             justify-content: space-between; 
             align-items: center}
                
.cont1 .text_box {width: 50%; }
.cont1 .text_box h2 {color: #fff; 
                     font-size: 1.7187500000000002vw; 
                     line-height: 58px; 
                     margin-bottom: 5px;}
.cont1 .text_box p {color: #fff; 
                    font-size: 0.78125vw;
                    line-height: 25px; 
                    margin-bottom: 26px;}
.cont1 .text_box a {width: 28%; height: 42px; 
                    display: block;
                    border-radius: 25px;
                    background: linear-gradient(270deg, rgba(246,106,140,1) 0%, rgba(255,174,41,1) 100%);
                    line-height: 42px;
                    color: #fff;
                    border: 2px solid #fff;
                    font-size: 0.78125vw;
                    font-weight: bold;
                    text-align: center;}
.cont1 .text_box a:hover {background: linear-gradient(270deg, rgba(246,106,140,0) 0%, rgba(255,174,41,0) 100%);}

.cont2 {background: rgb(253, 245, 245); display: flex; justify-content: center;}
.cont2 .row {width: 60%;}
.cont2 .c2-top {width: 49%;}
.cont2 .c2-top h3 {font-size: 1.40625vw; margin:60px 0 23px; color: #555;}
.cont2 .c2-top p {font-size: 0.78125vw; 
                  line-height: 25px; 
                  margin-bottom: 50px; 
                  color: #777;}
.cont2 .c2-bot {display: flex; justify-content: space-between;}
.cont2 .c2-bot .icon-box {width: calc( 100% / 3 - 28px ); }
.cont2 .c2-bot .icon-box .g-bg {width: 72px; height: 72px;
                                border-radius: 50%;
                                background: linear-gradient(284deg, rgba(246,106,140,1) 0%, rgba(255,174,41,1) 100%);
                                position: relative;}
.cont2 .c2-bot .icon-box i {color:#fff; 
                            font-size: 1.8229166666666667vw;
                            position: absolute; 
                            left: 50%; top: 50%; 
                            transform: translate(-50%,-50%);}
.cont2 .c2-bot .icon-box h4 {font-size: 0.9375vw; margin: 30px 0; color: #555;}
.cont2 .c2-bot .icon-box:hover h4 {color: rgb(255, 110, 110);}
.cont2 .c2-bot .icon-box p {font-size: 0.78125vw; 
                            line-height: 25px; 
                            margin-bottom: 50px; 
                            color: #777;}

.cont3 {display: flex; justify-content: center;}
.cont3 .row {width: 60%;}
.cont3 .c3-top {width: 49%;}
.cont3 .c3-top h3 {font-size: 1.40625vw; margin:60px 0 23px; color: #555;}
.cont3 .c3-top p {font-size: 0.78125vw; 
                  line-height: 25px; 
                  margin-bottom: 50px; 
                  color: #777;}
.cont3 .c3-bot {display: flex; justify-content: space-between;}
.cont3 .c3-bot .img-box {width: 24%; border-radius: 8px; overflow: hidden; margin-bottom: 50px;}
.cont3 .c3-bot .img-box .img-wrap {width: 100%; height: 230px; overflow: hidden;}
.cont3 .c3-bot .img-box img {width: 100%; height: 100%; transition: all 0.5s; }
.cont3 .c3-bot .img-box:hover img {transform: scale(1.1);}
.cont3 .c3-bot .img-box .c-box {padding: 30px 22px 20px 20px; position: relative;}
.cont3 .c3-bot .img-box .c-box .bg {width: 100%; height: 100%; 
                                    background: rgba(255, 220, 220, 0.2); 
                                    position: absolute; 
                                    top: 50%; left: 50%; 
                                    transform: translate(-50%,-50%);
                                    opacity: 0;}
.cont3 .c3-bot .img-box:hover .c-box .bg {opacity: 1;}
.cont3 .c3-bot .img-box .c-box span {font-size: 0.625vw; color: #777;}
.cont3 .c3-bot .img-box .c-box h5 {font-size: 0.8333333333333334vw; line-height: 21px; margin: 18px 0; color: #555;}
.cont3 .c3-bot .img-box .c-box p {font-size: 0.6770833333333334vw; line-height: 20px; color: #777;}
/* 데스크탑 중간 영역 끝 */

/* 데스크탑 풋터 영역 시작 */
footer {background: rgb(54, 55, 80); display: flex; justify-content: center;}
footer .row {width: 60%; display: flex; justify-content: space-between; align-items: center;}
footer .f1 img {margin: 50px 0 50px;}
footer .f1 .sns i {color: #fff; font-size: 1.1458333333333333vw; margin:0 10px 60px 0;}
footer .f1 .sns i:hover {color: #feaaa1;}

footer .f2 li {font-size: 0.78125vw; line-height: 33px;}
footer .f2 li a {color: #ccc;}
footer .f2 li:hover a {color: #fff;}

footer .f4 a {width: 90%; height: 42px; 
              display: block;
              border-radius: 25px;
              background: linear-gradient(270deg, rgba(246,106,140,1) 0%, rgba(255,174,41,1) 100%);
              line-height: 42px;
              color: #fff;
              border: 2px solid #fff;
              font-size: 0.78125vw;
              font-weight: bold;
              text-align: center;
              margin-bottom: 40px;}
footer .f4 a:hover {background: linear-gradient(270deg, rgba(246,106,140,0) 0%, rgba(255,174,41,0) 100%);}
footer .f4 p {color: #ccc; font-size: 0.78125vw;}
/* 데스크탑 풋터 영역 끝 */

@media screen and (max-width:1130px)
{
        /* 1130 이하 헤더 영역 */
        header .row {width: 95%;}
        header .row .gnb li a {font-size: 1.3274336283185841vw;}
        header .row .invite {width: 15%; font-size: 1.3274336283185841vw;}

        /* 1130 이하 헤더 영역 끝 */

        /* 1130 이하 중간 영역 시작 */
        .cont1 {height: 700px;}
        .cont1 .row {width: 95%;}               
        .cont1 .text_box {width: 50%;}
        .cont1 .text_box h2 {font-size: 2.920353982300885vw;}
        .cont1 .text_box p {font-size: 1.3274336283185841vw;}
        .cont1 .text_box a {width: 30%; font-size: 1.3274336283185841vw;}

        .cont2 .row {width: 95%;}
        .cont2 .c2-top h3 {font-size: 2.3893805309734515vw;}
        .cont2 .c2-top p {font-size: 1.3274336283185841vw;}
        .cont2 .c2-bot .icon-box i {font-size: 3.0973451327433628vw;}
        .cont2 .c2-bot .icon-box h4 {font-size: 1.592920353982301vw;}
        .cont2 .c2-bot .icon-box p {font-size: 1.3274336283185841vw;}

        .cont3 .row {width: 95%;}
        .cont3 .c3-top {width: 49%;}
        .cont3 .c3-top h3 {font-size: 2.3893805309734515vw;}
        .cont3 .c3-top p {font-size:1.3274336283185841vw;}
        .cont3 .c3-bot {flex-wrap: wrap; justify-content: space-around;}
        .cont3 .c3-bot .img-box .img-wrap {height: 430px;}
        .cont3 .c3-bot .img-box {width: 48%;}
        .cont3 .c3-bot .img-box .c-box span {font-size: 1.0619469026548671vw;}
        .cont3 .c3-bot .img-box .c-box h5 {font-size: 1.415929203539823vw;}
        .cont3 .c3-bot .img-box .c-box p {font-size: 1.1504424778761062vw;}
        /* 1130 이하 중간 영역 끝 */

        /* 1130 이하 풋터 영역 시작 */
        footer .row {width: 95%;}
        footer .f1 .sns i {font-size: 1.9469026548672566vw;}
        footer .f2 li {font-size: 1.3274336283185841vw;}
        footer .f4 a {width: 68%; font-size: 1.3274336283185841vw;}
        footer .f4 p {font-size: 1.3274336283185841vw;}
        /* 1130 이하 풋터 영역 끝 */
}

@media screen and (max-width:840px)
{
        /* 840 이하 헤더 영역 */
        header .row {width: 94%;}
        header .row .gnb {display: none;}
        header .row .gnb li a {font-size: 1.7857142857142856vw;}
        header .row .invite {width: 20.5%; margin: 25px 0; font-size: 1.7857142857142856vw;}
        /* 840 이하 헤더 영역 끝 */

        /* 840 이하 중간 영역 시작 */
        .cont1 {height: 600px;}
        .cont1 .row {width: 94%;}               
        .cont1 .text_box {width: 43.3%; }
        .cont1 .text_box h2 {font-size: 3.9285714285714284vw;}
        .cont1 .text_box p {font-size: 1.7857142857142856vw}
        .cont1 .text_box a {width: 47.5%; font-size: 1.7857142857142856vw;}

        .cont2 .row {width: 94%;}
        .cont2 .c2-top h3 {font-size: 3.214285714285714vw;}
        .cont2 .c2-top p {font-size: 1.7857142857142856vw;}
        .cont2 .c2-bot .icon-box i {font-size:4.166666666666666vw;}
        .cont2 .c2-bot .icon-box h4 {font-size: 2.142857142857143vw;}
        .cont2 .c2-bot .icon-box p {font-size: 1.7857142857142856vw;}

        .cont3 .row {width: 94%;}
        .cont3 .c3-top {width: 49%;}
        .cont3 .c3-top h3 {font-size: 3.214285714285714vw;}
        .cont3 .c3-top p {font-size: 1.7857142857142856vw;}
        .cont3 .c3-bot .img-box .img-wrap {height: 320px;}
        .cont3 .c3-bot .img-box {width: 48%; justify-content: space-around;}
        .cont3 .c3-bot .img-box .c-box span {font-size: 1.4285714285714286vw;}
        .cont3 .c3-bot .img-box .c-box h5 {font-size: 1.9047619047619049vw;}
        .cont3 .c3-bot .img-box .c-box p {font-size: 1.5476190476190477vw;}
        /* 840 이하 중간 영역 끝 */

        /* 840 이하 풋터 영역 시작 */
        footer .row {width: 94%; flex-wrap: wrap; padding-bottom: 65px;}
        footer .row .f-box {width: 50%;}
        footer .f4 a {width: 41%;}
        footer .f1 .sns i {font-size: 2.619047619047619vw;}
        footer .f2 li {font-size: 1.7857142857142856vw;}
        footer .f4 a {font-size: 1.7857142857142856vw;}
        footer .f4 p {font-size: 1.7857142857142856vw;}
        /* 840 이하 풋터 영역 끝 */
}

@media screen and (max-width:768px)
{
        /* 768 이하 헤더 영역 */
        header .row {width: 94%; }
        header .row .logo {margin: 25px 0;}
        header .row .gnb {display: none;}
        header .row .gnb li a {font-size: 1.953125vw;}
        header .row .invite {display: none; font-size: 1.953125vw;}
        header .row .m-btn {display: block; color: #fff; font-size: 3.90625vw; top: 50%;}
        /* 768 이하 헤더 영역 끝 */

        /* 768 이하 중간 영역 시작 */
        .cont1 {height: 500px;}
        .cont1 .row {width: 94%; text-align: center; }               
        .cont1 .text_box {width: 93%; }
        .cont1 .text_box a {width: 24%; margin: 0 auto;}
        .cont1 .text_box h2 {font-size: 4.296875vw;}
        .cont1 .text_box p {font-size: 1.953125vw;}
        .cont1 .text_box a {font-size: 1.953125vw;}
        
        .cont2 .row {width: 92%; text-align: center;}
        .cont2 .c2-top {width: 100%;}
        .cont2 .c2-bot {flex-direction: column;}
        .cont2 .c2-bot .icon-box {width: 100%;}
        .cont2 .c2-bot .icon-box .g-bg {margin: 0 auto;}
        .cont2 .c2-top h3 {font-size: 3.515625vw;}
        .cont2 .c2-top p {font-size: 1.953125vw;}
        .cont2 .c2-bot .icon-box i {font-size:4.557291666666666vw;}
        .cont2 .c2-bot .icon-box h4 {font-size: 2.34375vw;}
        .cont2 .c2-bot .icon-box p {font-size: 1.953125vw;}

        .cont3 .row {width: 92%;}
        .cont3 .c3-top {width: 100%; text-align: center;}
        .cont3 .c3-top h3 {font-size: 3.515625vw}
        .cont3 .c3-top p {font-size: 1.953125vw;}
        .cont3 .c3-bot .img-box .img-wrap {height: 290px;}
        .cont3 .c3-bot .img-box {width: 48%; justify-content: space-around;}
        .cont3 .c3-bot .img-box .c-box span {font-size: 1.5625vw;}
        .cont3 .c3-bot .img-box .c-box h5 {font-size: 2.083333333333333vw;}
        .cont3 .c3-bot .img-box .c-box p {font-size: 1.6927083333333333vw;}
        /* 768 이하 중간 영역 끝 */

        /* 768 이하 풋터 영역 시작 */
        footer .row {width: 94%; flex-wrap: wrap; padding-bottom: 65px;}
        footer .row .f-box {width: 50%;}
        footer .f1 .sns i {font-size: 2.864583333333333vw;}
        footer .f2 li {font-size: 1.953125vw;}
        footer .f4 a {width: 44%; font-size: 1.953125vw;}
        footer .f4 p {font-size: 1.953125vw;}
        /* 768 이하 풋터 영역 끝 */
}

@media screen and (max-width:600px)
{
        /* 600 이하 헤더 영역 */
        header .row {width: 90%; }
        header .row .gnb li a {font-size: 2.833333333333333vw;}
        header .row .invite {font-size: 2.833333333333333vw;}
        header .row .m-btn {font-size: 5vw;}
        /* 600 이하 헤더 영역 끝 */

        /* 600 이하 중간 영역 시작 */
        .cont1 {height: 400px;}
        .cont1 .row {width: 95%;}               
        .cont1 .text_box a {width: 31%; margin: 0 auto;}
        .cont1 .text_box h2 {font-size: 5.6vw;}
        .cont1 .text_box p {font-size: 2.833333333333333vw;}
        .cont1 .text_box a {font-size: 2.833333333333333vw;}
        
        .cont2 .row {width: 85%; }
        .cont2 .c2-top h3 {font-size: 5vw;}
        .cont2 .c2-top p {font-size: 2.833333333333333vw;}
        .cont2 .c2-bot .icon-box i {font-size:6.7vw;}
        .cont2 .c2-bot .icon-box h4 {font-size: 3.4vw;}
        .cont2 .c2-bot .icon-box p {font-size: 2.833333333333333vw;}

        .cont3 .row {width: 88%; padding-bottom: 2.833333333333333vw;}
        .cont3 .c3-top h3 {font-size: 5vw;}
        .cont3 .c3-top p {font-size: 2.833333333333333vw;}
        .cont3 .c3-bot .img-box .img-wrap {height: 380px;}
        .cont3 .c3-bot .img-box {width: 100%; justify-content: space-around; margin-bottom: 20px;}
        .cont3 .c3-bot .img-box .c-box span {font-size: 2.3vw;}
        .cont3 .c3-bot .img-box .c-box h5 {font-size: 3vw;}
        .cont3 .c3-bot .img-box .c-box p {font-size: 2.4vw;}
        /* 600 이하 중간 영역 끝 */

        /* 600 이하 풋터 영역 시작 */
        footer .row {width: 90%; flex-wrap: wrap; padding-bottom: 65px;}
        footer .row .f-box {width: 100%;}

        footer .f2 {margin-bottom: 65px;}

        footer .f1 .sns i {font-size: 3.7vw;}
        footer .f2 li {font-size: 2.833333333333333vw;}
        footer .f4 a {width: 31%; font-size: 2.833333333333333vw;}
        footer .f4 p {font-size: 2.833333333333333vw;}
        /* 600 이하 풋터 영역 끝 */
}