@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);


/* ========================== 태그초기화 =========================== */

html,body{font-family:'Noto Sans KR', sans-serif, 'Montserrat';font-size: 14px;color:#696969;letter-spacing:-0.02em;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;-moz-osx-font-smoothing:grayscale;}
html,body,p,img,div,input,ul,header,footer,mark,article,ul li,dl,dl dt,dl dd,form,legend,caption,h1,h2,h3,h4,h5,fieldset,label,ol,ol li,xmp{margin:0;padding:0;border:0;list-style-type:none}
h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal;}
img{border:0;vertical-align:top;}
ul,ol,dl,dt,dd,li{list-style:none;}
table, th, td{border-collapse:collapse;border-spacing:0;font-weight:normal;}
caption{display:block;text-indent:-9999em;overflow:hidden;height:0;font-size:0;line-height:0;}
fieldset, blockquote, iframe, button{border:none;}
i, em, u, cite, address{font-style:normal;}
table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; }
strong, b{font-weight:bold;}
a {color:#555;text-decoration:none;}
input{border:1px solid #dedede;padding:3px 3px;color:#777;}
button {background:transparent;cursor:pointer;vertical-align:middle;margin:0;}
button,input[type="submit"], input[type="button"], input[type="reset"] {cursor:pointer;-webkit-appearance:none;}
section, nav, article, aside, header, footer, main, figure, figcaption {display:block;}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="date"]::-webkit-inner-spin-button {display:none;}input[type="text"],input[type="search"],input[type="tel"],input[type="number"],
input[type="password"]{-webkit-appearance:none;border-radius:0}
input[placeholder] {}
::-moz-selection{background:#444;color:#fff;text-shadow:none;}
::selection{background:#444;color:#fff;text-shadow:none;}
::-webkit-input-placeholder {color:#aaa;}
::-moz-placeholder {color:#aaa;}
:-ms-input-placeholder {color:#aaa;}
:-moz-placeholder {color:#aaa;}
::-ms-clear,
::-ms-reveal {display: none;}
input[type="text"],input[type="password"],input[type="file"]{position:relative;height:24px;padding:3px;text-align:left;background:none;border:1px solid #ddd;display:inline-block;color:#666;line-height:1;outline:none;font-size:14px;border-radius:0;}
input[type="file"]{position:absolute;top:0;left:0;z-index:10;width:100%;line-height:normal;cursor:pointer;}
input[type="radio"],input[type="checkbox"]{width:20px;height:20px;cursor:pointer;vertical-align: middle;}
select, textarea, button{border-radius:0;font-family:'Noto Sans KR', sans-serif, 'Montserrat', sans-serif;;}
input[type="text"],input[type="search"] {border-radius:0;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #fff inset;}
.clearfix:before, .clearfix:after {content: '';display: block;clear: both;}
.border-radius{behavior:url('../../js/design-js/PIE-1.0.0/PIE.htc');zoom:1;}


/* ========================== 공통 클래스 모음 =========================== */
.floL{float:left;}
.floR{float:right !important;}
.posR{position:relative;}
.posA{position:absolute;}
.t-c, .text-c{text-align:center !important}
.t-r, .text-R{text-align:right !important}
.t-l, .text-L{text-align:left !important}
.clr{*zoom:1;}
.clr:after{ content: ""; display: block; clear:both;}
.indent{position:absolute;top:0px;left:-9999px;font-size:0px;line-height:0px;}
.notxt{text-indent:-9999px;font-size:0px;line-height:0px;}
.hide{display:none;}
.bgn a{background:none !important}
.dis-Table{display: table;margin:0 auto;}
.CursorP{cursor:pointer}
.BackNone{background:none !important}
.text-c{text-align:center !important;}.text-L{text-align:left !important;}.text-R{text-align:right !important;}
/*------- width, margin, padding --------*/
.wAuto{width:auto !important;}.w100{width:100% !important;}.w95{width:95% !important;}.w90{width:90% !important;}.w85{width:85% !important;}.w80{width:80% !important;}.w75{width:75% !important;}.w70{width:70% !important;}.w60{width:60% !important;}.w50{width:50% !important;}
.w475{width:47.5% !important;}.w47{width:47% !important;}.w45{width:45% !important;}.w40{width:40% !important;}.w35{width:35% !important;}.w30{width:30% !important;}.w20{width:20% !important;}.w18{width:18%;}.w15{width:15%;}.w10{width: 10% !important;}
.w125{width:12.5%;}.w575{width:57.5%;}
.w1200{width:1200px !important;margin:0 auto !important;}
.wid30{width:30px !important;}.wid40{width:40px !important;}
.wAuto{width:auto !important;}
.hei60{height:60px !important;}
.mg0a{margin:0 auto !important;}.margin5a{margin:5px auto;}.margin10a{margin:10px auto !important;}.margin20a{margin:20px auto;}.margin30a{margin:30px auto !important;}.margin50a{margin:50px auto;}
.mgt0{margin-top:0 !important;}.mgt-5{margin-top:5px;}.mgt-10{margin-top:10px;}.mgt-20{margin-top:20px !important;}.mgt-30{margin-top:30px !important;}.mgt-50{margin-top:50px !important;}
.mgr-70{margin-right:70px;}.mgr-10{margin-right:10px !important;}.mgr0{margin-right:0px !important;}
.mgl-5{margin-left:5px !important;}.mgl-8{margin-left:8px;}.mgl-10{margin-left:10px;}.mgl-15{margin-left:15px;}.mgl-20{margin-left:20px;}.mgl-30{margin-left:30px !important;}.mgl-40{margin-left:40px;}.mgl-50{margin-left:50px;}.mgl-65{margin-left:65px;}
.mgb-10{margin-bottom:10px !important;}.mgb0{margin-bottom:0px !important;}.mgb-140{margin-bottom:140px !important;}
.pdt10{padding-top:10px;}.pdt20{padding-top:20px;}.pdt30{padding-top:30px;}
.pdl10{padding-left:10px !important;}.pdl12{padding-left:12px;}.pdl-15{padding-left:15px;}.pdl20{padding-left:20px !important;}.pdl30{padding-left:30px !important;}.pdl-30{padding-left:30px;}.pdl-45{padding-left:45px;}
.pdr10{padding-right:10px !important;}.pdr20{padding-right:20px !important;}.pdr30{padding-right:30px !important;}.pdr150{padding-right:150px !important;}
.pdb-10{padding-bottom:10px;}.pdb-20{padding-bottom:20px;}.pdb-30{padding-bottom:30px;}
.pdt-none{padding-top:0px !important;}
.mg-none{margin:0 !important;}
.pd-none{padding:0 !important;}
.mg0{margin:0 auto !important;}
.w1050{width:1050px;text-align:center;margin:0 auto;}	
.mgt-15{margin-top:15px;}.mgt-26{margin-top:26px;}.mgt-40{margin-top:40px;}.mgt-70{margin-top:70px !important;}
.wid80{width:80px;}
.wid100{width:100px;}
.wid110{width:110px;}
.w380{width:380px;}
.pd020{padding:0 20px !important;}
.mgr-2{margin-right: 2px;}
.mgr-5{margin-right: 5px !important;}
.mgb-10{margin-bottom: 10px !important;}
.mgb-20{margin-bottom: 20px;}
.mgb-30{margin-bottom: 30px !important;;}
.mgb-50{margin-bottom: 50px !important;}
.mgb-70{margin-bottom: 70px !important;}
.mgb-80{margin-bottom: 80px !important;}
.mgb-90{margin-bottom: 90px;}
.ttalignL{text-align:left !important;}
.t-va_top{vertical-align:top;}
.bg-no{background:none !important;}
.pd-no{padding:0 !important;}
.bd-no{border:0 !important;}
.Lineh42{line-height:42px !important;}

.TxtRad{color:#ef424d;}
.TxtWg{color:#18b0bc !important;}

.fl-left{display:inline-block;}.fl-left li{float:left !important;}
.fl-none{display:inline-block;}.fl-none li{float:none;}
.list-num{display:inline-block;list-style-type:circle;}
.inline{display:inline-block !important;}


/*-- background --*/
.bg-white{background:#fff !important;border:1px solid #fff;}/*.bg-white:hover{background:#fff;border:1px solid #000;}*//*-- 전체제품리스트 pd-box --*/
.bg-orange{background:#f17215 !important;color:#fff !important;}.bg-orange:hover{background:#de650d !important;color:#fff !important;}
.bg-blue{background:#4863b3 !important;}
.bg-blue02{background:#6e7786 !important;}
.bg-blue03{background:#526582 !important;}
.bg-green{background:#a6bf27 !important;}.bg-green:hover{background:#8fa51d !important;}
.bg-fa{background:#dedede;}
.bg-fa2{background:#dedede !importatnt;}
.bg-gray{background:#acacac;}
.bg-gray-de{background:#dedede !importatnt;}
.bg-black{background:#333;}.bg-black:hover{background:#000;}
.bg-gray3745{background:#333745;color:#fff !important;}.bg-gray3745:hover{background:#000;color:#fff;}

/* 공통 */
.btn,
.btn * {margin:0; padding:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font-size:12px; 
		white-space:nowrap; vertical-align:middle; overflow:visible; color:#fff; }
.btn *{cursor:pointer; cursor:hand; vertical-align:middle;}
.btn span{text-indent:-99999px; font-size:0; }

/* btnWrap */
.btnWrap{display:table; margin:0 auto;}
.btnWrap a{display:inline-block;font-size:14px;padding:15px 35px;margin:0 8px;border-radius:3px;}
.btnWrap .btn{margin-left:10px;}
.btnWrap .btn:first-child{margin-left:0;}

/* snsWrap */
.snsWrap{margin:0 auto;}
.snsWrap a{display:inline-block;font-size:14px; padding:15px 34px;margin:0 5px; border-radius:3px;vertical-align:middle}
.snsWrap .btn{margin-left:50px;}
.snsWrap .btn:first-child{margin-left:0;}
.btn-util{width:52px; height:52px; border:1px solid #dcdcdc;background:#f4f4f4;border-radius:3px;padding:7px 0 0 4px;position:relative;}
.btn-util .lpd{margin-right:5px;}

.sns-box{/*width:440px;*/height:136px;position:absolute;left:-159px;top:363px;z-index:10;background:#fff;border:1px solid #c8c8c8}
.sns-box.active{display:block;}
.sns-box:before{content:"";display:block;width:20px;height:16px;background:url(../../images/os/new_img1/myoffice/arrow_sns.png) no-repeat;position:absolute;left:50%;top:100%;margin:0 0 0 -10px}
.sns-box .sns-box-top{top:100%;margin-top:16px}
.sns-box .sns-box-top:before{background:url(../img/arrow_sns_top.png) no-repeat;top:0;margin-top:-16px}
.sns-box .sbox-tit{display:block;line-height:40px;border-bottom:1px solid #f0f0f0;font-size:14px;color:#646464;padding:0 7px;text-align:center;}
.sns-box .sbox{overflow:hidden;padding:0 10px;}
.sns-box .sbox a{padding:0px !important;}
.sns-box .link{display:block;width:60px;float:left;text-align:center;font-size:12px;color:#646464;line-height:22px;padding-top:5px;margin-top:10px}
.sns-box .link .ico{display:block;margin:0 auto 2px auto}


/* text Button large*/
.lg_ty1{padding:0 20px; min-width:100px; background-color:#494949; height:26px; line-height:26px; text-align:center; color:#fff !important; font-size:14px;}
.lg_ty2{padding:0 20px; min-width:100px; background-color:#fff; height:26px; line-height:26px; text-align:center; color:#888 !important; font-size:14px; border:1px solid #888;transition-duration: 0.5s;}
.lg_ty2:hover{border:1px solid #333;color:#333 !important;}


/*------- input --------*/
.normal-inp{overflow:hidden;height:32px;padding:0 10px;border:1px solid #dedede;line-height:32px;font-size:14px;color:#555;}

/*------- 버튼 --------*/
.first-btn{display:block;text-align:center;font-size:14px;transition:all 0.5s;cursor:pointer;height:35px;line-height:35px;}
.mall-btn{display:block;text-align:center;padding:7px 0;font-size:14px;transition:all 0.5s;cursor:pointer;}

.common-btn{display:table;text-align:center;margin: 0 auto;}
.common-btn a{display:table-cell;vertical-align:middle;padding:10px 25px;-webkit-transition-duration:0.3s;transition-duration:0.3s;margin:0 5px;}

.big-btn{text-align:center;transition:all 0.5s;cursor:pointer;margin:0 auto;display:table;}
.big-btn span{display:table-cell;vertical-align:middle;font-size:18px;padding:10px 35px;}

.line-whiteB{border:1px solid #fff;background:none;color:#fff;}
.line-whiteB:hover{border:1px solid #333;background:#333;color:#fff;}
.line-white{color:#fff;border:1px solid #fff;}
.line-white:hover{background:#fff;border:1px solid #fff;color:#333;}

.btn-normal{width:80px;height:30px;display:table;}
.btn-normal a{display:table-cell;vertical-align:middle;text-align:center;color:#999;background:#fff;border:1px solid #dedede;transition:all 0.5s;}
.btn-normal a:hover{background:#333;border:1px solid #333;color:#fff;}

.back-orange-normal{background:#f7b52c;}
.back-lightgray{color:#fff;background:#dedede !important;}
.back-lightgray2{color:#fff;background:#efefef !important;}
.back-gray{color:#fff;background:#777;}
.back-gray:hover{color:#fff;background:#333;}
.back-black{color:#fff;background:#555;}
.back-black:hover{color:#fff;background:#000;}
.back-orange{color:#fff;background:#ffac00;}
.back-orange:hover{color:#fff;background:#df9600;}
.back-orange2{color:#fff;background:#ff5c01;}
.back-orange2:hover{color:#fff;background:#863000;}
.back-blue{background:#6c8ea3 !important;}
.back-blue2{background:#99aeb8 !important;}

.arrow-40{display:inline-block;width:40px;height:40px;background:#fff;text-align:center;}
.arrow-40 a{display:block;}
.arrow-40 a i{font-size:30px;line-height:40px;}

.btn-new{position:relative;border-radius:10px;background:#ffac00;color:#fff;font-size:9px;padding:2px 5px;margin-left:10px;text-transform:uppercase;font-weight:bold;}
.btn-notice{position:relative;border-radius:10px;background:#7bb20e;color:#fff;font-size:9px;padding:2px 5px;text-transform:uppercase;font-weight:bold;}


/*------- 텍스트 --------*/
.text-red{color:#f53e3c !important;}.text-red2{color:#f87b27 !important;}
.textBlack{color:#333;}
.textBlue{color:#005ac9;}
.tt-gray77{color:#777;}
.tt-gray55{color:#555 !important;}
.tt-gray33{color:#333;}
.bold{font-weight:bold;} .t-underline{text-decoration:underline;}
.smallTitle{color:#555;margin-right:10px;font-size:16px;}
.color-black9{color: #999;}
.num_red{color:#ec243a !important;}

.fsize13{font-size:13px !important;}.fsize14{font-size:14px !important;}.fsize16{font-size:16px !important;}.fsize18{font-size:18px !important;}.fsize24{font-size:24px !important;}.fsize30{font-size:30px !important;}.fsize40{font-size:40px !important;}
.line-height30{line-height:30px !important;}.line-height13{line-height:1.3 !important;}
.color-black{color:#000;}.color-black3{color:#333;}.color-black5{color:#555;}.color-black7{color:#777;}.color-black9{color:#999;}.color-black-a{color:#aaa;}.color-black-i{color:#000 !important;}
.color-white{color:#fff !important;}
.color-orange{color:#ff7200 !important;}.color-orange2{color:#f17215 !important;}
.color-red2{color:#e60019 !important;}
/*-- daon-logo-color --*/
.color-red{}.color-red:hover{color:#c30015 !important;} .color-red2{color:#db534d !important;}
.color-green{color:#23ac38 !important;}.color-green:hover{color:#0e8421 !important;}
.color-blue{color:#108ccf !important;}.color-blue:hover{color:#0770a9 !important;}.color-blue2{color:#4863b3 !important;}
.color-purple{color:#b74b97 !important;}.color-purple:hover{color:#962875 !important;}
.color-yellow{color:#f49c00 !important;}.color-yellow:hover{color:#cc8200 !important;}
.fw500{font-weight:500;}


/*------- 배경 --------*/
.bg-white{background:#ffffff;}
.bg-orange01{background:#ffac00;}
.bg-orange02{background:#fb6a00 !important;}
.bg-green{background:#37b42d;}/*지하철2호선*/

.bg-gray01{background:#5a5d64;}
.bg-gray02{background:#4e5158 !important;}
.bg-gray03{background:#464a54;}
.bg-gray04{background:#3a3f49;}
.bg-gray05{background:#f4f4f4;}
.bg-gray06{background:#eaeaea !important;}
.bg-gray07{background:#eae7e0 !important;}
.bg-gray08{background:#e3dfd4;}
.bg-gray09{background:#f8f8f8;}
.bg-gray010{background:#6b6e76 !important;}/*마케팅플랜*/
.bg-gray011{background:#d4d6da !important;}/*마케팅플랜*/

.bg-yy01{background:#d1cdc2;}
.bg-yy02{background:#bdb7a5;}
.bg-yy03{background:#bdb7a5;}
.bg-yy04{background:#9b9480;}


.border-gray01{border:1px solid #464a54;}
.border-gray02{border:1px solid #30343f;}

.border-yy01{border-bottom:1px solid #bab6ad;}
.border-yy02{border-bottom:1px solid #a8a393;}
.border-yy03{border-bottom:1px solid #999382;}
.border-yy04{border-bottom:1px solid #8a8472;}


.tooltip{color:#666;position:relative;}
.tooltip:hover:after{content:attr(data-tooltip);display:block;padding:10px;color:#fff;font-size:14px;background:#333;position:absolute;top:-20px;left:-35px;white-space:nowrap;z-index:9999;}
.tooltip:hover:before{display:block;content:"";position:absolute;top:13px;left:20px;border-right:10px solid transparent;border-top:10px solid #333;border-left:10px solid transparent;}


/* =========================== skip네비게이션 ====================================== */
#skip a{position:absolute;top:0px;left:-9999px;z-index:100;}
#skip a:focus, #skip a:active{left:0px;width:100%;text-align:center;padding:10px 0px;background:#004c80;color:#fff;font-weight:bold;}


/* =========================== 공통 레이아웃 ============================= */

div#wrap{overflow:hidden;width:100%;height:auto;min-width:1300px;}
div#wrap header{overflow:visible;width:100%;height:152px;position:absolute;/* position:fixed; */background:#fff;border-bottom: 1px solid #e5e5e5;z-index: 9980;}
#container{width:100%;margin:0 auto;position:relative;/*min-height: 800px*/;overflow: hidden;margin-top:153px;}
div#wrap footer{clear:both;position:relative;background:#272f3c;}

.mainWrap{width:100%;height:auto;position:relative;z-index:1;font-size:14px;}
.maincontainer{position:relative;width:1300px;margin:0 auto;z-index:10;}

#videobcg{position:absolute;top:75px;left:0px;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-1000;overflow:hidden;}
#overPopup{width:300px;height:500px;position:fixed;left:30px;top:30px;z-index:9997;}


/* ========================  animation ============================= */

.fromTopIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,0);opacity: 1.0;}
.fromTopOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,-10px);opacity: 0.0;}
.fromBottomIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,0);opacity: 1.0;}
.fromBottomOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,10px);opacity: 0.0;}
.fromLeftIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,0);opacity: 1.0;}
.fromLeftOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(-10px,0);opacity: 0.0;}
.fromRightIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(0,0);opacity: 1.0;}
.fromRightOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: translate(10px, 0);opacity: 0.0;}
.scaleUpIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleUpOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: scale(1.3,1.3);opacity: 0.0;}
.scaleDownIn{transition: transform 0.8s ease, opacity 0.8s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleDownOut{transition: transform 0.8s ease, opacity 0.8s ease;transform: scale(0.7,0.7);opacity: 0.0;}




/* =========================== header =================================== */

header .HeadTop{position:relative;height:92px;padding:30px 10px;border-bottom:1px solid #e5e5e5;box-sizing:border-box;}
.HeadTop h1 img{height:40px;}
.HeadTop .TopTab{position:relative;}
.HeadTop .TopTab li{float:left;text-align:center;}
.HeadTop .TopTab li .blink {-webkit-animation: blink 0.3s linear infinite; -ms-animation: blink 0.3s linear infinite;}
.HeadTop .TopTab li .onair {-webkit-animation: blink 0.3s linear infinite; -ms-animation: blink 0.3s linear infinite;}
@keyframes blink{0% {color:#fd0016;} 100% {color:#000;}}
.HeadTop .TopTab li:before {content: "";display: block;float: right;width: 1px;background:#e5e5e5;height: 20px;margin: 0 20px;}
.HeadTop .TopTab li:last-child:before{display:none;}

.HeadTop .TopTab li a{display:inline-block;font-size:13px;color:#7c7c7c;}
.HeadTop .TopTab li a i{font-size:20px;color:#222;}

.HeadTop .TopUse{float:left;text-align:center;position:relative;box-sizing:border-box;}
.HeadTop .TopUse p{margin:15px 0 0 15px;}
.HeadTop .TopUse span{border-left:1px solid #e5e5e5;height: 5px;margin: 0 10px;}

/* 교육신청 레이어 팝업 */
.black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
.white_content {
        display: none;
        position: absolute;
        top: 5%;
        left: 50%;
        transform:translateX(-50%);
        width: 720px;
        height: 1280px;
        padding: 10px 30px;
        border: 1px solid #313d52;
        background-color: white;
        z-index:100000;
        overflow: auto;
    }
.white_content span img {width:100%;}
.white_content button.formBtn {display:block; width:200px; height:50px; margin:0 auto; line-height:50px; font-size:17px; font-weight:600; background:#313d52; color:#fff;}
.white_content p {padding:20px 0;}

/* 다국어 링크 셀렉트박스 */
#w{display:inline-block;/* width:100px; */position: relative;z-index:99;font-size: 13px;margin:0 20px;}
#nav {display: block;width: 100px;background-color: #fdfdfd;border: 1px solid #ddd;}
#nav > li > a {display: block;color: #888;text-decoration: none;height: 35px;line-height: 35px;font-size: 13px;padding-left: 10px;}
#nav li ul {display: none;background: #fdfdfd;border-right: 1px solid #ddd;border-left: 1px solid #ddd;position: absolute;z-index:10000;width: 100px;right: 0;}
#nav li ul li{border-top: 1px solid #ddd;}
#nav li ul li.last{border-bottom: none;}
#nav li ul li a {display: block; background: none; padding: 10px 0 10px 10px; text-decoration: none; color: #888;}
#nav li ul li a img{height:13px;margin-right:3px;}

/* 상단정기구매버튼 */
.muAuto a{font-size:15px; color:#333; line-height:35px;transition-duration:0.5s;}
.muAuto a:hover{color:#29398f;}

/* ============================== gnb =================================== */
#gnb_wrap {width:1200px;height:60px !important;margin:0 auto;overflow:hidden;}
#gnb_wrap .line {position: absolute;left: 50%;top: 113px;display: inline-block;margin-left: -590px; width: 27px;--height: 35px;height: 18px;background: #fff;cursor: pointer;}
#gnb_wrap .line p {position:absolute;width:100%;height:1px;background:#000;display:inline-block;}
#gnb_wrap .line .p_0 {left:0;top:0px;}
#gnb_wrap .line .p_1 {left:0;top:8px;}
#gnb_wrap .line .p_2 {left:0;top:16px;}
#gnb_wrap .AMuTit{float: left;font-size: 14px;color: #000;line-height: 60px;padding-left: 50px;}
#gnb_wrap .AMuTit a{float: left;font-size: 14px;color: #000;line-height: 60px;}
#gnb_wrap #incShop .AMuTit{padding-left: 30px;}

/* 넓이값이 지정되어 있을 경우 */
#gnb_wrap .AllMuInner{width:1300px;position:absolute;left:50%;top:152px;margin-left:-650px; background:#f3f3f3;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}
.AllMuInner h2{font-size:42px;color:#000;font-weight:600;text-align:center;margin:40px 0;}
.AllMuInner .AllMu{width:1200px;margin:0 auto 30px;border-top:2px solid #000;padding:40px 50px;box-sizing:border-box;}
.AllMuInner .AllMu dl{float:left;width:16.66%;height:290px;border-left:1px solid #d4d4d4;padding-left:30px;box-sizing:border-box;}
.AllMuInner .AllMu dl:first-child{border-left:0;}
.AllMuInner .AllMu dt{width:100%;font-size:23px;font-weight:600;color:#000;margin:10px 0 10px;}
.AllMuInner .AllMu dd a{display:block;font-size:17px;color:#000;font-weight:400;line-height:33px;transition-duration: 0.5s;}
.AllMuInner .AllMu dd a:hover{color:#000; text-decoration:underline;}

#gnb_wrap #gnb{float:left;height:60px;margin-left:100px;}
#gnb > ul{}
#gnb > ul > li{float:left;margin: 0 7px;position:relative;}
#gnb .gnbMu > li > a{position:relative;display:inline-block;font-size:17px;color:#000;line-height:60px;text-align:center;/*padding:0 20px; */padding:0 9px; transition-duration: 0.5s;}
#gnb .gnbMu > li > a:hover, #gnb .gnbMu > li > a:focus, #gnb .gnbMu > li > a:active, #gnb .gnbMu > li.on > a{color:#000;}
#gnb .gnbMu > li > a span.Mline{display: block;position: relative; width: 100%; height: 2px; background: #fff; bottom: 2px;  margin: 0 auto;}
#gnb .gnbMu > li > a:hover span.Mline{width: 120%; background: #000;margin-left:-10%;transition: 0.5s all;}
#gnb .gnbMu .shopGnb > a{padding: 7px 8px 0 !important;line-height:22px !important;margin:0 8px;}
#gnb .gnbMu .shopGnb > a span.Mline{margin-top:8px !important;}
#gnb .gnbMu .shopGnb > a:hover span.Mline{margin-top:8px !important;}

#gnb_wrap .MuInner{position:absolute;top:153px;left:0;width:100%;background:rgba(49,61,82, 0.95);}
.MuInner .MuTit{float:left;width:200px;position:relative;}
.MuTit h2{font-family: 'Montserrat', sans-serif;font-size:20px;color:#000;line-height:25px;font-weight:500;text-transform:uppercase;}
.MuTit h2 span{font-weight:600;}
.MuTit h2:after{content: "";display: block;width: 40px;background:#000;height: 1px;margin: 20px 0 30px;}
.MuTit p{font-size:14px;line-height: 20px;color: #606060;}
/* 마케팅플랜 */
.MuInner .maMuTit{float:left;width:200px;position:relative;}
.maMuTit h2{font-family: 'Montserrat', sans-serif;font-size:20px;color:#000;line-height:25px;font-weight:500;text-transform:uppercase;}
.maMuTit h2 span{font-weight:600;}
.maMuTit h2:after{content: "";display: block;width: 40px;background:#000;height: 1px;margin: 20px 0 30px;}
.maMuTit p{font-size:14px;line-height: 20px;color: #606060;}

/* 에이필드 */
.MuInner .MuList{float:left;position:relative;margin-left:135px;}
.MuInner .MuList li.intro{display:block; float:left;height:50px; line-height:50px; text-align:center; position:relative;}
.MuInner .MuList li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .MuList li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .MuList li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .MuList li a:hover{color:#9198a3;}
.MuInner .MuMv{float:left;width:250px;position:relative;}

.MuInner .MuList li a p{position:absolute;bottom:0;width:100%;height:50px;line-height:23px; background: rgba(0, 0, 0, 0.7);padding-top:13px;color: #fff;font-size: 16px;box-sizing: border-box;}
.MuInner .MuList li:first-child p{}
.MuInner .MuList li a p span.listTit{font-size:18px;}
.MuInner .MuList li a:hover p span.listTit:after{content:""; width:100%; height:1px; background:#fff;display:block; margin:2px 0;}

.MuInner .brMulist {float:left;position:relative;margin-left:205px;}
.MuInner .brMulist li{float:left; position:relative; height:50px; line-height:50px;}
.MuInner .brMulist li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .brMulist li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .brMulist li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .brMulist li a:hover{color:#9198a3;}


/* 마케팅플랜 */
.MuInner .maMuList {float:left;position:relative;margin-left:300px;}
.MuInner .maMuList li{float:left; position:relative; height:50px; line-height:50px;}
.MuInner .maMuList li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .maMuList li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .maMuList li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .maMuList li a:hover{color:#9198a3;}


/* 공지사항 */
.MuInner .boMuList {float:left;position:relative;margin-left:495px;}
.MuInner .boMuList li{float:left; position:relative; height:50px; line-height:50px;}
.MuInner .boMuList li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .boMuList li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .boMuList li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .boMuList li a:hover{color:#9198a3;}

/* 홍보 */
.MuInner .nowMuList {float:left;position:relative;margin-left:555px;}
.MuInner .nowMuList li{float:left; position:relative; height:50px; line-height:50px;}
.MuInner .nowMuList li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .nowMuList li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .nowMuList li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .nowMuList li a:hover{color:#9198a3;}

/* 센터안내 */
.MuInner .cenMuList {float:left;position:relative;margin-left:730px;}
.MuInner .cenMuList li{float:left; position:relative; height:50px; line-height:50px;}
.MuInner .cenMuList li a{display: block;position:relative;padding:0 40px;font-size:15px;color:#fff;line-height:50px;transition-duration:0.3s;}
.MuInner .cenMuList li a:before{content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#fff;border-radius:50%;}
.MuInner .cenMuList li a:hover:before {content:""; position:absolute; top:23px; left:27px;width:5px;height:5px;background:#9198a3;border-radius:50%;transition-duration:0.3s;}
.MuInner .cenMuList li a:hover{color:#9198a3;}

.MuInner{opacity: 0;display:none;}

.topmenu_allife{width:80px;padding-top: 10px;}
.topmenu_allife img{width:100%;}

.TopMenu{position:relative;float:right;}
.TopMenu li{float:left;line-height:60px;}
.TopMenu li:before {content: "";display: block;float: left;width: 1px;background:#e5e5e5;height: 10px;margin: 25px 12px;}
.TopMenu li a{font-size:13px;color:#575957;transition-duration:0.5s;}

.QuickR{position:absolute;right:0;top:270px;display:inline-block;z-index:990;}

.QuickR2{position:absolute;right:0;top:150px;display:inline-block;}
.QuickR #QuickBtn{position:fixed;width:52px;height:160px;right:0;background:#363636 url('../../images/os/new_img1/common/btn_Quick.png') no-repeat 50% 50%; z-index:9999;cursor:pointer;padding:10px;box-sizing:border-box;}
.QuickR #CartBtn_R{position:fixed;width:52px;height:160px;top:435px;right:0;background:#4863b3 url('../../images/os/new_img1/common/btn_Cart.png') no-repeat 50% 50%; z-index:9999;cursor:pointer;padding:10px;box-sizing:border-box;}
.QuickR #ThemeBtn{position:fixed;width:52px;height:160px;top:600px;right:0;background:#363636 url('../../images/os/new_img1/common/btn_Theme.png') no-repeat 50% 50%; z-index:9999;cursor:pointer;padding:10px;box-sizing:border-box;}
.QuickR #QuickBtn i{position:absolute;bottom:10px;width:23px;height:23px;font-size:22px;color:rgba(250, 250, 250, 0.8);background:#000;border-radius:50%;line-height:23px;}
.QuickR .QuickMu{position:fixed; width:100px;background:#fff;border:1px solid #d6d6d6;right:0;margin-right: -102px;}
.QuickR .QuickMu i{display:block;font-size:20px;line-height:30px;padding-top:10px;}
.QuickR .QuickMu li{border-top:1px solid #d6d6d6;text-align:center;}
.QuickR .QuickMu li:first-child, .borTop0{border-top:0 !important;}
.QuickR .QuickMu li a{display:block;font-size:13px;color:rgba(0, 0, 0, 0.6);line-height:40px;}
.QuickR .QuickMu li a:hover, .QuickR .QuickMu i a:hover{background:#f6f6f6;color:#25b0bb !important;transition:0.3s all;}

.rotate180 {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg); transform: rotate(180deg);}
.transi3s{transition:0.3s all;}


/* ============================== shop =================================== */

/*-- 상단이벤트 --*/
#MainTop{position:relative;width:100%;height:100px;/* background:url("../../images/os/new_img1/common/top_event.jpg") no-repeat center; */}
#MainTop a{display:block;width:100%;height:100px;}
#MainTop p{position: fixed;top: 27px;right:20px;display:block;cursor:pointer;}

#gnb_wrap .AllShopInner{width:100%;position: absolute;left:0;top:152px;background:rgba(255,255,255,1);border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;padding:40px 0;}
.AllShopInner .CateInner{width:1200px;margin:0 auto;}
.CateInner .Cate{position: relative;float: left;width:130px;padding-left:4px;}
.Cate h2{font-family: 'Montserrat', sans-serif;font-size: 18px;color: #000;font-weight: 500;margin:10px 0 15px;}
.Cate li a{font-size:15px;color:#5e5e5e;line-height:30px;transition-duration: 0.5s;}
.Cate li a:hover{color:#00266b;text-decoration:underline;}

.CateInner .CatePd{position: relative;float: right;width:1064px;}
.CatePd dl{position: relative;float: left;width:250px;margin-left:16px;}
.CatePd dl dt a{diplay:block;width:250px;height:250px;}
.CatePd dl dt img{width:100%;border:1px solid #e5e5e5;box-sizing:border-box;transition-duration: 0.5s;}
.CatePd dl dt img:hover{border:1px solid #313d52;}
.CatePd dd.PdTit{font-family: 'Montserrat', sans-serif;font-size: 16px;color: #555;font-weight: 600;margin:15px 0 3px;}
.CatePd dd{font-size: 14px;color: #5e5e5e;padding-left:5px;}


/* ============================== footer =================================== */
footer{clear:both;}
footer .footerTop{width:1200px;height:50px;margin:0 auto;position:relative;}

footer .footerMenu{width:100%;margin:0 auto;background:#313946;}
.footerMenu ul{width:1200px;margin:0 auto;/* height:80px; */text-align:left;padding:18px 0;}
.footerMenu li{float:left;display:table;height:30px;}
.footerMenu li a{display:table-cell;vertical-align:middle;color:rgba(255,255,255,0.6);font-size:13.5px;transition-duration: 0.5s;}
.footerMenu li a.tcolor-black{color:#fff;padding-left:0;}
.footerMenu li a:hover{color:#fff;}
.footerMenu li a:after{content:url('../../images/os/new_img1/common/icon_line.png');display: inline-block;margin:-0 25px;}
.footerMenu li:last-child a:after{content:"";w}

footer address{width:1200px;margin:0 auto;font-size:13px;color:#d2d2d2;line-height:20px;padding:50px 0;}
footer .ComT{color:#fff;font-size:15px;margin-bottom:15px;}
footer .Copy{font-size:12px;margin-top:25px;color:#bdbdbd;}
footer address span{margin-right:20px;}

footer address .ComInfo-L{width:850px;}
footer address .ComInfo-R{width:350px;}
footer address .ComInfo-R img{height:50px;}
footer address .ComInfo-R img:last-child{margin-right:20px;}

.scroll-to-top{display:block;position:fixed;bottom:30px;right:30px;background:#fff;border:1px solid #dedede;text-align:center;width:50px;height:50px;cursor:pointer;z-index:99999;border-radius:25px;
-webkit-border-radius:25px;-moz-border-radius:25px;transition:all 500ms ease;behavior: url('../../js/design-js/PIE-1.0.0/PIE.htc');}
.scroll-to-top i{font-size:24px;line-height:45px;}
.scroll-to-top:hover{background:#494949;border:1px solid #494949;color:#fff;}

.bBtn{display:block;padding:7px 15px;text-align:center;color:#fff;font-size:14px;border-radius:2px;}
.bBtn40{display:block;padding:12px 20px;text-align:center;color:#fff;font-size:14px;border-radius:2px;}
.IBtn{display:table;margin:30px auto 0 auto;}
.IBtn a{float:left;width:150px;margin:0 5px;line-height:30px;}
.colorRed{background:#bd0244;color:#fff;font-size:16px;}
.colorRed:hover{background:#8d0032;}
.colorBlue{background:#065bab;color:#fff;font-size:16px;}
.colorBlue:hover{background:#04417a;}

/* 오토십 상품등록 표 */
.bbs_type,.bbs_type th,.bbs_type td{border:0;font-size:14px;}
.bbs_type{clear:both;width:100%;border-bottom:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-top:1px solid #0092c1;text-align:center;border-collapse:collapse;}
.bbs_type caption{display:none}
.bbs_type thead th{padding:10px;border:1px solid #dcdcdc;background:#f4f4f4;color:#666;font-weight:bold;border-top:none}
.bbs_type tbody th{padding:10px;border:1px solid #dcdcdc;background:#f4f4f4;color:#666;font-weight:bold;border-top:none}
.bbs_type td{padding:8px;border:1px solid #e5e5e5;color:#4c4c4c;border-top:none;border-right:none}
.bbs_type td p{text-align:left;margin-left:10px}
.bbs_type .bu{background:#f4f4f4;color:#666;font-weight:bold;}
.bbs_type .bg_r{background:#fff4f4;}
.bbs_type .bg_b{background:#f5faff;}

/* 배경색 버튼 */
.lgty1{background-color:#000; width:132px; height:32px; line-height:32px; text-align:center; color:#fff !important;}
.lgty2{background-color:#7f7f7f; width:132px; height:32px; line-height:32px; text-align:center; color:#fff !important;}
.lgty3{background-color:#aaaaaa; width:132px; height:32px; line-height:32px; text-align:center; color:#fff !important;}
.smty1{background-color:#000; padding:0 10px; height:25px; line-height:25px; color:#fff !important;}
.smty2{background-color:#aaaaaa; padding:0 10px; height:23px; line-height:25px; color:#fff !important;}
.smty3{background-color:#334254; padding:0 10px; height:23px; line-height:25px; color:#fff !important;}

/* Text 애니메이션션 효과 */
.textAnimation {
  animation: topCertify 1.0s infinite;
  padding: 0 10px;
  background: #d75654;
  border-radius:  3px;
  margin-right: -15px;
}

@keyframes topCertify {
  0% {color:rgba(250, 250, 250, 1);}
  100% {color: rgba(250, 250, 250, 0.5);}
}

/* -------- 팝업 : 판매원조회, 아이디/패스워드 찾기 -------- */
#popWrap{position:relative;margin:50px;border:1px solid #eee;padding:39px;position:relative;text-align:left;line-height:1.3;}
#popWrap .popHeader h1{font-size:20px;line-height:30px;color:#333;font-weight:normal;}
#popWrap .popHeader h5{font-size:30px;line-height:40px;color:#333;font-weight:normal;text-align:left;}
#popWrap .popHeader .guide{font-size:13px;color:#bebebe;margin:11px 0 32px 0;}
#popWrap .popContents{}
#popWrap .searchBox{overflow:hidden;width:420px;}
#popWrap .searchBox dt,
#popWrap .searchBox dd{float:left;margin:0 0 11px 0; }
#popWrap .searchBox dt{clear:both;width:90px;font-size:15px;color:#797979;height:33px;line-height:33px;}
#popWrap .searchBox dd{width:330px;}
#popWrap .searchBox input{border:1px solid #e1e6ea;height:33px;line-height:33px;}
#popWrap .searchBox select{height:25px;line-height:25px;}
#popWrap .confirm{text-align:center;margin:30px 0 0 0;}
#popWrap .confirm a{display:inline-block;width:160px;height:50px;color:#fff;background-color:#444444;text-align:center;line-height:50px;font-size:15px;}
#popWrap .popclose{position:absolute;right:-1px; top:-1px;}
#popWrap .idPassFind { }
#popWrap .idPassFind h2{font-size:18px;color:#1b1b1b;font-weight:normal;}
#popWrap .formTable{margin:15px 0 0 0;}
#popWrap .formTable th{font-size:15px; letter-spacing:-1px; font-weight:normal; text-align:left; color:#848484; }
#popWrap .formTable td{padding:5px 0;}
#popWrap .formTable .point{color:#444; font-size:12px; margin-top:10px;}
#popWrap .formTable td input{border:1px solid #dddddd;height:33px;line-height:33px;padding-left:3px;}
#popWrap .idPassFind .confirm{padding:30px 0 35px 0; border-bottom:1px solid #e0e4e8; margin:0 0 26px 0;}
#popWrap .idPassFind .passfind{margin:24px 0 0 0; text-align:center;}
#popWrap .idPassFind .passfind span{font-size:13px; line-height:22px; display: block; text-indent: -20px; margin-left: 20px;text-align:left;}
#popWrap .idPassFind .passfind strong{color:#343d45; font-size:15px;display:block; padding:20px 0 0 0;} 
.formTable select{height:32px;padding:3px;text-align:left;border:1px solid #ddd;line-height:1;outline:none;font-size:14px;border-radius:0;}

.shop-copy{/* position:relative; *//* height:77px; */margin: 50px auto 0;padding: 25px 0;text-align:left;background: #ebeef4;display: table;}
.shop-copy p{font-size:20px;color:#333;text-align:center;width: 600px;display: table-cell;vertical-align: middle;}
.shop-copy .shop-copy-cont{position:relative;float: left;width: 600px;display: table-cell;margin-right: 30px;}
.shop-copy .myshop-copy{position:absolute;/* top:15px; */right: 360px;z-index:22;/* width:230px; */margin: 8px 0;}
.shop-copy .myshop-copy a{width: 260px;float: left;box-sizing: border-box;box-shadow: 0px 5px 9px 1px #b5b5b5f0;margin: 0;padding:18px 25px;border-radius:30px;}
.shop-copy .myshop-copy a:first-child{margin-right:10px;}
.shop-copy .myshop-copy a i{color:#ffcc00;margin-right:5px;padding:3px;border:1px solid #ffcc00;} 
.shop-copy .myshop-copy a span{line-height:1.5;} 
.shop-name-input{position:absolute;top:44px;left:-20px;}
.shop-copy .myshop-copy a.bg-grBlue{ 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#434d6f+0,0f1848+100 */
background: #434d6f; /* Old browsers */
background: -moz-linear-gradient(left,  #434d6f 0%, #0f1848 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #434d6f 0%,#0f1848 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #434d6f 0%,#0f1848 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434d6f', endColorstr='#0f1848',GradientType=1 ); /* IE6-9 */
}
.shop-copy .myshop-copy a.bg-grGray{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#52555e+0,272f3c+100 */
background: #52555e; /* Old browsers */
background: -moz-linear-gradient(left,  #52555e 0%, #272f3c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #52555e 0%,#272f3c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #52555e 0%,#272f3c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52555e', endColorstr='#272f3c',GradientType=1 ); /* IE6-9 */
}

.shop-copy ul{float:right;list-style:none;width:350px;display:inline-block;border:3px solid #fff;margin-left:180px;padding-left:50px;}
.shop-copy ul li{float:left;width:15.84%;height:70px;color:#000;display:inline-block;}
.shop-copy ul li a{display:block;width:50px;height:50px;margin:10px auto;border-radius:50%;}
 .shop-copy ul li a:hover{opacity:0.5;}

.shop-copy .sns-kakaotalk{background:#ffcd00 url('../../images/os/new_img1/myoffice/sns-kakaotalk.png') no-repeat 50% 50%;);}
.shop-copy .sns-facebook{background:#3b5998 url('../../images/os/new_img1/myoffice/sns-facebook.png') no-repeat 50% 50%;}
.shop-copy .sns-twitter{background:#00aced url('../../images/os/new_img1/myoffice/sns-twitter.png') no-repeat 50% 50%;}
.shop-copy .sns-band{background:#3abf66 url('../../images/os/new_img1/myoffice/sns-band.png') no-repeat 50% 50%;}
.shop-copy .sns-kakao{background:#fce000 url('../../images/os/new_img1/myoffice/sns-kakaostory.png') no-repeat 50% 50%;}
.shop-copy .sns-instar{background:#000 url('../../images/os/new_img1/myoffice/sns-in.png') no-repeat 50% 50%;}