/* 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:url(../img/bg_chrome.jpg) repeat center center;background-size: contain;}
.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;color:#deeef6;}
#btn_headerAlert {padding-top:10px; cursor:pointer;}

.headerTop {height:36px; background-color:#ededed;}
.headerTop_inner {width:1200px;margin:0 auto;}
.headerTop a{color:#333;font-weight:bold;}
.headerTop a:hover{color:#0093c9;}
.headerTop ul {padding-top: 7px;}
.headerTop ul li {display: inline; border-left: 1px solid #ccc; padding: 0 14px;}
.headerTop ul li:first-child {border-left: none;}
.headerTop ul li:last-child {padding-right:0;}

.headerUp {width:1200px; height:100px; margin:0 auto; clear:both;}
.headerUpTxtL a{color:#333;font-weight:bold;}
.headerUpTxtL a:hover{color:#0093c9;}
.headerUpTxtL ul {padding-top: 45px;}
.headerUpTxtL ul li {display: inline; border-left: 1px solid #ccc; padding: 0 14px;}
.headerUpTxtL ul li:first-child {border-left: none;}
.headerUpTxtL ul li:last-child {padding-right:0;}
.headerUpTxtR {font-size:14px;padding-top:8px;}
.headerUpTxtR ul {padding-top:35px;}
.headerUpTxtR img {vertical-align:middle;padding-right:7px;padding-left:20px;}
.headerUpTxtR a:hover{color:#333;font-weight:bold;}
.headerUpTxtR span {color:#0093c9; font-weight:bold;}
.headerUpTxtR span:hover {color:#333;}

.gnbL {float:left;}
.gnbR {float:right;}  
.headerLine {wide:100%;height:1px;background-color:#d8d8d8;}
.headerDown {width:1200px; height:51px; margin:0 auto;}

/*menu dropdown*/
#mainmenu ul.menu li{float:left;height:51px;position:relative;}
#mainmenu ul.menu li a{display:block;width:100%;height:100%;line-height:48px;text-indent:30px;font-weight:bold;color:#333;text-decoration:none;font-size:14px;}
#mainmenu ul.menu li a:hover{color:#0093c9;}
#mainmenu ul.menu li ul.sub{position:absolute;left:0;z-index:100;width:223px;border:1px solid #0093c9;}
#mainmenu ul.menu li ul.sub li {width:223px; background-color:#fff;height:35px;}
#mainmenu ul.menu li ul.sub li a {color:#666;}
#mainmenu ul.menu li ul.sub li.ti40 > a {text-indent:40px;}
#mainmenu ul.menu li ul.sub li.ti90 > a {text-indent:90px;}
#mainmenu ul.menu li ul.sub li a:hover {color:#0093c9;font-weight:bold;}
#mainmenu ul.menu li ul.sub li img {margin-left:107px; margin-top:-10px;display:block;}
#mainmenu ul.menu li ul.sub li:first-child {border-top:2px solid #0093c9;height:0;}
#mainmenu ul.menu li ul.sub li:last-child {padding-bottom:15px;}
#mainmenu ul.menu{zoom:1;margin-left:10px;}/* ie7 float-clearing*/
#mainmenu ul.menu:after{height:0;visibility:hidden;content:".";display:block;clear:both;}

/*menu popup*/
.menupopup {width: 100%;clear:both;}
.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-weight: bold;background-color:#0093c9;text-align:left;border: 1px solid #ddd;color:#fff;}
.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_c {width:170px;padding-top: 3px;padding-bottom: 6px;	padding-left: 10px;	margin-left: 20px;	margin-right: 20px;	font-size: 14px;color: #666;font-weight:600;}
.select-area_c:hover {color: #00b6d3;	font-weight:bold;}


/* SELF DESIGN */
.self {width:1200px; margin:0 auto; position:relative; overflow:hidden;padding-top:80px;}
.selfTit {width:400px;margin:0 auto; text-align:center; font-weight:900; font-size: 38px; 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: 14px;font-weight: bold;padding-top: 8px;cursor:pointer;}
.selfCat a:hover {background-color:#0093c9; color:#fff;border:1px solid #0093c9;}
.selfCat a.current {background-color:#0093c9; color:#fff;border:1px solid #0093c9;}

.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;} 


/* Best Product */
.best {width:100%; position:relative; padding-top:70px; background-color:#eee;margin-top:50px;}
.best_Inner {width:1200px;height:585px;margin: auto;}
.bestCont {float:left; width:940px;}
.bestCont li {width:290px;height:265px;padding-right:13px;}
.bestCont li:last-child {padding-right:0;}
.galleryBox {width:290px; height:200px;}
.galleryCaption {width:290px;height:60px;position:relative;}
.galleryCaption_Inner {position:absolute;left:2%; margin:auto;}
.galleryTxt {float:left; font-size:13px; font-weight:bold;padding-top:26px; text-align:right;color:#333;}
.galleryBtn {float:left; margin-top:22px; margin-left:10px;}
.btn {display: block; text-transform: uppercase; padding: 3px; background-color: #0093c9; 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;}

.bestTit {float:left; width:260px;margin:0 auto; font-weight:900; font-size: 38px; color:#000;line-height: 1.1;letter-spacing: -1.5px;padding-top:170px;}
.bestTit span {font-weight:400;padding-left:10px;}
.bestTit p {font-size: 18px;color:#8d8d8d;font-weight:400; padding-top:18px; line-height:1.4;}
.blackbar {width:72px;height:1px;background-color:#000;margin:0 0 15px 2px;}


/* SERVICE */
.service {background:url(../img/bg_service.jpg) repeat-y center center; background-attachment:fixed; text-align:center; height:380px; overflow:hidden; color:#fff; padding-top:70px;}
.whitebar {width:49px;height:1px;background-color:#fff;margin:auto;}
.serviceTit {font-family: 'Noto Sans KR', sans-serif;font-size: 26px;text-align:center;padding-top:22px;}

.serviceList {width:1200px;height: 190px;margin: auto;margin-top: 67px;}
.serviceList li{padding-right:24px;}
.serviceList li:last-child{padding-right:0;}
.serviceBox {width:180px; height:180px; background-color:#ececec;position:relative;border-radius:50%;display:inline-block;}
.serviceBox span {position: absolute;top: 25px;left: 40px;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;}
.serviceBox span:hover {-webkit-animation: swing 1s ease;animation: swing 1s ease;-webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.serviceTxt {position: absolute;top: 125px;left: 50%; font-size: 16px; font-weight: bold; color: #666;transform:translateX(-50%);width:120px;}


/*CUSTOMER*/
.cs {width:1200px; margin:0 auto; position:relative; overflow:hidden;}
.csTit {font-family: 'Noto Sans KR', sans-serif;font-size:22px; color:#666;font-weight:500; border-bottom:1px solid #dcdcdc;padding-bottom:15px;width:270px;}
.csTitN {font-family: 'Noto Sans KR', sans-serif;font-size:22px; color:#0093c9;font-weight:700; border-bottom:1px solid #dcdcdc;padding-bottom:15px;width:340px;}
.csTitN span{float:right;}
.csContsCall {font-family: 'Noto Sans KR', sans-serif;font-size:36px; color:#0093c9; font-weight:700;padding:25px 0;}
.csContsTxt {font-size:13px;color:#666;margin-bottom:25px;letter-spacing: -.5px;font-weight: bold;}
.csNList {margin-top:15px;width:340px;}
.csNList img {vertical-align:middle;padding-right:7px;}
.csNList li {padding:4px 0;color:#666;}
.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;}
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; width:700px;}
.footerinfo span {margin-right: 20px;}


/*animation*/
/*--mainVisual*/
@keyframes vsImg {
	0% { transform:scale(1.2); }
	100% {transform:scale(1); }
}

/*--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);
    }
}