@charset "utf-8";
header{background:none;}
header.scrolled {background-color: rgba(255, 255, 255, 1);}
header.scrolled .menu{color:#222;}

/********************
** 메인배너
********************/
.mainBanner {    background: url('../img/mainBg.jpg');    background-size: cover;    background-position: center;}
.mainImg01 {    left: 50%;    top: 50%;    transform: translate(-50%, -50%);      transition: opacity 1.2s ease-in-out;}
.mainImg02 {    left: 0;    bottom: 0;    z-index: 0;    opacity: 0;    transition: opacity 1.2s ease-in-out;}
.mainTit_01 {    opacity: 0;    transition: opacity 1s ease-in-out;}
.mainTit_02_wrapper {    max-height: 0;    opacity: 0;    overflow: hidden;    transition: max-height 1s cubic-bezier(0.6, 0, 0.8, 1), opacity 1s ease-in-out 0.2s;}
.mainTit_02 {    display: block;    opacity: 1;}
.mainTit_02.lineTxt {    background-image: linear-gradient(to right, white, white);     background-repeat: no-repeat;        background-position: 0% 100%;     background-size: 0% 7px;     transition: background-size 1s ease-in-out 0.3s;    padding-bottom: 15px;}
.mainTit_02.lineTxt.is-visible {    background-size: 100% 7px;}

/********************
** 장점
********************/
.resultBox{display:grid; grid-template-columns: repeat(2 , 1fr);}
.resultList{border:1px solid #D9DADE; background-size:300px; background-position:right bottom; background-repeat: no-repeat;}
.resultBox .resultList:nth-of-type(1) { background-image: url('../img/result-001.svg');}
.resultBox .resultList:nth-of-type(2) { background-image: url('../img/result-002.svg');}
.resultBox .resultList:nth-of-type(3) { background-image: url('../img/result-003.svg');}
.resultBox .resultList:nth-of-type(4) { background-image: url('../img/result-004.svg');}

/********************
** 마케팅 투자
********************/
.lineTxt_1 {    display: inline-block;    background-image: linear-gradient(to right, #222, #222);     background-repeat: no-repeat;    background-position: 0% 100%;    background-size: 0% 5px;    transition: background-size 1s ease-in-out;    padding-bottom: 3px; }
.lineTxt_1.is-visible {    background-size: 100% 5px;}


/********************
** 리뷰
********************/
.review{background:url('../img/review.png'); background-size:cover; background-position:center;}
.reviewBor1{border-radius: 20px 0 20px 20px;word-break: keep-all;     white-space: normal; }
.reviewBor2{border-radius: 0 20px 20px 20px; word-break: keep-all;     white-space: normal; }
.swiper-slide{height:auto;}
.reviewSlideBox{border:1px solid #D9DADE;}

/********************
** 로고 슬라이드
********************/
.logoSlide{background:url('../img/companyBg.png'); background-position:center bottom; background-size:100%; background-repeat: no-repeat; }
.logo-swiper-l .swiper-slide {    width: auto;     height:100px;  }


/********************
** qa
********************/
.online{background:url('../img/consultBg.jpg'); background-size:cover;}
.online input[type="radio"]{left:-9999px}
.online input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="radio"]:checked + label{background:#5946E5; border:1px solid #5946E5; color:#fefefe}

.inputBox{ padding: 24px; border: 1px solid #D9DADE ; border-radius: 8px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #5946E5; border-radius: 4px; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #5946E5; border-color: #5946E5;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}

.moreBtn{text-decoration: underline;}       
.qaTxt > .lineTxt_1 {    display: inline-block;    background-image: linear-gradient(to right, #fff, #fff);     background-repeat: no-repeat;    background-position: 0% 100%;    background-size: 0% 5px;    transition: background-size 1s ease-in-out;    padding-bottom: 3px; }
.qaTxt > .lineTxt_1.is-visible {    background-size: 100% 5px; }


/********************
** 회사소개
********************/
.aboutBanner{background:url('../img/subBn.jpg'); background-size:cover; background-position:center}
.aboutBannerTxt > .lineTxt_1 {    display: inline-block;    background-image: linear-gradient(to right, #fff, #fff);     background-repeat: no-repeat;    background-position: 0% 100%;    background-size: 0% 5px;    transition: background-size 1s ease-in-out;    padding-bottom: 3px; }
.aboutBannerTxt > .lineTxt_1.is-visible {    background-size: 100% 5px; }
.aboutMainImg{right:0; bottom:-80px; z-index: -1;}

.principleBox{display:grid; grid-template-columns: repeat(3, 1fr);}
.principleBox div{border:1px solid #D9DADE}

.aboutSetviceTab{text-decoration: underline; text-underline-offset: 4px; cursor: pointer;    transition: color 0.3s ease-in-out;}
.aboutSetviceTab.active {    color: #222; }
#marketing, #design {    opacity: 0;         display: none;        transition: opacity 0.4s ease-in-out;    box-shadow: 0 0 8px #D9DADE;}

.marketingBox{display:grid; grid-template-columns:repeat(2 , 1fr)}
.marketingBox01{border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE}
.marketingBox02{border-bottom:1px solid #D9DADE;}
.marketingBox03{border-right:1px solid #D9DADE}
.designBox{display:grid; grid-template-columns:repeat(3 , 1fr)}
.designBox01{border-right:1px solid #D9DADE}
.designBox02{border-right:1px solid #D9DADE}

.aboutLast{background:url('../img/companyEventBn.jpg'); background-size:cover;}
.aboutLastTxt > .lineTxt_1 {    display: inline-block;    background-image: linear-gradient(to right, #fff, #fff);     background-repeat: no-repeat;    background-position: 0% 100%;    background-size: 0% 5px;    transition: background-size 1s ease-in-out;    padding-bottom: 3px; }
.aboutLastTxt > .lineTxt_1.is-visible {    background-size: 100% 5px; }