/*******************************************  Reset CSS    *******************************************/
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub,
sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 16px;
    color: #444;
    line-height: 1.5;
    font-family: 微软雅黑, 黑体, Arial, Arial Black, Verdana, Georgia, Times New Roman, Trebuchet MS;
    vertical-align: baseline;
    text-decoration: none;
    -webkit-text-size-adjust: none;
    list-style: none;
    word-break: keep-all;
    word-wrap: break-word;
}

button, input, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

body {
    overflow-y: scroll;
}

/*******************************************  Header Css  *******************************************/
.wrapper-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 139px;
    background-color: #fff;
    border-bottom: 40px solid #b8202c;
    z-index: 11;
    box-sizing: border-box;
}

    .wrapper-header .logo {
        position: absolute;
        top: 25px;
        left: 10px;
    }

    /* quick menu */
    .wrapper-header .header-quick-menu {
        float: right;
        padding: 5px 40px 5px 10px;
    }

        .wrapper-header .header-quick-menu li {
            float: left;
            margin-left: 30px;
            line-height: 1.5;
        }

            .wrapper-header .header-quick-menu li:first-child:before {
                display: none;
                margin: 0;
            }

            .wrapper-header .header-quick-menu li > a {
                font-size: 14px;
                color: #666;
            }

                .wrapper-header .header-quick-menu li > a:hover {
                    text-decoration: underline;
                    color: #333;
                }

            .wrapper-header .header-quick-menu li:first-child > a {
                color: #b8202c;
                font-size: 22px;
                font-weight: bold;
                line-height: 1.2;
            }

            .wrapper-header .header-quick-menu li > a .icon-common {
                margin-right: 5px;
            }

    /* global-navigation */
    .wrapper-header a {
        text-decoration: none;
    }

    .wrapper-header .contents-fix > nav {
        position: relative;
        float: right;
        clear: both;
        margin-top: 7px;
    }

    .wrapper-header .contents-fix nav li.depth1 {
        display: inline-block;
        white-space: nowrap;
    }

        .wrapper-header .contents-fix nav li.depth1 > a {
            display: block;
            padding: 10px 40px 15px;
            font-weight: bold;
            color: #333;
            font-size: 20px;
        }

            .wrapper-header .contents-fix nav li.depth1.active > a,
            .wrapper-header .contents-fix nav li.depth1 > a:hover {
                color: #b8202c;
            }

        .wrapper-header .contents-fix nav li.depth1 > .icon-arrow {
            display: none;
        }

        .wrapper-header .contents-fix nav li.depth1 .dropmenu {
            position: absolute;
            top: 100%;
            height: 40px;
            display: none;
        }

        .wrapper-header .contents-fix nav li.depth1.active .dropmenu {
            display: block;
        }

    .wrapper-header .contents-fix nav #why .dropmenu {
        left: 0;
    }

    .wrapper-header .contents-fix nav #product .dropmenu {
        left: 0;
    }

    .wrapper-header .contents-fix nav #service .dropmenu {
        left: 190px;
    }

    .wrapper-header .contents-fix nav #manual .dropmenu {
        right: 0;
    }

    .wrapper-header .contents-fix nav #company .dropmenu {
        right: 0;
    }

    .wrapper-header .contents-fix nav li.depth1 .dropmenu ul:after {
        content: "";
        display: table;
        clear: both;
    }

    .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li {
        float: left;
    }

        .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a {
            display: block;
            padding: 8px 12px;
            font-weight: bold;
            color: #fff;
        }

            .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a:hover {
                background-color: #8d0f19;
            }

            .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a.active {
                background-color: #8d0f19;
            }

    .wrapper-header .contents-fix nav li.depth1 .wrapper-header .nav-menu,
    .wrapper-header .nav-close {
        display: none;
    }


/* 2depth
.wrapper-header .contents-fix nav li.depth1 .dropmenu {
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  min-height:200px;
  table-layout:fixed;
  background:#f3f3f3;
  border-top:1px solid #dcdcdc;
  box-shadow:-1px 2px 5px #999;
  display:table;
  visibility:hidden;
  opacity:0;
  transition:200ms ease;
}
.wrapper-header .contents-fix nav li.depth1:hover .dropmenu,
.wrapper-header .contents-fix nav li.active .dropmenu {
  visibility:visible;
  opacity:1;
}

.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box {
  position:relative;
  display:table-cell;
  width:205px;
  height:100%;
  padding:15px 10px 10px;  
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-title {
  text-align:right;
  font-weight:bold;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link {
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link a {
  display:block;
  background:#dedede;
  text-align:left;
  padding:10px;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link a:hover {
  background:#b8202c;
  color:#fff;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link a:hover .icon-common.icon-about-erp {
  background-position:-115px -252px;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link a:hover .icon-common.icon-customer-service {
  background-position:-138px -252px;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > .dropmenu-box .dropmenu-box-link a + a {
  margin-top:10px;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul {
  display:table-cell;
  background:#fff;
  border-left:1px solid #dcdcdc;
  vertical-align:top;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li {
  float:left;
  width:50%;  
  box-sizing:border-box;  
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a {
  display:block;
  color:#000;
  font-weight:bold;
  padding:10px;
  min-height:90px;
}

.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a .description{
  display:block;
  font-size:14px;
  white-space:normal;
  font-weight:normal;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a:hover,
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a.active{
  color:#b8202c;
}
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a:hover .description,
.wrapper-header .contents-fix nav li.depth1 .dropmenu > ul > li > a.active .description {
  color:#000;
}
 */

/*******************************************  footer CSS  *******************************************/
.footer {
    clear: both;
    position: relative;
    z-index: 8;
}

.footer-visual-section {
    background: url('../Images/35247840010_17098f96eb_o.png') no-repeat center;
    background-size: cover;
}

.footer .footer-visual {
    display: table;
    width: 100%;
    height: 250px;
    text-align: center;
    border-top: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
}

    .footer .footer-visual .footer-visual-sentence {
        display: table-cell;
        vertical-align: middle;
    }

        .footer .footer-visual .footer-visual-sentence .contents-text-centered {
            color: #303f58;
            font-size: 42px;
            font-weight: bold;
        }

        .footer .footer-visual .footer-visual-sentence .footer-visual-sentence-second {
            display: block;
            font-size: 26px;
            margin-top: 30px;
            font-weight: normal;
        }

.footer .footer-link-box {
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
}

    .footer .footer-link-box .footer-link-sentence,
    .footer .footer-link-box .footer-link {
        display: inline-block;
        vertical-align: middle;
    }

    .footer .footer-link-box .footer-link-sentence {
        margin-right: 50px;
        font-size: 30px;
        color: #fff;
    }

    .footer .footer-link-box .footer-link-title {
        display: inline-block;
        width: 200px;
        padding: 10px 10px;
        vertical-align: middle;
        border: 1px solid #b8202c;
        background: #b8202c;
        color: #fff;
    }

        .footer .footer-link-box .footer-link-title + a {
            margin-left: 10px;
        }

        .footer .footer-link-box .footer-link-title:hover {
            background: #fff;
            color: #b8202c;
        }

/* footer 컨텐츠 */
.footer .footer-contents {
    background: #1e1f23;
    padding: 20px 0;
    min-height: 260px;
}

    .footer .footer-contents div,
    .footer .footer-contents a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }

    .footer .footer-contents .contents-fix > ul > li,
    .footer .footer-contents .contents-fix .footer-link,
    .footer .footer-contents .contents-fix .contact-us {
        display: inline-block;
        vertical-align: top;
    }

        .footer .footer-contents .contents-fix .contact-us .content-us-sentence {
            overflow: hidden;
        }

    .footer .footer-contents .contents-fix .contact-info {
        margin-top: 25px;
    }

    .footer .footer-contents .contents-fix .content-iso {
        overflow: hidden;
        margin-top: 25px;
    }

        .footer .footer-contents .contents-fix .content-iso .iso {
            display: inline-block;
            color: #666;
            font-size: 12px;
            line-height: 1;
        }

            .footer .footer-contents .contents-fix .content-iso .iso .iso-title {
                display: block;
                color: #fff;
                font-size: 14px;
                margin: 10px 0 5px;
            }

    /* footer link */
    .footer .footer-contents .contents-fix .footer-link {
        float: right;
    }

        .footer .footer-contents .contents-fix .footer-link > li {
            width: 128px;
            margin-left: 15px;
        }

            .footer .footer-contents .contents-fix .footer-link > li:first-child {
                margin-left: 0;
            }

                .footer .footer-contents .contents-fix .footer-link > li:first-child a {
                    letter-spacing: -1px;
                }

            .footer .footer-contents .contents-fix .footer-link > li > ul {
                display: block;
                margin-top: 25px;
            }

                .footer .footer-contents .contents-fix .footer-link > li > ul > li {
                    line-height: 0;
                    margin-bottom: 12px;
                }

                    .footer .footer-contents .contents-fix .footer-link > li > ul > li > a {
                        color: #eee;
                        font-size: 14px;
                        line-height: 1.25;
                    }

                        .footer .footer-contents .contents-fix .footer-link > li > ul > li > a:before {
                            content: "";
                            float: left;
                            width: 2px;
                            height: 1px;
                            background: #eee;
                            margin: 5px 5px 17px 0;
                        }

                        .footer .footer-contents .contents-fix .contact-us .global-sites .global-sites-list a:hover,
                        .footer .footer-contents .contents-fix .footer-link > li > ul > li > a:hover {
                            text-decoration: underline;
                            color: #fff;
                        }

    .footer .footer-contents .contents-fix .contact-us .global-sites {
        margin-top: 20px;
    }

        .footer .footer-contents .contents-fix .contact-us .global-sites .global-sites-list {
            overflow: hidden;
        }

            .footer .footer-contents .contents-fix .contact-us .global-sites .global-sites-list a {
                color: #777;
                margin-right: 10px;
                font-size: 12px;
            }

            .footer .footer-contents .contents-fix .contact-us .global-sites .global-sites-list .global-sites-title {
                font-size: 16px;
            }
/* footer copy */
.footer .footer-copy {
    background: #121315;
    padding: 0 20px;
}

    .footer .footer-copy div,
    .footer .footer-copy div a {
        color: #ddd;
    }

    .footer .footer-copy .copy {
        padding: 10px 0;
        color: #bbb;
        line-height: 1.4;
        font-size: 14px;
    }

    .footer .footer-copy .copy-link {
        display: inline-block;
    }

    .footer .footer-copy .copy-link {
        float: right;
        padding-top: 5px;
    }

        .footer .footer-copy .copy-link a {
            padding: 0 10px;
            border-left: 1px solid #4e4e4e;
            text-decoration: none;
            font-size: 14px;
        }

            .footer .footer-copy .copy-link a:first-child {
                border-left: none;
            }

/* header, footer fix css */
.contents-fix {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

    .contents-fix:before,
    .contents-fix:after {
        content: "";
        display: table;
        clear: both;
    }

/*******************************************  Common CSS  *******************************************/
/* color */
.red {
    color: #b8202c !important;
}

.white {
    color: #fff !important;
}

.gray {
    color: #4e4e4e !important;
}

.blue {
    color: #476da5 !important;
}

.green {
    color: #0d9f9d !important;
}

.black {
    color: #000 !important;
}

.yellow {
    color: #ff8e2a !important;
}

.orange {
    color: #b8202c !important;
}

.light_gray {
    color: #8a8a8a !important;
}

/* background */
.bg-red {
    background: #d60000 !important;
}

.bg-pink {
    background: #f48784 !important;
}

.bg-blue {
    background: #0d599f !important;
}

.bg-lightblue {
    background: #f0f6ff !important;
}

.bg-green {
    background: #0d9f9d !important;
}

.bg-gray {
    background: #666 !important;
}

.bg-yellow {
    background: #ff8e2a !important;
}

a.link-red {
    color: #b40000 !important;
}

    a.link-red:hover {
        color: #a90000 !important;
    }

a.link-gray {
    color: #777 !important;
}

    a.link-gray:hover {
        color: #333 !important;
    }

/*스마트폰일때 줄바꿈*/
br.br-mobile-vis {
    display: none !important;
}

br.br-mobile-non {
    display: block !important;
}

/* font */
.f11 {
    font-size: 11px !important;
}

.f12 {
    font-size: 12px !important;
}

.f14 {
    font-size: 14px !important;
}

.f16 {
    font-size: 16px !important;
}

.f18 {
    font-size: 18px !important;
}

.f20 {
    font-size: 20px !important;
}

.f26 {
    font-size: 26px !important;
}

.f30 {
    font-size: 30px !important;
}

.f40 {
    font-size: 40px !important;
}

.f42 {
    font-size: 42px !important;
}

.f50 {
    font-size: 50px !important;
}

.text-underline {
    text-decoration: underline;
}

/* heading */
.heading10 {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: normal;
}

.heading20 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: normal;
    color: #d60000;
}

.heading30 {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: normal;
}

.heading40 {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: normal;
}

/* align */
.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

.valign-t {
    vertical-align: top !important;
}

.valign-b {
    vertical-align: bottom !important;
}

.valign-m {
    vertical-align: middle !important;
}

.float-l {
    float: left !important;
}

.float-r {
    float: right !important;
}
/* text-margin */
.contents-text-centered {
    width: 100%;
    max-width: 95vw;
    margin: 0 auto;
}
/* clear */
.clear {
    clear: both;
}

    .clear:before, .clear:after {
        content: '';
        height: 1px;
        display: block;
        visibility: hidden;
    }

.overflow-h {
    overflow: hidden;
}

/* padding */
.pa-0 {
    padding: 0 !important;
}

.pa-5 {
    padding: 5px !important;
}

.pa-10 {
    padding: 10px !important;
}

.pa-20 {
    padding: 20px !important;
}

.pa-30 {
    padding: 30px !important;
}

/* margin */
.ma-0 {
    margin: 0 !important;
}

.ma-5 {
    margin: 5px !important;
}

.ma-10 {
    margin: 10px !important;
}

.ma-20 {
    margin: 20px !important;
}

.ma-30 {
    margin: 30px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.mgt0 {
    margin-top: 0 !important;
}

.mgt3 {
    margin-top: 3px !important;
}

.mgt5 {
    margin-top: 5px !important;
}

.mgt10 {
    margin-top: 10px !important;
}

.mgt15 {
    margin-top: 15px !important;
}

.mgt20 {
    margin-top: 20px !important;
}

.mgt25 {
    margin-top: 25px !important;
}

.mgt30 {
    margin-top: 30px !important;
}

.mgt35 {
    margin-top: 35px !important;
}

.mgt50 {
    margin-top: 50px !important;
}

.mgt70 {
    margin-top: 70px !important;
}

.mgt_20 {
    margin-top: -20px !important;
}

.mgt_40 {
    margin-top: -40px !important;
}

.mgr20 {
    margin-right: 20px !important;
}

.mgr40 {
    margin-right: 40px !important;
}

.mgr0 {
    margin-right: 0 !important;
}

.float_l {
    float: left !important;
}

.float_r {
    float: right !important;
}

.float_n {
    float: none !important;
}

.clear {
    clear: both;
}

.overflow-h {
    overflow: hidden;
}

.border-t {
    padding-top: 20px;
    border-top: 1px solid #bcbcbc;
}

.border-b {
    padding-bottom: 20px;
    border-bottom: 1px solid #bcbcbc;
}

.function-border {
    padding-bottom: 5px;
    border-bottom: 1px solid #bcbcbc;
}

.txt_left {
    text-align: left !important;
}

.txt_right {
    text-align: right !important;
}

.txt_center, table.txt_center tr td, tr.txt_center td {
    text-align: center !important;
}

.txt_underline {
    text-decoration: underline !important;
}

.valign_m {
    vertical-align: middle !important;
}

.box_txt_darkgray {
    width: 70px;
    margin: 0 auto;
    color: #fff;
    line-height: 23px;
    text-align: center;
    background: #606060;
}

a.link {
    color: #476da5;
    text-decoration: underline;
}

    a.link:hover {
        text-decoration: underline;
    }

a:active {
    background: none;
}

/* Button */
.btnXS {
    display: inline-block;
    padding: 2px 10px 0 10px;
    font-size: 12px;
    text-decoration: none;
    vertical-align: middle;
}

.btnS {
    display: inline-block;
    padding: 2px 10px 0 10px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}

.btnM {
    display: inline-block;
    padding: 4px 20px 3px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}

.btnL {
    display: inline-block;
    padding: 5px 25px 4px 25px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}

.btn-red {
    background: #d60000;
    color: #fff;
}

    .btn-red:hover {
        background: #bf0d0d;
        text-decoration: none;
        color: #fff;
    }

.btn-blue {
    background: #476da5;
    color: #fff;
}

    .btn-blue:hover {
        background: #45628c;
        text-decoration: none;
        color: #fff;
    }

.btn-black {
    background: #2e3138;
    color: #fff;
}

    .btn-black:hover {
        background: #202227;
        text-decoration: none;
        color: #fff;
    }

.btn-gray {
    background: #888;
    color: #fff;
}

    .btn-gray:hover {
        background: #666;
        text-decoration: none;
        color: #fff;
    }

.btn-white {
    background: #fff;
    color: #333;
}

    .btn-white:hover {
        background: #eee;
        text-decoration: none;
        color: #333;
    }

/* LIst */
.list-circle li {
    background: url('/common/images/common/bullet-circle.png') no-repeat 0 6px;
    padding-left: 13px;
    margin-bottom: 5px;
}

    .list-circle li ul li {
        background: url('/common/images/common/bullet-circle-small.png') no-repeat 0 8px;
    }

.list-bar li {
    background: url('/common/images/common/bullet-bar.png') no-repeat 0 7px;
    padding-left: 13px;
    margin-bottom: 5px;
}

    .list-bar li ul li {
        background: url('/common/images/common/bullet-bar-small.png') no-repeat 0 7px;
    }

.list-decimal {
    padding-left: 30px;
}

    .list-decimal li {
        list-style-type: decimal;
        list-style-position: outside;
    }

/* Panel */
.panel {
    margin-bottom: 40px;
}

    .panel .heading30 {
        margin-bottom: 10px;
    }

    .panel .panel-contents {
        border: 4px solid #b2b2b2;
        padding: 15px 10px;
    }

    .panel.panel-red .heading30 {
        background: #d60000;
        display: inline-block;
        color: #fff;
        padding: 5px 10px;
        margin-bottom: 0;
    }

    .panel.panel-red .panel-contents {
        border: 2px solid #d60000;
        padding: 15px 10px;
    }

/* Tab */
.tab-ui {
    border-bottom: 1px solid #666;
    margin-bottom: 20px;
}

    .tab-ui:after {
        display: block;
        content: '';
        clear: both;
        visibility: hidden;
    }

    .tab-ui > li {
        display: inline-block;
        float: left;
        margin-right: 4px;
    }

        .tab-ui > li:first-child {
            margin-left: 4px;
        }

        .tab-ui > li:last-child {
            margin: 0;
        }

        .tab-ui > li > a {
            text-decoration: none;
            padding: 5px 13px 5px 13px;
            border: 1px solid #666;
            border-bottom: none;
            color: #666;
        }

            .tab-ui > li > a:hover {
                background: #f9f9f9;
                color: #222;
            }

        .tab-ui > li.ui-tabs-active > a {
            background: #476da5;
            color: #fff;
        }

            .tab-ui > li.ui-tabs-active > a:hover {
                background: #45628c;
            }

.tab-info {
    clear: both;
    display: none;
}

/* Article */
.article-valign {
    position: relative;
    margin-bottom: 40px;
}

.article-halign {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
}

.article-valign .article-halign {
    margin-bottom: 20px;
}

.article-valign .article-contents, .article-halign .article-contents {
    margin-bottom: 20px;
}

.article-halign .article-contents {
    display: inline-block;
    width: 500px;
}

.article-halign .article-halign-image {
    width: 350px;
    display: inline-block;
    float: right;
}

.article-valign:before, .article-halign:before, .article-valign:after, .article-halign:after {
    content: '';
    height: 0px;
    clear: both;
    display: block;
    visibility: hidden;
}

/* Etc */
hr {
    margin: 0 0 40px 0;
    height: 1px;
    border: none;
    border-top: 1px solid #ccc;
}

.hr-20 {
    margin: 20px 0 !important;
}

/* show hide */
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/* image box, video box */
.image-box, .video-box {
    margin: 20px 0 30px 0 !important;
}

    .image-box .bg-capture {
        border-bottom: 1px solid #999;
        padding: 10px 0 40px 0;
        background: url('/common/images/product/bg-capture.png') no-repeat 41px top;
        text-align: center;
    }

        .image-box .bg-capture > img {
            padding: 5px 0;
            border: 1px solid #ccc;
            background: #fff;
        }

    .image-box .image-border-bottom {
        padding: 10px 0 40px 0;
        border-bottom: 1px solid #999;
        text-align: center;
    }

    /* video box */
    .video-box .bg-video {
        border-top: 2px solid #666;
        padding: 30px 0;
        background: #eee url('/common/images/product/bg-video.png') no-repeat 0 0;
        text-align: center;
    }

/* border */
.border-gray-1px {
    border: 1px solid #ddd;
}

/* button div */
.wrapper-btn {
    text-align: center;
    margin: 20px 0;
}

    .wrapper-btn > a + a {
        margin-left: 20px;
    }

/* text div */
.wrapper-description {
    margin: 20px 0;
}

/* link list (제품기능더보기) */
.list-product-link > li {
    width: 250px;
    display: inline-block;
    word-wrap: break-word;
    vertical-align: top;
    padding: 0 10px 5px 13px;
}

    .list-product-link > li > a {
        text-decoration: none;
        color: #555;
    }

        .list-product-link > li > a:hover {
            text-decoration: underline;
            color: #333;
        }

/* accordion */
.accordion, .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.accordion {
    overflow: hidden;
}

.accordion-section-title {
    display: inline-block;
    text-decoration: none;
    color: #666;
}

    .accordion-section-title.active, .accordion-section-title:hover {
        text-decoration: none;
        color: red;
    }

.accordion-section-content {
    display: none;
}

/* 언어별사이트 리스트 */
.lang-list {
    background: #888;
    border-radius: 10px;
    border: 1px solid #888;
    position: absolute;
    right: 0;
    z-index: 100;
    width: 90px;
    padding: 6px 10px;
    overflow: hidden;
}

    .lang-list li {
        border-bottom: 1px solid rgba(100, 100, 100, 0.5);
        padding: 4px 0;
    }

        .lang-list li:last-child {
            border-bottom: none;
        }

        .lang-list li a {
            font-size: 12px !important;
            color: #eee;
            display: block;
            border-radius: 4px;
            overflow: hidden;
            padding: 2px 4px;
            text-align: center;
        }

            .lang-list li a:hover {
                background: #333;
                color: #fff;
                text-decoration: none;
            }

/* icon-common Css */
.icon-common {
    background: url('/common/images/common/icon-common-new.png?ver=2017021601') 0 0 no-repeat;
    display: inline-block;
    vertical-align: middle;
}

    .icon-common.icon-logo {
        width: 190px;
        height: 43px;
        background-position: 0 0;
    }

    .icon-common.icon-quick-phone {
        width: 16px;
        height: 16px;
        background-position: -1px -259px;
    }

    .icon-common.icon-quick-demo {
        width: 16px;
        height: 16px;
        background-position: -18px -258px;
    }

    .icon-common.icon-quick-free-trial {
        width: 16px;
        height: 16px;
        background-position: -35px -258px;
    }

    .icon-common.icon-quick-login {
        width: 16px;
        height: 16px;
        background-position: -52px -258px;
    }

    .icon-common.icon-about-erp {
        float: right;
        width: 22px;
        height: 22px;
        background-position: -69px -252px;
    }

    .icon-common.icon-customer-service {
        float: right;
        width: 22px;
        height: 22px;
        background-position: -92px -252px;
    }

    /*.icon-common.icon-company-success {
  background-position:0 -43px;
  width:51px;
  height:50px;
  margin-bottom:35px;
}*/
    .icon-common.icon-bottom-content-us {
        background-position: 0 -126px;
        width: 12px;
        height: 18px;
        margin-right: 14px;
        float: left;
    }

    .icon-common.icon-bottom-fax {
        background-position: -101px -51px;
        width: 19px;
        height: 18px;
        margin-right: 8px;
    }

    .icon-common.icon-bottom-call {
        background-position: -29px -126px;
        width: 17px;
        height: 18px;
        margin-right: 8px;
    }

    .icon-common.icon-bottom-mail {
        background-position: -45px -126px;
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }

    .icon-common.icon-bottom-skype {
        background-position: -79px -126px;
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }

    .icon-common.icon-bottom-iso {
        background-position: 0 -189px;
        float: left;
        width: 50px;
        height: 68px;
        margin-right: 10px;
    }

    .icon-common.icon-bottom-global-sites {
        background-position: -62px -125px;
        float: left;
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }

/*ecount success stories icons*/
.success-case-icon {
    background: url('/common/images/company/success-case.jpg?ver=2016042701') no-repeat;
    display: inline-block;
    width: 198px;
    height: 118px;
}

    .success-case-icon.bio {
        background-position: -1px -1px;
    }

    .success-case-icon.flatfair {
        background-position: -201px -1px;
    }

    .success-case-icon.chinamountain {
        background-position: -401px -1px;
    }

/* 팝업 */
.pop {
    position: relative;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    min-width: 730px;
}

    .pop h2 {
        margin-bottom: 15px;
        padding-bottom: 13px;
        border-bottom: 2px solid #333;
        font-size: 30px;
        font-weight: normal;
    }

        .pop h2 a {
            font-size: 30px;
        }

    .pop .stit {
        clear: both;
        font-weight: bold;
        padding: 5px 0;
        margin-top: 10px;
        color: #476da5;
    }

        .pop .stit a {
            font-weight: normal;
        }

    .pop .btn-bot {
        overflow: hidden;
        clear: both;
        margin-top: 15px;
        text-align: center;
    }

    .pop .pop-info {
        font-size: 14px;
        padding: 10px 0;
        margin-top: 10px;
        border-top: 1px solid #444;
        border-bottom: 1px solid #ccc;
    }

.gray-con {
    border: 1px solid #ccc;
    font-size: 14px;
    text-align: left;
    padding: 10px;
    margin-bottom: 20px;
}

/* popup - Form 스타일 */
input[type="checkbox"], input[type="radio"] {
    width: 13px;
    height: 13px;
    margin: 0 2px 3px 0;
    padding: 0;
    vertical-align: middle;
    border: 1px solid #fff;
}

input[type="text"],
textarea,
select,
input[type="password"],
input[type="file"] {
    resize: none;
    border: 1px solid #ddd;
    line-height: normal;
    outline: none;
    padding: 3px 5px;
    vertical-align: middle;
}

    input[type="text"]:focus,
    textarea:focus,
    select:focus,
    input[type="password"]:focus,
    input[type="file"]:focus {
        border: 1px solid #d60000;
        outline: none;
    }

.table-popup-form input[type="text"],
.table-popup-form textarea,
.table-popup-form select,
.table-popup-form input[type="password"] {
    background: #f7f7f7;
    padding: 6px 5px;
}

    .table-popup-form input[type="text"]:focus,
    .table-popup-form textarea:focus,
    .table-popup-form select:focus,
    .table-popup-form input[type="password"]:focus {
        background-color: #fff;
    }

    .table-popup-form input[type="text"]:-ms-input-placeholder {
        padding: 8px 5px 6px 5px !important;
        font-size: 12px;
        color: #8f8f8f;
    }

    .table-popup-form input[type="text"]::-webkit-input-placeholder {
        font-size: 12px;
        color: #8f8f8f;
    }

    .table-popup-form input[type="text"]::-moz-placeholder {
        font-size: 12px;
        color: #8f8f8f;
    }

.table-popup-form label {
    display: inline-block;
    margin: 0 10px 0 0;
    cursor: pointer;
}

/* Table CSS */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.table {
    border-top: 2px solid #adadad;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}

    .table th {
        padding: 7px 5px;
        border: 1px solid #dbdbdb;
        background: #f7f7f7;
        vertical-align: middle;
        text-align: center;
        word-break: break-all;
    }

    .table td {
        padding: 6px 5px 4px 5px;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dbdbdb;
        background-color: #fff;
        word-break: break-all;
    }

    .table th.white {
        background-color: #fff;
    }

/*말풍선 - td안 input, textarea안에 도움말 class에적용*/
.inputcheck {
    position: relative;
    border: 1px solid transparent;
    background-color: transparent !important;
}

    .inputcheck > input[type='text']:focus, .inputcheck > textarea:focus, .inputcheck > select:focus, .inputcheck > input[type='password']:focus {
        border: 1px solid #4cbae8 !important;
        background: #fff !important;
    }

    .inputcheck > .inputcheck-info {
        display: none;
        position: absolute;
        z-index: 10;
        left: 0;
        top: 100%;
        padding: 5px 10px;
        background: #fff;
        line-height: 1.4;
    }

        .inputcheck > .inputcheck-info:before {
            display: inline-block;
            border: solid transparent;
            content: "";
            height: 0;
            width: 0;
            border-bottom-color: #fff;
            pointer-events: none;
            border-color: rgba(0, 0, 0, 0);
            border-bottom-color: #fff;
            border-width: 5px;
            margin-bottom: 0;
            margin-left: 10px;
            position: absolute;
            left: 10px;
            top: -9px;
        }

.border-require {
    border: 1px solid #4cbae8 !important;
    background: #fff !important;
    display: inline-block !important;
}

.border-alert {
    border: 1px solid #ed7c7c !important;
    background: #fff !important;
    display: inline-block !important;
}

.inputcheck input.require, .inputcheck textarea.require, .inputcheck select.require {
    border: 1px solid #4cbae8 !important;
    background: #fff !important;
}

    .inputcheck input.require + .inputcheck-info:before, .inputcheck textarea.require + .inputcheck-info:before, .inputcheck select.require + .inputcheck-info:before {
        border-bottom-color: #f4f8fb;
    }

    .inputcheck input.require + .inputcheck-info, .inputcheck textarea.require + .inputcheck-info, .inputcheck select.require + .inputcheck-info {
        display: inline-block;
        background: #f4f8fb;
        color: #333;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
        margin-left: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

.inputcheck input.alert, .inputcheck textarea.alert, .inputcheck select.alert {
    border: 1px solid #ed7c7c !important;
    background: #fff !important;
}

    .inputcheck input.alert:focus, inputcheck textarea.alert:focus, inputcheck select.alert:focus {
        border: 1px solid #ed7c7c !important;
    }

    .inputcheck input.alert + .inputcheck-info:before, .inputcheck textarea.alert + .inputcheck-info:before, .inputcheck select.alert + .inputcheck-info:before {
        border-bottom-color: #f7ebeb;
    }

    .inputcheck input.alert + .inputcheck-info, .inputcheck textarea.alert + .inputcheck-info, .inputcheck select.alert + .inputcheck-info {
        display: inline-block;
        background: #f7ebeb;
        color: #333;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
        margin-left: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }
/*//말풍선 - td안 input, textarea안에 도움말 class에적용*/

/*말풍선 - 일반 오브젝트에 도움말 class적용*/
.inputcheck.alert {
    border: 1px solid #ed7c7c;
    display: inline-block;
}

    .inputcheck.alert > .inputcheck-info:before {
        border-bottom-color: #f7ebeb;
    }

    .inputcheck.alert > .inputcheck-info {
        background: #f7ebeb;
        color: #333;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
        display: inline-block;
        margin-top: 7px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

.inputcheck.require {
    border: 1px solid #4cbae8;
    display: inline-block;
}

    .inputcheck.require > .inputcheck-info:before {
        border-bottom-color: #f4f8fb;
    }

    .inputcheck.require > .inputcheck-info {
        background: #f4f8fb;
        color: #333;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
        display: inline-block;
        margin-top: 7px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

.inputcheck.nofocus input[type="text"]:focus {
    border: 1px solid #ddd !important;
    display: inline-block;
}

.inputcheck.alert.nofocus > .inputcheck-info:before {
    border-bottom-color: #f7ebeb;
}

.inputcheck.alert.nofocus > .inputcheck-info {
    background: #f7ebeb;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
    display: inline-block;
    margin-top: 7px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.inputcheck.require.nofocus > .inputcheck-info:before {
    border-bottom-color: #f4f8fb;
}

.inputcheck.require.nofocus > .inputcheck-info {
    background: #f4f8fb;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
    display: inline-block;
    margin-top: 7px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}
/*//말풍선 - 일반 오브젝트에 도움말 class적용*/

/* Animation Module - navigation */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

    .animated.infinite {
        animation-iteration-count: infinite;
    }

    .animated.hinge {
        animation-duration: 2s;
    }

/* bounceInRight */
@-webkit-keyframes bounceInRight {
    0%, 100%, 60%, 75%, 90% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        transform: none;
    }
}

@keyframes bounceInRight {
    0%, 100%, 60%, 75%, 90% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        -ms-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -ms-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -ms-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -ms-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        -ms-transform: none;
        transform: none;
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}
/* bounceOutRight */
@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -ms-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    100% {
        opacity: 0;
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    animation-name: bounceOutRight;
}


/*mobile 아이콘(tablet 세로부터 적용)*/
@media all and (max-width:930px) {
    .icon-common.icon-common {
        background: url('/common/images/common/icon-common-new-m.png?ver=2017021601') 0 0 no-repeat;
        display: inline-block;
        vertical-align: middle;
        background-size: 250px 250px;
    }

    .icon-common.icon-menu {
        background-position: 0 -101px;
        width: 24px;
        height: 18px;
    }

    .icon-common.icon-counsel-call {
        background-position: -19px -44px;
        width: 22px;
        height: 22px;
    }

    .icon-common.icon-counsel-email {
        background-position: -42px -46px;
        width: 20px;
        height: 15px;
    }

    .icon-common.icon-nav-close {
        background-position: -175px -212px;
        width: 21px;
        height: 21px;
    }

    .icon-common.icon-arrow-down,
    .icon-common.icon-arrow-down-white {
        background-position: -56px -76px;
        width: 17px;
        height: 9px;
    }

    .icon-common.icon-arrow-up {
        background-position: 0 -58px;
        width: 17px;
        height: 9px;
    }

    .icon-common.icon-query {
        background-position: 0 -72px;
        width: 23px;
        height: 21px;
    }

    .icon-common.icon-answer {
        background-position: -23px -73px;
        width: 23px;
        height: 21px;
    }

    .icon-common.icon-top-call {
        background-position: -167px -50px;
        width: 14px;
        height: 15px;
    }
    /*.icon-common.icon-company-success {
    background-position:-66px -83px;
    margin-bottom:10px;
    width:36px;
    height:35px;
  }*/
    .contact-us .icon-common {
        margin-right: 7px;
    }

    .icon-common.icon-bottom-content-us {
        background-position: 1px -178px;
        width: 18px;
        height: 18px;
    }

    .icon-common.icon-bottom-mail {
        background-position: -84px -178px;
        width: 18px;
        height: 18px;
    }

    .icon-common.icon-bottom-fax {
        background-position: -183px -178px;
        width: 18px;
        height: 18px;
    }

    .icon-common.icon-bottom-call {
        background-position: -54px -178px;
        width: 18px;
        height: 18px;
    }

    .icon-common.icon-bottom-skype {
        background-position: -139px -178px;
        width: 18px;
        height: 18px;
        margin-left: 10px;
    }

    .icon-common.icon-bottom-global-sites {
        background-position: -112px -178px;
        width: 18px;
        height: 18px;
    }

    .icon-common.icon-call {
        background-position: -108px -75px;
        width: 22px;
        height: 27px;
    }
}

/*******************************************  nav, footer - Media Query  *******************************************/
/*tablet 가로사이즈 이하부터 공통적용*/
@media all and (max-width : 1200px) {
    .wrapper {
        min-width: 0;
    }
    /*Header*/

    header > .top-btn-success {
        display: none;
    }

    /*Footer*/
    .footer .footer-link-box .footer-link-sentence {
        margin: 0 0 20px 0;
        display: block;
    }

    .footer .footer-visual .footer-visual-sentence .contents-text-centered {
        font-size: 30px;
    }

    .footer .footer-link-box .footer-link li > a {
        width: 350px;
    }

    .footer > .footer-contents .contents-fix > .footer-link {
        margin: 0;
        width: 75%;
    }

        .footer > .footer-contents .contents-fix > .footer-link > li {
            margin: 0;
            padding: 0;
            width: 18%;
            margin-left: 0;
            padding-left: 2%;
        }

    .footer .footer-contents .contents-fix .content-iso {
        display: none;
    }

    .footer-contents .contents-fix > .contact-us {
        margin: 0;
        padding: 0;
        width: 20%;
    }

    .footer > .footer-contents > .contact-us > .global-sites {
        width: 100%;
    }
}
/*tablet 가로사이즈 이상부터 적용*/
@media all and (min-width : 936px) {
    .footer-link .accordion-section-content {
        display: block !important;
    }
}
/*tablet 가로사이즈 에서만 적용*/
@media all and (min-width : 936px) and (max-width : 1024px) {
    /*Footer*/
    .footer > .footer-copy > .copy-link > a {
        padding: 0 5px;
    }
}
/*tablet 세로사이즈 부터 적용*/
@media all and (max-width : 930px) {
    /*상단메뉴아이콘*/
    /*Header*/
    .wrapper-header {
        border-bottom: 0;
        height: 100px;
    }

        .wrapper-header .logo {
            top: 47px;
        }

        .wrapper-header .header-quick-menu li > a {
            font-size: 12px;
        }

        .wrapper-header .nav-menu {
            display: block;
        }

        /* header-quick-menu */
        .wrapper-header .header-quick-menu {
            float: none;
            display: table;
            width: 100%;
            padding: 8px 0;
            border-bottom: 1px solid #dcdcdc;
        }

            .wrapper-header .header-quick-menu li {
                float: none;
                display: table-cell;
                line-height: 14px;
                text-align: center;
                width: 200px;
                border-left: 1px solid #ccc;
                vertical-align: middle;
            }

                .wrapper-header .header-quick-menu li:first-child {
                    border-left: 0;
                }

                .wrapper-header .header-quick-menu li .icon-common {
                    display: none;
                }

                .wrapper-header .header-quick-menu li:first-child > a {
                    font-size: 14px;
                }

        /* nav */
        .wrapper-header .contents-fix nav {
            position: fixed;
            top: 0;
            right: 0;
            width: 300px;
            height: 100%;
            z-index: 10;
            background: #55565d;
            margin-top: 0;
            float: none;
            display: none;
            overflow-y: scroll;
        }

            .wrapper-header .contents-fix nav li.depth1 {
                float: none;
                display: block;
                position: relative;
                border-bottom: 1px solid #666;
            }

                .wrapper-header .contents-fix nav li.depth1 > a {
                    padding: 10px 20px 13px 20px;
                    color: #fff !important;
                    display: inline-block;
                    width: 130px;
                    font-size: 16px;
                }

                    .wrapper-header .contents-fix nav li.depth1 > a:hover {
                        color: #fff;
                    }

                .wrapper-header .contents-fix nav li.depth1 > .icon-common {
                    position: absolute;
                    top: 13px;
                    right: 10px;
                    cursor: pointer;
                    display: inline-block;
                }

                .wrapper-header .contents-fix nav li.depth1 > .icon-arrow {
                    background-position: -116px -211px;
                    width: 25px;
                    height: 25px;
                }

                .wrapper-header .contents-fix nav li.depth1.active > .icon-arrow {
                    background-position: -145px -211px;
                }

            .wrapper-header .contents-fix nav ul li.depth1 .dropmenu {
                position: inherit;
                top: 0;
                left: 0;
                border-top: 0;
                display: none;
                height: auto;
            }

            .wrapper-header .contents-fix nav #service .dropmenu {
                left: 0;
            }

            .wrapper-header .contents-fix nav li.depth1 .dropmenu ul {
                padding: 2px;
                background: #fff;
            }

                .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li {
                    float: none;
                }

                    .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a {
                        margin: 1%;
                        padding: 5px 10px;
                        color: #333;
                        font-weight: normal;
                        white-space: normal;
                    }

                        .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a:hover,
                        .wrapper-header .contents-fix nav li.depth1 .dropmenu ul li a.active {
                            color: #fff;
                        }

            .wrapper-header .contents-fix nav.bounceInRight,
            .wrapper-header .nav-close.bounceInRight {
                display: block;
            }

    .nav-menu {
        position: absolute;
        top: 41px;
        right: 0;
        cursor: pointer;
        padding: 15px;
    }

    .nav-close {
        position: absolute;
        top: 0;
        right: 300px;
        z-index: 10;
        text-align: center;
        cursor: pointer;
        padding: 15px;
        background: #333;
        display: none;
    }

    /*footer*/

    .footer .footer-contents div,
    .footer .footer-contents a {
        font-size: 14px;
    }

    .footer .footer-visual .footer-visual-sentence .contents-text-centered {
        font-size: 24px;
    }

    .footer .footer-visual .footer-visual-sentence .footer-visual-sentence-second {
        font-size: 20px;
        margin-top: 15px;
    }

    .footer > .footer-contents .contents-fix {
        padding: 0 10px;
    }

        .footer > .footer-contents .contents-fix > .footer-link {
            float: none;
            margin: 30px 0 0 0;
            width: 100%;
        }

            .footer > .footer-contents .contents-fix > .footer-link > li {
                width: 100%;
                margin-left: 0;
                padding: 5px 0 5px 5px;
                position: relative;
                border-bottom: 1px solid #666;
            }

                .footer > .footer-contents .contents-fix > .footer-link > li > ul {
                    display: none;
                    background: #585858;
                    padding: 10px 0 10px 8px;
                    margin-top: 0;
                }

                    .footer > .footer-contents .contents-fix > .footer-link > li > ul > li {
                        display: inline-block;
                        width: 32%;
                        line-height: 12px;
                        vertical-align: middle;
                    }

                .footer > .footer-contents .contents-fix > .footer-link > li > a {
                    width: auto;
                    border-bottom: none;
                }

            .footer > .footer-contents .contents-fix > .footer-link .accordion-section-title {
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                padding: 5px;
                font-size: 16px;
            }

                .footer > .footer-contents .contents-fix > .footer-link .accordion-section-title:after {
                    content: '+';
                }

                .footer > .footer-contents .contents-fix > .footer-link .accordion-section-title.active:after {
                    content: 'ㅡ';
                    font-size: 12px;
                }

    .footer > .footer-copy {
        position: relative;
    }

        .footer > .footer-copy .contents-fix div,
        .footer > .footer-copy .contents-fix div a {
            text-align: center;
        }

        .footer > .footer-copy > .contents-fix .copy-link {
            width: 100%;
            text-align: center;
            background: #121315;
            padding: 10px 0;
        }

    .footer-contents .contents-fix > .contact-us br {
        display: none;
    }

    .icon-bottom-iso {
        display: none;
    }

    .footer-contents .contents-fix > .contact-us {
        width: 100%;
    }

    .contents-fix {
        max-width: 100%;
    }

    .heading10 {
        font-size: 24px;
    }

    .heading20 {
        font-size: 22px;
    }
}

@media all and (max-width:720px) {
    .footer .footer-link-box .footer-link-title {
        display: block;
        margin: 10px auto !important;
    }
}
/*모바일 사이즈 부터 적용*/
@media all and (max-width :640px) {
    html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
    acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub,
    sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
    caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
        font-size: 14px;
    }
    /*Button*/
    .btnL {
        font-size: 18px;
    }
    /*Header*/
    .wrapper-header .header-quick-menu li:first-child > a {
        font-size: 12px;
    }

    /*global-nav*/

    /*Footer*/
    .footer > .footer-btn {
        overflow: hidden;
        padding: 0;
    }

        .footer > .footer-btn > a {
            width: 100%;
            padding: 10px 0;
            border-radius: 0;
            margin: 0;
            font-size: 16px;
        }

    .footer > .footer-copy > .copy-link > a {
        white-space: pre;
    }
    /*제품기능메인*/
    .article-valign.product-main {
        margin-bottom: 0;
    }

    .product-main > .heading20 {
        padding: 0 !important;
    }
    /*폰트사이즈*/
    .heading10 {
        font-size: 20px;
    }

    .heading20 {
        font-size: 18px;
    }

    .heading30 {
        font-size: 16px;
    }

    .heading40 {
        font-size: 14px;
    }
}
/*모바일 세로 사이즈 부터 적용*/
@media all and (max-width :480px) {
    /*header*/
    .wrapper-header .contents-fix nav {
        width: 230px;
    }

    .nav-close {
        right: 230px;
    }

    /*footer*/
    .footer-contents > .contact-us br {
        display: block;
    }

    .footer > .footer-contents > .footer-link > li > ul > li {
        width: 45%;
    }

    .footer > .footer-contents > .contact-us > .global-sites {
        width: 100%;
    }

        .footer > .footer-contents > .contact-us > .global-sites > a {
            margin-right: 8px;
        }

    .footer > .footer-copy > .copy {
        font-size: 12px;
    }

    .footer > .footer-contents > .footer-link > li:first-child ul li {
        width: 100%;
    }

    .footer > .footer-contents > .contact-us > .contact-info br {
        display: block;
    }
    /*스마트폰일때 줄바꿈*/
    br.br-mobile-vis {
        display: block !important;
    }

    br.br-mobile-non {
        display: none !important;
    }
}

@media all and (max-width :410px) {
    .wrapper-header .logo {
        top: 62px;
    }

    .nav-menu {
        top: 51px;
    }

    .icon-common.icon-logo {
        background-size: 160px 160px;
        width: 122px;
        height: 29px;
    }
}

/*모바일에서 메뉴열렸을때 스크롤제거,전체overlay*/
body.no-scroll {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.wrapper-overlay {
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0.6;
    display: none;
}