@charset "utf-8";

/* 일문 main CSS Document */
#visual { height:750px}
.main_visual{position:relative; height:750px; display: block; width: 100%; z-index:5; background:#f6f6f6;}
.main_visual ul li.list1{height:750px;background:url("/layout/images/www/main/main_vis_02.jpg") no-repeat center top;}
.main_visual ul li.list2{height:750px;background:url("/layout/images/www/main/main_vis_03.jpg") no-repeat center top;}
.main_visual ul li.list3{height:750px;background:url("/layout/images/www/main/main_vis_01.jpg") no-repeat center top;}
.main_visual ul li.list4{height:750px;background:url("/layout/images/www/main/main_vis_04.jpg") no-repeat center top;}
.main_visual ul li.list5{height:750px;background:url("/layout/images/www/main/main_vis_04.jpg") no-repeat center top;}
.main_visual ul li.list6{height:750px;background:url("/layout/images/www/main/main_vis_04.jpg") no-repeat center top;}

.main_visual .bx-controls-direction { display:block;}
.main_visual .bx-controls-direction > a{position:absolute; top:340px; width: 50px; height: 90px; }
.main_visual .bx-controls-direction a.bx-prev{display:block;  background:url("/layout/images/common/sprite.png") no-repeat -33px -303px; text-indent:-9999px; left: 40px;}
.main_visual .bx-controls-direction a.bx-next{display:block; background:url("/layout/images/common/sprite.png") no-repeat -163px -303px; text-indent:-9999px; right:40px;}
.main_visual .bx-pager{position:absolute; bottom:160px; left:50%; margin-left:-67px;}
.main_visual .bx-pager > div{float:left;margin-left:9px;}
.main_visual .bx-pager > div > a{display:block; width:25px; height:25px; text-indent:-9999px; transition:all 0.2s; background-color: rgba(255,255,255, 0.5); border-radius:50px;}
.main_visual .bx-pager > div > a.active{ background-color: rgba(237,175,0, 0.5);}

.mvisual_txt1 { position: absolute;top:225px;width:700px; height:280px; background-color:rgba(0,0,0,0.3); }
/*.mvisual_txt1:after {content: " ";position: absolute;top: 0;left: 0;width: 190px;height: 10px ;background-color:#fff;}*/
.mvisual_txt1 > .c_tit{font-size: 45px;padding-top:55px; padding-left:75px;letter-spacing: -0.05em; line-height:50px; color:#fcd607;}
.mvisual_txt1 > .c_txt1{ font-size:28px; padding-left:75px; font-weight:500; color:#fff}
/*.mvisual_txt1 > .c_txt1:before {content: " ";position: absolute;top: 0;left: 0;width: 10px;height: 190px ;background-color:#fff;}*/
.mvisual_txt1 strong { display:block; font-weight:400;}
.mvisual_txt1 a.go { display:block; width:160px; height:50px; text-align:center; line-height:50px; color:#fff; font-size:16px; border:1px solid #fff; margin-left:75px; margin-top:30px;transition: ease-in-out 0.2s;
}
.mvisual_txt1 a.go:hover { background-color:#cc3300;border:1px solid #cc3300;}
/*
.mvisual_txt1 > span { color:#000;display:block; font-size: 36px;padding-top:55px; padding-left:75px;font-weight: 300;letter-spacing: -0.05em; position:relative;}
.mvisual_txt1 > span:before {content: " ";position: absolute;top:125px;left: 75px;width:50px;height: 1px ;background-color:#fff;}
.mvisual_txt1 > .c_txt{ display:block; margin-bottom:10px; border-top:1px solid #f6f6f6; border-bottom:1px solid #f6f6f6;font-size: 24px;line-height: 50px;font-weight: 200;letter-spacing: -0.01em;}
.mvisual_txt1 > .c_txt span {font-size: 16px;}
.mvisual_txt1 .btn_more a { display:inline-block; margin-top:10px;border: 1px solid #fff;padding: 10px 30px;font-size: 16px;color: #fff;}
.mvisual_txt1 .btn_more a:hover { background:rgba(0,0,0,0.6);}
*/

/*.mvisual_txt1 > .c_txt::after {display: block;width: 50px;height: 2px;background-color: #c9c9c9;content: ''; margin-top:60px;  }*/

/* 화면전환 버튼 */
/*.pnote{display:none;position:absolute;bottom:250px;left:50%;margin-left:-35px;width:70px;margin:50px auto 0;text-align:center;}
.pnote .micon{display:inline-block;margin-left:6px;width:12px;height:12px;background-position:-12px -278px;font-size:0;line-height:0;}
.pnote .micon:first-child{margin-left:0;}
.pnote .micon.ov{background-position:0 -278px;}*/

/*스크롤화살표*/
.vmore{position:absolute;left:49.5%;margin-left:-36px;z-index:20;}
.vmore.bot{bottom:50px;}
.vmore.top{top:120px;}
.vmore.animated{visibility:hidden;}
.vmore.visible{visibility:visible;}
.vmore .scroll{display:block;overflow:hidden;margin:0 auto;width:60px;}
.vmore.bot .scroll{height:58px; width:59px; background:url("/layout/images/www/main/main_sp.png") no-repeat -4px -3px; text-indent:-9999px; display:block;}
@keyframes shake {
  0%, 100% {
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-20px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(20px);
  }
}
.shake{animation-duration:8s;animation-iteration-count:infinite;animation-name:shake;}
@media only screen and (min-width:1280px) {
  .vmore{display:block;}
}

#visual .quick {position: absolute;width: 100%;height: 250px;top:610px;background: rgba(204,204,204,0.1); z-index: 5;}
.quick li { width:33%; display:inline-block; box-sizing:border-box; color:#FFF;padding-top:50px; float: left;}

#container {min-width: 1300px;margin: 0 auto;}
.sevice { padding:125px 0;}
#container h3 { font-size:40px; color:#000; text-align:center; font-weight:300; letter-spacing:-2px;display: block; line-height:1;} 
#container h3 strong { font-weight:500;}
.gr { color:#336633 !important;}
.ora { color:#cc6633 !important;}
#container .h_txt { font-size:18px; color:#999; text-align:center; line-height:1.2; margin-top:10px;}
.sevice ul {width: 1300px; margin:65px auto 0;}
.sevice ul li {display:inline-block; width:296px; height:296px; margin:0 60px;transition: ease-in-out 0.3s;}
.sevice ul li a { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; text-align:center; color:#fff; font-size:24px; letter-spacing:-1px;transition: ease-in-out 0.3s; margin-top:0;}
.sevice ul li a:hover {transform: translate(0 ,-20px); color:#fce409;}
.sevice ul li.se_1 a {background:url("/layout/images/www/main/bg_se_1.jpg") no-repeat 0 0;}
.sevice ul li.se_2 a {background:url("/layout/images/www/main/bg_se_2.jpg") no-repeat 0 0;}
.sevice ul li.se_3 a {background:url("/layout/images/www/main/bg_se_3.jpg") no-repeat 0 0;}
.sevice ul li a span.ico {background:url("/layout/images/www/main/main_sp.png") no-repeat 0 0;display:block; height:106px; width:101px; margin:80px auto 15px;}
.sevice ul li.se_1 a span.ico { background-position:-36px -120px;}
.sevice ul li.se_2 a span.ico { background-position:-200px -120px;}
.sevice ul li.se_3 a span.ico { background-position:-364px -120px;}

.product {padding:75px 0; background:url("/layout/images/www/main/bg_product.jpg") no-repeat 0 0;}
.product ul { display:inline-block; margin:45px auto 0; width:100%;}
.product ul li { float:left; width:32%; margin-right:2%;}
.product ul li:last-child{margin-right:0;}
.product ul li a { display:block;height:280px;text-align:center; letter-spacing:-1px; background-color:#fff; border:3px solid #fff; box-sizing:border-box;transition: ease-in-out 0.3s; position:relative;}
.product ul li.pd_1 a:hover,.product ul li.pd_2 a:hover, .product ul li.pd_3 a:hover  {border:3px solid #cc3300;}
.product ul li.pd_4 a:hover,.product ul li.pd_5 a:hover, .product ul li.pd_6 a:hover  {border:3px solid #336633;}
.product ul li a span.ico {background:url("/layout/images/www/main/main_sp.png") no-repeat 0 0;display:block; height:97px; width:98px; margin:35px auto 15px;}
.product ul li.pd_1 a span.ico { background-position:-56px -262px;}
.product ul li.pd_2 a span.ico { background-position:-203px -262px;}
.product ul li.pd_3 a span.ico { background-position:-353px -262px;}
.product ul li.pd_4 a span.ico { background-position:-544px -120px;}
.product ul li.pd_5 a span.ico { background-position:-707px -120px;}
.product ul li.pd_6 a span.ico { background-position:-874px -120px;}
.product ul li.pd_1 a:hover span.ico { background-position:-56px -382px;}
.product ul li.pd_2 a:hover span.ico { background-position:-203px -382px;}
.product ul li.pd_3 a:hover span.ico { background-position:-353px -382px;}
.product ul li.pd_4 a:hover span.ico { background-position:-544px -250px;}
.product ul li.pd_5 a:hover span.ico { background-position:-707px -250px;}
.product ul li.pd_6 a:hover span.ico { background-position:-874px -250px;}
.product ul li a > span { display:block;}
.product ul li a span.tit {color:#000; font-size:20px;line-height:1.2;}
.product ul li a span.s_txt {color:#999; font-size:18px; line-height:1.2; margin-top:12px;font-weight: 300; display:none;}
.product ul li a span.s_more {color:#999; font-size:14px;margin-top:25px; position:absolute; bottom:30px; left:50%; margin-left:-60px;}
.product ul li.pd_1 a:hover span.s_more, .product ul li.pd_2 a:hover span.s_more, .product ul li.pd_3 a:hover span.s_more  {color:#cc3300;}
.product ul li.pd_4 a:hover span.s_more, .product ul li.pd_5 a:hover span.s_more, .product ul li.pd_6 a:hover span.s_more  {color:#336633;}
.product ul li a span.arrow { display:inline-block; margin-left:10px; background:url("/layout/images/www/main/main_sp.png") no-repeat -53px -535px; width:75px; height:7px; }
.product ul li a:hover span.arrow { background-position:-53px -513px}

.news  {padding: 54px 0;}
.news .inner > div {float:left;width: 100%;} 
.customer {display:block; margin-top:30px;}
.customer h4 { color:#ccc; font-size:36px; font-weight:500; display:block; letter-spacing:-1px; line-height:1;}
.customer .center_box {background:url(/layout/images/www/main/bg_customer_2022.jpg) no-repeat 0 0;height:320px;width:100%;position:relative;}
.customer .center_box:after {content: " ";position: absolute;top: 40px;left: 30%;width: 1px;height: 245px ;background-color:#999;}
.customer .center_box:before {content: " ";position: absolute;top: 40px;right:32%;width: 1px;height: 245px;background-color:#999;}s
.customer .center_box ul {width:100%; padding-top:75px;}
.customer .center_box ul li {width: 33%;float:left;text-align:center;color:#fff; margin-top:60px;}
.customer .center_box ul li span {display:block;}
.customer .center_box ul li span.ico {background:url("/layout/images/www/main/main_sp_2022.png") no-repeat 0 0; width:74px; height:69px; margin:0 auto;}
.customer .center_box ul li.cb_1 span.ico { background-position:-263px -10px;}
.customer .center_box ul li.cb_2 span.ico { background-position:-368px -10px;}
.customer .center_box ul li.cb_3 span.ico { background-position:-476px -10px;}

.customer .center_box ul li span.tit { font-size:25px; font-weight:500;margin-top: 20px;line-height: 1.4;}
.customer .center_box ul li span.add {font-size:17px;line-height: 1.2; color:#ccc; margin-top:10px;}
.customer .center_box ul li.cb_1 a { display:block; color:#fff; border:1px solid #fff; width:155px; height:35px; line-height:35px; font-weight:300; margin:10px auto 0;}
.customer .center_box ul li.cb_3 a { display:block; color:#fff; border:1px solid #fff; width:155px; height:35px; line-height:35px; font-weight:300; margin:10px auto 0;}

.notice {height: 320px;border-top:2px solid #d2d2d2; margin-top:66px; position:relative;border-bottom:1px solid #d2d2d2;box-sizing: border-box;}
.notice ul li { width:100%;border-bottom:1px solid #d2d2d2; padding:22px 0;}
.notice ul li:last-child {border-bottom:none;}
.notice ul li a { width:100%; display:inline-block;padding-left: 20px;box-sizing: border-box;transition: ease-in-out 0.3s;}
.notice .date { float:left; width:62px; text-align:center; padding:10px 0 0;margin-right: 20px;box-sizing:border-box;}
.notice .date strong {display:block;font-size: 36px;line-height:23px;font-weight: 500;}
.notice .date span {display:inline-block; width:40px; height: 20px;font-size:12px;}
.notice .list .title {display:block;font-size: 19px;line-height:18px; padding:10px 0 7px;font-weight: 400;}
.notice ul li a:hover {color:#cc6633;}
.notice ul li a strong { font-size:21px;}
.notice ul li a p { line-height:20px;font-size:16px; color:#8c8c8c;transition: ease-in-out 0.3s;}
.notice ul li a:hover p {color:#000;}

.notice a.more { position:absolute; top: -40px; right:0; font-size:18px;transition: ease-in-out 0.3s;}
.notice a.more:hover {color:#cc6633;}


.notice a.more span.ico {background:url("/layout/images/www/main/main_sp.png") no-repeat -176px -31px; width:15px; height:15px; display:inline-block; margin-right:7px;}
 
 .in_ti{display:block; font-size:19px; color:#666;}

.animation-from-top3 { -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s
        animation-name: movingPara;
        animation-duration: 3s;
    }
.animation-from-top6 { -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
@keyframes movingPara {

        from { padding-top: 100%; }
        to { padding-top: 0%; }

    }