html{font-size:20px;}
body{font-size:1rem;}

.tablet{display:none;}
.mob{display:none;}

:root {
  --animate-delay: 0.5s;
}

#wrap{ position:relative;}
#wrap img { border:none; }
#wrap a{ text-decoration:none; }

#header{width:100%;z-index:100; -webkit-transition:all .3s;transition:all .3s; border-bottom:1px solid rgba(255, 255, 255, 0.25); background:#fff;}
#header.over{border-bottom:1px solid #ccc;}
#header.over h1 img{}
#header h1{position:absolute; left:0px; top:50%; transform:translateY(-50%); z-index:9999;}
.header_inner{width:1200px; margin:0 auto; position:relative; height:5rem;}
.header_inner:after{content:""; display:block; clear:both;}


/*탑메뉴*/
.header_inner {position: relative; box-sizing:border-box; }
.header_inner #nav { text-align:right; height:100%; color:#000;font-weight:bold; margin-right:3rem; }
.header_inner #nav img{vertical-align:bottom;  }
.header_inner #nav > ul {clear:both;  position:relative; padding:0px; margin:0; box-sizing:border-box;height:100%;}
.header_inner #nav > ul > li { display:inline-block; float:none;  height:100%;vertical-align:top;position:relative;}
.header_inner #nav > ul > li > div > a{font-size:17px;text-align:center; color:#000; font-weight: 600;display:inline-block; height:5rem; line-height:5rem; text-transform: uppercase;position:relative;}
.header_inner #nav > ul > li > div{position:relative; margin:0 60px;}
.header_inner #nav > ul > li > div:before{content : ""; display : block; position : absolute; left : -60px; top:50%;transform:translateY(-50%);   width :1px; height :20px; background : #9fa0a0;}
.header_inner #nav > ul > li:first-child > div:before{display:none;}
.header_inner #nav > ul > li.on > .on > a{}
.header_inner #nav > ul > li.on > div > a:before{width:100%; left:0%;}
.header_inner #nav strong{font-weight: normal;}
.header_inner #nav ul li ul {z-index: 100;position: absolute;display: none;width:200px;height: auto; left:50%;  top:5rem;background-color:rgba(255,255,255,.98);  box-sizing:border-box; padding:30px 10px 20px 10px; margin-left:-100px;  border:1px solid #ddd; border-top:none; text-align:center;}
.header_inner #nav ul li ul li {padding-bottom:13px; overflow:hidden;}
.header_inner #nav ul li ul li a{color:#333; font-size:16px; height:auto; font-weight:normal; line-height:28px; text-align:left; letter-spacing:-0.03em;}
.header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;}
.header_inner #nav ul li ul li a:hover{color:#142a4d; text-decoration:underline !important;}
.header_inner #nav ul li ul li a:focus{color:#142a4d;}
.header_inner #nav > ul > li.active:before{ content : ""; display : block; position : absolute; left : 0px; bottom : -1px; margin-left:18%;  width : 63%; height : 2px; background : #5400de; }

/*사이트맵 버튼*/
#header .btn-gnb-menu{position:absolute; right:0;  top:50%; transform:translateY(-50%); width:4rem; cursor:pointer; z-index:9999; border-left:1px solid rgba(255, 255, 255, 0.2);  text-align:center;}
#header .btnAll {position:relative; width:1.5rem; height:1.3rem; outline: none; z-index:9999;}
#header .btnAll span { display: block; width: 100%; height: 0.15rem; position: absolute; background-color: #000; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; width:1.2rem;}
#header .btnAll > span:nth-child(2) { top: 0.5rem; }
#header .btnAll > span:nth-child(3) { top: 1rem; width:0.75rem;}
#header.open .btnAll > span{background-color: #000022;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}


/*사이트맵*/
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:0;  z-index:100; transition:right 0.45s;}
#header.open #navi{transition:right 0.45s; right:0px;}
#menuAll h3{text-align: center; font-size:1rem; padding-top:8rem;  line-height:1.3; margin-bottom:2rem; color:#111;}
#menuAll h3 em{font-size:2rem; display:block;}
#menuAll .mobile_top ul {overflow:hidden; width:60rem; margin:0 auto; }
#menuAll .mobile_top ul li{width:19%; float:left; margin-left:1%;}
#menuAll .mobile_top ul li:first-child{margin-left: 0;}
#menuAll .mobile_top ul li a{display:block; font-size:1.2rem; font-weight:500; color:#fff; background: #5500de; padding:1rem 0; text-align:center; width:100%; }
#menuAll .mobile_top ul li ul{margin-top:2rem;}
#menuAll .mobile_top ul li ul li{float:none; width:100%; padding-left:.75rem; position:relative; margin-top:15px; margin-left:0;}
#menuAll .mobile_top ul li ul li:first-child{margin-top:0;}
#menuAll .mobile_top ul li ul li:before{content : ""; display : block; position : absolute; left :0px;  top:12px; width :8px; height : 1px; background:#666;}
#menuAll .mobile_top ul li ul li a{ display:block; font-size:.9rem; color:#333; background:none; text-align: left; padding:0;}
#menuAll .mobile_top ul li ul li a:hover{color:#5500de;}
#menuAll .mobile_top ul li ul li ul{margin:20px 0 30px;}
#menuAll .mobile_top ul li ul li ul li:before{width:4px; height:4px; border-radius:50%; top:8px;}
#menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:400;}


/*비주얼*/
#visual {overflow:hidden;width:100%; z-index: 0; position:relative;}
#visual .bxslider {z-index:1;}
#visual .bxslider li {position:relative;width:100%; padding-top:45.57%;}
#visual .bxslider li .ptext {position:absolute;left:50%; top:25%; font-size:1.5rem; line-height:1.5; font-weight: 500;  box-sizing:border-box;   z-index:1; color:#fff;  width:1200px; margin-left:-600px; text-align:left; animation-delay: 0.6s;}
#visual .bxslider li .ptext h3{font-size:4.1rem; text-shadow:2px 2px 10px rgba(0, 0, 0, 0.3);color:#fff; font-weight:100; line-height:1.2; position:relative; letter-spacing:-0.07em; }
#visual .bxslider li .ptext h3 b{font-weight:600;}
#visual .bxslider li .ptext p{font-size:1rem; text-shadow:2px 2px 3px rgba(0, 0, 0, 0.1); position:relative;letter-spacing:0em;}


#visual .bx-controls-direction a {display:inline-block;width:2.1rem;height:4.05rem;z-index:11; position:absolute; top:50%;transform:translateY(-50%);}
#visual .bx-controls-direction .bx-prev { background:url(/images/default/main/prev.png) no-repeat;font-size:0; left:2rem; background-size:100% 100%;}
#visual .bx-controls-direction .bx-next { background:url(/images/default/main/next.png) no-repeat;font-size:0; right:2rem;background-size:100% 100%;}
#visual .scroll{position:absolute; left:50%; bottom:2rem;transform:translateX(-50%);}
#visual .scroll img{width:4rem;}

#container{ width:100%;}
#container .section{width:1200px; margin:0 auto; }
#container .inn{width:1200px; margin:0 auto; position:relative;}

/*Container*/
#container h3{font-size:2.15rem;text-align:center;color:#222; font-weight:700; letter-spacing:-0.03em;}
#container h4{font-size:.95rem;text-align:center;color:#888; margin-top:10px; font-weight:400; line-height:1.5;}

/*Business*/
#container .busi{width:100%; padding:4rem 0px 5rem; background:#f2f3f4; text-align:center; position:relative; overflow:hidden;}
#container .busi ul{margin:0 -0.5%; margin-top:2rem;}
#container .busi ul li{width:24%; float:left; margin:0 0.5%; text-align:center;box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    transition: box-shadow .5s ease;}

#container .busi ul li a{display:block; background-color:#fff; color:#888; font-size:.95rem;}
#container .busi ul li a span{overflow: hidden;    position: relative;    display: inline-block;    width: 100%;    height: 100%;    }
#container .busi ul li a span img{transition: transform .5s ease; width:100%;}
#container .busi ul li a:hover{  box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.1);}
#container .busi ul li a:hover span img {  transform: scale(1.1);  transition: transform .5s ease;}
#container .busi ul li a div{padding:1.5rem 0px;}
#container .busi ul li a div p.title{font-size:1.35rem; color:#000; margin-bottom:10px; font-weight:500;}
#container .busi ul li a .more{margin:0 auto; margin-top:20px;}
#container .busi ul li a .more {display:block; width:50px; height:50px; background:#B4B5B5; line-height:50px; text-align:center; border-radius:50%;-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#container .busi ul li a:hover .more{background-color: #1027a7;  }
#container .busi ul li a .more img{vertical-align:middle; }
#container .busi ul li a:hover .more img{transform:rotate(360deg);}
#container .busi p.more2{position:absolute; right:0; top:-50px;}
#container .busi p.more2 img{width:3rem;}


/*Service*/
#container .service{background:#fff; text-align:center; padding:4rem 0px 2.5rem;}

/*Product*/
#container .product {position:relative; overflow:hidden; padding:4rem 0;}
#container .product:after{ content : ""; display : block; position : absolute; left :0; top:0; width : 100%; height : 50%;  background: url("/images/default/main/ser_bg.jpg") no-repeat center top; z-index:-1;}

#container .product .content {position:relative; }
#container .product .txt_zone{position:relative; width:1200px; margin:0 auto;}
#container .product .gallery{width:1230px; margin:0 auto;}
#container .product .gallery ul li{}
#container .product .gallery ul li img{width:100%; height:auto;}
#container .product .gallery ul li a{position:relative; display:block; width:100%; transition: 0.2s;transition-delay: 0.1s; box-shadow: -3px 3px 15px 0 rgba(0, 0, 0, 0.16);}
#container .product .gallery ul li a .cover{display:none; width:100%; height:100%; background-color:rgba(0, 0, 0,0.8); position : absolute; top :0; right:0;}
#container .product .gallery ul li a p{position:absolute; left:70px; top:125px; color:#fff; display:none; font-size:23px;}
#container .product .gallery ul li a:hover p{display:block;}
#container .product .gallery ul li a p.more{left:auto; top:auto; right:50px; bottom:50px;}
#container .product .gallery ul li a p.more img{width:auto; height:auto;}
#container .product .gallery ul li a:hover .cover{display:block;}
#container .product .gallery ul li .name{background:#fff; text-align:center; padding:2rem 1rem; font-size:1rem; font-weight:600;}

#container .product .gallery .swiper-container{padding:3rem 15px;}
#container .product .swiper-button-prev, .swiper-button-next{width:1.7rem; height:1.7rem;z-index:1000; cursor:pointer; bottom:0; left:auto; margin:0; }
#container .product .swiper-button-prev{background: url('/images/default/main/left.png') no-repeat center top; background-size:100% 100%;  right:3rem;}
#container .product .swiper-button-next{background: url('/images/default/main/right.png') no-repeat center top; background-size:100% 100%; right:1rem;}


/*Company*/
#container .company{background:url('/images/default/main/com_bg.jpg') no-repeat center center; background-size:cover; padding-top:5rem; padding-bottom:4rem;}
#container .company .content{width:1200px; margin:2.5rem auto 0px; overflow:hidden;}
#container .company .content .dl{width:50%; float:left;}
#container .company .content .dl ul{margin:-2%;}
#container .company .content .dl ul li{width:46%; height:11rem; float:left; margin:2%; background:#fff; position:relative; padding:2rem; box-sizing:border-box;border:1px solid #174dcb;}
#container .company .content .dl ul li img.icon{position:absolute; bottom:1rem; right:1rem; width:3.5rem;}
#container .company .content .dl ul li p.title{font-size:1.1rem; color:#333;}
#container .company .content .dl ul li p.con{font-size:.85rem; line-height:1.6; color:#666; margin-top:15px;}
#container .company .content .dl ul li p.more{margin-top:35px;}

#container .company .content .dr{width:48%;  float:right;}
#container .company .content .dr a{display:block;height:23.3rem; background:url('/images/default/main/com.jpg') no-repeat 0 0; background-size:cover;  padding:4rem 3rem; box-sizing:border-box; color:#fff; }
#container .company .content .dr p.title{font-size:1.3rem;  position:relative; padding-bottom:20px;}
#container .company .content .dr p.title:before{content:""; position:absolute; width:63px; height:1px; background:#fff; bottom:0; left:0;}
#container .company .content .dr p.con{font-size:.9rem;margin-top:1rem;line-height:1.5;}
#container .company .content .dr a .more{display:block; border:1px solid #003ac8; font-size:.8rem; width:8rem; height:2rem; line-height:2rem; text-align:center; margin-top:7rem; color:#fff;}
#container .company .content .dr a .more img{vertical-align:middle; width:2rem;}
#container .company .content .dr a:hover .more{background: #003ac8; color:#fff;}


/*푸터*/
#footer{ clear:both; background-color:#393939;}
#footer .f_shortbar{border-bottom:1px solid #515151;}
#footer .f_shortbar ul{overflow:hidden;  width:1200px; margin:0 auto;}
#footer .f_shortbar ul li{float:left;padding:0px 15px;height:4rem; line-height:4rem; position:relative;font-size:15px; }
#footer .f_shortbar ul li:before{content:'|';color:#777;padding-right:10px;position:absolute;left:0;}
#footer .f_shortbar ul li:first-child{padding-left:0;}
#footer .f_shortbar ul li:first-child:before{display:none;}
#footer .f_shortbar ul li a{color:#777;}
#footer .f_shortbar ul li:first-child a{color:#4898b5;}
#footer .f_shortbar ul li.last{position:relative; float:right; color:#fff; font-weight:300;}
#footer .f_shortbar ul li.last b{font-weight:800; margin-left:10px;}
#footer .f_shortbar ul li.last img{vertical-align:middle;}
#footer .f_shortbar ul li.last:before{display:none;}

#footer .copyright { width:1200px; margin:0 auto;overflow:hidden; text-align:left; padding:50px 0px; color:#fff; letter-spacing:0;}
#footer .copyright h3{float:left; line-height:1;}
#footer .copyright h3 img{vertical-align:middle;}
#footer .copyright .address{float:left; padding-left:15px; color:#777;}
#footer .copyright .address p{font-size:14px; line-height:1.6;}



/********************************************************
■ 레이아웃 변경
********************************************************/


@media (max-width:1500px){
	#visual .bxslider li{padding-top:60%;}
	#visual .bx-controls-direction a {width:1.5rem;height:3.65rem;}
	#visual .bxslider li .ptext h3{font-size:3.6rem; }
	#visual .bxslider li .ptext {padding:0 3rem;}
}


@media (max-width:1200px){
	/*탑메뉴*/
	#wrap{overflow-x:hidden;}
	img {max-width:100%; vertical-align:middle;}
	#header .header_inner{width:100%; padding:0 1rem;}
	#header .header_inner h1{left:1rem;}	
	#header .header_inner #nav p{right:1rem;}
	#header .header_inner #nav p a i{width:1.2rem; height:1.2rem; line-height:1.2rem;}
    #menuAll .mobile_top ul {width:100%; padding:0 1rem; }
	.header_inner #nav > ul > li > div{position:relative; margin:0 50px;}
	.header_inner #nav > ul > li > div:before{left : -50px;}

	/*비주얼*/
	#visual .bxslider li .ptext{width:100%; left:0; margin-left:0;}
	#visual .bx-controls-direction .bx-prev{left:1rem;}
	#visual .bx-controls-direction .bx-next{right:1rem;}

	
	/*컨텐츠*/
	#container .section{width:100%;}
	#container .inn,
	#container .product .txt_zone,
	#container .company .content,
	#container .product .gallery{width:100%; padding:0 1rem;}

	#container .busi p.more2{right:1rem;}

	#footer .f_shortbar ul{width:100%; padding:0 1rem;}
	#footer .copyright{width:100%; padding:2rem 1rem;}
}


/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){

	html{font-size:16px;}
    body{font-size:1rem}
	.tablet{display:block;}

	/* 헤더 */
	#header .header_inner{height:4rem;}
	#header .header_inner #nav{display:none;}
	#header h1 img{width:8rem;}

	/*전체메뉴*/
	#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:4rem;  z-index:100; transition:right 0.45s; background:#fff;}
    #header.open #navi{transition:right 0.45s; right:0px;}
    #menuAll{display: block;}
    #navi h3{font-size:1rem; padding:1rem 0.75rem; line-height:1.3; color:#fff; font-weight:normal; margin:0; text-align: center; background:#5400de;}
    #navi h3 em{color:#fff; font-weight:600; font-size:1.3rem;}

    /*1차*/
    #navi ul.mbtop {width:100%; margin:0; padding:0; }
    #navi ul.mbtop li {margin:0; float:none; width:100%; border-bottom:1px #eeeeee solid; position:relative; }
	#navi ul.mbtop li:after{ content :"\e941"; display : block; position : absolute; right:1rem;  top:15px;font-family:'xeicon'; font-weight:500; }
    #navi ul.mbtop li a {padding:0; background: none; text-align:left; display:block; width:100%; padding:15px 1rem;box-sizing:border-box; font-weight:700;  font-size:1.3rem;  color:#262626;}
    #navi ul.mbtop li.open_li{ position:relative;}
    #navi ul.mbtop li.open_li:after{ content :"\e944";}
    #navi ul.mbtop li.open_li > a {color:#5400de;}


    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#ECEEEF; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible;  padding:1rem; margin-top:0;}
    #navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none;}
    #navi ul.mbtop li ul li a {color:#262626; background:url(none); font-weight:600; height:auto; padding-left:0;  font-size:1.15rem;}
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}

    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}


	#sepration{height:13rem;}
	#sepration .section{padding-top:4.5rem;}
	
	#visual .bxslider li .ptext h3{font-size:3rem;}
	#visual .bx-controls-direction a{display:none;}



	/* 컨텐츠 */	
	#container #section .right_content .content_body {padding:2rem 0px 5rem 0px; }
	#container #section .right_content .content_body .con{font-size:1rem;}

	#footer { font-size:.8rem;}


}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}


	/*탑메뉴*/
	#wrap{font-size:1rem;}	
	#header h1 img{width:7rem;}
	#header .header_inner{height:3.7rem;}
	#header #navi{padding-top:3.7rem;}

	#visual .bxslider li{padding-top:75%;}
	#visual .bxslider li .ptext{padding:0 1rem;}
	#visual .bxslider li .ptext h3{font-size:2rem;}
	#visual .scroll img{width:2.5rem;}

	
	/* 컨텐츠 */
	#container .busi ul{margin:-1.5%;  margin-top:2rem;}
	#container .busi ul li{width:47%; margin:1.5%;}

	.sbtn{position:relative; margin-top:20px;}
	#container .product .gallery .swiper-container{}

	#container .company .content .dl,
	#container .company .content .dr{width:100%; float:none; margin:0;}
	#container .company .content .dr{margin-top:1rem;}
	#container .company .content .dl ul li{padding:1rem;}
	#container .company .content .dr{height:20rem;}
	#container .company .content .dr a .more{margin-top:3rem;}

	/*푸터*/
	#footer .copyright h3 img{width:9rem;}
	#footer .f_shortbar ul{padding:10px 0;}
	#footer .f_shortbar ul li{width:25%; padding:0; margin:0; height:2rem; line-height:2rem; text-align:center; font-size:0.9rem;}
	#footer .f_shortbar ul li.last{width:100%;}
	#footer .f_shortbar ul li:before{padding:0; left:-0.05px;}
	#footer .copyright .address{padding-left:0; margin-top:15px;}
}