@charset "utf-8";

/*------------MOBILE------------*/
@media all and (max-width: 1199px) {
.pc-only {display: none !important;}

#wrapper {background-color: #fff; width: 100%; height: 100%; overflow: hidden;}
#container_wr {width: 100%;}
#container {padding-top: 57px;}


/*PageLoad*/
.page_load {display: none; position: fixed; top: 0; left: 0; z-index: 999999; width: 100vw; height: 100vh; background-color: #fff; outline: none; overflow: hidden;}
.page_load .logo_load {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70vw;}
.page_load .logo_load > img {width: 100%;}


/*main contents*/
.inner {margin: 0 auto; width: 95%;}


/*visual*/
#visual_sec {width: 100%; height: 100%; overflow: hidden;}
#visual_sec .swiper-wrapper {background-color: rgba(0,0,0,.15);}
#visual_sec .visual_swiper .swiper-slide {transform: scale(0.8); transition: all 300ms ease-out; background-color: #fff; width: 100vw; height: 50vh; position: relative;}
#visual_sec .visual_swiper .swiper-slide-visible {transform: scale(1);}
#visual_sec .visual_swiper .swiper-slide > div.swiper-slide-shadow {background: none;}
#visual_sec .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--pointcolor2);}

#visual_sec .swiper-slide.slide01 {background-image: linear-gradient(120deg, #c9f36a 0%, #82e590 100%);}
#visual_sec .swiper-slide.slide01 .visual_txt {width: 100%; text-align: center; color: #262b26; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#visual_sec .swiper-slide.slide01 .visual_txt .visual_txtT {font-size: 13.591vw; line-height: 1.3;}
#visual_sec .swiper-slide.slide01 .visual_txt .visual_txtB {font-weight: 500; font-size: 1.125rem; margin-top: 20px;}
#visual_sec .swiper-slide.slide01 .visual_txt span {color: #fff;}

/*contents banner*/
#main_banner {padding: 65px 0; background-color: var(--pointcolor2);}
#main_banner .title {color: #fff; font-weight: 500; font-size: 4.5vw; text-align: center;}
#main_banner .title::before {content: ''; display: block; background-image: url("../images/main/bulb.png"); background-position: center; background-repeat: no-repeat; background-size: cover; width: 17vw; height: 19vw; margin: 0 auto 40px;}
#main_banner .title span {display: inline-block; font-weight: 800; font-size: 5.7vw; opacity: 0; visibility: hidden; -webkit-transition: 800ms; -ms-transition: 800ms; transition: 800ms;
-webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);}

#main_banner .title.active span {opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

/*contents about*/
.main_about {display: block; background-image: linear-gradient(120deg, #c9f36a 0%, #82e590 100%); text-align: center; padding: 20px;}
.main_about .cont_wrap {color: #fff;} 
.main_about .cont_txt {margin: 100px 0;}
.main_about h3 {font-size: 10.625vw; font-weight: 800; padding: 0 0 25px; color: #000;}
.main_about p {font-size: 3.8vw; line-height: 1.5; padding: 15px 0; font-weight: 400; color: #000;}
.main_about p:nth-child(2) {font-weight: 600;}
.main_about p .TRblue {color: #fff; font-weight: 800;}

.main_about .inquiry_link {text-align: center;}
.main_about .inquiry_btn {display: inline-block; width: 200px; padding: 15px 15px 15px 35px; border-radius: 30px; background-color: #fff; color: #000; margin-top: 60px; font-weight: 500; position: relative;}
.main_about .inquiry_btn::before {content: ''; display: block; position: absolute; top: 50%; left: 55px; width: 20px; height: 20px; background-image: url("/images/icon/inquiry_ico.gif"); background-repeat: no-repeat;
background-size: cover; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}


/*contents commu*/
#main_commu {background-color: #fff; padding-bottom: 65px;}
#main_commu .sec_txt {padding: 65px 0; text-align: center; font-size: 6.61vw; font-weight: bold; line-height: 1.3;}
#main_commu .txt_round {text-align: center; line-height: 35px; background-color: var(--pointcolor2); color: #fff; font-weight: bold; font-size: 3vw; border-radius: 130px; width: 80vw; margin: 30px 0;
opacity: 0; visibility: visible;}
#main_commu .txt_round.fadeIn.Right {-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}
#main_commu .txt_round.fadeIn.Left {-webkit-animation-name: fadeInRight; animation-name: fadeInRight;}
#main_commu .txt_round.first_round {margin-top: 0;}
#main_commu .txt_round.second_round {margin-left: 63px;}

/*contents marketing list*/
.main_marketing_list {background-color: #f4f6fa; position: relative; padding-bottom: 65px;}
.main_marketing_list .sec_title {color: var(--pointcolor2); font-size: 9.23vw; font-weight: bold; text-align: center; padding-top: 80px;}
.main_marketing_list .sec_txt {margin-top: 20px; font-size: 4.35vw; line-height: 32px; font-weight: 400; text-align: center;}
.main_marketing_list .sec_slider_box {margin-top: -30px;}
.main_marketing_list ul {margin: 120px 0 0;}
.main_marketing_list .slide_list {height: auto !important;}
.main_marketing_list .sec_slide_wrap {border-radius: 20px; display: flex; height: 100%; overflow: hidden; justify-content: space-between; flex-direction: column-reverse;}
.main_marketing_list .sec_slide_wrap > div {display: flex; justify-content: center;}
.main_marketing_list .slide_left {width: 100%; height: 284px; position: relative; flex-direction: column; flex-shrink: 1; padding: 25px;}
.main_marketing_list .slide_left.naver {background-color: #17b75e; color: #fff;}
.main_marketing_list .slide_left.kakao {background-color: #fae100; color: #000;}
.main_marketing_list .slide_left.app {background-color: #3e6eff; color: #fff;}
.main_marketing_list .slide_left.inside {background-color: #6c58ca; color: #fff;}
.main_marketing_list .slide_left.offline {background-color: #065a8d; color: #fff;}
.main_marketing_list .slide_left.video {background-color: #000; color: #fff;}
.main_marketing_list .slide_left.consulting {background-color: #fff; color: #000;}
.main_marketing_list .slide_left .list_title {font-size: 1.75rem; font-weight: bold;}
.main_marketing_list .slide_left .list_txt {margin-top: 45px;}
.main_marketing_list .slide_left .list_txt p {font-size: 1.125rem; font-weight: 700; position: relative;}
.main_marketing_list .slide_left .list_txt p + p {margin-top: 5px;}
.main_marketing_list .slide_left .list_txt p::before {content: "· ";}
.main_marketing_list .slide_right {overflow: hidden; width: 100%; height: 256px; flex-shrink: 0; background-color: #eee;}
.main_marketing_list .slide_right .list_img {width: 100%; height: 100%;}
.main_marketing_list .slide_right img {width: auto; height: 100%;}
.main_marketing_list .swiper-cube .swiper-cube-shadow {opacity: .3;}

.main_marketing_list .swipe_ico {width: 40px; height: 40px; margin: 30px auto 20px;}

.main_marketing_list .sec_slider_pagi {top: initial; right: initial; bottom: 50px; left: 50%; width: 95%; height: 6px; transform: none; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.main_marketing_list .sec_slider_pagi span {background: var(--pointcolor);}

/*contents marketing*/
.main_marketing {background-color: #fff; padding: 65px 0;}
.main_marketing .sec_title {display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; text-align: left; color: #333; margin: 0 0 40px;}
.main_marketing .smallText {display: inline-block; font-size: 4.25vw; font-weight: 500; letter-spacing: 0.1em; line-height: 1; padding-bottom: 3px; border-bottom: 1px solid #333;}
.main_marketing h3 {width: 100%; font-size: 6.52vw; font-weight: bold; letter-spacing: -1px; line-height: 1.3; margin-top: 8px;}
.main_marketing h3 span {color: var(--pointcolor2);}
.main_marketing .sec_slider_box {position: relative; margin: 60px auto 0; width: 80%;}
.main_marketing .slideItem {display: inline-block; width: 320px; height: 320px; border-radius: 10px; background-color: #eee; text-align: center; margin-bottom: 5px;}
.main_marketing .slideItem a {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%;}
.main_marketing .slideItem a > img {margin-bottom: -25px; display: block; width: 70%;}
.main_marketing .slideItem a > p {width: 100%; font-size: 5.2vw; font-weight: 700; letter-spacing: -1px; line-height: 1; color: #222;}
.main_marketing .sec_mk_btn {width: 33px; height: 33px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
  background-image: url("../images/icon/next_prev_ico.png"); background-repeat: no-repeat; background-size: cover;}
.main_marketing .sec_mk_prev {left: -13%; background-position: 0 0;}
.main_marketing .sec_mk_next {right: -13%; background-position: -33px 0;}

.main_marketing .more {width: 100%; height: 50px; margin-top: 30px; text-align: center; border: 1px solid #000; background-color: #fff; border-radius: 3px; -webkit-transition: 300ms ease-in; -ms-transition: 300ms ease-in; transition: 300ms ease-in;}
.main_marketing .more_btn {width: 100%; height: 50px; font-size: 1rem; font-weight: 700; color: #333; line-height: 48px; -webkit-transition: 300ms ease-in; -ms-transition: 300ms ease-in; transition: 300ms ease-in;}
.main_marketing .more:hover {background-color: #333; border-color: #333;}
.main_marketing .more:hover .more_btn {color: #fff;}

}