@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/
.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width: 1200px;padding:0 3%;position:relative;margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.clear:after {content:''; display:block; clear:both;}

.tit_h3{font-size:28px;font-weight:400; color:#323232;  position:relative; letter-spacing:-1px}
.tit_h3:after{content:''; width:60px; height:1px; display:block; background:#505050; margin: 0 auto; margin-top:20px;}
.tit_h4{font-size:26px; color:#323232; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#323232; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}

.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !important}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.line_link{display:inline-block; color:#ffffff; padding-bottom:5px; border-bottom:3px solid #ffffff; font-size:0.9em}
.arrow_cir_w:after{content:''; width:28px; height:25px; background:url(../img/ic_arrow_w.png) no-repeat center center; background-size:100%; display:inline-block; vertical-align:middle; margin-left:10px;}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:600}
.fss{font-size:0.8em}
.Tblack{color:#323232}
.Tred{color:#e83428}
.upcase{text-transform:uppercase}

.btn_more{display:inline-block; color:#ffffff; background:#1c3f95; padding:6px 20px; border-radius:500px; vertical-align:middle; position:relative; z-index:1}
.btn_more:after{content:'+'; display:inline-block; margin-left:10px; vertical-align:middle}

.btn_more.wt_btn{border:1px solid #dcdcdc; background:none; }

@media all and (min-width:768px) {

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}


.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}

.pb{padding-bottom:40px !important}
.bpb{padding-bottom:60px !important}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 3%}

.half{width:48.5%; float:left;}
.mr{margin-right:3%;}
.btn_more:after{margin-left:20px}
}

@media all and (min-width:1200px) {

body, html{font-size:17px; line-height:1.5}
.txt-m{font-size:30px;}
.txt-l{font-size:40px;}
.tit_h3:after{margin-top:25px;}
.tit_h4{font-size:30px; }
.tit_h5{font-size:20px; }

.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}

.pb{padding-bottom:50px !important}
.bpb{padding-bottom:80px !important}
.pdinner{padding:0 20px;}

}

@media all and (min-width:1200px) {

}


/* common */
.side {display:none;}

@media all and (min-width:1580px) {
	.side {display:block;}
	.leftside {width:100px; height:200px; position:fixed; left:0; top:55%; margin-top:-22px; background:#fff; z-index:999;
		-webkit-box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1);}
	.leftside a {display:inline-block; width:100px; height:100px; text-align:center; font-size:0.85em; color:#555; line-height:40px; padding-top:15px;}
	.leftside a:hover {font-weight:600;}
	.leftside a img {display:inline-block; margin:0 auto; width:40px;}
	.rightside {width:100px; height:200px; position:fixed; right:0; top:55%; margin-top:-22px; background:#fff; text-align:center; font-size:0.85em; color:#555; z-index:999;
		-webkit-box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1);}
	.rightside div {width:100%; height:200px; padding-top:10px;}
	.rightside img {margin-bottom:5px; width:40px;}
	.rightside h4.tel {font-size:1.1em; color:#05235f; font-weight:600; margin:5px 0 10px; letter-spacing:-1px;}
	.rightside p.info {font-size:0.8em;}
	.rightside a {background:#2d427f url('../img/main_rightside_ic02.png') 75px center no-repeat; color:#fff; line-height:40px; display:inline-block; width:100%; padding-right:10px;
		background-size:15px; font-size:0.9em; position:absolute; bottom:0; left:0;}
}


/* ==== Slider Image Transition === */
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes zoomout {	0% { transform: scale(1.1); }    100% {        transform: scale(1.0);    }}
@-webkit-keyframes zoomout {	0% { transform: scale(1.1); }    100% {        transform: scale(1.0);    }}
@-webkit-keyframes scaling {	From {    -webkit-transform: scale(1.1);}	To {    -webkit-transform: scale(1.0);}}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}

.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}

.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */;height:100%;min-height:1px;}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}

.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}



/* Arrows */
.slick-arrow{
    position: absolute;
    top: -60px;
    z-index:100;
    display: block;
    width: 50px;
    height: 50px;
    border:0;
    cursor: pointer;
    background: #ffffff00;
    text-indent:-999999px;
    /*-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);*/
    right: 230px;
    }



@media all and (min-width:1300px) {
.slick-arrow:before{/*! text-indent:0; */content:'';display:block;position:absolute; /*! font-family:'FontAwesome'; */width: 40px;height: 40px; /*! line-height:20px; */left: 0;right:0;bottom:0;top:0;margin:auto; /*! font-weight:600; */}
.slick-arrow:before{/*! content:'\f104'; */ /*! font-size:22px; */}
.slick-arrow{right: 230px;}
.slick-next{right: 150px;}
.slick-next:before{content:'\f105'; }
.visuslider .slick-arrow.slick-next:before{background: url(../img/prev_right.png)no-repeat;}
.visuslider .slick-arrow.slick-prev:before{background: url(../img/prev_left.png)no-repeat;} /*추가추가*/
.visuslider .slick-arrow.slick-prev:after{display:none;}
.slick-arrow.slick-next:after{content:'';display:block;position:absolute;width: 40px;height: 40px;background: url(../img/slick.png) no-repeat center center;top: 20px;z-index: 9;background-size: 100%;right: 85px;}
}


/*main*/
.main_tlt {color: #222222;font-weight: 800;font-size: 30px;}
.main_tlt span {color: #0095d5;font-weight: 800;display: block;font-size: 15px;margin-bottom: 5px;letter-spacing: 0;}
.main_tlt.lay {font-size: 22px;font-weight: 700;}
.more2 {color: #fff;font-weight: 800;font-size: 12px;display: block;position: relative;width: 111px;letter-spacing: -0.05px;transition:0.3s;}
.more2:hover:before{right:-10px !important;}
.more2:hover:after{right:-8px !important;width:25px !important;}
.more2:before {content: '';width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);position: absolute;top: 4px;right: 0;transition: 0.3s;}
.more2:after {display: block;clear: both;content: "";width: 19px;height: 2px;background: #fff;position: absolute;top: 7px;right: 1px;transition: 0.3s;}
.more2.lay {color: #333333;font-weight: 800;font-size: 12px;display: block;position: relative;width: 111px;letter-spacing: -0.05px;}
.more2.lay:before {content: '';width: 6px;height: 6px;border-top: 2px solid #333;border-right: 2px solid #333;transform: rotate(45deg);position: absolute;top: 3px;right: 0;}
.more2.lay:after {display: block;clear: both; content: ""; width: 19px;height: 2px;background: #333;position: absolute;top: 6px;right: 1px;}

@media all and (min-width:768px) {
.main_tlt {font-size: 50px;}
.main_tlt span {margin-bottom: 10px;font-size: 16px;}
.main_tlt.lay {font-size: 32px;}
}




/*section01*/
.section01{
  position:relative;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}
.section01 .txt{padding: 60px 0px;}
.section01 .txt .left p{color: #027FE4;font-weight: 800;text-transform: uppercase;margin-bottom: 20px;letter-spacing: 0em;}
.section01 .txt .left h3{font-size: 24px;font-weight: bold;margin-bottom: 20px;line-height: 1.5;}
.section01 .txt .right b{font-weight: 700;margin-bottom: 15px;display: block;}

.section01 .product{position: relative;}
.section01 .product ul:after{display: block; clear: both; content: "";}
.section01 .product ul li a .photo{height: 450px;padding: 0px 20px;position: relative;}
.section01 .product ul li a .photo:before{content:'';height: 60%;position:absolute;z-index:1;left:0;bottom:0;right:0;background: linear-gradient(0deg, rgb(0 0 0 / 80%) 0%, rgba(0,0,0,0.0) 100%);transition:0.3s}
.section01 .product ul li a .photo.eff01{background: url(../images/main/product_img01.png) center bottom, linear-gradient(70deg, #f9f9f9, #d6dbe0); background-repeat: no-repeat;  background-size: 100%;}
.section01 .product ul li a .photo.eff02{background: #d5dadf url(../images/main/product_img02.png) no-repeat center bottom; background-size: 100%;}
.section01 .product ul li a .photo.eff03{background: url(../images/main/product_img03.png) center bottom, linear-gradient(70deg, #f9f9f9, #d6dbe0); background-repeat: no-repeat; background-size: 100%;}
.section01 .product ul li a .photo.eff04{background: #d5dadf url(../images/main/product_img04.png) no-repeat center bottom; background-size: 100%;}

.section01 .product ul,
.section01 .product ul li{
    width: 100%;
    display: inline-block;
  }

.section01 .product ul li a .photo.eff05{background: url(../images/main/product_img05.png) center bottom, linear-gradient(70deg, #f9f9f9, #d6dbe0); background-repeat: no-repeat; background-size: 100%;}
.section01 .product ul li a .photo.eff06{background: #d5dadf url(../images/main/product_img06.png) no-repeat center bottom; background-size: 100%;}

.section01 .product ul li a .sec02_txt{color: #fff;z-index:2;bottom: 40px;position: absolute;}
.section01 .product ul li a .sec02_txt:hover{bottom:60px}
.section01 .product ul li a .sec02_txt p{font-size: 20px;font-weight: bold;margin-bottom: 10px;}
.section01 .product ul li a .sec02_txt em{font-size: 16px;font-weight: 200;line-height: 1.5;}

.section01 .product button{top: -25px !important;background: #0084E9;/* background: transparent linear-gradient(89deg, #0084E9 0%, #164BB5FC 100%) 0% 0% no-repeat padding-box; */display: block;width: 100px !important;height: 50px !important;position: absolute;}

.slick-prev, .slick-next{top:65% !important;}
.slick-prev{right: 28px !important;}

.section01 .product .slick-prev.slick-arrow:before{background: url(../images/main/slick_prev.png) no-repeat center center;left: -40px; background-size: 100%;}
.section01 .product .slick-next.slick-arrow:before{background: url(../images/main/slick_next.png) no-repeat center center;right: -40px; background-size: 100%;}
.slick-arrow:before{/*! text-indent:0; */content:'';display:block;position:absolute; /*! font-family:'FontAwesome'; */width: 40px;height: 40px; /*! line-height:20px; */left: 0;right:0;bottom:0;top:0 !important;margin:auto; /*! font-weight:600; */}
.slick-arrow:before{/*! content:'\f104'; */ /*! font-size:22px; */}
.slick-arrow{right: 50px;}
.section01 .product button.slick-prev{left: unset !important; right: 75px !important;}

.slick-next:before{content:'\f105'; }
.visuslider .slick-arrow.slick-next:before{background: url(../images/main/prev_right.png)no-repeat;}
.slick-arrow.slick-prev:before{background: url(../images/main/prev_left.png)no-repeat;} /*추가추가*/
.visuslider .slick-arrow.slick-prev:after{display:none;}
.slick-arrow.slick-next:after{content:'';display:block;position:absolute;width: 40px;height: 40px;background: url(../images/main/slick.png) no-repeat center center;top: 5px;z-index: 9;background-size: 100%;right: 57px;}
.client .slick-arrow.slick-next:after{display:none}

.section01 .product button img{ display: none;}

@media all and (min-width:500px) {
.section01 .product ul li a .photo{height: 550px;}
}

@media all and (min-width:600px) {
.section01 .product ul li a .photo{padding:0px 40px; height: 400px;}
}

@media all and (min-width:768px) {
.section01 .txt{display: flex;padding: 80px 0px 60px;}
.section01 .txt .left{width:35%; margin-right:5%;}
.section01 .txt .right{width:60%;margin-top:50px;font-size:1.04em;}
.section01 .product ul li a .photo{ height: 530px;}
}

@media all and (min-width:980px) {
  
.section01 .txt .left h3{font-size: 32px;}
.section01 .txt .right{font-size:1.1em;line-height: 28px;}
.section01 .product ul li a .photo{height: 350px;}
}

@media all and (min-width:1200px) {
.section01 .txt{padding: 100px 0px 70px;}
.section01 .txt .left p{font-size: 1.1em;}
.section01 .txt .right{line-height: 30px;margin-top: 60px;}
.section01 .product ul li a .photo{height: 450px;}
	
.section01 .product button{width: 130px !important;height: 70px !important;top: -35px !important;}
.slick-arrow.slick-next:after{top: 19px !important;right: 70px !important;}


.section01 .product button {
    top: -35px !important;
}

}

@media all and (min-width:1600px) {
.section01 .product ul li a .photo{height: 600px;}
.section01 .txt .right{font-size: 1.2em;}
.slick-arrow{right: 300px;}
.slick-next{right: 220px;}
.slick-arrow.slick-next:after{top: 15px !important;right: 85px;}
}

@media all and (min-width:1800px) {
.section01 .product ul li a .photo{height: 700px;}
}





@keyframes zoomout {
	0% { transform: scale(1.05); }
    100% {        transform: scale(1.0);    }
}
@-webkit-keyframes scaling {
	From {    -webkit-transform: scale(1.05);}
	To {    -webkit-transform: scale(1.0);}
}


.slick-active .ani_txt {animation-name:ani_txt; animation-duration:1s; animation-fill-mode:both; animation-delay:0s;}
@keyframes ani_txt {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes ani_txt {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1; }
}


.slick-active .ani_txt2 {animation-name:ani_txt2; animation-duration:1s; animation-fill-mode:both; animation-delay:0.3s;}
@keyframes ani_txt2 {
	0% {opacity:0; transform:translateY(-30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes ani_txt2 {
	0% {opacity:0; transform:translateY(-30px);}
	100% {transform:translateY(0); opacity:1;}
}







/*텍스트효과*/
.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:500ms;animation-timing-fonction:ease-out;}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
      0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Standard syntax */
@keyframes sub_tt {
     0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
       0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Standard syntax */
@keyframes sub_tt {
     0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}
}

.anim01 {animation-name: anim01; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim01 {
	0% {opacity: 0; transform: translateY(-1000px);} 
    60% {opacity: 1; transform: translateY(30px);} 
    80% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 
.anim02 {animation-name: anim02; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim02 {
	0% {opacity: 0; transform: translateY(1000px);} 
    60% {opacity: 1; transform: translateY(-30px);} 
    80% {transform: translateY(10px);} 
    100% {transform: translateY(0); } 
} 
.anim03 {animation-name: anim01; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim01 {
	0% {opacity: 0; transform: translateY(-100px);} 
    40% {opacity: 1; transform: translateY(20px);} 
    60% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 
.anim04 {animation-name: anim02; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim02 {
	0% {opacity: 0; transform: translateY(100px);} 
    40% {opacity: 1; transform: translateY(-20px);} 
    60% {transform: translateY(10px);} 
    100% {transform: translateY(0); } 
} 
.anim05 {animation-name: anim05; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim05 {
	0% {transform: translateY(0);} 
    50% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 


@media all and (max-width:1200px) {
#layerPopup0{top:100px !Important; left:0 !Important;}
#layerPopup1{top:435px !Important; left:0 !Important;}
#layerPopup2{top:770px !Important; left:0 !Important;}
#layerPopup3{top:1105px !Important; left:0 !Important;}
#layerPopup4{top:1440px !Important; left:0 !Important;}
#layerPopup5{top:1775px !Important; left:0 !Important;}
}

.vibrate-1{-webkit-animation:vibrate-1 3s linear infinite both;animation:vibrate-1 3s linear infinite both}
@-webkit-keyframes vibrate-1 {
0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
 
  25% {
    -webkit-transform: translate(0px, 4px);
            transform: translate(0px, 4px);
  }
  50% {
    -webkit-transform: translate(0px, -8px);
            transform: translate(0px, -8px);
  }

  75% {
    -webkit-transform: translate(0px, 4px);
            transform: translate(0px, 4px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
 
  25% {
    -webkit-transform: translate(0px, 4px);
            transform: translate(0px, 4px);
  }
  50% {
    -webkit-transform: translate(0px, -8px);
            transform: translate(0px, -8px);
  }

  75% {
    -webkit-transform: translate(0px, 4px);
            transform: translate(0px, 4px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

.move_info{color:#017fe5;}
.move_data{overflow-y:scroll}
.move_data table{min-width:1024px}

.bd_table{width:100%;border-top: 3px solid #a8b3bf;border-collapse:separate;font-size:0.9em;border-right:1px solid #e0e3e7}
.bd_table th, .bd_table td{border-bottom:1px solid #e0e3e7;padding: 5px 10px;vertical-align:middle;border-left:1px solid #e0e3e7;text-align: left;font-weight: 300;letter-spacing: 0em;}
.bd_table th{font-weight:500;color:#323232;background: #eeeef2;text-align: center;}
.bd_table .bgc{background:#f9f9fa; font-weight:500}
.bd_table td.bg{font-weight: 500;color: #151515;background:#f9f9fa;}



@media all and (min-width:1024px) {
.move_info{display:none; }
.move_data{overflow-y:hidden}
.move_data table{min-width:960px}
}