@charset "UTF-8";

/* ## layout */
#wrapper{margin: 0 auto; overflow: hidden; width: 100%; }
.main{width: 100%; clear: both;}
#header{background: #151515; display: block; clear: both; width: 100%; position: relative; z-index: 10;  transition: all 0.3s;}
#contents{position: relative; }
#contents.main{margin-bottom: 0;}
#footer{position:relative; background-color: #fff; padding: 0; clear:both}
.container{margin:0 auto;padding:0 10px;max-width:1420px; position:relative; width: 100%;}
.container-sm{margin:0 auto;padding:0 10px;max-width:1180px; position:relative; width: 100%;}
.section-container{max-width: 1000px; padding: 0; margin: 0 auto;}

#skip-contents a {z-index: 100000; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;}



/**********
* ## header
**********/
#header .container{display: flex; align-items: center; justify-content: space-between;}

.header-top{font-size: 14px; color: #646464; display: flex; align-items: center; height: 34px; line-height: 1.2; background-color: #fff;}
.header-top-menu{overflow: hidden;}
.header-top-menu li{float: left; padding: 0 30px;}
.header-top-menu li a:hover{color: #111;}
.header-top-menu li:first-child{padding-left: 0;}

#header .logo{display: inline-block;}
.logo a{display: inline-block; width: 197px; height: 33px; background: url('../images/mall/logo_store.png') no-repeat 0 0; background-size: cover; color: #fff;}

.header-sticky#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 10;}

.header-contractUs{margin-left: auto;}
.tnb{display: flex; align-items: center;}
.tnb li{position: relative; }
.tnb li:last-child{margin-left: 20px;}
.btn-inquiry{border: 1px solid #fff; border-radius: 25px; height: 42px; line-height: 42px; color: #fff; display: inline-block; padding: 0 30px !important;}
.btn-inquiry:hover{color: #333; background-color: #fff;}
.btn-blog{ border-radius: 50%; height: 42px; width: 42px; line-height: 42px; color: green; display: flex; justify-content: center;  align-items: center; background-color: #fff;}
.btn-blog:hover{box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.54);}
.icon-blog{background: url('../images/icons/ico_blog.png') no-repeat center/cover; text-indent: -9999px; width: 30px; height: 25px; display: inline-block; margin-top: 3px;}

.header-button{display: none;}
.header-button button{display: inline-block; margin: 0; width: 30px; height: 60px;}
.header-button .icon-bar {background-color: #888; width: 30px; height: 2px; display: block; }
.header-button .icon-bar:nth-child(2) {margin: 7px 0;}


/**********
* ## gnb
**********/
#gnb{position: relative; width: auto; margin-left: 50px;}
#gnb .topmenu{display: flex; -moz-display:flex; -o-display:flex; -ms-display:flex; -webkit-display:flex; z-index: 10;}
#gnb .topmenu > li > a{display: block; position: relative; line-height: 88px; color: #121212; height: 88px; color: #fff; padding: 0 30px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
#gnb .topmenu > li > a .icon-dropdown{display: inline-block; top: 50%; right: 12px; width: 12px; height: 7px; background: url('../images/icons/ico_arw_down.png') no-repeat center/cover; margin-left: 10px; vertical-align: middle; margin-top: -4px; transition: all 0.2s ease;}
#gnb .topmenu > li > a.active .icon-dropdown{transform: rotate(180deg); background-image: url('../images/icons/ico_arw_down_gr.png');}
#gnb .topmenu > li > a.active,
#gnb .topmenu > li > a:hover{color: #96faa3;}
#gnb .topmenu > li > a:hover .icon-dropdown{background-image: url('../images/icons/ico_arw_down_gr.png');}

#gnb .drop-wrap{position: absolute; top: 88px; display: none; left: 0; width: 100%; text-align: left; min-height: 290px; z-index: 2; background-color: #1c1c1c;}


.drop-inner{max-width: 760px; display: flex; margin: 0 auto; padding: 30px; width: 100%;}
.drop-menu-box{flex: 1; margin-left: 50px;}
.drop-menu-box:first-child{margin-left: 0;}
.drop-menu-box h5{font-size: 16px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #333; color: #a7a8a9; font-weight: 500;}

.gnb-image{ max-width: 760px; width: 100%; margin: 0 auto;}
.gi-image{width: 100%; display: inline-block; max-width: 49%; margin-bottom: 10px; min-height: 160px; background-repeat: no-repeat; background-size: auto; background-position: 50%; padding: 0 25px; vertical-align: top;}
.gi-image.pro{background-image: url('../images/common/bg_gnb_pro.png'); min-height: 180px; background-color: #0f9f6a; max-width: 100%; background-position: 100% 50%;}
.gi-image.server{background-image: url('../images/common/bg_gnb_server.png'); background-color: #23538b; background-position: 100% 50%;}
.gi-image.sdk{background-color: #d6f3fb; margin-left: 10px;}
.gi-image.sdk .gi-title{color: #000;}

.gi-image .gi-title{color: #fff; display: block; padding-top: 25px;}
.gi-image .gi-title h4{font-size: 20px; font-weight: normal; margin-bottom: 10px;}
.gi-image .gi-desc{display: block;}


.gnb-sub.open{z-index: 1; display: block;}
.gnb-sub{position: absolute; display: none; left: 0; top: 122px; width: 100%; background-color: #1c1c1c; box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, 0.2); }
.gnb-sub .full-menu{display: flex; justify-content: center; min-height: 250px; margin: 0 auto; margin-left: -8.5%;}

.gnb-sub ul.dropdown-menu{position: relative;;}
.gnb-sub ul.dropdown-menu li{padding: 0; margin-bottom: 10px;}
.gnb-sub ul.dropdown-menu li:last-child{margin-bottom: 0;}
.gnb-sub ul.dropdown-menu li a{font-size: 14px; height: auto; padding: 0; color: #e1e1e1; position: relative; width: auto; display: inline-block;}
.gnb-sub ul.dropdown-menu li a:hover{color: #fff;}

.gnb-sub ul.dropdown-menu > li > a::before{content: ''; position: absolute; display: block; bottom: -4px; left: 0; width: 0; background-color: #96faa3; height: 1px; transition: width 0.2s ease; -webkit-transition: width 0.2s ease; -moz-transition: width 0.2s ease; -ms-transition: width 0.2s ease; -o-transition: width 0.2s ease;}
.gnb-sub ul.dropdown-menu > li > a:hover::before{width: 100%;}


/**********
* ## Dropdown Menu
**********/
ul.dropdown-menu li{padding-left: 24px;}
ul.dropdown-menu li a{display: block; width: 100%; height: 100%; padding: 12px 0; font-size: 14px; border-bottom: none;}
ul.dropdown-menu li a:hover{color: #96faa3;}


/**********
* ## dlpo
**********/
.dlpo-wrap.hide{display: none;}
.dlpo-wrap {-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
.dlpo-wrap { position:relative;top:0; overflow: hidden; z-index: 20;}
.dlpo-wrap .banner-item{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; margin: 0 auto; padding: 5px 0; align-items: center; justify-content: center; background-color: #96faa3;}
.dlpo-wrap .banner-item a{position: relative; z-index: 1; text-align: center; font-weight: 300; color: #000;}

.dlpo-wrap .dlpo-close{position: absolute; top: 7px; right: 40px; width: 20px; height: 20px; text-indent: -9999px; cursor: pointer; z-index: 1;}
.dlpo-wrap .dlpo-close:before, .dlpo-wrap .dlpo-close:after{width: 25px; height: 1px; top: 50%; margin-top: -1px; left: -2px; content: ""; background: #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;}
.dlpo-wrap .dlpo-close:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
.dlpo-wrap.close { height:0}


/**********
* ## footer
**********/
#footer{background-color: #424242; color: #e7e7e7; padding: 80px 0 60px; font-size: 14px;}
#footer .footer-logo{position: absolute; left: 10px; top: 0;}
#footer .footer-logo a{display: inline-block; background: url('../images/logo_white.png') no-repeat center/cover; width: 140px; height: 33px; background-size: 140px auto;}

#footer .widget-wrap{display: flex; margin-left: 240px;}
.widget-wrap .footer-widget{margin-left: 100px;}
.widget-wrap .footer-widget:first-child{margin-left: 0;}
.widget-wrap .footer-widget h4{font-size: 16px; color: #fff; margin-bottom: 40px; line-height: 1; font-weight: normal;}
.widget-wrap .widget-menu{position: relative; margin-bottom: 30px;}
.widget-wrap .widget-menu li{padding:10px 0; position: relative; line-height: 1;}
.widget-wrap .widget-menu li:first-child{padding-top: 0;}
.widget-wrap .widget-menu a{display:block; color:#d6d6d6;}
.widget-wrap .widget-menu .menu-group{color:#fff;}
.widget-wrap .widget-menu a:hover{color:#fff}

#footer .footer-link{position: relative; display: flex; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; padding: 20px 0; margin: 30px 0 30px;}
#footer .footer-link li{padding:0 10px; position: relative; line-height: 1;}
#footer .footer-link li:first-child{padding-left:0;background:none}
#footer .footer-link li::after{content: ''; width: 1px; height: 12px; background-color: #919293; position: absolute; top: 0; right: 0;} 
#footer .footer-link li:last-child::after{display: none;} 
#footer .footer-link .menu-group{display:block; color:#d6d6d6;}
#footer .footer-link li:nth-child(2) a {font-weight: 500; color: #fff;}
#footer .footer-link a:hover{color:#fff}

#footer .address-info{font-size: 12px;}
#footer .address-info div{color:#ddd; margin-bottom: 2px;}
#footer .address-info div span {display:inline-block; margin: 0 3px; }
#footer .address-info div span:first-child {margin-left: 0 }
#footer .address-info div.copyright { letter-spacing: -0.5px; color: #ddd; margin-top: 8px; line-height: 1;}


#scroll-top{position: fixed; right: 10%; bottom: 10%; background-color: #233b4d; width: 35px; height: 35px; line-height: 30px; font-weight: 500; font-size: 12px; color: #fff; border-color: #233b4d; border-top: 0; opacity: 0; transition: all 0.3s ease; text-align: center;}
.btn-top{background: #2351b1 url('../images/common/quick_top.png') no-repeat center/cover; display: inline-block; width: 35px; height: 35px;}
#scroll-top.active{opacity: 1;}


/* ## Header Banner */
.mall-header-banner{background: #f0f0f0; height: 65px; margin-bottom: 3rem;}
.header-banner-wrap{text-align: center; }
.mall-header-banner h5{line-height: 65px; color: #424242; font-weight: 400;}
.mall-header-banner .btn-wrap{position: absolute; right: 10px; top: 14px;}
.mall-header-banner .btn-wrap .btn-white{border: 1px solid #ccc; color: #626262; font-size: 14px; background-color: #fff; border-radius: 4px;}
.mall-header-banner .btn-wrap .btn-white:hover{background: #626262; color: #fff;}
.mall-header-banner .btn-wrap .btn + .btn{margin-left: 10px;}

/* ## quick */
/* .quick-wrap{position: fixed; right: 0; bottom: 40%; z-index: 10;}
.quick-content{position: relative; box-sizing: border-box;}
.quick-content .quick-item{text-align: center; background-color: #fff;}
.quick-content .quick-item a{ display: flex; align-items: center; justify-content: center; height: 90px; flex-direction: column; box-shadow: 0px 1px 1.8px 0.2px rgba(0, 0, 0, 0.1); border: solid 1px #d1d1d1;}
.quick-content .quick-item .quick-icon{margin: 0 auto 10px;}
.quick-content .quick-item p{font-size: 12px;}

.quick-item.scroll{background-color: #233b4d; height: 30px; line-height: 30px; }
.quick-item.scroll a{font-weight: 500; font-size: 12px; color: #fff; height: 30px; border-color: #233b4d; border-top: 0;}

.quick-item.inquiry{margin-top: 10px; background-color: transparent; }
.quick-item.inquiry a{height: auto; border: 0; box-shadow: none; }
.quick-item.inquiry .quick-icon{background: url('../images/btns/btn_apply.png') no-repeat center/cover; width: 90px; height: 48px; margin-bottom: 0;} */


/**********
* ## common
**********/
.dx-input{ background: #fff; height: 40px; line-height: 40px; padding: 0 0 0 5px; border: 0; border: 1px solid #e1e1e1;}
.dx-input.full{width: 100%;}
.dx-input.half{width: 50%;}
.dx-input.input-auto{width: auto;}
.dx-input.readonly{background-color: #f0f0f0;}
.dx-input:focus{outline: none;}

select.dx-input{color: #4d4c4c; background:url('../images/icons/ico_select_arrow.png') no-repeat 100% 50%; padding-right: 0; min-width: 100px;}
select.dx-input.full{width: 100%; background-position: 98% 50%; padding-right: 0;}
textarea.dx-input{min-height: 150px; color: #666; padding: 5px; line-height: 1.4;}

.hide{display: none;}
.main-color{color: #6ad784;}
.font-en{font-family: 'Roboto', sans-serif; }
.sound-only{position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; margin: -1px;}
br.show-mobile, .show-mobile { display:none}
.img-responsive{width: auto; max-width: 100%;}

.label-req{padding-right: 5px; color: #fe0000; vertical-align: middle;}
.form-group{margin-bottom: 1rem; clear: both; position: relative;}
.form-group.lg{margin-bottom: 40px;}
.form-group .label{color: #121212; font-size: 16px; padding: 0; margin-bottom: 10px; display: inline-block; font-weight: 400; border-radius: 0; line-height: 1.4; text-align: left; display: block;}
.form-group .form-content{position: relative; display: flex;}
.form-group .form-content .location-input{display: flex; flex: 1;}
.form-group .form-content .location-input .select-box{width: 57%; }
.form-group .form-content .location-input .select-box.sub{margin-left: 3%; width: 40%;}

.form-group .form-content .name-container{margin-right: 20px; width: 40%;}
.form-group .form-content .phone-container{width: 60%;}
.phone-container .select-box{flex: 0 0 31%;}
.phone-container .dx-input{flex: 0 0 31%; margin-left: 3.5%;}


.error-place{position: relative;}
/* .error-place .error{margin-top: 0;} */
.error-place .error + .error{margin-left: 10px;}
.help-desc{color: #1473e6; font-size: 12px;}

.color{color: #028755;}
.color2{color: #6ad784;}

.link{text-decoration: underline; color: #1473e6;}


.badge {display: inline-block;  padding: 0.4rem 1em; font-size: 12px; font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge-success {color: #fff; background-color: #028755;}
.badge-warning {color: #fff; background-color: #ecb10d;}
.badge-danger {color: #fff; background-color: #e74a3b;}


/**********
* ## table
**********/
.dx-table table{width: 100%; border-top: 1px solid #ddd;}
.dx-table table th{font-weight: 500;}
.dx-table table th, .dx-table table td{padding: 10px 20px 11px 20px; border-bottom: 1px solid #ddd; background-color: #fff; color: #666;}
.dx-table table td.no-post{padding: 3rem 0;}

table.table-bg th{background-color: #f5f5f5; color: #333; border-left: 1px solid #ddd; text-align: left; width: 25%; font-weight: 400;}
table.table-bg td{border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
/* .dx-table.table-pad{padding: 0 100px;} */


/**********
* ## Button
**********/
.btn.full{width: 100%;}
.sp-submit{height: 60px; line-height: 58px; background-color: #028755; color: #fff; padding: 0; min-width: 160px; display: inline-block;}
.sp-submit.full{width: 100%;}
.btn-group{margin-top: 2rem;}
.btn-group .btn + .btn{margin-left: 15px;}

.input-group{position: relative; }
.input-group-btn{position: absolute; top: 0; right: 0;}
.input-group.inline{width: 50%}

.btn-black{background-color: #000; border: 0; color: #fff;}
.ico{display: inline-block;  }
.ico.arrow-w{background: url('../images/icons/ico_arw_more_wh.png') no-repeat center/cover; width: 20px; height: 11px; margin-left: 10px;}
.ico.arrow-b{background: url('../images/icons/ico_arw_more_bk.png') no-repeat center/cover; width: 20px; height: 11px; margin-left: 10px;}

.btn-more{padding: 19px 35px; line-height: 1; color: #fff; font-size: 20px; border-radius: 30px;}
.btn-icon-wrap{display: flex; align-items: center; justify-content: center;}
.btn-wrap{position: relative; text-align: center;}

.btn-flex-wrap{display: flex; justify-content: center; }

/**********
* ## paging
**********/
.pagination{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.pagination li{position: relative; width: 30px; height: 30px; line-height: 30px; vertical-align: middle; margin: 0 5px;}
.pagination li a{display: block;  text-align: center;}
.pagination li.active{border: 1px solid #2351b1}
.pagination li.active a{color: #2351b1}

.btn-paging{background-repeat: no-repeat; background-image: url('../images/btns/paginate.gif'); display: inline-block; width: 100%; text-indent: -9999px;}
.btn-paging.first-page{background-position: -4px -4px;}
.btn-paging.next-page{background-position: -81px -4px;}
.btn-paging.prev-page{background-position: -41px -4px;}
.btn-paging.last-page{background-position: -118px -4px;}


/**********
* ## layer popup
**********/
.layer-popup{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; transition: all 0.3s;}
.layer-popup.active{display: block; animation: aniFadeIn 0.5s; -moz-animation: aniFadeIn 0.5s; -webkit-animation: aniFadeIn 0.5s; -o-animation: aniFadeIn 0.5s;}
.layer-dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.pop-wrap{position: absolute; top: 50%; left: 50%; padding: 40px; background: #f9f9f9; z-index: 20; width: 50%;}
.pop-header{margin-bottom: 30px;}
.pop-header h3{font-size: 24px; font-weight: 500; }
.pop-content{background-color: #fff; padding: 10px;}
.pop-content h4{font-size: 0.8rem; margin-bottom: 10px;}
.pop-content strong{font-weight: 500;}
.pop-wrap .btn-close{position: absolute; top: 30px; right: 30px; width: 20px; height: 20px; text-indent: -9999px; cursor: pointer;}
.pop-wrap .btn-close.cross:before, .pop-wrap .btn-close.cross:after{width: 25px; height: 1px; top: 50%; margin-top: -1px; left: -2px; content: ""; background: #121212; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;}
.pop-wrap .btn-close.cross:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
.pop-wrap .btn-close.cross.white:before, .pop-wrap .btn-close.cross.white:after{background-color: #fff;}
.pop-wrap .btn-close.icon{background: url('../images/icons/ico_cancel.png') no-repeat center/cover;}

.pop-footer{margin-top: 2rem;}
.pop-footer .btn-close{position: relative; width: auto; height: auto; top: 0; left: 0; right: 0; text-indent: 0;}

.popup-video .btn-close{top: -20px; right: -20px;}
.popup-video .pop-wrap{padding: 0; background-color: transparent;}
.popup-video iframe{min-height: 540px;}

.popup-inquiry .layer-dim{background-color: rgba(255,255,255,0.4); opacity: 1;}
.popup-inquiry .pop-header{text-align: center; margin-bottom: 60px;}
.popup-inquiry .pop-wrap{border: 2px solid #121212; background-color: #fff; max-width: 960px; width: 100%;}
.popup-inquiry .pop-content{max-width: 560px; padding: 0; margin: 0 auto;}
.popup-inquiry .form-btn .btn{min-width: 190px; height: 46px; line-height: 46px;}
.popup-inquiry .select-box.full.active .select-list{max-height: 150px;}
.popup-inquiry .select-box.full .select-list a{font-size: 14px;}
.popup-inquiry .concept-area{display: none;}

/* .popup-privacy .pop-wrap{transform: translate(-50%, -50%);} */

.form-btn .btn-none{background-color: #777;}


.alert-layer{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999}
.alert-dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.alert-container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; background: #f9f9f9; z-index: 20; width: 50%; max-width: 300px; text-align: center;}
.alert-container .btn-confirm{margin-top: 30px; background-color: #ecb10d; color: #fff; height: 40px; line-height: 40px; font-size: 15px; display: inline-block; min-width: 100px; text-align: center; border-radius: 5px;}


/**********
* ## Custom element
**********/
.check-box{position: relative; display: flex; line-height: 1.25; }
.check-box input[type=checkbox]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.check-box label{display: inline;  cursor: pointer; text-align: center; margin-left: 25px; line-height: 1em; font-weight: normal; }
.check-box label::before, .check-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.check-box label::before{width: 14px; height: 14px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border: 1px solid #e1e1e1;}
.check-box input[type="checkbox"]:checked + label::before {background-color: #fff;}
.check-box input[type="checkbox"]:checked + label::after {content: ''; background: url('../images/icons/ico_checkbox-act.png') center/cover; width: 16px; height: 16px; top: 0; left: 0; color: #fff; z-index: 1; line-height: 1; }
/*
.check-box.bg-white label::before{width: 18px; height: 18px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: "";  border: 1px solid #ccc;}
 .check-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.check-box.border input[type="checkbox"]:checked + label::after {width: 12px; height: 12px;}
*/
.check-box-inline{display: inline-flex;}
.check-box-inline + .check-box-inline{margin-left: 1rem;}

.check-box.icon-circle{font-size: 12px;}
.check-box.icon-circle label{line-height: 20px; margin-left: 30px;}
.check-box.icon-circle label::before{border: 1px solid #111; width: 20px; height: 20px; border-radius: 50%; background: #fff url('../images/icons/ico_check_dft.png') center/cover; border: 0;}
.check-box.icon-circle input[type="checkbox"]:checked + label::after {background-image: url('../images/icons/ico_check_act.png'); width: 20px; height: 20px; border: 0;}


.check-box.rtl input[type=checkbox]{left: auto; right: 0;}
.check-box.rtl label{margin-left: 0; margin-right: 25px;}
.check-box.rtl label::before, .check-box.rtl label::after {content: ''; position: absolute; top: -2px; left: auto; right: 0;}
.check-box.rtl label::before{background: #fff;}
.check-box.rtl input[type="checkbox"]:checked + label::after {left: auto; top: -2px}


.radio-box{position: relative; display: flex; line-height: 1.25; }
.radio-box input[type=radio]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.radio-box label{display: inline; cursor: pointer; text-align: center; margin-left: 1rem; line-height: 1em; font-weight: normal; }
.radio-box label::before, .radio-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.radio-box label::before{width: 18px; height: 18px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; }
.radio-box.bg-white label::before{width: 18px; height: 18px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border: 1px solid #e1e1e1;}
.radio-box input[type="radio"]:checked + label::after {content: ''; width: 14px; height: 14px; top: 0; left: 0; color: #fff; background: #0957eb; z-index: 1; line-height: 1;}
.radio-box input[type="radio"]:checked + label::before {background-color: #fff;}
.radio-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.radio-box.border input[type="radio"]:checked + label::after {width: 12px; height: 12px;}

.radio-box.square label::before{width: 14px; height: 14px; border: 1px solid #e1e1e1;}
.radio-box.square input[type="radio"]:checked + label::after {background: url('../images/icons/ico_checkbox-act.png') center/cover; width: 16px; height: 16px;}

.radio-box.icon{vertical-align: middle; line-height: unset;}
.radio-box input[type=radio]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.radio-box.icon label{display: inline; width: 31px; height: 31px; cursor: pointer; text-align: center; margin-left: 0; padding-left: 45px; font-weight: normal; vertical-align: middle; line-height: unset;}
.radio-box.icon label::before, .radio-box label::after {content: ''; position: absolute; top: -2px; left: 0;}
.radio-box.icon label::before{width: 31px; height: 31px; background: url('../images/icons/ico_unchecked.png') no-repeat center/cover; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; }
.radio-box.icon input[type="radio"]:checked + label::after {content: '';  z-index: 1; background: url('../images/icons/ico_checked.png') no-repeat center/cover; width: 31px; height: 31px; top: -2px; left: 0;}
.radio-box.icon input[type="radio"]:checked + label::before {background-color: #fff;}

.radio-box.icon + .radio-box.icon{margin-left: 60px;}
.form-table .radio-box.icon + .error-place{top: 120%;}


.select-box{display:block;position:relative;width:300px;text-align:left;border:1px solid #d1d1d1}
.select-box.full{width: 100%;}
.select-box.width-auto{width: auto; min-width: 120px;}
.select-box .select{display:block;position:absolute;left:0;top:0;width:100%;height:100%;font-size:2em;color:#666;filter:alpha(opacity=0);opacity:0;z-index:1}
.select-box .btn-select{display:block;position:relative;padding:0 40px 0 10px;height:38px;line-height:40px; color:#666; background: url("../images/icons/ico_select_arrow.png") no-repeat right center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1}
.select-box .select-list{display:none;position:absolute; left:0; top:100%; right:0; padding:10px 0; margin-top:-1px; border-radius:4px; box-shadow: 0px 2px 4.8px 0.3px rgba(0, 0, 0, 0.2); border: solid 1px #e5e5e5; background-color: #ffffff; max-height: 300px; overflow-y: auto;}
.select-box .select-list li{position: relative;}
.select-box .select-list a{display:block;padding:8px 5px 9px; color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; text-align: center;}
.select-box .select-list a:hover{color:#fff; background-color: #f2f2f2; color: #0e9bf5;}
.select-box.scroll .select-list{max-height: 300px; overflow-y: scroll;}
.select-box.active{z-index:50}
.select-box.active .select-list{display:block;z-index:50}
.select-box.active.scroll .select-list { height:240px; overflow-y:auto}
.select-box.active .btn-select{border-color:#333;background:#fff url("../images/icons/ico_select_arrow.png") no-repeat right center}


/**********
* ## loading
**********/
.wrap-loading{position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.2); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */}
.wrap-loading div{position: fixed; top:50%; left:50%; margin-left: -21px; margin-top: -21px;}
.display-none{display:none;}


/**********
* ## Error
**********/
.topLogo {margin:20px}
.error-wrap {background:url('../images/icons/ico_error.gif') no-repeat center top; padding:100px 25px 35px; margin:150px auto 0; text-align:center; width:100%; max-width: 580px;  position:relative; overflow:hidden}
.error-header {color:#333; font-size:25px; font-weight:normal; display:block; padding:20px 0 30px; letter-spacing:-1px}
.error-header strong {display:block; font-size:70px}	

.error-text {border-top:1px solid #e0e0e0; padding:30px 0 40px; text-align:center; color:#666; line-height:22px; letter-spacing:-1px}
.error-btn {text-align:center}
.error-btn a{background: #888; color: #fff; width: 120px; height: 30px; line-height: 30px; display: inline-block; padding: 0; border-radius: 4px; text-decoration: none;}


/* ## single page wrap  */
.btn-back{background: url('../images/icons/btn_back_s2.png') no-repeat center left; display: inline-block;}
.btn-back span{margin-left: 30px; display: inline-block;}

.page-mypage .btn-history-back{background: url('../images/icons/btn_back_s2.png') no-repeat center left; display: inline-block;}
.page-mypage .btn-history-back span{margin-left: 30px; display: inline-block;}


/**********
* ## LOGIN
**********/
.panel.panel-login{max-width: 700px; background-color: transparent; }
.panel.panel-login .panel-header{background-color: transparent;}
.panel.panel-login .panel-body{max-width: 440px; margin: 0 auto; padding: 0; background-color: transparent;}
/* .panel-login .form-group{margin-bottom: 2rem;} */
/* .panel-login .panel-body{padding-top: 3rem;} */
.login-button{margin-top: 3rem;}
.login-button .sp-submit{background-color: #0957eb; height: 44px; line-height: 40px; width: 100%;}
.logrin-row .login-label{font-size: 14px; color: #111; }
.btn-register{display: block; color: #626262; border: 1px solid #626262; width: 100%; height: 44px; line-height: 44px; text-align: center; margin-top: 10px;}
.social-login{position: relative; border-top: 1px solid #eee; background-color: #fff; padding: 1rem 2rem;}
.social-login p{margin-bottom: 1rem;}
.search-id-password{float: right;}
.sl-btns a{width: 100%; display: block; border: 1px solid #ddd; padding: 9px 10px 10px 10px; margin-bottom: 10px; position: relative;}
.sl-btns a img{position: absolute; left: 10px; top: 11px;}
.sl-btns a .text{line-height: 1em; margin-left: 28px;}

.login-register{background-color: #f4f4f4; padding: 15px 0; text-align: center;}
.login-register p{margin-bottom: 10px;}
.login-register a{text-decoration: underline;}

.bs-number-container{display: flex; align-items: center; max-width: 60%;}
.bs-number-container input.n1{width: 29%; margin-right: 1%;}
.bs-number-container input.n2{width: 24%; margin-right: 1%;}
.bs-number-container input.n3{width: 45%;}

.autologinalert{font-size: 12px; margin-top: 1rem;}

.guest-wrap{margin-bottom: 2rem;}
.guest-wrap h4{font-weight: 500; }
.guest-privacy{border: 1px solid #cdcdcd; text-align: left; line-height: 1.6em; color: #666; background: #fafafa; padding: 10px; height: 150px; margin: 10px 0; overflow-y: auto; font-size: 0.65rem;}
.guest-wrap .btn{margin-top: 1rem;}
.guest-wrap .checkbox-custom label{font-size: 14px; letter-spacing: -1px;}


/* ## PASSWORD / FINDACCOUNT */
.panel{width: 100%; max-width: 1180px; padding: 0 10px; margin: 3rem auto 5rem;}
.panel-header{padding: 2rem 0; background-color: #fff;}
.panel-header.border{margin-bottom: 2rem; border-bottom: 1px solid #111;}
.panel-header h2{font-size: 32px; font-weight: 500; color: #111;}
.panel-header .desc{font-size: 16px; color: #626262; font-weight: 400; margin-bottom: 10px;}
.panel-body{position: relative; background-color: #fff; padding: 0 4rem 5rem;}
.panel-body .desc{margin-bottom: 15px; line-height: 1.5;}
.panel-link{font-size: 14px; margin-top: 15px; display: flex; align-items: center; justify-content: end; line-height: 1;}
.panel-link .check-box label{margin-left: 20px;}
.panel-link .check-box label::before{top: -1px}
.panel-link .check-box input[type="checkbox"]:checked + label::after{top: -1px;}
.panel-link a{position: relative; padding-left: 5px; margin-left: 5px;}
.panel-link a::before{content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 12px; background-color: #626262; margin-right: 5px; }
.panel-footer{position: relative; text-align: center; border-top: 1px solid #eee; background-color: #fff; padding: 1rem 2rem; background-color: #f4f4f4;}

.findaccount .form-table .phone-input{width: 50%;}

.help-block{margin-top: 10px; color: #888; font-size: 13px;}
.control-label{margin-bottom: 5px; display: block;}

.result-message{padding: 1rem 0; text-align: center;}


/**********
* ## REGISTER
**********/
/* #sp-wrapper.register{max-width: 640px;} */
.register-section{margin-bottom: 2rem;}
.register-section h4{margin-bottom: 15px; font-size: 18px; color: #111; font-weight: 500;}
.register-section.agree{background-color: #f0f0f0; padding: 2rem 1rem 2rem;}

.check-agrea a{text-decoration: underline;}
.check-agrea label .req{color: #ff8133; font-size: 12px;}
.check-agrea label .req.sel{color: #888; }

/* .agree-box{border: 1px solid #eee; font-size: 14px;}
.agree-box li:first-child{margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
.agree-box li{padding: 5px 0;} */

.agree-box{color: #626262; font-size: 14px;}
.agree-box li{display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;}
.agree-box li:last-child{margin-bottom: 0;}
.agree-box li .check-agrea .check-box label{font-size: 12px;}
.agree-box li .check-agrea a{font-size: 0.65rem; color: #333;}
.agree-box li .check-agrea a:hover{text-decoration: underline; color: #109342}
.agree-box .error-place .error + .error{display: block; margin-left: 0; margin-top: 0;}

.panel-body .btn-wrap{margin-top: 3rem;}

.btn-inner{margin-left: 10px; display: inline-block;}

.result-place{font-size: 12px; display: inline-block;}
.result-place .success{color: #1473e6; background-color: transparent;}
.result-place .fail{color: #ff8133;}

.d-inline-flex{display: inline-flex;}
.d-inline-flex .check-box + .check-box{margin-left: 10px;}
.d-inline-flex .radio-box + .radio-box{margin-left: 10px;}

/**********
* ## MOBILE
**********/
.menu-slide-container {position: fixed; z-index: 800; top: 0; bottom: 0; width: 80%; overflow-y: scroll; -webkit-transition: all 0.2s;transition: all 0.2s; opacity: 0; height: 100%; background-color: #fff;}
.dim-menu{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .4; display: none; z-index: 10;}
.dim-menu.on{display: block;}
.menu-content{background-color: #fff; position: absolute; width: 100%; z-index: 1; padding: 0;}

.menu-header{position: relative; background-color: #f7f7f7; padding: 12px 20px;}
.menu-header .select-box{width: 100px; background-color: #fff;}
/* .menu-logo .text{font-weight: 800; font-size: 24px; } */

.menu-slide-container.right-side {right: -80%; }
.menu-slide-container.right-side.menu-open {right: 0; opacity: 1;}
.menu-slide-container.left-side {left: -80%;}
.menu-slide-container.left-side.menu-open {left: 0;}
.menu-slide-container #logo {margin-bottom: 45px;}

.menu-slide-container .menu-close {position: absolute; top: 20px; right: 15px; display: inline-block; color: #fff; width: 20px; height: 20px; background: url('../images/icons/ico_close_m.png') no-repeat center; text-decoration: none; -webkit-transition: all 0.25s; transition: all 0.25s; z-index: 2; background-size: 22px;}
.menu-slide-container .menu-close:hover {color: #00e1c3;}

.menu-slide-container .header-top-menu{padding: 15px 0 15px 18px;}
.menu-slide-container .header-top-menu li{padding: 6px 0; width: 50%; }
.menu-slide-container .header-top-menu a{font-size: 14px; letter-spacing: -0.5px;}

.menu-slide,
.menu-slide ul {margin: 0; list-style: none;}

.menu-slide {position: relative; background-color: #fff;}
/* .menu-slide ul {margin-left: 10px;} */
.menu-slide li {position: relative; border-top: 1px solid #eeeef0; }
.menu-slide .dropdown-menu{display: none;}
.menu-slide .dropdown-menu .dropdown-title{color: #e1e1e1; padding: 20px 0 5px 20px; font-size: 14px; border-bottom: 2px solid #f5f7fa;}
.menu-slide .dropdown-menu + .dropdown-menu{padding-top: 15px;}
.menu-slide li.open .dropdown-menu{display: block; background-color: #0e9bf5;}
.menu-slide li a {padding: 22px 0; position: relative; display: block; margin-bottom: 0; font-size: 16px; line-height: 1em; text-decoration: none; -webkit-transition: all 0.25s; transition: all 0.25s; padding-left: 20px; }
.menu-slide > li > a {font-size: 16px; margin-bottom: 0; }
.menu-slide li ul li{border-top: 0; padding-left: 0;}
.menu-slide li ul li a{color: #fff; padding: 14px 0; padding-left: 20px;}

.dropdown .icon-angle{position: absolute; top: 50%; right: 15px; width: 13px; height: 13px;  background: url('../images/icons/ico_plus.png') no-repeat center; margin-top: -6.5px; background-size: 13px auto;}
.dropdown.open .icon-angle{right: 15px; width: 13px; height: 13px;  background: url('../images/icons/ico_minus.png') no-repeat center; margin-top: -6.5px; background-size: 13px auto;}
/* .menu-slide li ul.dropdown-menu li{} */


/* .menu-tnb{margin: 30px 0 20px; border-bottom: 1px solid #eee; padding-bottom: 30px;}
.menu-tnb a{width: 47%; border-radius: 5px; display: inline-block; margin: 1%; padding: 10px 0; font-size: 18px; background-color: #ff8133; border: 1px solid #ff8133; text-align: center; color: #fff;}
.menu-tnb a:first-child{background-color: #fff; color: #ff8133;} */

.menu-link{text-align: center; margin-top: 15px; padding: 15px 0; background-color: #fff;}
.menu-link a{display: inline-block; position: relative; font-size: 14px; line-height: 1;}
.menu-link a:first-child{margin-right: 5px; padding-right: 10px;}
.menu-link a:first-child::after{content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 12px; background-color: #121212;}



/**********
* ## MAIN
**********/
/* .store-wrap{width: 100%; max-width: 50rem; margin: 0 auto 4rem;} */

.mall-main{position: relative; margin-bottom: 2rem;}

.license-box {margin-bottom: 3rem; padding: 20px; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; position: relative; border: 1px solid #a7a8a9; height: 440px; border-radius: 4px;}
.license-box:hover {box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12); -webkit-transition: all 0.25s; transition: all 0.25s; border-color: #0957eb; background-color: #f5f7fa;}

.license-box.mac .license-os{background-image: url('../images/mall/MacOS.png'); width: 80px; height: 23px;}


/* license-info */
.license-info{position: relative;}
.license-logo{display: inline-block; background: url('../images/mall/right pdf pro.png') no-repeat center/cover; width: 60px; height: 60px; margin-bottom: 10px;}
.license-os{position: absolute; top: 0; right: 0; background: url('../images/mall/windows.png') center/cover; width: 94px; height: 20px;}
.license-info .desc{color: #626262; margin-top: 5px;}
.info-title{display: flex; align-items: center;}
.info-title h2{font-size: 24px; color: #111; font-weight: 500; display: inline-block;}
.info-title .suite-mark{display: inline-block; width: 100px; height: 24px; line-height: 26px; color: #fff; font-size: 14px; margin-left: 8px; background-color: #626262; text-align: center;}


.license-box.server .license-logo{background-image: url('../images/mall/server.png');}
.license-box.sdk .license-logo{background-image: url('../images/mall/SDK.png');}
.license-box.upgrade .license-logo{background-image: url('../images/mall/Gaaiho.png');}

/* license-detail */
.license-detail {border-top: 1px solid #111; padding-top: 1rem; margin-top: 1rem; margin-bottom: 3rem;}
.license-detail .price{font-size: 32px; color: #111; font-weight: 500; display: flex; align-items: center; margin-bottom: 10px; position: relative; line-height: 1.3;}
.license-detail .price.cust{text-decoration: dashed; margin-bottom: 5px;}
.license-detail .text{font-size: 24px; color: #111; font-weight: 500; margin-bottom: 15px;}
.license-detail .price span{display: inline-block; font-size: 16px; color: #626262; margin-left: 5px;}
.license-detail .price span.line{width: 100%; height: 2px; background-color: #f00; position: absolute; }
.license-detail .price span.line.l1{top: 35%;}
.license-detail .price span.line.l2{top: 55%;}
.license-detail .price em{font-size: 21px; margin-left: 10px;}
.license-detail p {font-size: 14px; color: #626262;}

.anchor2{display: block; height: 60px; margin-top: -60px; visibility: hidden;}


/**********
* ## FAQ
**********/
.faq-wrap { margin:2rem auto 5rem; }
.faq-wrap h4{font-size: 24px; color: #131313; border-bottom: 1px solid #999; padding-bottom: 1rem;}
.faq-wrap ul.faq li.faq-item { border-bottom:1px solid #cdcdcd; overflow:hidden; color:#000; font-size:16px; }
.faq-wrap ul.faq li.faq-item a.faq-title { color:#000; padding:20px 0 20px 0; display:block; position: relative; overflow: hidden;}
.faq-wrap ul.faq li.faq-item a.faq-title:hover { background-color: #f0f5fe;}
.faq-wrap ul.faq li.faq-item a.faq-title.active:hover { background-color: #fff;}
.faq-wrap ul.faq li.faq-item a.faq-title span { vertical-align:middle; display:inline-block}
.faq-wrap ul.faq li.faq-item a.faq-title span.faq-label {float: left;}
.faq-wrap ul.faq li.faq-item a.faq-title span.subject {width:90%; font-size:18px; float: left;}	
.faq-wrap ul.faq li.faq-item a.faq-title span.arrow { text-indent: -9999px; background:#fff url("../images/icons/bbs_next.png") center no-repeat; width:30px; height:17px; opacity: 0.3; position:absolute;top: 50%;  margin-top: -7px; right:20px; transition: all ease 0.2s;}
.faq-wrap ul.faq li.faq-item a.active .arrow { -webkit-transform:rotate(180deg); color:#333}
.faq-wrap ul.faq li.faq-item .answer {display:none; background-color:#fff; padding:0 20px 30px 0; overflow: hidden;}
/* .faq-wrap ul.faq li.faq-item .answer .label-a {float: left;} */
.faq-wrap ul.faq li.faq-item .answer .answer-content {width: 90%;}
.faq-wrap ul.faq li.faq-item .faq-label {display:inline-block; color: #0957eb; margin-right: 20px; font-weight: 700; width: 15px; text-align: center;}
.faq-wrap .btn-wrap {margin-top:20px; text-align: center}


/**********
* ## SUB
**********/
.sub .section-main-visual{height: 57.7vh;}
.sub .section-main-visual .screen-text1{font-size: 56px; color: #111; margin-bottom: 5px;}


.sub-top-visual {position: relative; width: 100%; height: 240px; background-color: #eee; text-align: center;  overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub-top-visual .visual-title {font-size:20px; background-color: #ecb10d; color: #fff;  position: relative; line-height: 1; display: inline-block; padding: 8px 20px;}
.sub-top-visual .line{width: 40px; height: 2px; background-color: #fff; margin: 20px 0 18px;}
.sub-top-visual .visual-desc {font-size:40px; color: #fff; line-height: 1;}

.sub-top-visual.company {background-image: url('../images/company/img_title_corp.jpg');}
.sub-top-visual.business{background-image: url('../images/business/img_title_business.jpg');}
.sub-top-visual.products{background-image: url('../images/products/img_title_product.jpg');}
.sub-top-visual.network{background-image: url('../images/network/img_title_global-network.jpg');}
.sub-top-visual.recruit{background-image: url('../images/recruit/img_title_recruit.jpg');}
.sub-top-visual.cs{background-image: url('../images/cs/img_title_cs.jpg');}



.sub-top-tab.white{background-color: #f0f0f0;}
.sub-top-tab.sticky{position: fixed; top: 0; width: 100%; z-index: 10; }
/* .sub-top-tab.white ul li a{color: #96faa3;} */
.sub-top-tab.white ul li.active a, .sub-top-tab.white ul li a:hover{color: #333;}

.sub-top-tab {background:#333}
.sub-top-tab ul { display:table; table-layout: fixed; width:100%;}
.sub-top-tab ul li { display:table-cell; width:50%}
.sub-top-tab ul li a {display: block; text-align: center; color: #a7a8a9; height: 44px; line-height: 44px;letter-spacing: 0;}
.sub-top-tab ul li.active a,
.sub-top-tab ul li a:hover{color:#fff}



.sub-tab-nav-warp{position:relative; margin-top: 30px;}
.sub-tab-nav-warp .btn-lnb{display: none;}
.fixed-nav .sub-tab-nav-warp{position:fixed; width: 100%; top: 0; z-index: 2; background-color: #f7f7f7;}
.fixed-nav .sub-tab-nav{margin-bottom: 0;}
.fixed-nav #header{display: none;}

.sub-tab-nav {font-size:0;clear: both;/* display: none; */ margin: 0 auto 60px; text-align: center; display: flex;}
.sub-tab-nav li { display:inline-block; position: relative; flex: 1; border-bottom: 2px solid #ddd;}
.sub-tab-nav li:last-child {margin-right:0}
.sub-tab-nav li a {display:block;padding: 17px 0 16px;font-size:18px; color: #666;-webkit-transition: color 0.3s;transition: color 0.3s; line-height: 1;}
.sub-tab-nav li.active a,
.sub-tab-nav li a:hover{ color: #111; font-weight: 500;}
/* .sub-tab-nav li a:after {content: '';display: block; height: 2px;width: 100%; background: #121212;position: absolute;bottom: 0;left: 0;opacity: 0;transition: opacity .3s; ;} */
.sub-tab-nav li.active{border-bottom-color: #111; border-bottom-width: 3px;}
/* .sub-tab-nav li.active a:after { opacity: 1; } */


.lnb-wrap{position:relative; background:#fff;}
.lnb-wrap.fixed-layer{position:fixed; background:#fff; top: 0; width: 100%; z-index: 10; border-bottom: 1px solid #ddd;}
.lnb-wrap .lnb-menu{height:50px}
.lnb-wrap .lnb-menu li{float:left;position:relative;border-right:1px solid #ddd}
.lnb-wrap .lnb-menu .btn-home{display:block;width:80px;height:50px;text-align:left;text-indent:-9999px;background:url("../images/icons/ico_home.png") no-repeat; border-left:1px solid #ddd; background-size: 20px auto; background-position: center;}
.lnb-wrap .lnb-menu .btn-lnb{display:block;position:relative; width: 300px; padding:0 0 0 20px;height:50px;line-height:50px; white-space:nowrap; letter-spacing: 0.5px;}
.lnb-wrap .lnb-menu .btn-lnb .ic{display:block;position:absolute; right:20px; top:50%;margin-top:-3px;width:13px;height:7.5px;background:url("../images/icons/ico_depth_g_d.png") no-repeat; background-size: 13px auto;}
.lnb-wrap .lnb-menu .btn-lnb .text{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 85%;}
/* .lnb-wrap .lnb-menu .btn-lnb.active{border-bottom: ;} */
.lnb-wrap .lnb-menu .btn-lnb.active .ic{background-image:url("../images/icons/ico_depth_g_u.png")}
.lnb-wrap .lnb-menu .sub-menu{display:none;position:absolute; border:1px solid #ddd;background:#fff; z-index: 1; width: 100.7%; border-top: 0; margin-left: -1px; padding: 10px 0 5px 0;}
.lnb-wrap .lnb-menu .sub-menu:before {content: ""; position: absolute; top: 0; left: 50%; display: block; width: 88%; height: 1px; margin-left: -44%; background-color: #ddd;}

.lnb-wrap .lnb-menu .sub-menu.active{display:block;}
.lnb-wrap .lnb-menu .sub-menu a{display:block;padding:0 20px;height:44px;line-height:44px; color:#666; white-space:nowrap; text-align: left; letter-spacing: 0.5px; position: relative; overflow: hidden; text-overflow: ellipsis;}
.lnb-wrap .lnb-menu .sub-menu a:first-child{border-top:0}
.lnb-wrap .lnb-menu .sub-menu a:hover{color:#2351b1; }
.lnb-wrap .lnb-menu .sub-menu a:hover .text{border-bottom:1px solid #2351b1;}
.lnb-wrap .lnb-menu .menu-box.last .btn-lnb {display:none}
.lnb-wrap .lnb-menu .menu-box.last.show .btn-lnb {display:block}

.lnb-wrap .lnb-menu .menu-box2.last .btn-lnb {display:none}
.lnb-wrap .lnb-menu .menu-box2.last.show .btn-lnb {display:block}
.lnb-wrap .lnb-menu .menu-box2:last-child { background:#313235}


.subwrap-top{padding:2rem 0; text-align:center; background-position: top center; }
.subwrap-top.pc { overflow: hidden}
/* .subwrap-top .container { position:relative; overflow:hidden; text-align: left;} */
.subwrap-top .subwrap-title{font-size:32px; position: relative; font-weight: 500; color: #111;}

.subwrap-top.bg-top{background-color: #f0f0f0; margin-bottom: 2rem;}

.subwrap-top .arrow-prev { position:absolute; top:30px; left:15px;}
.subwrap-top .arrow-prev span { color:#777; text-align:left; padding-left:10px; vertical-align:middle}
.subwrap-top .arrow-prev img { vertical-align:middle; width:30px;}
.subwrap-top .arrow-next { position:absolute; top:30px; right:15px;}
.subwrap-top .arrow-next span { color:#777; text-align:right; padding-right:10px;vertical-align:middle}
.subwrap-top .arrow-next img { vertical-align:middle; width:30px;}

.subwrap-top .subwrap-title + a { position:absolute; bottom:0; right:10px;}
.subwrap-title-s{font-size: 42px; color: #121212; font-weight: 700; line-height: 1.3em;}

.sub{position: relative;}
.sub section:last-child{margin-bottom: 5rem;}
.sub section.bg-section{margin-bottom: 0; padding-bottom: 5rem; background-color: #f5f7fa; padding-top: 3rem;}
.sub section.section-product{margin-bottom: 0;}
.section-page{position: relative;}
.section-title{font-size: 28px; color: #111; margin-bottom: 20px; line-height: 1;}
.section-desc{font-size: 18px;}
.bg-desc{background-color: #f0f0f0; padding: 2rem 1rem; margin-bottom: 2rem;}
.section-image{margin-top: 60px;}

.section-title-wrap{text-align: center;}

.wh-wrap{padding: 2rem 4rem 5rem; background-color: #fff;}
.wh-wrap .subwrap-top{padding-top: 0;}



/**********
* ## Item
**********/
.product-box{border-top: 2px solid #000; margin-bottom: 1.5rem;}
.product-info{background: #ebebeb; padding: 1.5rem 1rem; margin-bottom: 1.5rem;}
.product-detail p{line-height: 1.5; margin-bottom: 10px;}
.product-detail a{color: #109342}
.product-detail a:hover{text-decoration: underline; }

.product-box .item-btn{text-align: right;}

.product-desc{background: #f2f2f2; padding: 0.5rem; border-top: 1px solid #cdcdcd; line-height: 1.5}


/**********
* ## order
**********/
.escrow-info{margin-top: 1.5rem; border: 1px solid #cdcdcd; padding: 1rem;}
.escrow-info h5{margin-bottom: 10px; padding-bottom: 15px; border-bottom: 1px solid #ddd }

.escrow-info table img{margin-bottom: 10px;}
.escrow-info table strong{margin-bottom: 10px; display: block;}
.escrow-info table td p{font-size: 0.65rem; color: #4d4c4c; line-height: 1.4;}

.bank-info div{margin: 5px 0;}

.help-icon-container{display: inline-block; margin-left: 5px;}
.help-icon-container .help-icon{width: 20px; height: 20px; line-height: 20px; border: 1px solid #cdcdcd; border-radius: 50%; display: inline-block; text-align: center; cursor: pointer; color: #888; }

.cert-container{margin: 10px 0; display: none;}
.cert-container .reset_cert{margin-top: 10px;}


.tel-wrap select{width: 100px;}
.tel-wrap input.dx-input{width: calc(100% - 114px);}
.tel-wrap input.input_auto{width: auto;}

.address-wrap .addr-line{margin-bottom: 10px;}

.mem-email-cert{display: none;}

.bold-block {padding: 0.5rem; color: #028755; margin: 5px 0; background: #f2f2f2; font-weight: 500; font-size: 14px;}
/* .dx-input.cno1 {width: 3rem;}
.dx-input.cno2 {width: 2rem;}
.dx-input.cno3 {width: 4.3rem;} */

/**********
* ## Order_result
**********/
.page-order.result .section-page{background-color: #f5f7fa; margin-bottom: 0; padding: 5rem 0;}
.order-result{padding: 3rem 2rem; border: 1px solid #e1e1e1; background: #fff url('../images/mall/bg_pattern.png') ; position: relative;}
.result-title{font-size: 32px; color: #111; font-weight: 500; border-bottom: 1px solid #e1e1e1; padding-bottom: 1rem; margin-bottom: 2rem;}
.result-title span{color: #6ad784;}

.page-order.result .btn-flex-wrap{margin-top: 6rem;}
.btn-flex-wrap .btn{width: 160px; height: 60px; line-height: 60px; padding: 0;}
.btn-flex-wrap button.btn{line-height: 58px;}
.btn-flex-wrap .btn + .btn{margin-left: 1rem; }
.btn-view{border: 1px solid #333; color: #111;}
.btn-view:hover{background-color: #333; color: #fff;}

.order-result .prd-price span{color: #111;}
.order-result .prd-info{background: url('../images/mall/bg_bar.png') no-repeat top/contain; position: absolute; top: 0; right: 10%; box-shadow: 2.5px 4.3px 4.3px 0.8px rgba(8, 8, 8, 0.1); border: solid 1px #f0f0f0; background-color: #fff; width: 300px; padding: 30px 20px 40px; border-top: 0;}
.order-result .prd-info .prd-img{position: relative; top: 0; right: 0; left: 0; margin: 0 auto; text-align: center;}
.prd-box{margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ccc;}
.prd-box h5{font-size: 14px; color: #111; margin-bottom: 10px; font-weight: 500;}
.prd-box div{font-size: 12px; color: #919293;}

.order-result .prd-info .mall-options.has-image{position: absolute; top: 30px; right: 10px;}
.order-result .prd-info .mall-options .btn{border-radius: 4px; padding: 3px 5px;}



/**********
* ## Form
**********/
.row-cert{display: none;}
.error-cert-check{display: inline-block;}
.contact-form{position: relative; border-top: 2px solid #000; }
.contact-top{display: flex; justify-content: space-between; margin-bottom: 5px; align-items: center;}
.contact-top .contact-title{font-size: 18px; font-weight: 500;}
.contact-top .label-req{font-size: 14px; margin-left: auto;}
.form-table {table-layout: fixed; }
.form-table th, .form-table td {padding: 1rem 0; position: relative; border-bottom: 1px solid #ccc;}
.form-table th {width: 20%; font-weight: 500; text-align: left; padding-left: 1rem; line-height: 1; background-color: #f0f0f0; color: #111;}
.form-table th label{vertical-align: middle;}
.form-table td {width: 80%; padding-left: 2rem;}

.form-table th em {font-size: 14px; margin-left: 11px;}
.form-table th.req {position: relative;}
.form-table th.req::after {content: "*"; padding-left: 5px; color: #fe0000;}


.form-table .select-box{display: inline-block; vertical-align: middle;}
.form-table .select-box + a{display: inline-block; margin-left: 10px; font-size: 13px; min-width: auto;}

/* .bg_gray .form-table .dx-input, .bg_gray .form-table .select-box .btn-select {background-color: #f8f8f8; } */

.form-table .phone-input {position: relative; width: 45%; display: inline-block; vertical-align: middle;}
.form-table .phone-input + a {display: inline-block; vertical-align: middle; margin-left: 10px;}
.form-table .phone-input .select-box {float: left; width: 25%;}
.form-table .phone-input .unit {float: left; width: 4%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;}
.form-table .phone-input .dx-input {float: left; width: 71%;}
.form-table .phone-input .phone-02 {float: none; position: absolute; right: 0; top: 0;}

.form-table .name-input {position: relative; width: 100%; display: inline-block; vertical-align: middle;}

.form-table .product-input{display: flex; width: 60%;}
.form-table .product-input .dx-input{width: 70%;}
.form-table .product-input .select-box{margin-left: 1%;}

.form-table .email-input {position: relative; width: 80%; display: flex;}
.form-table .email-input .dx-input {float: left; width: 35%;}
.form-table .email-input .unit {float: left; width: 3%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;}
.form-table .email-input .select-box {position: absolute; right: 0; top:0; width: 25%; margin-left: 2%;}

.form-table .email-input .select-box .select-list a{line-height: 1; padding: 4px 5px;}

.form-table .num-input {position: relative; width: 50%; display: inline-block; vertical-align: middle;}
.form-table .num-input .dx-input {width: 35%;}
.form-table .num-input a {display: inline-block; margin-left: 10px;}
.form-table .num-input .time {font-size: 14px; font-weight: 500; color: #fe0000; margin-left: 10px; display: inline-block;}

.form-table .time-input{position: relative; display: inline-block; width: 100%;}
.form-table .time-input .select-box{float: left; width: 20%;}
.form-table .time-input .unit {float: left; width: 4%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;}

.form-table .marker-input{position: relative; width: 58%; display: inline-block; vertical-align: middle;}
.form-table .marker-input .dx-input {width: 76%;}
.form-table .marker-input a {display: inline-block; margin-left: 10px;}
.dx-input.search{background:url("../images/icons/search.png") no-repeat center right; background-size: 15px auto; }


.contact-form .form-group.lg{margin-top: 20px;}

.form-btn {margin-top: 3rem; text-align: center; overflow: hidden;}
.form-btn .btn{line-height: 1; font-size: 16px; min-width: 160px; padding: 15px 20px 17px;}
.form-btn a.btn{padding: 18px 20px 14px;}
.form-btn .btn + .btn{margin-left: 5px;}
.btn-line{border: 1px solid #333; width: auto; min-width: auto; font-size: 13px;}
.btn-line:hover{color: #ccc; }

/* .form-table td .error-place{bottom: 5px;} */

.form-table .help-desc{margin-top: 10px;}
.form-table-footer{margin-top: 1rem;}
.form-table-footer .check-box a{text-decoration: underline; color: #4180c9;}
/* .form-table-footer .check-box label::before, .form-table-footer .check-box label::after{top: 1px;} */
/* .form-table-footer .check-box input[type="checkbox"]:checked + label::after{top: 4px;} */


/* NOTICE */
.check-border{position: relative; display: inline-block; line-height: 1.25; font-size: 15px;}
.check-border input[type=checkbox]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.check-border label{display: inline; cursor: pointer; text-align: center;  line-height: 1em; font-weight: normal; font-size: 14px; padding: 5px 10px; border: 1px solid transparent; color: #233b4d;}
.check-border input[type="checkbox"]:checked + label{color: #ecb10d; border-radius: 15px; border: 1px solid #ecb10d; font-weight: 500;}


.list-empty{height: calc(100vh - 100px); background: #f2f2f2; text-align: center;}
.list-empty:after {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.list-empty .text {display: inline-block; vertical-align: middle; font-size: 15px; color: #b8bfc4;}




/**********
* ## PRODUCTS
**********/
.grid-list{display: flex; margin-top: 50px; text-align: center;}
.grid-list .grid-item{flex: 1;}
.grid-item{position: relative; }
.grid-item .grid-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.grid-item:first-child{margin-left: 0;}
.grid-item .grid-content {height: auto; position: relative;}
.grid-item .grid-title {font-weight: 500; line-height: 1.2; color: #000; margin-bottom: 10px;}

.grid-image-wrap{width: 100%; margin-bottom: 20px;}

.grid-container{max-width: 900px;}
.list-pad{padding: 0 100px;}
.grid-list.bg-white .grid-item{border-right: 1px solid #ddd; padding-right: 45px; margin-left: 45px;}
.grid-list.bg-white .grid-image-wrap img{width: 100%;}
.grid-list.bg-white .grid-item:first-child{margin-left: 0;}
.grid-list.bg-white .grid-content{background-color: #fff; border: 1px solid #ddd; padding: 20px 15px 50px 15px;}
.grid-list.bg-white .grid-item:last-child{border-right: 0; padding-right: 0;}
.grid-list.bg-white .grid-title{text-align: left; padding-left: 10px;}

.grid-item:hover .grid-image-wrap img{transform: scale(1.1); }
/* .grid-item .grid-link{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} */
.grid-item .grid-image-wrap {position: relative; overflow: hidden; margin-bottom: 20px;}
.grid-item .grid-image-wrap:before {content: ""; display: block; padding-bottom: 68.5%;}
.grid-item .grid-image-wrap img{position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; transition: transform .2s;}

.grid-btn{margin-top: 2rem; display: inline-block;}




.main{padding:0 10px }

/*버튼*/
.btn-order{padding:10px 40px; font-size: 0.85rem; min-width: 10rem; background: #1473e6; color: #fff; font-weight: 500; border: 1px solid #1473e6}
.btn-order:hover, .btn-order:active{background: #1473e6; color:#fff; border-color: #1473e6;}
.btn-border{border:1px solid #d50c0c;color:#d50c0c;background:#fff; font-weight: 500;}
.btn-border:hover{background:#f3f3f3;}
.sd-only{display: inline-block !important;position: absolute;top: 0;left: 0;margin: 0 !important;padding: 0 !important;font-size: 0;line-height: 0;border: 0 !important;overflow: hidden !important;}

/*레이어팝업*/
.popup{ z-index: 999; height:auto; display:block; position: absolute;margin-top:3px; background:#fff; border: 1px solid #bfbfbf;border-radius:5px;
-webkit-box-shadow:2px 2px 6px -1px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.2);
box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.2)}
.popup h3{border-bottom:1px solid #e6e6e6;padding:5px 15px;font-size:1.25em;margin:0;line-height:35px;}
.pop-con{padding:15px;}
.pop-btn{text-align:right;background:#f4f4f4;padding:10px 15px}
.btn-popclose{position:absolute;top:10px;right:10px;background:none;border:0;width:25px;height:25px;text-align:center;font-size:16px;color:#999}
.btn-popclose:hover{color:#000}

/*아이템 리스트*/
#lists h3{border:0;margin:0}
.mall-list{margin:10px 0 30px}
.mall-list .thumbnail{padding:0}
.mall-list .thumbnail:hover{border:1px solid #2670b7}
.mall-tit{margin:10px;font-weight:500}
.mall-txt{margin:10px;font-size:0.92em;color:#555;line-height:1.56em}
.mall-detail{border-top:1px solid #eee;padding:10px;margin:0}
.mall-detail:after{display:block;visibility:hidden;clear:both;content:""}
.mall-detail li{float:left;color:#888;margin-right:5px;font-size:0.92em}
.mall-detail .mall-price{font-weight:500;color:#3498db}
.mall-detail .mall-price span{font-size:1.25em}

@media (max-width: 767px){
    .mall-detail .detail-tit {position:absolute;font-size:0;line-height:0;overflow:hidden}
    .product-left,.product-right{padding:0 0 10px}
}

@media (max-width: 450px){
    .mall-list-col {width:100%}
}

@media (min-width: 992px){
    .mall-list .mall-list-col:nth-child(3n+1){clear:both}
}

@media (max-width: 991px){
    .mall-list .mall-list-col:nth-child(2n+1){clear:both}
}

/*상품페이지*/
.product-box:after{display:block;visibility:hidden;clear:both;content:""}
.product-left .prd-slide{margin:0 auto;max-width:450px;position:relative}
.product-left .prd-slide img{max-width:100%}
.product-left .prev{display:block;position:absolute;top:50%;left:0;margin-top:-20px;width:40px;height:40px;text-align:center;opacity:0.3}
.product-left .next{display:block;position:absolute;top:50%;right:0;margin-top:-20px;width:40px;height:40px;text-align:center;opacity:0.3}
.product-left .prev:hover,.product-left .next:hover{opacity:1}
.product-box .product-title{font-weight:500;font-size:1.2rem;margin:1rem 0;}
.product-box .product-no {border-top:1px solid #cdcdcd; padding:0.5rem 0; }
.product-box .product-no table{margin:0}
.product-box .product-no td.td-label{width: 10%;}
.product-box .product-no td.td-price span{margin-left: 10px; color: #4d4c4c; font-weight: 500;}
/* .product-box .product-no td.td-price.cust strong{text-decoration: line-through; } */
.product-box .product-no td strong{color: #000; font-weight: 500;}
.product-box .product-no td{border:0;color:#585858; padding: 0.5rem;}
.product-box .product-no td .cust-price{text-decoration: line-through; text-decoration-color: #f00}
.prduct-demo{text-align:center;padding:10px;}
.item-btn button{ width:20%;font-size:0.85rem; padding:12px 35px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.item-btn .btn-cart{margin: 0 0 0 1%;}
.item-btn .btn-wish{width:18%;}
.detail_price{text-align:right;width:80px;}
.detail_price span{font-weight:500}

.product-info-top{border-bottom:1px solid #ddd;margin:30px 0 20px ;}
.product-info-top:after{display:block;visibility:hidden;clear:both;content:""}
.product-info-top li{display:inline-block;margin-bottom:-1px;float:left}
.product-info-top li a{display:block;color:#6b6b6b;padding:10px 20px}
.product-info-top .current{border:1px solid #ddd;border-bottom-color:#fff;border-radius:5px 5px 0 0 ;border-top:2px solid #3498db;font-weight:500;color:#000}

.product-option{border-top:1px solid #d0d0d0; margin-bottom: 1rem;}
.product-option ul{margin:0}
.product-option.personal ul{display: none;}
.product-option li{padding:10px;background:#f5f5f7;border-bottom:1px solid #e7e7e7; overflow: hidden;}
.product-option .opt-name{margin:0 5px 0 0; float: left; line-height: 32px;}
.product-option .qty-wrap{float: right;}

.span-qty .btn-change-qty{width: 30px; height: 30px; background: #fff; border: 1px solid #cdcdcd; float: left; color: #666;}
.span-qty .detail_qty{width:50px;height:30px;background:#fff; float: left; border-right: 0; border-left: 0; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; text-align: center}
.span-qty .btn-group{margin-top: 0;}

.detail_price{float:right}
.cart_total_price{padding:15px 0; font-weight:500; display: flex; align-items: center;}
.cart_total_price .price-label{line-height: 1.5rem;}
#total_order_price{margin-right:3px; display:inline-block; color:#111; font-size:1.2rem; color: #ff0000; margin-left: auto;}

@media (max-width: 450px){
    .item-btn .btn{ font-size:1em;width:100%;margin:3px 0}
    .product-info-top li a{padding:10px 0;text-align:center;}
    .product-info-top li{width:33.333%;}
}

/*상품 이미지 */
#item-image .bx-wrapper{margin-bottom:20px}
#item-image #bx-pager{text-align:center}
#item-image #bx-pager a{border:1px solid #fff}
#item-image #bx-pager .active{border:1px solid #2773ae;display:inline-block}
#item-image .slidewrap {margin:10px; text-align:center;}
#item-image .bx-wrapper img {max-width: 100%;display: block;text-align: center;margin: 0 auto;}

/*사용후기*/
#item .btn-wr{text-align:right;margin:10px 0}

.item_review_title{font-size:1em;font-weight:500;margin:0;line-height:23px;padding: 10px 15px ;cursor:pointer;}
.review-wr:after{display:block;visibility:hidden;clear:both;content:""}
.review-info{text-align:right;margin:0}
.review-info li{display:inline-block;padding:10px 3px;line-height:23px;font-size:0.92em;color:#777}
.review-info li a{color:#777}
.review-content{display:none;border-top:1px solid #d9d9d9;padding:15px}
.product-feedback{border:1px solid #d9d9d9;margin-top:-1px}
#item .btn-edit{margin:0 0 10px}

@media(max-width: 1199px){
    .item_review_title{padding-bottom:0}
    .review-info li{padding-top:5px}
}

/*상품문의*/
.item_qna_title{font-size:1em;margin:0;line-height:23px;padding: 10px 15px ;cursor:pointer;;font-weight:500}
.qna-wr:after{display:block;visibility:hidden;clear:both;content:""}
.qna-info{text-align:right;margin:0}
.qna-info li{display:inline-block;padding:10px 3px;line-height:23px;font-size:0.92em;color:#777}
.qna-yet{display:inline-block;background:#eee;font-size:0.92em;padding:0 10px;border-radius:10px;}
.qna-done{display:inline-block;background:#64be6e;color:#fff;font-size:0.92em;padding:0 10px;border-radius:10px;}
.qna-content{display:none;border-top:1px solid #d9d9d9;padding:15px}
.qna-content .bold{margin:0 0 5px;color:#49b6d5}
.qa-ans{border-top:1px solid #eee;padding:15px 0;margin-top:15px}

@media(max-width: 1199px){
    .item_qna_title{padding-bottom:0}
    .qna-info li{padding-top:5px}
}

/*장바구니*/
#cart .prd-list>li{border:1px solid #cdcdcd;margin:10px 0;position:relative;padding:15px;min-height:80px;
-webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1);
box-shadow:0px 2px 5px -2px rgba(0,0,0,0.1)}
#cart .prd-list>li:after{display:block;visibility:hidden;clear:both;content:""}
#cart .prd-list .prd-chk{position:absolute;top:0px;left:0px}
#cart .prd-list .prd-img{position:absolute;top:0px;left:20px}
#cart .prd-info{padding-left:30px;min-height:70px}
.prd-list .prd-item{color:#000; font-size: 24px; font-weight: 500; margin-bottom: 10px; display: inline-block;}
.prd-list .mall-options{color:#656565; }
.prd-list .mall-options li{padding: 3px 0;}
.prd-list .mall-options i{color:#57a6f7}
.prd-list .mall-options .btn i{color:#fff}
.prd-list .change_option{margin:5px 0}
.prd-price {color:#626262}
.prd-price div{margin:7px 0;}
.prd-price span{width: 100px; margin-right: 10px; display: inline-block; font-weight: 500;}
.prd-price .prd-total{color:#111}
 
.total_price{float:right;line-height:30px}
.total_price .checked_price{font-weight:500;display:inline-block;margin-left:10px;font-size:1.2rem; color: #e66c15}
.popup-cart{width: 70%;}


@media (max-width: 767px){
    .popup-cart{width:100%;left:0}

}

/* ## Order */
.prd-list>li{border:1px solid #e1e1e1; position:relative; padding:20px; margin:10px 0; -webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1); box-shadow:0px 2px 5px -2px rgba(0,0,0,0.1)}
.prd-list>li:after{display:block;visibility:hidden;clear:both;content:""}
.prd-list .prd-img{position:absolute; top:20px; right: 20px}
.total-price-wrap{background-color: #f5f7fa; padding: 1rem; margin: 1rem 0; display: flex; align-items: center;}
.total-price-wrap .total_price{margin-left: auto;}


.ord-info{border:1px solid #e1e1e1; padding:1rem; margin-bottom: 1rem;}
.ord-info h5{border-bottom:1px solid #e5e5e5; padding:0 0 15px; font-weight: 500; margin-bottom: 1rem;}
.ord-info .form-group {margin-bottom: 1.5rem;}
.ord-info .form-group label{color:#666; font-weight: 500; font-size: 14px;}
.ord-info textarea.dx-input{min-height: 100px;}

.pay-info{background:#f5f7fa; padding:1rem; margin-bottom: 1rem; }
.pay-info h5{border-bottom:1px solid #ddd; padding:0 0 15px; margin-bottom: 1rem; font-weight: 500;}
.pay-info li{margin:15px 0;text-align:right;position:relative;padding-left:80px}
.pay-info li:last-child{margin-bottom: 0;}
.pay-info li .info-tit{position:absolute;top:0;left:0}
.pay-info .feedback-box{padding:20px 0 10px}
.pay-info .feedback-box:after{display:block;visibility:hidden;clear:both;content:""}
.pay-info .feedback-box label{display:block;float:left;width:50%;font-weight:normal;margin:5px 0}
.pay-info .btn-order{width:100%;padding:8px 0 10px}
.pay-info li strong{font-size:1.183em;}
#order .alert-success{margin:0 0 10px}
#show_pay_btn{margin:0; display:block}


.credit .badge{width: 80px; margin-right: 10px;}


/**********
* ## Order View
**********/
.page-mall.orderview .prd-list li{margin-bottom: 1rem;}
.page-mall.orderview .ord-info{padding-bottom: 0;}
.page-mall.orderview .dx-table table{border-top: 0;}
.page-mall.orderview .dx-table table tr:last-child td{border-bottom: 0;}
.page-mall.orderview .dx-table table tr:last-child th{border-bottom: 0;}
/* .page-mall.orderview .prd-list{margin:10px 0}
.page-mall.orderview .prd-list>li{border:1px solid #e6e6e6;position:relative;padding:20px;margin:10px 0; -webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1); box-shadow:0px 2px 5px -2px rgba(0,0,0,0.1) }
.page-mall.orderview .prd-list>li:after{display:block;visibility:hidden;clear:both;content:""}
.page-mall.orderview .prd-info{padding-left:0;min-height:70px}
.page-mall.orderview .prd-list .prd-img{position:absolute;top:0;left:0}
.page-mall.orderview .mall-options li{margin:3px 0}
.page-mall.orderview .credit{margin-top:2rem; margin-bottom: 2rem; }
.page-mall.orderview .ord-info table{margin:10px 0 0}
.page-mall.orderview .ord-info table td {border-top:0; text-align: left; padding-left: 10px; color: #4d4c4c}
.page-mall.orderview .ord-info table th{border-top:0;width:25%;padding-left:0;font-weight:500; color: #4d4c4c; font-size: 0.75rem; text-align: left}
.page-mall.orderview .mall-options .btn-warning{cursor:default} */

.page-mall.orderview .pay-info li strong{color: #0957eb}

/* .orderview-info{display: flex;}
.orderview-info .orderview-left{width: 70%; margin-right: 2%;}
.orderview-info .orderview-right{width: 28%;} */
.cancel-wrap {text-align:center; margin: 1rem 0;}
.cancel-wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.cancel-text{border: 1px solid #b20158; font-weight: 500; color: #b20158;padding: 1rem;; background: #fafafa;}

.order-result .cancel-text{border: 0; padding: 0; margin-top: 2rem;}

@media (max-width: 991px){
/*    .page-mall.orderview .pay-info{margin:20px 0}*/
    .prd-list .prd-price{padding:10px 0 0 ;border-top:1px solid #eee;margin-top:10px}
    .page-mall.orderview .prd-list>li{padding:15px;margin:15px 0}
    .page-mall.orderview .credit{margin-top:20px }
}

/*주문내역관리*/
#orderlist{position:relative}
#orderlist h3{border:0;margin:0}
#orderlist .list-total{position:absolute;top:0;right:0;border-radius:5px;background: #d9ecf9;color: #348fe2;font-size:0.92em;padding:7px 10px}
#orderlist table{border-top:2px solid #000;border-bottom:1px solid #ddd;margin:10px 0}
#orderlist table .btn{cursor:default; margin-right: 10px; height: 30px; line-height: 28px; padding: 0;}
#orderlist table th{vertical-align:middle}
#orderlist table td{vertical-align:middle}
#orderlist table .date{font-size:0.92em;color:#777}
#orderlist .text-danger{color:#ef3e77}
#orderlist .table-responsive{border:0}

@media (max-width: 991px){
    #orderlist table .btn{display:block;margin:0 0 5px}
    #orderlist table .date{display:block;}
}

/*위시리스트*/
#wish-list h3{border:0;margin:0}
#wish-list ul{margin:10px 0}
#wish-list li {text-align:center;margin:0 0 20px}
#wish-list li img{max-width:100%;height:auto}
#wish-list .prd-tit{font-weight:500;display:block;margin:5px 0;font-size:1.083em }
#wish-list .prd-date{display:block;margin:5px 0;font-size:0.92em;color:#777}
#wish-list .btn{border:1px solid #ccc;color:#777;background:none}
#wish-list .btn:hover{background:#f3f3f3;color:#333}

@media (max-width: 450px){
    #wish-list .row{margin-right:-10px;margin-left:-10px}
    #wish-list li{padding:10px}
}


/**********
* ## ANIMATION
**********/
@keyframes scaleUp {
	0% {transform: scale(1)}
    100% {transform: scale(1.2);}
}

@keyframes aniScaleDown {
	0% {transform: scale(1.2)}
    100% {transform: scale(1);}
}

@keyframes aniRightToLeft{
	from {width: 18px;}
    to {width: 0;}
}

@keyframes aniLeftToRight{
	from {width: 0;}
    to {width: 18px;}
}

/* animation fadeIn  */
@keyframes aniSlideUp {
	from {top: -100%;}
    to {top: -158%;}
}
/* animation fadeIn  */
@keyframes aniFadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes aniFadeIn { /* Firefox */
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes aniFadeIn { /* Safari and Chrome */
    from {opacity: 0;}
    to {opacity: 1;}
}
@-o-keyframes aniFadeIn { /* Opera */
    from {opacity: 0;}
    to {opacity: 1;}
}

/* animation fadeIn  */
@keyframes aniDown {
    from {top: -200px;}
    to {top: 0;}
}




/**********
* ## Responsive
**********/
@media screen and (max-width:1440px) {
}

@media screen and (max-width:1440px) {
	.lnb-wrap .container{padding: 0;}
	.tlt-item{padding: 60px 80px;}
}

@media only screen and (max-width: 1200px) and (min-width: 992px){

	#gnb .topmenu > li > a{padding: 0 15px;}
}

@media (max-width: 991px) {

	html{font-size: 16px;}

	.layer-fix{overflow: hidden;}
    .show-mobile { display:block!important}
	.hide-mobile { display:none!important}

	.header-top, #gnb, .header-contractUs{display: none;}
	
	.dlpo-wrap .banner-item a{font-size: 14px;}
	.dlpo-wrap .dlpo-close{right: 10px; top: 5px;}

	.header-nav{height: 60px;}
	.header-button{display: block; position: absolute; right: 10px; z-index: 3;}

	.layer-popup .pop-wrap{width: 80%;}

	/* ## COMMON - 991 */
	.btn-more{font-size: 16px; padding: 16px 30px;}
	.section-header{margin-bottom: 40px;}
	.section-header-title{font-size: 32px; line-height: 1.2; margin-bottom: 5px;}

	.section-footer{padding: 80px 0;}
	.section-footer .section-header-title{font-size: 24px;}
	.section-footer .btn-flex-wrap a{font-size: 16px; height: 50px; line-height: 50px;}

	/* ## Mobile - 991 */
	.menu-header{display: flex; align-items: center;}
	.menu-header .btn-inquiry{border-color: #028755; background-color: #028755; color: #fff; height: 32px; line-height: 32px; padding: 0 15px; font-size: 14px;}
	.menu-header .btn-blog{height: 32px; line-height: 32px; width: 32px; margin-left: 10px;}
	.icon-blog{width: 24px; height: 21px;}

	/* ## FOOTER - 991 */
	#footer{padding: 20px 0 20px;}
	#footer .footer-logo{position: relative; left: 0; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;}
	.footer-logo .btn-menu{color: #fff; display: flex; align-items: center;}
	.footer-logo .btn-menu .icon-plus{width: 13px; height: 13px;  background: url('../images/icons/ico_plus.png') no-repeat center; background-size: 13px auto; margin-right: 5px;}
	.footer-logo .btn-menu.active .icon-plus{background-image: url('../images/icons/ico_minus.png')}
	#footer .widget-wrap{margin-left: 0; flex-wrap: wrap; display: none; transition: all 0.3s ease;}
	#footer .widget-wrap.open{display: block;}
	.widget-wrap .footer-widget{margin-left: 0; flex: 0 0 50%; max-width: 50%; margin-bottom: 20px;}
	.widget-wrap .footer-widget:last-child{margin-bottom: 0;}
	.widget-wrap .footer-widget:last-child .widget-menu{margin-bottom: 0;}
	.widget-wrap .footer-widget h4{margin-bottom: 20px;}


	.mall-header-banner{height: auto; padding: 1rem 0;}
	.mall-header-banner h5{line-height: 1;}
	.mall-header-banner .btn-wrap{position: relative; right: 0; top: 0; bottom: 0; margin-top: 1rem;}




	/* ## SUB-991 */
	.subwrap-top{padding: 30px 0 20px;}
	.subwrap-top .subwrap-title{font-size: 32px; line-height: 1;}
	.subwrap-title-s{font-size: 32px;}
	
	.sub-top-visual{height: 150px;}
	.sub-top-visual .line{margin: 15px 0 13px;}
	.sub-top-visual .visual-desc{font-size: 24px;}
	.sub-top-visual .visual-title{font-size: 16px; }

    .lnb-wrap { border:0;box-shadow:0 0 10px rgba(0,0,0,0.2); border-top: 1px solid #ddd;}
	.lnb-wrap .lnb-menu{display: flex; height: 40px;}
	.lnb-wrap .lnb-menu li{flex: 1; font-size: 14px;}
	.lnb-wrap .lnb-menu .menu-box2:last-child {width:100%!important; border:0; background:#333}
	/* .lnb-wrap .lnb-menu .sub-menu { background:#333; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: -1; padding-bottom: 10px;}  */
	/* .lnb-wrap .lnb-menu .sub-menu a {color:#fff; border:0} */
	.lnb-wrap .lnb-menu .btn-lnb {letter-spacing: 0; width: 100%; padding-left: 12px; height: 40px; line-height: 40px; max-width: 100%; }
	.lnb-wrap .lnb-menu a{overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
	.lnb-wrap .lnb-menu .sub-menu a{text-align:center;padding:0 12px 0 12px; letter-spacing: 0; text-align:left; height: 40px; line-height: 40px;}
	/* .lnb-wrap .lnb-menu .btn-lnb .ic {width:56px;height: 56px;right: 0; top: 0; margin-top: 0; background: url("../img/hd/ico_gnb_arrow.png") no-repeat center center; background-size:38% auto} */
    /* .subwrap-top + .sub-wrap.notice-wrap .panel-sub:first-child {padding-top: 40px;} */
	.lnb-wrap .lnb-menu .btn-lnb .ic{right: 5px}

	.section-title{font-size: 21px; margin-bottom: 20px;}
	.section-desc{font-size: 16px;}
	.section-image{margin-top: 30px;}


	/* ## ORDER-991 */
	
	.page-order.result .section-page{padding: 2.5rem 0;}


}


@media (max-width: 767px){
	

	/* ## FOOTER-767 */
	#footer .footer-bottom .footer-logo a{display: none;}
	/* #footer .footer-bottom .address{max-width: 80%;} */

	.layer-popup .pop-wrap{width: 100%; height: 100%; padding: 20px;}
	.pop-header{padding: 10px 0 0 0; height: 30px;}
	.pop-content{height: calc(100% - 160px); overflow-y: scroll; padding: 15px; max-height: 80vh;}

	/* .pop-wrap .btn-close{top: 30px; right: 20px; text-indent: -9999px; width: 20px; height: 20px;} */
	.pop-wrap .btn-close.cross:before, .pop-wrap .btn-close.cross:after{background-color: #000;}


	.order-result .prd-info{width: 100%; position: relative; margin-bottom: 2rem; right: 0;}

	.btn-flex-wrap button.btn{flex: 0 0 33%; flex-basis: 2rem;}

	.result-title{font-size: 26px;}



	.faq-wrap ul.faq li.faq-item a.faq-title span.subject{font-size: 16px; width: 80%;}


	/* ## ORDER-767 */
	.form-email .dx-input{width: 100%; margin-bottom: 10px;}
	.form-email .btn{width: 100%;}
	.help-icon-container{position: absolute; top: -1px; left: 50px;} 
	

	.bs-number-container{max-width: 100%;}
}