@charset "utf-8";

.m-container {margin-top:-10rem;margin-bottom:-16rem;}

.m-txt .btxt,
.m-txt .btxt * {font-size:4.8rem;line-height:120%;font-family: 'GmarketSans', sans-serif;font-weight:600;margin-bottom:1rem;}
.m-txt .stxt,
.m-txt .stxt * {font-size:1.8rem;line-height:160%;}


.msec01 {position:relative;}

/* ----------- 메인 영상 --------- */
.mvis {width:100%;height:100vh;position:fixed;z-index:1;overflow:hidden;}
.mvis-inwrap {width:50%;position:absolute;left:70px;bottom:100px;z-index:10;}
.mvis-txtBox {width:calc(100% - 140px);transition:all .5s;}
.mvis .m-txt {transition:all .3s;}
.mvis .btxt,
.mvis .stxt {color:#fff;}
.videoBox {position:relative;width:100%;height:0;min-height:100vh;padding-bottom:56.25%;}
.videoBox:before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;display:block;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2;}
.videoBox video {position:absolute;top:0;left:0;height:100%;z-index:1;}
.videoBox iframe {position:absolute;top:0;left:0;min-width:100%;width:177dvh;height:100%;z-index:1;}
.mvis-control {margin-top:-20px;height:143px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
}
.mvis-mute {display:block;margin-right:40px;width:54px;}
.mvis-mute .txt {font-size:1.2rem;color:#fff;margin-top:-1.2rem;}
.mvis-mute .eq {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: center;
justify-content: center;
}
.mvis-mute .eq span {display:block;width:4px;background:#fff;}
.mvis-mute .eq span + span {margin-left:4px;}
.mvis-mute .txt {display:none;}
.mvis-mute .eq {height:24px;}
.mvis-mute .eq span {transition:all .5s;}
.mvis-mute .eq span:nth-child(1) {height:24px;animation:equalize 1s 0s infinite;}
.mvis-mute .eq span:nth-child(2) {height:16px;animation:equalize2 1.1s 0s infinite;}
.mvis-mute .eq span:nth-child(3) {height:32px;animation:equalize3 1.9s 0s infinite;animation-delay:.3s;}
.mvis-mute .eq span:nth-child(4) {height:8px;animation:equalize4 1.5s 0s infinite;animation-delay:.5s;}
.mvis-mute.muted .eq span {height:4px;animation:none;}
.mvis-mute.muted .txt {display:block;}

@keyframes equalize {
  0% {
    height:24px;
  }
  50%{
	height:0;
  }
  100%{
	height:24px;
  }
}

@keyframes equalize2 {
  0% {
    height:16px;
  }
  70%{
	height:0;
  }
  100%{
	height:16px;
  }
}

@keyframes equalize3 {
  0% {
    height:32px;
  }
  20%{
	height:0;
  }
  100%{
	height:32px;
  }
}

@keyframes equalize4 {
  0% {
    height:8px;
  }
  20%{
	height:0;
  }
  100%{
	height:8px;
  }
}


.mvis-more {display:block;background:url(/share/img/main/mvis_more.svg) no-repeat center center;}
.mvis-more .img {display:block;width:143px;height:143px;background:url(/share/img/main/mvis-more_txt.png) no-repeat center center /146px auto;animation:spin 20s linear infinite;}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);} }
.mv-close {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0, 0, 0, 0);z-index:400;}

/* 영상 more 버튼 클릭 시 */
.movieMore {overflow:hidden;}
.movieMore #header {top:-100px;}
.movieMore #container {width:100%;height:100vh;overflow:hidden;}
.movieMore .mvis-txtBox {width:100%;}
.movieMore .mcopInfo {transform:translate(100%,0);z-index:-1;}
.movieMore .mvis-more {position:fixed;z-index:300;background-image:url(/share/img/main/mvis-close.svg)}
.movieMore .mvis-more .img {background-image:url(/share/img/main/mvis-more_txt_on.png);}
.movieMore .mproduct,
.movieMore  #footer {z-index:-1 !important;}
.movieMore .mv-close {display:block;}
.movieMore .mvis-mute {z-index:500;}
.movieMore .m-txt {opacity:0;}


/* ----------- 기업 소개 --------- */
/*.mcopInfo.close {height:0;overflow:hidden;padding-top:0;padding-bottom:0;}*/
.mcopInfo {width:50%;height:100vh;margin-left:auto;background:url(/share/img/main/mcopInfo_bg_221207.png) no-repeat left top /cover;position:relative;z-index:10;transition:all .8s;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.mcopInfo-inwrap {padding:0 50px;width:100%;}
.mcopInfo .m-txt {margin-bottom:5rem;}
.mcopInfo .btxt,
.mcopInfo .stxt {color:#fff;}
.mcopInfo-sld-wrap {width:calc(100% + 50px);padding-right:50px;padding-bottom:70px;overflow:hidden;}
.mcopInfo-sld {overflow:visible !important;}
.mcopInfo-sld .mcopInfo-sld-pagination .swiper-pagination-progressbar-fill {background:#ffffff;}
.mcopInfo-sld .mcopInfo-sld-pagination {bottom:-70px;top:auto !important;height:2px !important;background:rgba(255, 255, 255, 0.2)}
.mcopInfo-sld .swiper-slide {width:220px;cursor:pointer;}
.mcopInfo-sld .swiper-slide .imgBox {width:220px;height:220px;margin-bottom:3rem;background:#fff;border-radius:50%;box-shadow:0 15px 30px rgba(0, 0, 0, 0.2);position:relative;overflow:hidden;text-align:center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.mcopInfo-sld .swiper-slide .imgBox span {display:inline-block;position:relative;z-index:1;font-size:1.8rem;font-weight:600;line-height:140%;padding:60px 20px 0;}
.mcopInfo-sld .swiper-slide .imgBox:before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;transition:all .3s;opacity:0;}
.mcopInfo-sld .swiper-slide .imgBox:after {content:"";position:absolute;top:0;left:0;display:none;width:100%;height:100%;background:rgba(69,70,75,0.3);}
.mci1 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon1.svg) no-repeat center top;}
.mci2 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon2.svg) no-repeat center top;}
.mci3 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon3.svg) no-repeat center top;}
.mci4 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon4.svg) no-repeat center top;}
.mci5 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon5.svg) no-repeat center top;}
.mci6 .imgBox span {background:url(/share/img/main/mcopInfo-sld_icon6.svg) no-repeat center top;}
.mci1 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_01.png) no-repeat center center /cover;}
.mci2 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_02.png) no-repeat center center /cover;}
.mci3 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_03.png) no-repeat center center /cover;}
.mci4 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_04.png) no-repeat center center /cover;}
.mci5 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_05.png) no-repeat center center /cover;}
.mci6 .imgBox:before {background:url(/share/img/main/mcopInfo-sld_06.png) no-repeat center center /cover;}
.mcopInfo-sld .swiper-slide .txt {color:#fff;line-height:160%;}


/* ----------- 검색 --------- */
.msearch {width:50%;min-height:100vh;margin-top:20vh;padding:0 80px;background:url(/share/img/main/msearch_bg_1.jpg) no-repeat center top /cover;position:relative;z-index:1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.msearch-inwrap {padding:80px 0;width:520px;max-width:100%;}
.msearch .btxt {color:#fff;text-align:center;margin-bottom:2rem;}
.msearch .stxt {color:#fff;text-align:center;margin-bottom:7rem;}
.msearch .inputBox {border-bottom:2px solid #fff;margin-bottom:3rem;}
.msearch .inputBox.noline {border-bottom:none;}
.msearch .inputBox:after {content:"";display:block;clear:both;}
.msearch .inputBox .sel {float:left;width:50%;position:relative;}
.msearch .inputBox .sel + .sel {padding-left:20px;}
.msearch .inputBox .sel + .sel:before {content:"";position:absolute;top:50%;left:0;margin-top:-10px;display:block;width:1px;height:20px;background:rgba(255, 255, 255, 0.2);}
.msearch .inputBox input {width:100%;height:56px;background:rgba(255, 255, 255, 0.3);color:#fff;border-radius:5px;border:none;}
.msearch .inputBox input::placeholder {color:rgba(255, 255, 255, 0.5);}
.msearch .msrc-btn {display:block;width:100%;height:56px;line-height:56px;background:#222;border-radius:5px;}
.msearch .msrc-btn span {color:#fff;}

.msearch .inputBox .sel .selectric-wrapper {}
.msearch .inputBox .sel .selectric {border:none;background:none;max-width:100%;height:56px;padding-right:40px;color:#fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.msearch .inputBox .sel .selectric .button {width:56px;height:56px;background:url(/share/img/main/msearch_sel.svg) no-repeat right 15px center;font-size:0;}
.msearch .inputBox .sel .selectric .button:after {display:none;}
.msearch .inputBox .sel .selectric .label {color:#fff;font-size:1.6rem;margin:0;}
.msearch .inputBox .sel .selectric-scroll ul li {font-size:1.6rem;}
.msearch .inputBox .sel .selectric-items li.highlighted {background:#e5e5e5;}


/* ----------- 제품소개 --------- */
.mproduct {position:sticky;top:0;margin-left:auto;width:50%;height:100vh;background:#f4f4f4;z-index:10;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.mproduct-inwrap {width:calc(100% - 160px);padding-bottom:60px;margin:100px 80px 0;position:relative;}
.mproduct-tab-sld {margin-bottom:40px;position:absolute;top:40px;left:0;right:0;width:100%;z-index:2;}
.mproduct-tab-sld .swiper-slide {height:80px;padding:0 20px;margin:0 0 20px 0;text-align:center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.mproduct-tab-sld .swiper-slide span {display:inline-block;margin-top:5px;font-size:1.8rem;color:#222;font-weight:700;letter-spacing:0;font-family: 'GmarketSans', sans-serif;line-height:140%;}
.mproduct-tab-sld .swiper-slide-active {width:100%;background:#1089ec;border-radius:40px;box-shadow:0 10px 17px rgba(0, 0, 0, 0.1);}
.mproduct-tab-sld .swiper-slide-active span {color:#fff;}
.mproduct-tab-sld .swiper-slide {transition:color .3s;}
.mproduct-sld-wrap {position:relative;}
.mproduct-sld  {max-width:100%;width:470px;margin:0 auto;}
.mproduct-sld .swiper-slide {padding-top:150px;}
.mproduct-sld .img {text-align:center;margin-bottom:4rem;height:calc(100vh - 500px);max-height:calc(100vh - 500px);
display: -ms-flexbox;
display: flex;
-ms-flex-align: flex-end;
align-items: flex-end;
-ms-flex-pack: center;
justify-content: center;
}
.mproduct-sld .img img {display:inline-block;max-width:100%;max-height:100%;}
.mproduct-sld .pt0 .img {height:calc(100vh - 350px);max-height:calc(100vh - 350px);}
.mproduct-sld .btxt {margin-bottom:2rem;overflow:hidden;text-align:center;}
.mproduct-sld .btxt span {font-family: 'GmarketSans', sans-serif;font-size:3.2rem;color:#1089ec;font-weight:700;line-height:140%;}
.mproduct-sld .stxt {overflow:hidden;text-align:center;}
.mproduct-sld .stxt span {line-height:200%;color:#222;}
.mproduct-sld .btxt span,
.mproduct-sld .stxt span {display:block;transform:translate(0,200px);transition:all .6s;transition-delay:.1s;}
.mproduct-sld .swiper-slide-active .btxt span,
.mproduct-sld .swiper-slide-active .stxt span {transform:none;}

	@media screen and (max-height:700px){
	
		.mproduct-sld .img {height:calc(100vh - 450px);}
		.mproduct-sld .pt0 .img {height:calc(100vh - 300px);}
		.mproduct-sld .btxt {margin-bottom:1rem;}
	}

.mproduct-sld-control button {position:absolute;top:50%;margin-top:-80px;width:80px;height:80px;background:#1089ec;border-radius:50%;z-index:10;transition:all .3s;}
.mproduct-sld-control button.prev {left:0;}
.mproduct-sld-control button.next {right:0;}
.mproduct-sld-control button .icon {display:block;position:relative;}
.mproduct-sld-control button .icon:before {content:"";position:absolute;top:50%;left:50%;margin:-6px 0 0 -8px;display:block;width:16px;height:12px;}
.mproduct-sld-control button.prev .icon:before {background:url(/share/img/layout/arrow.svg) no-repeat center center /16px auto;transform:rotate(180deg)}
.mproduct-sld-control button.next .icon:before {background:url(/share/img/layout/arrow.svg) no-repeat center center /16px auto;}


/* ----------- 새소식 --------- */
.msec03 {width:100%;height:100vh;padding:80px;background:url(/share/img/main/msec03_bg.png) no-repeat center top /cover;position:relative;z-index:1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.msec03-inwrap {width:1400px;max-width:100%;margin:0 auto;}
.msec03-inwrap:after {content:"";display:block;clear:both;}
.msec03 .m-txt {margin-bottom:10rem;}
.msec03 .m-txt .btxt {font-weight:500;}

.msec03-flex {
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mboard,
.mlink {float:left;width:49.4%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mlink {margin-left:1.2%;}
.mlink a {display:block;width:48.8%;height:325px;padding:50px;margin-bottom:20px;background:#fff;box-shadow:0 10px 17px rgba(0, 0, 0, 0.1);border-radius:10px;transition:all .5s;}
.mlink a + a {margin-left:2.4%;}

.mboard {background:#fff;border-radius:10px;padding:50px;margin-bottom:20px;box-shadow:0 10px 17px rgba(0, 0, 0, 0.1);}
.mboard-inwrap {position:relative;width:100%;}
.mboard-sld {height:100%;width:100%;}
.mboard-sld .cate {display:inline-block;padding-bottom:0.2rem;margin-bottom:3rem;border-bottom:1px solid #333;}
.mboard-sld .btxt {margin-bottom:3rem;font-weight:600;font-size:2rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.mboard-sld .stxt {margin-bottom:60px;color:#999;line-height:200%;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;line-height: 1.6em;height: 3.2em;overflow:hidden;}
.mboard-sld .date {position:absolute;bottom:0;left:0;color:#999;}
.mboard-sld-control {position:absolute;bottom:0;right:0;z-index:1;}
.mboard-sld-control button {width:40px;height:40px;border-radius:50%;background:#222;position:relative;cursor:pointer;}
.mboard-sld-control .next {margin-left:5px;}
.mboard-sld-control .prev:before,
.mboard-sld-control .next:before {content:"";position:absolute;top:50%;left:50%;margin:-5px 0 0 -7px;width:14px;height:10px;}
.mboard-sld-control .prev:before {background:url(/share/img/layout/arrow.svg) no-repeat center center /14px auto;transform:rotate(180deg)}
.mboard-sld-control .next:before {background:url(/share/img/layout/arrow.svg) no-repeat center center /14px auto}

.mlink .catalog {background:url(/share/img/main/mlink_catalog_bg.png) no-repeat center center /cover;}
.mlink .tour {background:url(/share/img/main/mlink_toru_bg.png) no-repeat center center /cover;}
.mlink-inwrap {position:relative;height:100%;padding-bottom:50px;}
.mlink .btxt {margin-bottom:2rem;font-family: 'GmarketSans', sans-serif;font-weight:600;font-size:3rem;color:#fff;}
.mlink .stxt {color:#fff;line-height:160%;}
.mlink .catalog .mlink-inwrap:before,
.mlink .tour .mlink-inwrap:before {content:"";position:absolute;bottom:0;left:0;display:block;width:14px;height:10px;background:url(/share/img/layout/arrow.svg) no-repeat center center /14px auto;}

	@media screen and (min-width:1200px){
	
		/* hover */
		.mcopInfo-sld .swiper-slide .imgBox:hover,
		.mcopInfo-sld .swiper-slide .imgBox:focus {padding-top:0;}
		.mcopInfo-sld .swiper-slide .imgBox:hover span,
		.mcopInfo-sld .swiper-slide .imgBox:focus span {color:#fff;background:none;padding-top:0;}
		.mcopInfo-sld .swiper-slide .imgBox:hover:before,
		.mcopInfo-sld .swiper-slide .imgBox:focus:before {opacity:1;}
		.mcopInfo-sld .swiper-slide .imgBox:hover:after,
		.mcopInfo-sld .swiper-slide .imgBox:focus:after {display:block;}

		.msec03 .mlink a:hover,
		.msec03 .mlink a:focus {transform:translate(0,-20px);}

		.mboard-sld a:hover .txt,
		.mboard-sld a:focus .txt {text-decoration:underline;}

		.mproduct-tab-sld .swiper-slide:not(.swiper-slide-active):hover,
		.mproduct-tab-sld .swiper-slide:not(.swiper-slide-active):focus {text-shadow:0 10px 15px rgba(0, 0, 0, 0.1);color:#fff;}
		.mproduct-sld-control button.prev:hover {margin-top:-100px;}
		.mproduct-sld-control button.next:hover {margin-top:-100px;}
	}

	@media screen and (max-width:1400px){
		
		.mvis-inwrap {left:40px;}

		.mproduct-inwrap {margin-left:40px;margin-right:40px;width: calc(100% - 80px);}
		.mproduct-tab-sld .swiper-slide {font-size:1.6rem;}

		.msearch {padding-left:40px;padding-right:40px;}

		.msec03 {padding-left:40px;padding-right:40px;}
		
		.mproduct-tab-sld .swiper-slide span {font-size:1.6rem;line-height:120%;}
	}

/* ---------- mobile ----------- */
	
	@media screen and (max-width:1200px){
		
		.m-txt .btxt, 
		.m-txt .btxt * {font-size:3.2rem;}
		.m-txt .stxt, 
		.m-txt .stxt * {font-size:1.6rem;}

		/* ----------- 메인 영상 --------- */
		.mvis {position:relative;}
		.mvis-inwrap {width:calc(100% - 40px);left:20px;bottom:30px;}
		.mvis-txtBox {width:auto;}
		.mvis-control {margin-top:2rem;-ms-flex-pack: start;justify-content: flex-start;}
		.mvis-mute {margin-right:0;}
		.mvis-more {display:none;}
		

		/* ----------- 기업 소개 --------- */
		.mcopInfo {width:100%;height:auto;}
		.mcopInfo-inwrap {padding:100px 20px;}
		.mcopInfo-sld-wrap {width:calc(100% + 20px);padding-right:20px;}
		.mcopInfo-sld .swiper-slide {width:180px;}
		.mcopInfo-sld .swiper-slide .imgBox {width:180px;height:180px;}
		


		/* ----------- 제품소개 --------- */
		.msec02 {
			display: -ms-flexbox;
			display: flex;
			-ms-flex-direction: column;
			flex-direction: column;
		}
		.msearch {order:1;width:100%;min-height:0;margin-top:0;padding:0;}
		.msearch-inwrap {padding:100px 20px;}
		.mproduct {order:2;position:static;width:100%;height:auto;}
		.mproduct-inwrap {margin:100px 20px 0;max-width:calc(100% - 40px);width:calc(100% - 40px);}
		.mproduct-sld .img,
		.mproduct-sld .pt0 .img {height:auto;max-height:none;}
		.mproduct-sld .img img,
		.mproduct-sld .pt0 .img {max-height:400px;}
		.mproduct-tab-sld {display:none;}
		.mproduct-sld {max-width:calc(100% - 120px);}
		.mproduct-sld-control button {width:48px;height:48px;margin-top:-24px;}
		.mproduct-sld-control .prev {left:-5px;}
		.mproduct-sld-control .next {right:-5px;}
		.mproduct-sld .swiper-slide {padding-top:0;}
		


		/* ----------- 새소식 --------- */
		.msec03 {height:auto;padding:100px 20px;background:#dce6f3;}
		.msec03 .m-txt {margin-bottom:3rem;}
		.mboard,
		.mlink {float:none;width:100%;}
		.mboard-sld-wrap {width:calc(100% + 40px);margin-left:-20px;margin-bottom:3rem;padding:0 20px;overflow:hidden;}
		.mboard {padding:35px;}
		.mboard-sld-control {bottom:-5px;}
		.mlink {margin-left:0;}
		.mlink-inwrap {padding-bottom:4rem;}
		.mlink a {width:100%;height:auto;padding:40px 35px 35px;margin:0;}
		.mlink a + a {margin-left:0;margin-top:2rem;}
		.mlink .btxt {margin-bottom:0;font-size:2.4rem;}
		.mlink .stxt {display:none;}
		.mlink-inwrap {padding-bottom:3rem;}
	}

	@media screen and (max-width:800px){
	
		.mboard-sld a + a {margin-left:0;}
	}