/* Start-슬릭기본 */
.slick-slider{position: relative;display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
				touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;  width:100%;}
.slick-slide{display: none;float: left; width:100%; }
.slick-initialized .slick-slide{display: block;}
/* End-슬릭기본 */


/* 공통 */
.mTit{font-size:3.235rem; line-height: 120%; letter-spacing: 0.3pt; font-weight: 700; color:#222; font-family: 'Outfit', sans-serif; position: relative; transition: all 0.3s linear;}
.mTit small{display:inline-block; line-height: 120%; font-size:20px; font-weight:400; letter-spacing: -0.5pt; color:rgba(255,255,255,.8); font-family:'NanumSquare', sans-serif; margin-left: 10px; vertical-align: middle;}
.mTit.ko{font-size:33px; line-height: 130%; letter-spacing: -0.3pt; color:#222; font-weight: 800; font-family:'NanumSquare', sans-serif;}
.mTxt{font-size:1rem; letter-spacing:-0.5pt; color:#888; margin-top:5px; position:relative; transition: all 0.3s linear;}
.mTxt span {display:inline-block; }
.mTxt2{font-size:1.176rem; letter-spacing:-0.5pt; color:#4c4c4c; margin:12px 0 5px; position:Relative; transition: all 0.3s linear;}

.moreBtn{display:inline-block; position: absolute; right: 0; top:50%; margin-top: -10px; width:12px; height:20px; background:url('/img/more_arrow.png') no-repeat center/100% auto; transition:all .3s linear; opacity: 1;}
.moreBtn:hover{opacity: 0.7;}






/* .ani_effect { transition:all 1s;}
.ani_effect .mTit {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action .mTit {top:0; opacity:1; transition:all 0.5s linear;}
.ani_effect .mTxt {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action .mTxt {top:0; opacity:1; transition:all 0.5s linear;} */

.ani_effect {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action {top:0; opacity:1; transition:all 0.5s linear;}

.ani_effect2 {position:relative; top:0; opacity:0; transition:all 0.5s linear;}
.ani_effect2.action {top:0; opacity:1; transition:all 0.5s linear;}

.delay1{transition-delay:0.4s !important;}
.delay2{transition-delay:0.7s !important;}
.delay3{transition-delay:1.0s !important;}
.delay4{transition-delay:1.3s !important;}



/* visual */
#visual{width: 100%; height:100vh; position: relative; overflow:hidden;}
#visual .slick-list {height:100%;}
#visual .slick-track {height:100%}
#visual .slick-slide {height:100%}
#visual .visual_in{position: relative; width: 100%; height: 100%;}
#visual .visual_in:after{content:''; display: block; clear:both;}
#visual .visual_in .roll{height:100%;}
#visual .visual_in .roll .txt{position:absolute; top:50%; text-align:center; width:100%; padding:0 3%; transform:translate(0, -50%)}
#visual .visual_in .roll .txt h2{font-size:5.882rem; letter-spacing:0; font-weight: 900; line-height: 1; position: relative; top:-30px; opacity:0; font-family:'Outfit', sans-serif;}
#visual .visual_in .roll .txt h2 span{display:inline-block; vertical-align:middle; color:#fff; margin-right:-15px; position:relative; z-index:10}
#visual .visual_in .roll .txt h2 span.two {margin:65px 0 0 -15px}
#visual .visual_in .roll .txt h2 i {display:inline-block; vertical-align:middle; width:94px; height:98px; background:url('/lsp../img/v_plus.png') center center/100% no-repeat; position:relative; z-index:1}
#visual .visual_in .roll .txt .mTxt{color:rgba(255,255,255,0.8); font-size:1.176rem; padding: 20px 0 0; position: relative; top:-30px; opacity:0;}
#visual .visual_in .roll .img{opacity:1; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-color:#000;
	background-size: cover; background-position: 50% 0;  border:0;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);}
#visual .visual_in .roll.v01 .img {background-image:url('/img/main_visual01.jpg')}
#visual .visual_in .roll.v02 .img {background-image:url('/img/main_visual02.jpg')}
#visual .visual_in .roll.v03 .img {background-image:url('/img/main_visual03.jpg')}


#visual .visual_in .slick-slide.action .img {opacity:1; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transition:all 1s; transition-delay:0.4s;}
#visual .visual_in .slick-slide.action .txt h2 {top:0; opacity:1; transition:all 1s; transition-delay:0.6s;}
/* #visual .visual_in .slick-slide.action .txt h2 span{top:0; opacity:1; transition:all 1s; transition-delay:0.2s;} */
#visual .visual_in .slick-slide.action .txt .mTxt {top:0; opacity:1; transition:all 1s; transition-delay:0.8s;}




#visual .b_btn{cursor:pointer; position:absolute; bottom: 35px; left:50%; margin-left: -530px; z-index:9999; width:10px; height:12px; background:url('/img/pauseBtn.png') no-repeat center/100% auto; opacity: 1; transition:all .3s linear;}
#visual .b_btn:hover{opacity: 1;}

#visual .slick-dots{font-size:0; margin: 0 -6px; position: absolute; left: 50%; margin-left: -620px; bottom: 35px; z-index: 9999;}
#visual .slick-dots li{display:inline-block; margin: 0 7px; cursor:pointer; }
#visual .slick-dots li.slick-active {}
#visual .slick-dots li button{cursor:pointer; padding: 0; border:0; padding:0; outline:none; font-size:0; background:rgba(255,255,255,0.3); width:8px; height:8px; border-radius:50%}
#visual .slick-dots li.slick-active button {background:#fff; width:13px; height:13px;}

#visual .scrollBtn {position:absolute; bottom:120px; right:50%; margin-right:-650px; z-index:9999; display:block;}
#visual .scrollBtn a {display:block;}
#visual .scrollBtn:before {display:block; content:""; width:12px; height:13px; background:url('/img/scrollBtn.png') center center/100% no-repeat; animation:down_ani 2s ease-in-out infinite; position:absolute; bottom:-100px; right:50px}
@keyframes down_ani {          
		   0% {bottom:-100px;} 
		   50% {bottom:-80px;}  
		   100% {bottom:-100px;} 
		}
#visual .scrollBtn span {font-weight:500; line-height:1; letter-spacing:0.3pt; font-family:'Outfit', sans-serif; color:#fff; font-size:0.882rem; transform: rotate(-90deg); display:inline-block;}


#contents {overflow:hidden; clear:both}

/* INTRODUCTION */
.intro_con {position:relative; overflow:hidden;}
	.intro_con dl {width:33.33%; float:left; text-align:center; position:relative; height:700px; transition:all 0.8s; display:flex; justify-content:center; align-items:center;}
	.intro_con dl:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: #222; z-index: 10;}
	.intro_con dl a {display:block; width:100%; transition: all 0.3s linear;}
	.intro_con dt {position:absolute; width:100%; height:100%; top:0; left:0; background:url('/img/introBg_01_up.jpg') center center/cover no-repeat; transition: all 0.3s linear; -webkit-filter: grayscale(1); filter: grayscale(1);}
	.intro_con dl:nth-child(2) dt {background-image:url('/img/introBg_02_up.jpg')}
	.intro_con dl:nth-child(3) dt {background-image:url('/img/introBg_03_up.jpg')}
	.intro_con dt img {height:100%; display:none;}
	.intro_con dd {position:relative; z-index:10}
	.intro_con dd h6 {font-family:'Outfit', sans-serif; font-weight:700; letter-spacing:0.3pt; color:#fff; line-height:1; font-size:1.765rem;}
	.intro_con dd p {font-family:'Outfit', sans-serif; line-height:1.3; letter-spacing:0.3pt; color:rgba(255,255,255,0.8); margin:20px 0 35px}
	.intro_con dd .viewBtn {margin:0 auto}
	.intro_con dd .viewBtn span {color:#fff; border-color:rgba(255,255,255,0.6)}
	.intro_con dd .viewBtn:hover span {border-color:#00a29e}
	.intro_con dd .viewBtn i {background-image:url('/img/linkBtn.png')}

	.intro_con dl a:hover {}
	.intro_con dl a:hover dt {-webkit-filter: grayscale(0); filter: grayscale(0); transform: scale(1.1);}
	.intro_con dl a:hover dd .viewBtn span {color:#fff; border-color:rgba(255,255,255,0.6)}
	.intro_con dl a:hover dd .viewBtn:after {opacity: 1; width: 116%;}
	.intro_con dl a:hover dd .viewBtn span {border-color:#00a29e}

	.intro_con dl.on {width:35% }
	.intro_con dl.on dt img {}
	.intro_con dl.off {width:calc((100% - 35%)/2) } 

	.intro_con.action dl:after {width: 0; transition: all 1.2s; transition-delay: 0.8s;}


/* ABOUT */
.about_con {position:relative; overflow:hidden;}
	.about_in {position:relative;}
	.about_in:after {display:block; content:""; clear:both}
	.about_in:before {display:none; content:""; width:573px; height:296px; background:url('/img/newsBg.png') center bottom/100% no-repeat; position:absolute; bottom:0; left:54px}
	.about_con .aboutList { float:left; width:42.68%;}
	.about_con .aboutList:last-child {float:right; margin-top:16.5%}
	.about_con dl {position:relative; margin-top:7%; float:left; width:42.68%;}
	.about_con dl:nth-child(even) {float:right;}
	.about_con dl:first-child {margin-top:0;}
	.about_con dl:nth-child(2n+1) {clear:both}
	.about_con dl:nth-child(2) {margin-top:15%;}
	.about_con dl:nth-child(3) {margin-top:-8%;}
	.about_con dl a {display:block; }
	.about_con dt {overflow:hidden;}
	.about_con dt img {width:100%; transition: all 0.3s linear;}
	.about_con dd {padding-left:10%; margin-top:-30px}
	.about_con dd .mTxt span {margin-right:3%}
	.about_con dd .mTxt span:last-child {margin-right:0}
	.about_con dd .viewBtn {margin-top:30px}

	.about_con dl a:hover {}
	.about_con dl a:hover dt {}
	.about_con dl a:hover dt img {transform:scale(1.1)}
	.about_con dl a:hover dd {}
	/* .about_con dl a:hover .mTit {color:#00a29e}
	.about_con dl a:hover .mTxt {color:#00a29e}
	.about_con dl a:hover .mTxt2 {color:#00a29e} */
	.about_con dl a:hover dd .viewBtn {}
	.about_con dl a:hover dd .viewBtn span {color:#fff}
	.about_con dl a:hover dd .viewBtn:after {opacity: 1; width: 116%;}
	.about_con dl a:hover dd .viewBtn i {background-image:url('/img/linkBtn.png')}



/* NEWS */
.news_con {position:relative;}
	.news_con:before {display:block; content:""; width:573px; height:573px; background:url('/img/newsBg.png') center center/100% no-repeat; position:absolute; top:-295px; left:50%; margin-left:-560px; z-index:1}
	.news_con:after {content: ''; width: 50%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(30deg, rgba(0,165,189,1) 0%, rgba(0,162,158,1) 50%, rgba(87,189,158,1) 100%); z-index: -1; transition: all 0.8s; z-index:10;}
	.news_in {position:relative; /* max-width:1260px; */ margin:0 auto; z-index:99}
	.news_in .news_tit {display:inline-block; vertical-align:middle; position:absolute; top:50%; transform:translate(0, -50%); z-index:100; left:50%; margin-left:-615px}
	.news_in .news_tit .mTit {color:#fff}
	.news_in .news_tit .mTxt2 {color:#fff; line-height:1; margin-bottom:80px}
	.news_in .newsList {display:inline-block; vertical-align:middle; position:relative; left:50%; margin-left:-210px}
	.news_in .newsList:after {display:block; content:""; clear:both;}
	.news_in .newsList .slick-list {/* overflow:visible */}
	.news_in .newsList dl {}
	.news_in .newsList .slick-slide {margin-right:30px; width:390px; opacity:0.3}
	/* .news_in .newsList .slick-slide.slick-cloned {opacity:0} */
	.news_in .newsList .slick-slide.slick-active {opacity:1}
	.news_in .newsList .slick-slide.slick-active dt {-webkit-filter: grayscale(0); filter: grayscale(0);}
	.news_in .newsList dl a {display:block; transition: all 0.3s linear;}
	.news_in .newsList dt {overflow:hidden; position:relative; background:#00a29e; transition: all 0.3s linear; -webkit-filter: grayscale(1); filter: grayscale(1);}
	.news_in .newsList dt img {width:100%; background-size:cover; background-repeat:no-repeat; background-position:center; transition: all 0.3s linear;}
	.news_in .newsList dt span.category {font-family:'Outfit', sans-serif; font-size:13px; color:#fff; font-weight:500; width:70px; line-height:30px; background:#00a29e; text-align:center; position:absolute; top:0; left:0}
	.news_in .newsList dd {background:#fff; padding:9%; border:1px solid #ddd; border-top:none; transition: all 0.3s linear;}
	.news_in .newsList dd .mTxt2 {color:#222; font-weight:700; line-height:1.4; margin:0; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; overflow: hidden; height: 3rem; transition: all 0.3s linear;}
	.news_in .newsList dd .date {display:block; font-family:'Outfit', sans-serif; color:#888; letter-spacing:0.3pt; line-height:1.1; margin-top:10px; transition: all 0.3s linear;}

	.news_in .newsList .slick-arrow {cursor:pointer; padding:0; margin:0; font-size:0; border:none; background:url('/img/n_prev.png') center center/100% no-repeat; width:31px; height:24px; position:absolute; bottom:50%; margin-bottom:-100px; left:-200px; z-index:999}
	.news_in .newsList .slick-next {background-image:url('/img/n_next.png'); left:-150px}

	.news_in .newsList dl a:hover {}
	.news_in .newsList dl a:hover dt {}
	.news_in .newsList dl a:hover dt img {opacity:0.6; transform:scale(1.1)}
	.news_in .newsList dl a:hover dd {border-color:#00a29e}
	.news_in .newsList dl a:hover dd .mTxt2 {color:#00a29e;}
	.news_in .newsList dl a:hover dd .date {color:#00a29e;}



/* BRAND */
.brand_con {position:relative;}
	.brand_con:after {display:block; content:""; width:500px; height:500px; background:url('/img/brandBg.png') center center/100% no-repeat; position:absolute; top:-85px; right:50%; margin-right:-680px; z-index:-1}
	.brand_con .brandList {margin-top:50px; padding-left:28.86%}
	.brand_con .brandList .brandList_in {position:relative; overflow:hidden;}
	.brand_con .brandList .brandList_in a {display:block; transition: all 0.3s linear;}
	.brand_con .brandList .brandList_img {position:relative; display:table-cell; vertical-align:bottom; width:60%}
	.brand_con .brandList .brandList_img dt {overflow:hidden;}
	.brand_con .brandList .brandList_img dt img {width:100%; transition: all 0.3s linear;}
	.brand_con .brandList .brandList_img dd {position:absolute; bottom:0; left:0; width:100%; padding:0 10% 12% 10%}
	.brand_con .brandList .brandList_img dd h6 {font-size:1.765rem; line-height:1; font-family:'Outfit', sans-serif; margin-bottom:15px; color:#fff; font-weight:700; letter-spacing:0.3pt;}
	.brand_con .brandList .brandList_img dd p {line-height:1; letter-spacing:-0.5pt; color:#fff; margin-bottom:0}
	.brand_con .brandList .brandList_txt {padding:0 0 10% 9%; display:table-cell; vertical-align:bottom; width:calc(100% - 60%)}
	.brand_con .brandList .brandList_txt dt {font-size:1.765rem; color:#222; line-height:1.5; letter-spacing:-0.5pt; transition: all 0.3s linear;}
	.brand_con .brandList .brandList_txt dd {}
	.brand_con .brandList .brandList_txt dd p {color:#777; letter-spacing:-0.5pt; margin:20px 0 30px; transition: all 0.3s linear;}
	.brand_con .brandList .brandList_txt dd .more {text-decoration:underline; font-family:'Outfit', sans-serif; color:#00a29e; font-size:1rem; letter-spacing:0.3pt; transition: all 0.3s linear;}

	.brand_con .brandList .brandList_in a:hover {}
	.brand_con .brandList .brandList_in a:hover .brandList_img dt img {transform:scale(1.1)}
	.brand_con .brandList .brandList_in a:hover .brandList_txt dt {color:#00a29e;}
	.brand_con .brandList .brandList_in a:hover .brandList_txt dd p {color:#00a29e;}
	.brand_con .brandList .brandList_in a:hover .brandList_txt dd .more {}

	.brand_con .brandList .slick-dots {position:absolute; top:50%; left:0; transform:translate(0, -50%); padding:40px 0 40px 40px}
	.brand_con .brandList .slick-dots:before {display:block; content:""; width:6px; height:100%; background:#f0f0f0; position:absolute; top:0; left:0}
	.brand_con .brandList .slick-dots li {line-height:1.1; margin-bottom:20px}
	.brand_con .brandList .slick-dots li:last-child {margin-bottom:0}
	.brand_con .brandList .slick-dots li a {display:inline-block; font-size:1.176rem; letter-spacing:-0.5pt; color:#777; line-height:1.1; transition: all 0.3s linear;}
	.brand_con .brandList .slick-dots li.slick-active a {color:#00a29e; font-weight:800;}

	.brand_con .brandList .slick-dots li a:hover {color:#00a29e;}



/* QUICK */
.quick_con {position:relative;}
	.quick_con:after {display:block; content:""; clear:both}
	.quick_con .quick_tit {float:left; width:28.86%; padding-top:2%}
	.quick_con .quickList {float:left; width:calc(100% - 28.86%); position:relative}
	.quick_con .quickList:after {display:block; content:""; clear:both}
	.quick_con .quickList li {float:left; width:25%; padding:0 3%}
	.quick_con .quickList li:nth-child(2) {margin-top:8%}
	.quick_con .quickList li:nth-child(4) {margin-top:3%}
	.quick_con .quickList li a {line-height:1.4; display:block; font-size:1rem; letter-spacing:-0.5pt; text-align:center; transition: all 0.3s linear;}
	.quick_con .quickList li i {display:block; width:110px; height:110px; border:1px solid #ddd; border-radius:110px; background:url('/img/quick01.png') center center no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%); margin:0 auto 24px; transition: all 0.3s linear;}
	.quick_con .quickList li:nth-child(2) i {background:url('/img/quick02.png') center center no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);}
	.quick_con .quickList li:nth-child(3) i {background:url('/img/quick03.png') center center no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);}
	.quick_con .quickList li:nth-child(4) i {background:url('/img/quick04.png') center center no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);}

	.quick_con .quickList li a:hover {color:#00a29e;}
	.quick_con .quickList li a:hover i {border-color:#00a29e; background-color:#00a29e; background-image:url('/img/quick01_up.png');}
	.quick_con .quickList li:nth-child(2) a:hover i {background-image:url('/img/quick02_up.png');}
	.quick_con .quickList li:nth-child(3) a:hover i {background-image:url('/img/quick03_up.png');}
	.quick_con .quickList li:nth-child(4) a:hover i {background-image:url('/img/quick04_up.png');}


/* gray */
.grayscale {
  /* Firefox 10-34 */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(1);

  /* Firefox 35+ */
  filter: grayscale(1);

  /* IE 6-9 */
  filter: gray;
}

.grayscale.grayscale-fade {
  transition: filter .5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .5s;
    transition:         -webkit-filter .5s;
  }
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
  -webkit-filter: grayscale(0);
  filter:         grayscale(0);
}

/* Background element */
.grayscale.grayscale-replaced {
  -webkit-filter: none;
  filter:         none;
}

.grayscale.grayscale-replaced > svg {
  -webkit-transition: opacity .5s ease;
  transition:         opacity .5s ease;
  opacity: 1;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
  opacity: 0;
}








/*******************************************************************************
    @media 1400px
*******************************************************************************/

/* INTRODUCTION */
.intro_con dl {height:500px;}
.intro_con dl a {padding: 0 3%}
.intro_con dt img {}



/*******************************************************************************
    @media ~1280px
*******************************************************************************/

/* visual */
#visual{}
#visual .visual_in .roll{}
#visual .visual_in .roll .txt{} 
#visual .visual_in .roll .txt h2{}
#visual .visual_in .roll .txt h2 span{}
#visual .visual_in .roll .txt .mTxt{}

#visual .b_btn{left:25px; margin-left: 90px;}
#visual .slick-dots{left: 25px; margin-left: 0;}

#visual .scrollBtn {right:-20px; margin-right:0;}


/* ABOUT */
.about_in:before {left:0; width:auto; height:auto; padding:13% 25%}


/* NEWS */
.news_con {}
	.news_con:before {left:25px; width:450px; height:450px; padding:0; margin:0; top:-235px}
	.news_in {max-width:1260px}
	.news_in .news_tit {left:25px; margin:0}
	.news_in .newsList {left:auto; margin-left:0; padding-left:35%}
	.news_in .newsList .slick-slide {width:320px}
	.news_in .newsList .slick-arrow {left:1.1%;}
	.news_in .newsList .slick-next {left:1.4%;}


/* BRAND */
.brand_con {}
	.brand_con:after {right:-100px; width:450px; height:450px; padding:0; margin:0;}
	.brand_con .brandList .brandList_txt br {display:none;}
	





/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/

/* 공통 */
.mTit{font-size:3rem;}
.mTit small{font-size:18px;}
.mTxt{}
.mTxt2 {margin:10px 0 5px}
.moreBtn{margin-top: -8px; width:10px; height:16px;}

/* visual */
#visual{}
#visual .visual_in .roll{}
#visual .visual_in .roll .txt{} 
#visual .visual_in .roll .txt h2{font-size:4.5rem}
#visual .visual_in .roll .txt h2 span{}
#visual .visual_in .roll .txt h2 i {width:70px; height:73px}
#visual .visual_in .roll .txt .mTxt{}

#visual .b_btn{bottom: 21px; left:3%; margin-left: 65px; width:8px; height:10px;}
#visual .slick-dots{margin: 0 -4px; left: 3%; margin-left: 0; bottom: 20px;}
#visual .slick-dots li{margin: 0 4px;}

#visual .scrollBtn {right:-20px; margin-right:0; bottom:90px}
#visual .scrollBtn:before {width:10px; height:11px; bottom:-80px; right:42px}
@keyframes down_ani {          
		   0% {bottom:-80px;} 
		   50% {bottom:-60px;}  
		   100% {bottom:-80px;} 
		}


/* INTRODUCTION */
.intro_con {}
	.intro_con dl {height:400px;}
	.intro_con dd p {margin:15px 0 20px}


/* ABOUT */
.about_con {}
	.about_con dl {width:45%;}
	.about_con dd {margin-top:-23px}
	.about_con dd .viewBtn {margin-top:20px}


/* NEWS */
.news_con {}
	.news_con:before {left:3%; width:350px; height:350px; top:-182px}
	.news_in .news_tit {left:3%}
	.news_in .news_tit .mTxt2 {margin-bottom:50px}
	.news_in .newsList {/* margin-left:340px; width:calc(100% - 340px) */}
	.news_in .newsList .slick-slide {margin-right:20px; width:280px}
	.news_in .newsList .slick-arrow {width:25px; height:19px; left:0.95%; margin-bottom:-70px; /* left:-145px */}
	.news_in .newsList .slick-next {/* left:-105px */; left:1.15%}


/* BRAND */
.brand_con {}
	.brand_con:after {top:-30px; width:350px; height:350px;}
	.brand_con .brandList {padding-left:25%; margin-top:30px}
	.brand_con .brandList .brandList_txt {padding:0 0 7% 6%}
	.brand_con .brandList .brandList_txt dd p {margin:15px 0 25px 0}
	.brand_con .brandList .slick-dots {padding:25px 0 25px 25px}
	.brand_con .brandList .slick-dots li {margin-bottom:15px}


/* QUICK */
.quick_con {}
	.quick_con {}
	.quick_con .quick_tit {width:25%}
	.quick_con .quickList {width:calc(100% - 25%)}
	.quick_con .quickList li i {width:100px; height:100px; margin-bottom:15px;}





/*******************************************************************************
    @media 800px
*******************************************************************************/


/* NEWS */
.news_con {}
.news_con:after {width:100%; height:100%}
.news_in {padding:0 3%}
.news_in .news_tit {left:auto; position:relative; top:auto; transform:translate(0,0); display:block; text-align:center; }
.news_in .news_tit .mTxt2 {margin-bottom:40px}
.news_in .newsList {margin:0; width:100%; padding:0;}
.news_in .newsList .slick-list {overflow:visible}
.news_in .newsList .slick-slide {margin:0 7px}
.news_in .viewBtn.white {margin:40px auto 0}

.news_in .newsList .slick-arrow {left:0; margin:0; top:-100px}
.news_in .newsList .slick-next {left:auto; right:0;}





/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){

}



/*******************************************************************************
    @media 481~680px
*******************************************************************************/


/* 공통 */
.mTit{font-size:2.6rem;}
.mTit small{font-size:16px; margin-left: 8px;}
.mTxt2 {font-size:1.1rem}

/* visual */
#visual{}
#visual .visual_in .roll{}
#visual .visual_in .roll .txt{} 
#visual .visual_in .roll .txt h2{font-size:3.8rem;}
#visual .visual_in .roll .txt h2 span {margin-right:-10px}
#visual .visual_in .roll .txt h2 span.two {margin:35px 0 0 -10px}
#visual .visual_in .roll .txt h2 i {width:60px; height:63px}
#visual .visual_in .roll.action .txt .mTxt {font-size:1rem; padding-top:15px}

#visual .b_btn{}
#visual .slick-dots{}
#visual .slick-dots li{margin: 0 4px;}
#visual .slick-dots li.slick-active button {}


/* INTRODUCTION */
.intro_con {}
	.intro_con dl {height:auto; float:none; width:100%; max-height:100%; overflow:hidden;}
	.intro_con dl a {padding:60px 3%; }
	.intro_con dt {/* position:absolute; top:0; left:50%; transform:translate(-50%, -50%); */ width:100%; z-index:1}
	.intro_con dt img {height:auto; width:100%}
	.intro_con dd {position:relative; top:auto; width:auto; padding:0; transform:translate(0,0); z-index:10}
	.intro_con dd p {margin:12px 0 15px}

	.intro_con dl.on {width:100% }
	.intro_con dl.on dt img {}
	.intro_con dl.off {width:100% } 

/* ABOUT */
.about_con {}
	.about_in:before {/* display:none; */}
	.about_con .aboutList {width:49%}
	.about_con .aboutList:last-child {margin-top:10%;}
	.about_con dl {width:48%; margin-top:8%}
	.about_con dl:nth-child(2) {margin-top:10%}
	.about_con dl:nth-child(3) {margin-top:-2%}
	.about_con dd {padding-left:5%; margin-top:-18px}
	.about_con dd .viewBtn {margin-top:20px}


/* NEWS */
.news_con {}
	.news_con:before {width:250px; height:250px; top:-130px}
	.news_in .news_tit .mTxt2 {margin-bottom:30px}
	.news_in .newsList .slick-slide {margin:0 5px}
	.news_in .newsList dt span.category {width:60px; font-size:12px; line-height:26px}
	.news_in .newsList dd {padding:15px}
	.news_in .newsList dd .date {margin-top:8px}
	.news_in .viewBtn.white {margin:30px auto 0}
	.news_in .newsList .slick-arrow {top:-85px}



/* BRAND */
.brand_con {}
	.brand_con:after {top:0; right:-50px; width:250px; height:250px;}
	.brand_con .brandList {padding:50px 0 0 00; margin-top:25px}
	.brand_con .brandList .brandList_img {width:55%}
	.brand_con .brandList .brandList_img dd {padding:0 8% 9% 8%}
	.brand_con .brandList .brandList_img dd h6 {font-size:1.4rem; margin-bottom:10px}
	.brand_con .brandList .brandList_txt {padding:0 0 6% 5%; width:calc(100% - 55%)}
	.brand_con .brandList .brandList_txt dt {font-size:1.4rem}
	.brand_con .brandList .brandList_txt dd p {margin:10px 0 20px 0}
	.brand_con .brandList .slick-dots {padding:0 0 15px 0; width:100%; left:auto; transform:translate(0,0); top:0; text-align:center}
	.brand_con .brandList .slick-dots:before {top:auto; width:100%; height:3px; bottom:0}
	.brand_con .brandList .slick-dots li {margin:0 3% 0 0; display:inline-block; vertical-align:top;}
	.brand_con .brandList .slick-dots li:last-child {margin:0}
	.brand_con .brandList .slick-dots li a {font-size:1rem}


/* QUICK */
.quick_con {}
	.quick_con .quick_tit {width:100%; float:none; text-align:center; margin-bottom:20px}
	.quick_con .quickList {width:100%; float:none;}
	.quick_con .quickList li i {width:80px; height:80px; margin-bottom:10px; background: url('/img/quick01.png') center center/45px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);}
	.quick_con .quickList li:nth-child(even) {margin-top:5%}
	.quick_con .quickList li:nth-child(2) i {background: url('/img/quick02.png') center center/45px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 
	.quick_con .quickList li:nth-child(3) i {background: url('/img/quick03.png') center center/45px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 
	.quick_con .quickList li:nth-child(4) i {background: url('/img/quick04.png') center center/45px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 




/*******************************************************************************
    @media ~480px                body,html{font-size:13px; }
*******************************************************************************/

/* 공통 */
.mTit{font-size:2.4rem;}
.mTit small{font-size:15px; margin-left: 6px;}
.mTxt{font-size:13px;}
.moreBtn{margin-top: -6px; width:7px; height:12px;}


/* visual */
#visual .scrollBtn span {margin-right:1px}
#visual .scrollBtn:before {right:39px}

/* ABOUT */
.about_con {}
	.about_in:before {left:auto; right:-6%; padding:19% 34%}
	.about_con .aboutList {float:none !important; width:100%; margin:0 !important}
	.about_con dl {float:none !important; width:100%; margin:0 0 40px 0 !important;}
	.about_con dl:last-child {margin:0 !important}


/* NEWS */
.news_con {}
	.news_con:before {left:auto; right:-50px; width:250px; height:250px; top:-130px}
	.news_in .newsList .slick-arrow {top:-80px}



/* BRAND */
.brand_con {}
	.brand_con:after {top:auto; bottom:30px; right:-50px; padding:0; width:250px; height:250px}
	.brand_con .brandList {padding:50px 0 0 00;}
	.brand_con .brandList .brandList_img {width:100%; display:block;}
	.brand_con .brandList .brandList_img dd {padding:0 20px 25px 20px}
	.brand_con .brandList .brandList_txt {width:100%; display:block; padding:25px 0 0 0}
	.brand_con .brandList .brandList_txt dd p {margin:5px 0 15px}


/* QUICK */
.quick_con {}
	.quick_con .quickList li i {width:60px; height:60px; background: url('/img/quick01.png') center center/30px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);}
	.quick_con .quickList li:nth-child(even) {margin-top:5%}
	.quick_con .quickList li:nth-child(2) i {background: url('/img/quick02.png') center center/30px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 
	.quick_con .quickList li:nth-child(3) i {background: url('/img/quick03.png') center center/30px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 
	.quick_con .quickList li:nth-child(4) i {background: url('/img/quick04.png') center center/30px no-repeat, linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);} 

 /*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:320px){




}