@charset "utf-8";




/* Reset */
html,body{min-height:100%}
html {
    font-family: 'Noto Sans KR', sans-serif;
}
body{background:#fff;overflow-y:scroll;.overflow-y:none}
body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,fieldset,input,button,textarea,select,address{margin:0;padding:0}
body,table,input,textarea,select,button{font-family:Arial,NBG,나눔바른고딕,돋움,Dotum,Tahoma,Geneva,sans-serif !important;font-size:13px}
header,footer,section,article,nav,aside,figure,figcaption{display:block}
ul,ol,dl{list-style:none}
a{Text-decoration:none;  }
a :focus{outline: none;}
img{border:0}
hr{display:none}
.content{outline:0; }
.header img, .lnb img, .footer img,.front .content img,.contentTitle img{display:block}

/* Skip to Content Button */
.skipToContent{display:block;width:110px;z-index:1;position:absolute;left:50%;top:10px;margin:0 0 0 -60px}
.skipToContent a{display:block;height:1px;overflow:hidden;text-indent:-1000px;cursor:default}
.skipToContent a:focus,.skipToContent a:active{height:12px;text-align:center;text-indent:0;padding:7px 0;background:#666;color:#fff;border-radius:15px}

/* IE6 PNG bug fix */
.png24{tmp:expression(setPng24(this))}

/* for Screen Reader */
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

/* 익스에서 메뉴 링크될때 생기는 점선 안보이게    */
.dropdown-menu li a:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* Layout */
.wrap{width:100%;position:relative}
.header{width:100%; position:absolute; position: fixed;  border-bottom: 0px solid #333; z-index: 100;}
.navbar-brand{padding-top: 28px}
.headerWrap{position:relative;width:1200px;margin:0 auto}
.mainVisual{
	width:100%;
	position:relative;
	padding-top: 80px;
}
.body{width:100%;margin:0 auto;padding:0;margin:0}
.body:after{content:"";display:block;clear:both}
.front .content{width:100%;float:none}
.content{width:100%; margin:0 auto;outline:0;min-height:500px; }
.content:after{content:"";display:block;clear:both}
.footer{width:100%; border-top:1px solid #000; padding: 0}
/* Header */
.uppage{margin-top:-210px}
.header h1{width:280px;height:45px;position:absolute;left:0px;top:5px}
.header h1 a{display:block;overflow:hidden}
.header a.korean{position:absolute;top:25px;right:0;display:block;padding:8px 28px;border-radius:4px;text-align:center;font-size:15px;color:#000;border:1px solid #eb6664;font-weight:normal}
.header a.korean:hover{background:#eb6664;color:#fff}
#headertop{width:1200px; margin:auto}
.youtube{float:right; }
.youtube ul li {float:left; padding:10px 0 0 5px }
.youtube ul:after{content:"";display:block;clear:both}
.navbar-default {background-color: #000;   border-color: #000; border-bottom:3px solid #e3ac17; !important}
.navbar{bckground-color:#000; border:0;  border-radius: 0; opacity: 0.7;}
.navbar{position: relative;    min-height: 80px;    margin-bottom: 0 }
.navbar:hover {opacity: 1;}
.navbar-nav {text-align: center; margin: 0 auto;}
.container-fluid {padding-right: 0; padding-left: 15px;  margin-right: auto;  margin-left: auto;}
.mainVisual {padding-top: 121px;}

.gnb{width:800px; margin-top:10px;}
.gnb > ul > li{float:left; width: 22%; margin-top:20px; box-sizing:border-box;}
.gnb ul :after{content:"";display:block;clear:both}
.gnb ul li ul li{float:none; width: 180px;  }
.gnb li ul{top: 66px; background-color:#000; padding:20px 0; border-radius: 0; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);  }  /* box-shadow: 0 6px 12px rgba(0,0,0,.175); */

@media (min-width: 1201px) {
	.mainVisual {padding-top: 80px;}
	.gnb li ul{top: 70px;}
	.gnb ul{display: flex; justify-content: flex-end;}
}

@media (min-width: 768px) {
	.gnb{float: right;}
	.gnb > ul > li > a {padding-bottom: 17px;}
}

@media (min-width: 768px) and (max-width: 1200px)
{
	.container-fluid {padding-left: 0;}
	.gnb ul {display: flex; justify-content: center;}
}

/* .gnb .menu1 ul{left:16px}
.gnb .menu2 ul{left:233px}
.gnb .menu3 ul{left:460px}
.gnb .menu4 ul{left:690px} */
.gnb .menu1 ul{left: 92px}
.gnb .menu2 ul{left: 270px}
.gnb .menu3 ul{left: 444px}
.gnb .menu4 ul{left: 620px}
.gnb > ul > li > a{text-decoration:none; text-align:center; display:block; font-size:17px; color:#fff;  margin:0; font-weight:900}
.gnb > ul > li:hover > a{padding-bottom:17px; color:#e3ac17; border-bottom:3px solid #e3ac17}
.gnb > ul > li > a.active{padding-bottom:17px; color:#e3ac17; border-bottom:3px solid #e3ac17}
.gnb > ul > li > a.hover{padding-bottom:17px;color:#e3ac17; border-bottom:3px solid #e3ac17}
.gnb > ul ul{display:none   }/*  display:none 은 마우스 올릴때만 2depth 메뉴 보이게*/
.gnb ul li ul li a{padding:0 0 10px 25%; font-size:14px; color:#fff}
.gnb ul li ul li:hover  a{font-size:14px; color:#e3ac17}
.testtest div:nth-child(3){display:none}
.contentTitle{width:1200px; margin:auto; padding-top:150px; text-align:center}
.contentTitle h1{display:none}
.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
	width:100%
}
.swiper-container-no-flexbox .swiper-slide {
	float: left;
}
.swiper-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;display: -ms-flexbox;display: -webkit-flex;
	display: flex;-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {-webkit-transform: translate3d(0px, 0, 0);-moz-transform: translate3d(0px, 0, 0);-o-transform: translate(0px, 0px);-ms-transform: translate3d(0px, 0, 0);transform: translate3d(0px, 0, 0);}
.swiper-container-multirow > .swiper-wrapper {-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.swiper-container-free-mode > .swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto;}
.swiper-slide {-webkit-flex-shrink: 0;-ms-flex: 0 0 auto;flex-shrink: 0;width: 50%;position: relative;}
/* a11y */
.swiper-container .swiper-notification {position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;z-index: -1000;}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {-ms-touch-action: pan-y;touch-action: pan-y;}
.swiper-wp8-vertical {-ms-touch-action: pan-x;touch-action: pan-x;}
/* 이미지 사이즈  */
.swiper-container {min-width: 100%}
.swiper-slide {text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.swiper-slide img{max-width:100%}
/* 네비게이션 */
.swiper-pagination {/* 위치조정 */text-align: center;position:absolute;bottom:10px;left:0;width:100%;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);z-index: 10;}
.swiper-pagination.swiper-pagination-hidden {opacity: 0;}
.swiper-pagination-bullet {/* 사이즈조정 */width: 13px;height: 13px;display: inline-block;border-radius: 100%;background: #fff; opacity: 0.7;/* 간격조정 */margin-right:13px}
button.swiper-pagination-bullet {border: none;margin: 0;padding: 0;box-shadow: none;-moz-appearance: none;-ms-appearance: none;-webkit-appearance: none;appearance: none;}
.swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer;}
.swiper-pagination-bullet-active {opacity: 1;/* on일경우 컬러조정 */background: #f8ea1b;}
/* 화살표*/
.swiper-button-prev,.swiper-button-next {position: absolute;top: 50%;width: 27px;height: 44px;margin-top: -22px;z-index: 10;cursor: pointer;  -moz-background-size: 27px 44px;  -webkit-background-size: 27px 44px;  background-size: 27px 44px;  background-position: center;  background-repeat: no-repeat;}
.swiper-button-prev{left:100px}
.swiper-button-next{right:100px}
.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled {
opacity: 0.35;  cursor: auto;  pointer-events: none;}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}




.subVisual{width:100%;height:310px;background:url(../images/mv/sv.jpg) no-repeat center 0;border-bottom:45px solid #e7e4e4}

/* Contents */
/*.contentTitle{position:relative;padding:37px 0 10px 0;border-bottom:0 solid #e7e7e7;margin:0 ;}    메뉴2depth 보여지는 곳*/

.contentTitle h1 {display:inline-block; font-size:45px; color:#333; font-weight:400}

.contentTitle h2{font-size:25px;font-weight:normal;color:#1a77c6}
.contentRoute{display:none}
/* .contentRoute{text-align:left;position:absolute;right:0;top:88px;padding-left:15px;background:url(../images/bg/bullet_route.gif) no-repeat left 2px;font-size:13px} */
.contentRoute span{font-weight:bold}
.contentBody{width:100%; background-color:#999:}



/* Sidebar */
.sidebar{position:absolute; width:1200px; top:150px; background-color:#999; left;50%; transform:translateX(-50%)}
.lnb{width:1200px; margin:0 auto; padding-top:5px}
.lnb h3{color:#000;padding:34px 0;font-size:35px;font-weight:normal;}
/*.lnb ul{padding:20px 0 20px 30px ; border:10px solid #f7f7f7; background-color:#fcfcfc }  좌측서브메뉴*/
.lnb ul{display:none }
.lnb ul:after{content:"";display:block;clear:both}
.lnb ul li {float:left}
.lnb ul li a{font-size:15px; color:#333; margin-right:50px}
.lnb h1 {display:none }
/*.lnb h1 {padding:30px 0 10px 0; font-size:18px; color:#333; font-weight:300 }*/


/* Footer */

.tel{width:100%; background-color:#252424}
.tel_guide{width:1200px; margin:0 auto}
.tel_guide ul {float:left; width:40%; margin:20px 0 }
.tel_guide:after{content:"";display:block;clear:both}
.tel_guide ul li:first-child{font-size:18px; color:#e3ac17}
.tel_guide ul li{font-size:15px; color:#fff; margin-top:10px}

.footer_menu{width:100%; background-color:#000}
.footer_memu_guide{width:1200px; margin:0 auto}
.footer_memu_guide:after{content:"";display:block;clear:both}
.footer_memu_guide ul {float:left; margin:35px 0; width:25%;  }
.footer_memu_guide ul li:first-child{font-size:17px; color:#e3ac17}
.footer_memu_guide ul li{margin-top:10px; font-size:14px; color:#fff; }
.footer_memu_guide ul li a{ margin-top:10px; font-size:14px; color:#fff; font-weight:200; letter-spacing:0.1em}
.footer_memu_guide ul li a:hover{margin-top:10px; font-size:14px; color:#e3ac17; }

.mobileFooter{display:none}

/* Main Contents */
.main_contents{width:1200px;margin:50px auto }
.pcview{}
.pcnoview{display:none}
.banner{padding-bottom:30px}
.banner:after{content:"";display:block;clear:both}
.banner div{float:left; width:300px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; box-sizing: border-box;}
.banner div:last-child{border-right:1px solid #ccc; box-sizing: border-box;}
.banner div ul:first-child{height:70px; background-color:#051b2d}
.banner div ul:last-child{padding:30px 10px 0 140px; height:170px; background-color:#333}
.banner div ul:last-child li:first-child{font-size:15px; color:#222; font-weight:800; padding-bottom:5px}
.banner div ul:last-child li:nth-child(2){font-size:14px; color:#777; letter-spacing:0.05em;  padding-bottom:5px}
.banner div ul p:first-child{font-size:19px; color:#e3ac17; font-weight:500; padding-top:12px;}
.banner div ul p:last-child{font-size:12px; color:#fff; font-weight:500; padding-top:3px;}
.banner div ul p{margin-left:30px}

.banner div:nth-child(1) ul:last-child{background:url(../images/main/banner_icon_01.gif) no-repeat left 20px top 10px}
.banner div:nth-child(2) ul:last-child{background:url(../images/main/banner_icon_02.gif) no-repeat left 20px top 10px}
.banner div:nth-child(3) ul:last-child{background:url(../images/main/banner_icon_03.gif) no-repeat left 20px top 10px}
.banner div:nth-child(4) ul:last-child{background:url(../images/main/banner_icon_04.gif) no-repeat left 20px top 10px}


.banner div h4{padding:10px 0 0 30PX; background-color:#082843; font-size:18px; color:#FFF; font-weight:800; }
.banner>div>span{display:block; padding:5px 10px 15px 30px; background-color:#082843; font-size:12px; color:#FFF;  }

.banner div div span:first-child{display:block; background-color:#fff; font-size:12px; color:#333;  }
.banner div div span:last-child{display:block; padding:33px 10px 0 130px; background-color:#fff; font-size:17px; color:#333; font-weight:800  }

.banner div div a{margin:47px 0 36px 0}
.banner>div>ul:last-child{background-color:#f1f2f2}

.banner div ul:last-child li:nth-child(2){height:70px}


.mavieBack{    }
.movietitle{font-size:27px; color:#333; margin:30px 0 10px 0}
.mavie{position:absolute; margin:0 auto; padding-bottom:100px }
.movie ul li:last-child{padding:7px 0 30px 0; font-size:17px; color:#333; text-align:center}



@media (min-width:768px) and (max-width:2600px){
  .movie ul:first-child{float:left; width:49%}
  .movie ul:last-child{float:right; width:49%}
}


.juhyunGallery{width:1200px}
.galleryImg_table{width:100%; margin-bottom:20px;  }

@media (min-width:900px) and (max-width:1199px){
.galleryImg_table{
	width:100%; 
	margin-bottom:0;  
	}
}
.juhyunGallery  > p{font-size:27px; color:#333;margin:12px 0 10px 0 ; }


.gallerytitle{
	font-size:17px;
	color:#333 !important;
	text-align:center;
	padding:7px 0 30px 0;
	}
.gallery_two{ margin:0 auto;}
.gallery_two ul{float:left; width:49%; }
.gallery_two:after{content:"";display:block;clear:both}
.gallery_two ul:first-child{margin-right:2%;}


.gallery_two ul li:first-child{ height:350px; }
.gallery_two ul li a img{width:100%; height:350px}
.gallery_two ul a, .gallery_four ul a{
	text-decoration:none;  
	}

.gallery_four ul{float:left; width:25% }
.gallery_four:after{content:"";display:block;clear:both}

.gallery_four ul:nth-child(1) li{margin:0 2% 0 0;}
.gallery_four ul:nth-child(2) li{margin:0 2% 0 2%;}
.gallery_four ul:nth-child(3) li{margin:0 2% 0 2%;}
.gallery_four ul:nth-child(4) li{margin:0 0 0 2%;}
.gallery_four ul li img{width:100%; height:180px;}

.juhyunGallery div ul li span{display:block; width:100%; margin:10px 0 20px 0; text-align:center; font-size:16px; color:#333;  }


.product{margin-top: 100px}
.product ul {margin-bottom:70px; }
.product ul h3{margin-bottom:10px; font-size:25px; color:#333; }
.product ul:after{content:"";display:block;clear:both}
.product ul li {float:left; width:288px; height:250px; box-sizing: border-box; margin-right:16px;}
.product ul li:last-child{margin-right:0}
.product ul li span{display:table; margin-left:auto; margin-right:auto; margin-top:10px; font-size:20px; color:#333; font-weight:300 }/*span 가운데 정열*/
.product p{text-align:center }
.product p:last-child{display:none }



.photo{margin-top:100px}
.photo ul {float:left}
.photo ul:first-child{margin-right:16px}
.photo:after{content:"";display:block;clear:both}
.photo ul li.photo_img{position:relative;}
.photo ul li.photo_img:hover img{opacity:0.4}
.photo ul li.photo_img span{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);color:#770101;font-size:50px;display:none}
.photo ul li.photo_img:hover span{display:block}
.photo ul li:nth-child(2){font-size:18px; color:#333; font-weight:700; padding:10px 0 6px 0 }
.photo ul li:nth-child(3){font-size:14px; color:#333; line-height:200%; padding-bottom:50px }

.Quick_menu{display:}

.myButton {
	background-color:#4b628b;
	-moz-border-radius:22px;
	-webkit-border-radius:22px;
	border-radius:20px;
	border:1px solid #ccc;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:10px;
	padding:7px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #333;
}
.myButton:hover {color:#333;background-color:#e3ac17;text-decoration:none;}
.myButton:active {	position:relative;	top:1px;}


/*   서브페이지 sub01 ------------------------------------------------------sub01 --------------------------------------------------------   sub01 ------------------------    */

.SubContent{width:100%; }
.Sub_title{border-bottom:1px solid red; }
.Sub_title h3{margin-top:60px; font-size:30px; color:#333; font-weight:800; }
.Sub_title span{float:right; font-size:16px; color:#333;  }
.Sub_title:after{content:"";display:block;clear:both}

.SubTopImg {
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	}
.SubTopImg img{
	width:100%;
	margin-top:1px;
	}

.SubName{ color:#000; text-align:center; padding:60px 0}
.SubName h1{line-height: 1.4; margin-top: 0; margin-bottom: .5rem; font-size:45px; font-weight: 400;}
.grid-container{ font-size:40px; color:#fff; font-weight:400; padding:60px 0}
.GrayBack{ width:100%; background-color:#f9fafb; margin-top:100px }




/*    인사말    */

.messageTitle{padding-top:100px; font-size:45px; text-align:center }
.hi{padding:50px 0; font-size:17px;  line-height:200%; text-align:center}


.hithankyou{font-size:27px; color:#777}
.hicompanion{padding:5px 0 30px 0; font-size:23px; color:#3f7ebc; }
.hichallenge{margin:0 0 40px 0; padding-top:30px; font-size:17px; color:#555}
.hiimg{margin-top:40px}
.en{font-size:27px;color:#c0bcb6; font-weight:500; padding-botto:30px}






/*    회사연혁    */

.history_back {width:800px;  margin:auto;  position:relative; margin-top:50px}
.history {display:inline-block; margin-bottom:50px; }

.history .left_year {float:left; width:200px; }
.history .left_year span {padding:0; font-size:40px; color:#1c73c3; font-weight:600;  }

.right_date {float:right; width:600px }
.history .right_date ul li {padding-bottom:10px; }
.history .right_date ul li span:first-child {font-size:18px; font-weight:600; color:#333 }
.history .right_date ul li span:last-child {padding-left:20px; font-size:16px; color:#555 }
.mobilehistory{display:none}

/*    인증서    */
.ingeungTitle{ padding:70px 0 30px 0; font-size:25px; color:#555; font-weight:600; text-align:center}
.juhyun{ width:900px; margin:auto; padding-top:80px: }
.juhyun article{display:inline-block; margin-bottom:60px;  }
.juhyun article h4{position:absolute; padding:0; font-size:25px; color:#1c73c3; font-weight:800; }
.juhyun .year{padding-left:200px;}
.juhyun article div ul li{margin-bottom:10px; }
.juhyun article div ul li span:first-child{padding-right:30px; font-size:18px; color:#333; font-weight:700 }
.juhyun article div ul li span:nth-child(2n){font-size:16px; }
.juhyun article div ul li span:nth-child(3n){font-size:16px; color:#777 }

.juhyun_sang {width:900px; margin:auto ; margin-top:50px}
.juhyun_sang ul {float:left; width:300px;}
.juhyun_sang:after{content:"";display:block;clear:both}
.juhyun_sang ul li { margin:5px 0 20px  0; font-size:15px; font-weight:500; text-align:center}
.juhyun_sang ul li img{width:220px; border:1px solid #999}


/*  오시는 길   */

.map{width:1170px; margin:auto; margin-top:50px; padding:20px; border:1px solid #c1c2b2; background-color:#f2f5e8}
.map P{margin:10px; font:17px: color:#333}
.map span{display:inline-block; font:16px: color:#333}


/*.juhyun_sang ul li:first-child {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.3s ease-in-out;   /* 부드러운 모션을 위해 추가*/
/*   }
.juhyun_sang ul li:first-child:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);}

  */

.SubContent article h4{position:absolute; padding:0 0 0 200px; font-size:25px; color:#1c73c3; font-weight:800; }

.SubContent  article div ul li{margin-bottom:10px; }
.SubContent  article div ul li span:first-child{padding-right:32px; font-size:18px; color:#333; font-weight:800 }
.SubContent  article div ul li span:nth-child(2n){font-size:16px; }
.SubContent  article div ul li span:nth-child(3n){font-size:16px; color:#777 }
.ingeungseo ul{}

/* 새창 */

.modal-dialog{width:80%; margin:auto; margin-top:60px}
.modal-content{padding:20px 20px 10px 20px}
.modal-title{font-size:20px}

.ton ul li{ font-size:15px; color:#555; padding:8px 0 8px 10px ; margin-left:30px; border-bottom:1px solid #eee}
.ton ul li:last-child{border-bottom:0}



.tonth{display:inline-block; width:100px; color:#222; font-weight:500; }
.winT div img{width:100%; text-align:center}

.ton1{float:left; width:60%;}
.ton2{float:right; width:40%; }
.ton2 ul li{background-image: url(/common/images/sub02/tonthicon.gif); background-position:left center; background-repeat: no-repeat }
.modal-title{display:inline }
.modal-header ul li button{float:right; margin:-60px -20px 0 0}

table.type02 {
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    line-height: 1.5;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin : 20px 10px;
}
table.type02 th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #eee;
	text-align: center;
}
table.type02 td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#gubun{display:inline-block; width:100px;  }
#ABCD{margin:0 20px 0 10px}

/* 틸트로테이터*/



.information p{text-align:center; font-size:17px; padding-top:15px }
.information p:last-child{padding-bottom:30px }
.Left{float:left; width:50%; }
.Right{float:right; width:50%;}
.LR:after{content:"";display:block;clear:both}
.LR{min-height:500px}

.tiltName{margin:0 0 70px 0; font-size:40px; color:#333; text-align:center}
.tilt_table, .TR{padding: 0 0 0 20% }
.tilt_table{}
.tilt_table ul li {float:left; padding-bottom:10px; font-size:17px; }
.tilt_table ul:after{content:"";display:block;clear:both}
.tilt_table ul li:first-child{width:100px  }
.tilt_table ul:first-child li:last-child{font-weight:600  }


.producticon{width:20px: background-image: url(/common/images/ico/producticon.gif)}
#Gubun{font-size:27px; color:#999: text-align:center;  margin-bottom:10px; z-index:100}

.mm div ul li{float:left}

.rotater{}
.rotater ul{ padding:2% 0 0 0}
.rotater:after{content:"";display:block;clear:both}

.productname{padding-bottom:20px; font-size: 33px; color: #555;  text-align:center}
.productinfo{width:370px; margin:auto;}
.productinfo ul li{padding-top:15px;font-size: 17px; color: #333;  text-align:left}
.productinfo ul li:last-child{margin:20px 0 10px 20%; padding-left:28px;  background-position: 1000px -1030px; }
.productinfo ul li span:first-child{    display: inline-block;    width: 80px;  }
.productinfo ul p{padding:0 0 10px 20%; font-size: 22px; color: #555;  text-align:left;   }
#controlbuttontwo{width:500px; margin:auto;}
.bg {
    height: 0;
    padding-top: 60%; /* 600px÷1000px×100=55% */
    background-size: contain;}

/*배경화면을 브라우저에 꽉차게 표시하기 위해서는 background-size:contain;로 배경 화면의 비율을 유지한 채로 표시하고 높이를 padding-top(또는 padding-bottom)으로 조정합니다.
	높이의 계산 방법은  높이 ÷ 폭 × 100 입니다. 배경으로 적용한 이미지의 사이즈를 적용하면 500px ÷ 750px × 100 = 66.666…%입니다. 이를 응용하면 Youtube 등의 소스 코드에도 대응 할 수 있습니다. */






.left ul li{float:left; padding-top:10px}
.left ul:after{content:"";display:block;clear:both}
.left ul li.left_img{position:relative;}
.left ul li.left_img:hover img{opacity:1}
.left ul li.left_img span{position:absolute;left:300px;top:225px;transform:translate(-50%, -50%);color:#770101;display:none}
.left ul li.left_img:hover span{display:block}

.Right{ }




.titlebox{ opacity: 0.9; background:#000 url(https://novatron.fi/wp-content/uploads/2018/04/xsite-pro-3d.png) no-repeat left 20px top 10px ; background-position: center;    background-size: 60% auto;    background-repeat: no-repeat;   display: block; }
.titlebox p{padding: 60px;  font-size:40px; color:#fff; font-weught:400; text-align:center;}

.yellowimg{float:left; width:40%; height:50%; margin-top:13%; padding-left:10%;  box-sizing:border-box}
.yellowimg img{width:100%; height:auto; float:right; padding-right:10%; }
.yellowimg:after{content:"";display:block;clear:both}
.yellowtext{ float:right; width:50% ; margin:13% 5% 0  0; box-sizing:border-box}
.yellowtext ul{float:left}
.yellowtext h2{ font-size: 3.275rem;    line-height: 1.4;    margin-top: 0;    margin-bottom: 2.5rem;  box-sizing:border-box;}


.ControlButton {width:80%; margin:auto}
.ControlButton div:first-child button{float:left}
.ControlButton div:last-child button{float:right}

.twoButton{
	width:325px;
	margin:0 auto;
	overflow:auto;
	}
.twoButton div:nth-child(1){
	float:left;
	}
.twoButton div:nth-child(2){
	float:right;
	}
.twoButton div button{
	    padding: 1.05em 4em;
	}


.moreBut{margin-top:20px; text-align:center}
.button.large {    font-size: 1.55rem;}
.button {
	 display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    font-family: inherit;
    padding: 1.05em 3em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-transition: background-color 0.25s ease-out,color 0.25s ease-out;
    transition: background-color 0.25s ease-out,color 0.25s ease-out;
    font-size: 1.9rem;
    /*line-height: 1;*/
    text-align: center;
    cursor: pointer;
    background-color: #e3ac17;
    color: #fefefe;
}






.label{width:100%; }

.label_info{width:50%; background-color:#eee; }
.labelpadding{display: block;    width: 100%;    padding: 5rem;}
.grid-margin-x{margin-left: -.625rem;   margin-right: -.625rem;}

.label_poclain{width:50%; padding:0 7% 2% 0 ;   box-sizing:border-box;}






/*
.grid-x div div:first-child{float:left; }
.grid-x div div:last-child{float:right}   //////////////// */
.cell{float:right}
.grid-x product-row{}
.component-image {
    position: relative;
    margin: 0;
    padding: 20px 10px;
    display: block;
    overflow: hidden;
    height: auto;
    width: 100%;
}
.component-image .background {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}
.component-image img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
	border-style: none;
}

.component-image .component-marker {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 2px solid #e3ac17;
    background-color: #000;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: -15px 0 0 -15px;
    padding: 0;
}


.product-row .image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(60%);
    filter: grayscale(60%);
}


.label a {
    line-height: inherit;
    color: #e3ac17;
    text-decoration: none;
    cursor: pointer;
}



.grid-x {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.product-row .text {    background-color: #eee;}
.padding {display: block;    width: 100%;    padding: 5rem;}
.lead {    font-size: 125%;    line-height: 2.6;}

.lead span{display:block; font-size: 17px; }
.product-row .image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(60%);
    filter: grayscale(60%);
}
.component-image {
    position: relative;
    margin: 0;
    padding: 20px 50px;
    display: block;
    overflow: hidden;
    height: auto;
    width: 100%;
}
.component-image .background {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}
.component-image .component-info {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0 20px;
    background-color: rgba(0,0,0,0.6);
    max-height: 0;
    overflow: hidden;
    width: 100%;
    color: #ffffff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.component-image .component-marker {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 2px solid #e3ac17;
    background-color: #000;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: -15px 0 0 -15px;
    padding: 0;
}




/*  제품불러오는 부분*/
/*.productlap div{min-height:10px}*/
#tiltA{
    background-image: url(/common/images/content/sub02/photo_0101.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#tiltB{
    background-image: url(/common/images/content/sub02/photo_0102.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}

#RA{
    background-image: url(/common/images/content/sub02/photo_0201.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#RB{
    background-image: url(/common/images/content/sub02/photo_0202.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#RC{
    background-image: url(/common/images/content/sub02/photo_0203.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#RD{
    background-image: url(/common/images/content/sub02/photo_0204.jpg);
	background-color:#fff;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}


#ConA{
    background-image: url(/common/images/content/sub02/photo_0301.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#ConB{
    background-image: url(/common/images/content/sub02/photo_0302.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#ConC{
    background-image: url(/common/images/content/sub02/photo_0303.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#ConD{
    background-image: url(/common/images/content/sub02/photo_0304.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}

#EtcA{
    background-image: url(/common/images/content/sub02/photo_0401.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcB{
    background-image: url(/common/images/content/sub02/photo_0402.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcC{
    background-image: url(/common/images/content/sub02/photo_0403.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcD{
    background-image: url(/common/images/content/sub02/photo_0404.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcE{
    background-image: url(/common/images/content/sub02/photo_0405.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcF{
    background-image: url(/common/images/content/sub02/photo_0406.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcG{
    background-image: url(/common/images/content/sub02/photo_0407.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcH{
    background-image: url(/common/images/content/sub02/photo_0408.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcI{
    background-image: url(/common/images/content/sub02/photo_0409.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcJ{
    background-image: url(/common/images/content/sub02/photo_0410.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcK{
    background-image: url(/common/images/content/sub02/photo_0410.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}
#EtcL{
    background-image: url(/common/images/content/sub02/photo_0411.jpg);
	background-color:#eee;
    background-size: 50% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 5vw 0;
	}