
@charset "utf-8"; 

/* main visual */
#main_visual{overflow:hidden; position:relative; z-index:1; height:calc(915rem);  color:#fff; text-align:center;}
#main_visual .bx-wrapper{height:100%; margin-bottom:0; background:transparent; border:0; box-shadow:none;}
#main_visual .bx-viewport{height:100% !important;}
#main_visual .slider{height:100%;}
#main_visual .roll{}
#main_visual .roll_txt{ width:1400rem; margin:0 auto; text-align:left; }
#main_visual .roll_img{z-index:-1; position:absolute; left:0; top:0; width:100%;height:100%; background-size:cover; background-position:50%;  animation: imagescale 5s infinite; -webkit-animation: imagescale 5s infinite; -moz-animation: imagescale 5s infinite; -o-webkit-animation: imagescale 5s infinite;}
#main_visual .roll01{background-image:url(../img/main/visual01.jpg);}
#main_visual .roll02{background-image:url(../img/main/visual02.jpg);}
#main_visual .roll03{background-image:url(../img/main/visual03.jpg);}
#main_visual .roll04{background-image:url(../img/main/visual04.jpg);}
#main_visual .roll{height:100%;}
#main_visual h2{font-family:'Pretendard';  line-height:1.3;  font-size:45rem; letter-spacing:-1px; color:#fff; font-weight:800;}
#main_visual p{line-height:1.4; margin:420rem 0 20rem 0; font-size:20rem; color:#fff; font-weight:800; opacity:0.6; }
#main_visual .btn_more{margin-top:50rem}
#main_visual .roll_txt2{display:inline-block; margin-right:80rem; text-align:left;}
#main_visual .bx-controls{ z-index:100; width:100%; text-align:center;}
#main_visual .bx-controls-direction{}
#main_visual .bx-pager{display:inline-block; vertical-align:middle;}
#main_visual .bx-pager > div{display:inline-block;}
#main_visual .bx-pager a{display:inline-block; width:12rem; height:12rem; margin:0 5rem; border:2px solid #fff; font-size:0; text-indent:-9000px; border-radius:50%;}
#main_visual .bx-pager a.active{background:#fff;}
#main_visual .bx-controls-auto{display:inline-block; vertical-align:middle;}
#main_visual .bx-controls-auto > div{display:inline-block;}
#main_visual .bx-controls-auto a{display:inline-block; width:20px; height:20px; margin:0 5px; background-position:center; font-size:0; color:#fff; text-indent:-9000px; background-repeat:no-repeat;}
#main_visual .bx-controls-auto a.bx-start{background-image:url(../img/btn_play.png);}
#main_visual .bx-controls-auto a.bx-stop{background-image:url(../img/btn_pause.png);}
#main_visual .bx-controls-auto a.active{display:none;}

/* 이전다음버튼일때 */
#main_visual .bx-default-pager{display:none; position: absolute; left:0; width: 100%;bottom:30rem;z-index: 60;}
#main_visual .bx-controls-direction{position: absolute; left:0; width: 100%;top:48%;z-index: 60;}
#main_visual .bx-controls-direction a.bx-prev:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
#main_visual .bx-controls-direction a:hover{}
#main_visual .bx-controls-direction a{display:block; position:absolute; overflow:hidden; width:28rem; height:46rem; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
#main_visual .bx-controls-direction a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/layout/icon_btn_arrow.svg) no-repeat 50% 50%;}
#main_visual .bx-controls-direction a.bx-next{right:100rem;}
#main_visual .bx-controls-direction a.bx-prev{left:100rem;}

@keyframes imagescale {
  0% {
    transform: scale(1.2)  rotate(.001deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  100% {
    transform: scale(1)  rotate(.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}



@media (max-width:1700px){
	#main_visual .bx-controls-direction a.bx-prev{left:20rem;}
	#main_visual .bx-controls-direction a.bx-next{right:20rem;}
}

@media (max-width:1480px){
	#main_visual .roll_txt{width:100%; padding-left:10rem; }
}

@media (max-width:1023px) {
	.main-content{display:block;}
	.wrap{width:100%; padding:0 20rem}	
	#main_visual{ height:500rem;}
	#main_visual h2{ font-size:20rem; }
	#main_visual p{margin:200rem 0 0 0; font-size:13rem; }
	
}

/*
@media (max-width:860px){
	#main_visual .bx-default-pager{display:block;}
	#main_visual .bx-controls-direction{display:none;}
}*/

@media (max-width:740px) {
	#main_visual{ height:300rem}
	#main_visual .roll{padding-top:0}
	#myText{ font-size: 20rem; }
	#main_visual h2{ font-size:17rem; }
	#main_visual p{margin:200rem 0 0 0; font-size:12rem; }
	
	
}


.sec_banner {margin-top:30rem;}
.sec_banner .wrap{display:grid;grid-template-columns: repeat(2, 1fr); gap:30px; }
.sec_banner .box{width:100%; height:290px;margin:0 auto;border-radius:20px;}
.sec_banner .bn01{background:#f9eccc url(../img/main/index_bn01.jpg) center top no-repeat;}
.sec_banner .bn02{background:#f8f4eb url(../img/main/main_bn02.jpg) center top no-repeat;}
.sec_banner .box .tit{padding:60rem; }
.sec_banner .box .tit span{color:#756267; font-size:17rem; font-weight:700; }
.sec_banner .box .tit h4{word-break: keep-all; padding-top:20px;font-size:25rem;font-weight:800;line-height:130%;letter-spacing:-1px; }
.sec_banner .box .tit a{display:flex;justify-content:center;align-items:center;width:137px;height:38px;margin-top:50px;padding:0 30px;font-size:13rem;border-radius:50px;color:#fff; background:#ebc15b;}

@media all and (max-width: 1023px) {
    .sec_banner .wrap{gap:10px; }
	.sec_banner .box{display:block;margin:0 auto;border-radius:10px; }
	.sec_banner .bn01{background:#f9eccc url(../img/main/index_bn01_m.jpg) center top no-repeat; background-size:100%; }
	.sec_banner .bn02{background:#f8f4eb url(../img/main/main_bn02_m.jpg) center top no-repeat; background-size:100%; }
    .sec_banner .box .tit{padding:120px 0px 0;text-align:center;}
	.sec_banner .box .tit span{font-size:13rem; }
    .sec_banner .box .tit h4{padding-top:20px;font-size:18rem;}
    .sec_banner .box .tit a{width:120px;height:36px;margin:0 auto;margin-top:20px;padding:0 15px;}
}

.sec_pick{padding:70rem 0;}
.sec_pick .tt {margin-bottom:30rem;}
.sec_pick .tt span {display:block; font-size:17rem; font-weight:700;}
.sec_pick .tt h3 {font-size:30rem; font-weight:700;}
.sec_pick .wrap{position:relative;}
.sec_pick .controls{position:absolute;bottom:20px;right:0;display:flex;gap:10px;}
.sec_pick .controls button{display:flex;justify-content:center;align-items:center;width:38px;aspect-ratio:1;border-radius:50%;border:0; background:#ebc15b;}
.sec_pick .controls button i{color:#fff;}

.sec_pick .slider .item{position:relative;width:400px;margin-right:24px;border-radius:10px;overflow:hidden;}
.sec_pick .slider .item a{display:block;}
.sec_pick .slider .item .pic img{display:block;}
.sec_pick .slider .item .txt{padding-top:10px; }
.sec_pick .slider .item .txt h4{display:block;font-size:17rem;font-weight:600;color:#ebc15b;}
.sec_pick .slider .item .txt h5{padding-top:10px;font-size:18rem;font-weight:700;line-height:130%;color:#333;}

@media all and (max-width: 1024px) {
    
    .sec_pick{padding:60px 0;background-position:75% center;}
    .sec_pick .wrap{padding:0 20px;}
    .sec_pick .tt{padding-bottom:20px;}
	.sec_pick .tt span {font-size:15rem;}
	.sec_pick .tt h3 {font-size:22rem; }

    
    .sec_pick .con{padding-left:20px;}
    .sec_pick .slider .item{width:250px;margin-right:12px;border-radius:15px;}
    .sec_pick .slider .item .txt em{padding:6px 12px;}
    .sec_pick .slider .item .txt h5{padding-top:12px;font-size:1.1em;}
    .sec_pick .slider .item .txt > div{padding:30px 20px;}
}


.sec_youtube {margin:70rem 0;}
.sec_youtube .tt {margin-bottom:30rem;}
.sec_youtube .tt span {display:block; font-size:17rem; font-weight:700;}
.sec_youtube .tt h3 {font-size:30rem; font-weight:700;}

/* youtube */
.youtube {  box-sizing: border-box; }
.youtube *, .youtube *::before, .youtube *::after { box-sizing: border-box; }
.youtube .container {display: block;    width: 100%;    height: 100%;    margin: 0 auto;    padding: 0 0px; }
.youtube .container .embed-responsive {position: relative;      overflow: hidden;      padding: 0;      width: 100%;      display: block; }
.youtube .container .embed-responsive:after {display: block;        content: "";        padding-top: 56.25%; }
.youtube .container .embed-responsive > iframe {position: absolute;        top: 0;        bottom: 0;        left: 0;        width: 100%;        height: 100%;        border: 0; border-radius:10px; }
.youtube .container .channel-slide ul li > a {display: flex; width: 100%; }
.youtube .container .channel-slide ul li > a > div {display: flex; align-items: center; justify-content: center;  }
.youtube .container .channel-slide  ul li > a > div.item {width: 140px; }
.youtube .container .channel-slide  ul li > a > div.item img {display: block; width: 100%; border-radius:10px; }
.youtube .container .channel-slide ul li> a > div.details {text-align: left; flex:1; padding: 0 0 0 20px; }
.youtube .container .channel-slide ul li > a > div.details h5 {word-break: keep-all; font-size: 18rem; font-weight: 700; color: #333; letter-spacing:-.5px; }
.channel-slide .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#f5efdf !important}
.channel-slide .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#ebc15b !important}

@media (min-width: 1024px) {
      .youtube .container {display:flex;align-items:flex-start;}
	  .youtube .container > div.embed-responsive {width: auto; height:520px;aspect-ratio:16 / 9;}
	  .youtube .container > div.channel-slide {border-top: 0; border-bottom: 0; box-sizing: border-box; flex:1;height: 520px; margin: 0; padding-left: 50px; }
	  .youtube .container > div.channel-slide ul {padding: 0px 0; margin-bottom: 0px;}
	  .youtube .container > div.channel-slide ul:before {display: none; }
	  .youtube .container > div.channel-slide ul:after {display: none; }
	  .youtube .container .channel-slide .slick-slider ul li > a > div.details {text-align: left; padding: 0 0 0 10px; }
	  .youtube .container .channel-slide .slick-slider ul li > a > div.details p { font-size: 16px; line-height:27px; color:#606060; font-weight:200;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: ertical;padding-bottom: 6px; border-bottom: 1px solid #ccc;}
	  .youtube .container > div.channel-slide li{margin-bottom:40px !important;}
	  .youtube .container .channel-slide  ul li > a > div.item {width:220px;}
	  .youtube .container .channel-slide .slick-slider ul li > a > div.details h5{margin-bottom: 5px; font-size: 16px; line-height:26px; color:#606060; font-weight:bold;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;                    -webkit-box-orient: vertical;}
}
                    
@media (max-width: 1499px) {
        .youtube .container > div.embed-responsive {height:410px;}
        .youtube .container > div.channel-slide {height:410px;}
        .youtube .container .channel-slide ul li > a > div.item{width:190px;}
}
@media (max-width: 1200px) {
        .sec_youtube .tt span {font-size:15rem;}
		.sec_youtube .tt h3 {font-size:22rem; }
		.youtube .container{display:block;}
        .youtube .container > div.embed-responsive{height:auto;width:100%;}
        .youtube .container > div.channel-slide{margin-top:30px;height:240px;padding-left:0;}
        .youtube .container > div.channel-slide li{margin-bottom:20px !important;}
        .youtube .container .channel-slide ul li > a > div.item{width:130px;}
		.youtube .container .channel-slide ul li > a > div.details h5 {font-size: 15rem; }
}

.sec_community {background:#f6f0e1;  padding:70rem 0; }
.reference {	display:grid;grid-template-columns: repeat(3, 1fr);gap: 40rem;}

.form-group {position:relative; border-radius:30px;}
.form-group:nth-child(2) {padding:60px 50px;	background-color: #fff;}
.form-group:nth-child(3) {padding:60px 50px;	background-color: #b77f63;}
.form-group h3 {font-size:30rem; font-weight:600; margin-bottom:30px; }
.form-group span {font-size:17rem; font-weight:600; margin-top:10rem;}
.form-group h3.wh {color:#fff; }
.form-group span.wh {color:#fff;}
.form-group ul li {font-size:18rem; font-weight:500; margin-top:10rem; letter-spacing:-.5px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.form-group ul li span {background:#ebc15b; font-size:14rem; font-weight:500; color:#fff; border-radius:5px; padding:5px 10px; display:inline-block; margin-right:10px;}

.symbol_bg {background:url(../img/main/symbol_bg.png) right bottom no-repeat;}

@media screen and (max-width: 767px) {
	.sec_community {padding:30rem 0; }
	.reference {	display:grid;grid-template-columns: repeat(1, 1fr);gap: 20rem;}
	.form-group:nth-child(2) {padding:40px 30px;	}
	.form-group:nth-child(3) {padding:40px 30px;	}
	.form-group h3 {font-size:22rem;}
	.form-group h4 {font-size:20rem;}
	.form-group ul li {font-size:15rem; margin-top:5rem;}
}

.sec_view {position:relative;}
.sec_view .con{position:relative;width:100%;max-width:445px;margin:0 auto;}
.sec_view .con .slick-slide img{width:100%;border-radius:30px;}

.sec_view .slick-arrow{position:absolute;bottom:20%;margin-top:-25px;width:38px;height:38px;font-size:0;background:url(../img/main/arr.png) no-repeat center center/contain;z-index:2;border:0;}

.sec_view .slick-prev{left:70px;}
.sec_view .slick-next{left:120px;transform:rotate(-180deg);}

@media screen and (max-width: 767px) {
	.sec_view .con{width:100%;max-width:320rem;}
	.sec_view .slick-prev{left:50px;}
	.sec_view .slick-next{left:100px;transform:rotate(-180deg);}
}

.index_more {position:relative; }
.index_more a {color:#b98267;}
.link-view{display:flex;align-items:center;justify-content:center;font-size:16px;color:#b98267; border:1px solid #b98267; width:200rem; margin:50rem auto 0; text-align:center; padding:15rem;}
.link-view .dot{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:0.2s}
.link-view .dot::before{content:'';width:4px;height:4px;border-radius:50px;background-color:#b98267;transform:translateX(100%);opacity:0;transition:transform 0.1s linear, opacity 0.2s}
.link-view:hover .dot::before{transform:translateX(0);opacity:1}
.link-view:hover .dot{padding-right:15px}

@media screen and (max-width: 767px) {
	.link-view{font-size:14px; margin:30rem auto 0; width:170rem; text-align:center; padding:10rem;}
}