/* main */
#wrap {min-width:1200px;}
#wrap > article { width:1200px; margin:0 auto; overflow:hidden; }
#wrap > article.wide { width:100%;}
#wrap > article.service { width:100%; margin-top:110px;}

/*header*/
header {width:100%;background-color:#fff;}

.headerAlert {height:50px;background-color:#f3f3f3;}
.headerAlert_inner {width:1200px;margin:0 auto;}
.headerAlert_innerTxt {font-size:13px;font-family: 'Noto Sans KR', sans-serif;font-weight:400;padding:15px 0 0 50px;}
#btn_headerAlert {padding-top:10px; cursor:pointer;}
    
.headerUp {width:1200px; height:100px; margin:0 auto; clear:both;}
.headerUp a{color:#666;}
.headerUp a:hover{color:#0093c9;}
.headerUp ul {padding-top: 45px;}
.headerUp ul li {display: inline; border-left: 1px solid #ccc; padding: 0 14px;}
.headerUp ul li:first-child {border-left: none;}
.headerUp ul li:last-child {padding-right:0;}

.gnbL {float:left;}
.gnbR {float:right;}  
.headerLine {wide:100%;height:1px;background-color:#d8d8d8;}

.headerDown {width:1200px; height:37px; margin:0 auto;}
.headerDown a{color:#666;}
.headerDown a:hover{color:#333;font-weight:bold;}
.headerDownTxt {font-size:14px;padding-top:8px;}
.headerDownTxt img {vertical-align:middle;padding-right:7px;padding-left:20px;}
.headerDownTxt span {color:#0093c9; font-weight:bold;}
.headerDownTxt span:hover {color:#333;}

/*menu popup*/
.menupopup {width: 100%;clear:both;}
.headerUp a{color:#666;}
.menupopupInner {width:1200px;margin:auto;display:none; z-index:100;}

.pop-menu-table {position: absolute;z-index: 1000; display: inline-block; background-color: rgba(255, 255, 255, 1.0); border: 1px solid #00b6d3; width:1200px; border-collapse:collapse;}
.pop-menu-table th {height: 50px;padding-left: 39px;font-size: 15px; font-family: 'Noto Sans KR', sans-serif;	font-weight: 600;background-color:#f3f3f3;text-align:left;border: 1px solid #ddd;}
.pop-menu-table td {vertical-align:top;padding: 12px 0; border: 1px solid #e7e7e7;}
.pop-menu-table th:first-child, .pop-menu-table td:first-child {border-left: 0;}
.pop-menu-table th:last-child, .pop-menu-table td:last-child {border-right: 0;}

.select-area {width:140px;padding-top: 3px;padding-bottom: 6px;	padding-left: 10px;	margin-left: 30px;	margin-right: 30px;	font-size: 13px;color: #666;font-weight:600;}
.select-area:hover {color: #00b6d3;	font-weight:bold;}

/* mainVisual slide */
#mainVisual {width:1200px; height:450px;transition:all .3s; position:relative; margin:auto;}
.visual { width:100%; }
.visual li { height:450px; overflow:hidden; position:relative;}
.visual li > div { width:100%; height:100%; text-indent:-9999px;}
.visual li.vs1 > div { background:url(../img/mainVisual_01.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs2 > div { background:url(../img/mainVisual_02.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs3 > div { background:url(../img/mainVisual_03.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs4 > div { background:url(../img/mainVisual_04.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }

#bx-pager {position:absolute; top:410px; left:50%; margin-left:-45px; z-index:99;}
.bx-pager_visual { width:100px; } 
.bx-pager_visual li {width:25px; }
.bx-pager_visual li a { width:14px; height:14px; background-color:rgba(149, 149, 149, 0.43); border-radius:50%; text-indent:-9999px;display:inline-block;}
.bx-pager_visual li a.active, .bx-pager_visual li a:hover {background-color:rgba(0, 182, 211, 0.43);}

.mainPro {position:absolute; top:0; left:0;z-index:99;}
.mainPro_list {width:175px;}
.mainPro_list li {width:175px;height:56px;background-color:rgba(0, 0, 0, 0.5); }
.mainPro_list .mainProBox {width: 150px;height: 35px;border: 1px solid gold;border-bottom-color: rgb(0, 0, 0, 0.25);border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;font-size: 15px;letter-spacing: -.5px;padding-top: 20px;padding-left: 23px;}
.mainPro_list .mainProBox span {font-size:12px; padding-left:2px;}
.mainPro_list li a{color:#fff;}
.mainPro_list li a:hover{color:#00dcff;}


/* Best Product */
.best {width:1200px; margin:0 auto; position:relative; overflow:hidden;margin-top:65px; }
.bestTit {width:334px;margin:0 auto; text-align:center; font-weight:900; font-size: 28px; color:#000;line-height: 1.1;letter-spacing: -1.5px;}
.bestTit span {font-weight:400;padding-left:10px;}
.bestTit p {font-size: 18px;color:#8d8d8d;font-weight:400; padding-top:18px;}

.bestCont {margin-top:40px;}
.bestCont li {width:290px;height:340px;padding-right:13px;}
.bestCont li:last-child {padding-right:0;}
.galleryBox {width:290px; height:200px;}
.galleryTxt {font-size:16px; font-weight:bold;padding-top:27px; text-align:center;color:#333;}
.galleryBtn {margin-top:15px;}
.btn {display: block; text-transform: uppercase; padding: 3px; background-color: #00b6d3; margin-bottom: 16px; transition: all .5s ease;width:76px; text-align:center; margin:auto;}
.btn--radius {border-radius: 36px;}
.btn--radius:hover {background-color: #666; color: #fff;}
.btn--radius:after {animation: stripe-slide 12s infinite linear forwards;}

/* SELF DESIGN */
.self {width:1200px; margin:0 auto; position:relative; overflow:hidden;padding-top:80px; border-top:1px solid #ccc;}
.selfTit {width:400px;margin:0 auto; text-align:center; font-weight:900; font-size: 28px; color:#000;line-height: 1.1;letter-spacing: -1.5px;}
.selfTit span {font-weight:400;padding-left:10px;}
.selfTit p {font-size: 18px;color:#8d8d8d;font-weight:400; padding-top:18px;}

.selfCont {margin-top:55px;}
.selfCont li {width:146px;}
.selfCat {width:730px;margin:auto;}
.selfCat a {display:block; margin-right:5px;height: 28px;border:1px solid #ccc;text-align:center;color: #000;font-size: 13px;font-weight: bold;padding-top: 8px;cursor:pointer;}
.selfCat a:hover {background-color:#ccc; color:#fff;}
.selfCat a.current {background-color:#ccc; color:#fff;}

.ui_tabs_contents_wrap {position:relative; display:inline-block;margin-top:32px;}
.ui_tab_content .bx-viewport {height: 330px !important;}
.ui_tab_content li {width:300px;}
.ui_tab_content li span {font-size: 13px;position: absolute;width: 100%;text-align: center;left: -10px;color:#000; font-weight:bold;}
.selfSlideBox {position:relative; width:278px; height:278px; border:1px solid #ccc;background-color:#f4f4f4;margin-bottom:22px;}
.selfSlideBox img {position:absolute;max-width:226px;max-height:246px;width:auto;height:auto;margin:auto;top:0; bottom:0; left:0; right:0; box-shadow: 3px 3px 9px 0 rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.19) !important;}

.bxsliderDirection {position:absolute;top:110px;left:10px;}
#slider-prev0 {float:left;width:26px; height:52px;background:url(../img/btn_prev.png) no-repeat center center;}
#slider-next0 {margin-left:1130px;width:26px; height:52px;background:url(../img/btn_next.png) no-repeat center center;}
#slider-prev0 a{ display:block; width:26px; height:52px;text-indent:-9999px;}
#slider-next0 a{ display:block; width:26px; height:52px;text-indent:-9999px;} 

#slider-prev1 {float:left;width:26px; height:52px;background:url(../img/btn_prev.png) no-repeat center center;}
#slider-next1 {margin-left:1130px;width:26px; height:52px;background:url(../img/btn_next.png) no-repeat center center;}
#slider-prev1 a{ display:block; width:26px; height:52px;text-indent:-9999px;}
#slider-next1 a{ display:block; width:26px; height:52px;text-indent:-9999px;} 

#slider-prev2 {float:left;width:26px; height:52px;background:url(../img/btn_prev.png) no-repeat center center;}
#slider-next2 {margin-left:1130px;width:26px; height:52px;background:url(../img/btn_next.png) no-repeat center center;}
#slider-prev2 a{ display:block; width:26px; height:52px;text-indent:-9999px;}
#slider-next2 a{ display:block; width:26px; height:52px;text-indent:-9999px;} 

#slider-prev3 {float:left;width:26px; height:52px;background:url(../img/btn_prev.png) no-repeat center center;}
#slider-next3 {margin-left:1130px;width:26px; height:52px;background:url(../img/btn_next.png) no-repeat center center;}
#slider-prev3 a{ display:block; width:26px; height:52px;text-indent:-9999px;}
#slider-next3 a{ display:block; width:26px; height:52px;text-indent:-9999px;} 

#slider-prev4 {float:left;width:26px; height:52px;background:url(../img/btn_prev.png) no-repeat center center;}
#slider-next4 {margin-left:1130px;width:26px; height:52px;background:url(../img/btn_next.png) no-repeat center center;}
#slider-prev4 a{ display:block; width:26px; height:52px;text-indent:-9999px;}
#slider-next4 a{ display:block; width:26px; height:52px;text-indent:-9999px;} 



/* SERVICE */
.service {width:100%; position:relative; background:#eee; overflow:hidden;margin-top:65px; padding-top:75px;}
.serviceTit {font-weight:700;font-size: 24px;color:#676766;text-align:center;}
.serviceTit span {color:#000;padding-left:10px;}

.serviceList {width:1200px;height: 190px;margin: auto;margin-top: 67px;}
.serviceList li {width: 199px;height:116px;overflow:hidden;position:relative;border-right:1px solid #ccc;text-align:center;}
.serviceList li span { position: absolute;top: 0;left: 50px;height: 100px;width: 100px;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}
.serviceList li span:hover {-webkit-animation: swing 1s ease;animation: swing 1s ease;-webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.serviceList li:last-child {border-right:0;}
.serviceTxt {display: block; font-size: 16px; font-weight: bold; color: #666;margin-top:80px;}


/*CUSTOMER*/
.cs {width:1200px; margin:0 auto; position:relative; overflow:hidden;margin-top:55px; }
.csTit {font-family: 'Noto Sans KR', sans-serif;font-size:24px; color:#666;font-weight:500; border-bottom:1px solid #efefef;padding-bottom:15px;}
.csTitN {font-family: 'Noto Sans KR', sans-serif;font-size:22px; color:#666;font-weight:700; border-bottom:1px solid #efefef;padding-bottom:15px;}
.csTitN span{float:right;}
.csContsCall {font-family: 'Noto Sans KR', sans-serif;font-size:38px; color:#00b6d3; font-weight:700;padding:25px 0;}
.csContsTxt {font-size:14px; color:#666;margin-bottom:25px;}
.csNList {margin-top:15px;width:365px;}
.csNList img {vertical-align:middle;padding-right:7px;padding-left:20px;}
.csNList li {padding:4px 0;color:#666;}
.gnbM {margin-left:120px;float:left;}
.csTitM {font-family: 'Noto Sans KR', sans-serif;font-size:20px; color:#666;font-weight:400; border-bottom:1px solid #efefef;padding-bottom:15px;}



/* footer */
footer {width:100%;overflow:hidden; margin-top:50px; }
footer > article {width:1200px;margin:auto;height:170px;}
.f_bar {width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; height:60px;}
.f_bar_inner {width:1200px;margin:auto;}
.f_menu {float:left;}
.f_menu ul {padding-top: 20px;}
.f_menu ul li {display: inline; border-left: 1px solid #ccc; font-weight: 600;padding: 0 20px; }
.f_menu ul li:first-child {border-left: none;}
.f_menu ul li:last-child {padding-right:0;}
.f_icon {float:left;margin-left:368px;padding-top: 15px;}
.f_icon img {padding:3px;}
.f_famaily {float:left;border-left: 1px solid #ccc;border-right: 1px solid #ccc; margin-left:25px;}

.dropbtn {background-color: #fff;color: #666;padding: 16px;font-size: 14px;border: none;cursor: pointer;width: 180px;height: 60px;}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #fff;min-width: 180px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a {padding: 12px 16px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #fff}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #efefef;}

.footerCompany {padding-top:25px;padding-bottom: 15px;}
.footerCompanyTxt {font-size: 13px;font-weight: 600;color: #666;}
.footerinfo {color: #666;}
.footerinfo span {margin-right: 20px;}


/*animation*/
/*--service-icon*/
@-webkit-keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}