@charset "utf-8";

body {position: relative; color:#12141a; background: #fff;}

/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: relative; margin:0 auto; padding:0; width: 100%;}
.hd-inner {position: relative; margin:0 auto; padding:0 15px; width: 1230px; height: 108px; display: flex; justify-content: space-between; align-items: center;}
.top-logo {position: relative;}
.top-logo > img { cursor: pointer;}

/* nav */
.nav,
.nav-inner {position: relative;}
ul.menu {position: relative; margin:0; padding:0; display: flex; gap:60px; justify-content: flex-end; align-items: center;}
ul.menu > li {font-size: 16px; font-weight: 600; color:#000; cursor: pointer;}
ul.menu > li > .telegram {margin:0 auto; padding:6px 20px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; color:#0791da; background: #FFF; border: 3px #0791da solid; border-radius: 5px;}
ul.menu > li > .telegram > img {margin-right:10px; width: 30px;}

@media (hover: hover) and (pointer: fine) {
  ul.menu > li:hover {color:#6b2ee6;} 
  ul.menu > li:hover > .telegram {transform: translate3d(0, -3px, 0); transition: transform 0.5s ease 0s; color:#fff; background: #0791da;} 
  ul.menu > li:hover > .telegram > img {filter: brightness(0) invert(1) contrast(1000%);}
}


/* pc-hid */
.mo-bar,
.nav-close {display: none;}

/****************************************************************************************************************************************
main 시작
*****************************************************************************************************************************************/
main {position: relative; margin:0 auto; padding:0; width: 100%;}
.container {position: relative; margin:0 auto; padding:0 15px; width: 1480px;}

/* section 공통 */
section {position: relative; margin:0 auto; padding:80px 20px; width: 100%; text-align: center;}
.sec-bg {background: #f7f9fb;}
.row {display: flex; justify-content: center; align-items: center;}
section > h3 {margin:40px auto; padding:0; width: 100%; text-align: center; font-size: 30px; font-weight: 600; color:#000;}

ul.btn-list {position: relative; margin:60px auto 0 auto; padding: 0; width: 100%; display: flex; gap:40px; flex-wrap: wrap; justify-content:center; align-items: center;}
ul.btn-list > li {margin:0; padding:10px 0; width: calc(100% / 5 - 40px); font-size: 20px; color:#fff; background: #12141a; border-radius: 20px; cursor: pointer;}


/* left-col과 right-col */
.left-col,
.right-col {position: relative; margin:0 auto; padding:0 60px; width: 50%;}
.left-col {padding-left:80px;}
.right-col {padding-right:80px;}

/* left-col */
.left-col > h2 {margin:0 auto 40px auto; padding:0; width:100%; text-align: left; font-size:46px; font-weight: 700; letter-spacing: -1px;}
.left-col > p {margin:0 auto; padding:0; width:100%; text-align: left; font-size:18px;}

ul.btn-solution {position: relative; margin:60px auto 0 auto; padding: 0; width: 100%; display: flex; gap:18px; justify-content: flex-start; align-items: center;}
ul.btn-solution > li {position: relative;}
ul.btn-solution > li > a {display:block; margin: 0 auto; padding:0 30px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; color:#fff; background:#105d75; cursor: pointer;}

/* right-col */
.top-img {margin-bottom: -120px; text-align: right;}
.top-img > img {width: 70%; box-shadow: 30px -30px 50px -20px rgb(0 94 255 / .2);}
.ft-img {text-align: left;}
.ft-img > img {width: 60%;box-shadow: -30px 30px 50px -20px rgb(107 46 230 / .2);}


@media (hover: hover) and (pointer: fine) {
    ul.btn-list > li:hover,
    ul.btn-solution > li > a:hover {transform: translate3d(0, -3px, 0); transition: transform 0.5s ease 0s;} 
}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position: relative; margin:60px auto 0 auto; padding:40px 0; width: 100%; background: #363d4d;}
.copyright {margin:0 auto; padding:0; width:100%; text-align: center; font-size:13px; color:#fff;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1480px) {
    .hd-inner,
    .container {width: 100%;}

    .left-col,
    .right-col {padding:0 40px;}
    .left-col {padding-left:40px;}
    .right-col {padding-right:40px;}

    ul.btn-solution {flex-wrap: wrap;}
} /* 미디어쿼리문 끝 */

@media (max-width:1024px) {
    /* 모바일 버튼 */
    .mo-bar {display: block; position: absolute; right:10px; z-index: 9; line-height: 60px;}
    .mo-bar > i {font-size: 32px; color: #000; cursor: pointer;}


    /* nav */
    .nav.active {position: fixed; top:0; bottom:0; left:0; right:0; padding:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index: 999;}
    .nav-inner {position: fixed; top: 0; right: -265px; padding:0 10px; width: 265px; height: 100%; flex-direction: column; justify-content:  flex-start; align-items: center; background: #6b2ee6; transition: all 0.3s; z-index: 999; overflow-y: auto;}
    .nav-inner.active {right: 0;}

    .nav-close {display: block; margin:0 auto; padding:20px 0; text-align: left;}
    .nav-close > i {font-size: 20px; color:#fff; cursor: pointer;}

    ul.menu {flex-direction: column; align-items: flex-start; gap:0;}
    ul.menu > li {margin:0 auto; padding:20px 15px; width: 100%; text-align: left; color:#fff;}
    ul.menu > li:hover {color:#fff; background: #c72ee6;}
    ul.menu > li:last-child:hover {background: transparent;}
    ul.menu > li > .telegram {margin:0; padding:15px 20px; width: 100%; color:#fff; background: #0791da; border: 3px #6cccff solid;} 
    ul.menu > li > .telegram > img {filter: brightness(0) invert(1) contrast(1000%);}
  

    /* 메인 */
    section {padding:40px 0;}
    .sec-bg {padding:40px 20px;}

    .row {flex-direction: column; align-items: flex-start;}
    .left-col, 
    .right-col {margin:40px 0; padding:20px 20px; width: 100%;}

    .left-col > h2,
    .left-col > p {text-align: center;}
    ul.btn-solution {justify-content: center;}
} /* 미디어쿼리문 끝 */

@media (max-width:720px) {
    .top-logo > img  {width: 200px;}

    .left-col, 
    .right-col {margin:0 0 60px 0; padding:0;}

    .left-col > h2 {font-size: 34px;}
    .left-col > p {font-size: 15px;}
    ul.btn-solution {margin: 25px 0 0 0; gap:10px;}
    
    ul.btn-solution > li {width: calc(100% / 2 - 10px);}
    ul.btn-solution > li > a {width:100%; font-size: 14px;}

    section > h3 {margin: 20px auto; font-size: 28px;}

    ul.btn-list {margin:25px auto 0 auto; gap:10px;}
    ul.btn-list > li {width: calc(100% / 3 - 10px);}
} /* 미디어쿼리문 끝 */