@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Lato|Lora');

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  src: url('font/NanumBarunGothic.eot');
  src: local('Nanum Barun Gothic Bold'),
       local('NanumBarunGothic'),
       url('font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
       url('font/NanumBarunGothic.woff2') format('woff2'),
       url('font/NanumBarunGothic.woff') format('woff'),
       url('font/NanumBarunGothic.ttf') format('truetype');
}

/* ========================== 태그초기화 =========================== */

html,body{font-family:'Nanum Barun Gothic', sans-serif, 'Lora', serif;font-size: 14px;color:#696969;-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;}
select, textarea, button{border-radius:0;font-family:'Nanum Barun Gothic', sans-serif, 'Lora', 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;}.w65{width:65% !important;}.w60{width:60% !important;}.w55{width:55% !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%;}
.w125{width:12.5%;}.w575{width:57.5% !important;}.w625{width:62.5% !important;}
.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;}
.mgl-5{margin-left:5px !important;}.mgl-8{margin-left:8px;}.mgl-10{margin-left:10px;}.mgl-15{margin-left:15px;}.mgl-30{margin-left:30px;}
.mgb0{margin-bottom:0px !important;}.mgb-10{margin-bottom:10px !important;}
.pdt10{padding-top:10px;}.pdt20{padding-top:20px;}.pdt30{padding-top:30px;}
.pdl10{padding-left:10px !important;}.pdl-15{padding-left:15px;}.pdl20{padding-left:20px !important;}.pdl30{padding-left:30px !important;}.pdl-30{padding-left:30px;}
.pdr10{padding-right:10px !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;}
.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-50{margin-top:50px ;}.mgt-70{margin-top:70px !important;}
.wid80{width:80px;}
.wid100{width:100px;}
.wid110{width:110px;}
.w380{width:380px;}
.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:#db534d !important;}
.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-0{background:#043477 !important;}
.bg-blue{background:#2f5597 !important;}.bg-blue:hover{background:#244886 !important;}
.bg-blue-3{background:#305596 !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 !important; 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;}

/* 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:34px;line-height:34px;}
.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 !important;}
.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;}

.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-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-green{color:#23ac38 !important;}.color-green:hover{color:#0e8421 !important;}
.color-blue{color:#108ccf !important;}.color-blue:hover{color:#0770a9 !important;}
.color-purple{color:#b74b97 !important;}.color-purple:hover{color:#962875 !important;}
.color-yellow{color:#f49c00 !important;}.color-yellow:hover{color:#cc8200 !important;}


/*------- 배경 --------*/
.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:1200px;}
div#wrap header{overflow:visible;width:100%;height:200px;background:#fff;position:fixed;z-index:990;}
#container{width:100%;margin:0 auto;position:relative;/*min-height: 800px*/;overflow: hidden;padding-top:200px;}
div#wrap footer{clear:both;position:relative;border-top:1px solid #e5e5e5;}

.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 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromTopOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,-10px);opacity: 0.0;}
.fromBottomIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromBottomOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,10px);opacity: 0.0;}
.fromLeftIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromLeftOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(-10px,0);opacity: 0.0;}
.fromRightIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromRightOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(10px, 0);opacity: 0.0;}
.scaleUpIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleUpOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.3,1.3);opacity: 0.0;}
.scaleDownIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleDownOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(0.7,0.7);opacity: 0.0;}


.WjBtn{display:table;margin:0 auto;}
.WjBtn a{display:inline-block;font-size:13px;color:#555;border:1px solid #d3d1d1;padding:15px 40px;transition-duration: 0.5s;}
.WjBtn a:hover{background:#18b0bc;border:1px solid #18b0bc;color:#fff;}


/* =========================== header =================================== */

header .HeaderTop{background:#fff;position:relative;height:50px;border-bottom:1px solid #e6e6e6;}
.HeaderTop .HeaderCont{position:relative;}
.HeaderCont ul li{float:left;}
.HeaderCont .TopTab{}
.TopTab ul{}
.TopTab ul li{width:150px;height:49px;background:#f9f9f9;display:inline-block;border-left:1px solid #e6e6e6;}
.TopTab ul li:last-child{border-right:1px solid #e6e6e6;}
.TopTab ul li a{display:block;text-align:center;font-family: 'Lato', sans-serif;font-size:15px;color:#909090;line-height:50px;transition-duration:0.5s;}
.TopTab ul li a:hover{height:50px;background:#fff;color:#94d527;border-bottom:1px solid #e6e6e6;}
.TopTab ul li a.hoveron{height:50px;font-size:16px;background:#fff;color:#94d527;line-height:50px;font-weight:bold;border-bottom:0;margin-top:-1px;}

.HeaderCont .TopMenu{float:right;}
.TopMenu ul li{display:inline-block;margin:12px 0;}
.TopMenu ul li:before{content: "|";float:left;font-size:10px;line-height:24px;margin:0 15px;}
.TopMenu ul li:first-child:before, .Bornone{content: "|";float:left;color:#fff;margin:0 15px;}
.TopMenu ul li a{display:inline-block;color:#7c7c7c;font-size:13px;line-height:20px;letter-spacing: -0.03em;}
.TopMenu ul li a:hover{color:#333;}
.TopMenu ul li.before0:before{font-size:0;margin:0 5px;}
.TopMenu ul li.autoOk a{background: #092f8d; padding: 3px 5px; border-radius: 3px; color: #fff; font-size: 12px;}

header .TopLogo{width:1200px;margin:0 auto;background:#fff;height:99px;position:relative;}
.TopLogo h1{position:absolute;top:10px;left:50%;margin-left:-115px;width:230px;}
.TopLogo h1 a{display:block;text-align:center;font-weight:bold;}
.TopLogo .TopCs{float:left;background:url('../../images/os/new_img1/common/icon_cs.png')no-repeat 0 5px;margin-top:30px;}
.TopLogo .TopCs dl{margin-left:45px;line-height:22px;}
.TopLogo .TopCs dl dt{font-family: 'Lato', sans-serif;font-size:20px;font-weight:900;color:#222;}
.TopLogo .TopCs dl dd{font-size:12px;color:#888;}

/*-- 상단검색바 --*/
.TopSearch{position: absolute;right:0;width:280px;height:36px;border:1px solid #d6d6d6;margin-top:30px;}
.TopSearch .inputText{display:inline-block;float:left;width:230px;height:36px;line-height:36px;border:0 none;background:transparent;color:#acacac;padding:0 10px}
.TopSearch .SearchBtn{float:right;width:30px;height:36px;}
.TopSearch .SearchBtn i{font-size:22px;color:#333;line-height:36px;}

/* ============================== gnb =================================== */
#gnb_wrap{width:100%;height:50px !important;background: #fff;position:relative;}
#gnb_wrap #gnb{width:100%;height:50px;margin:0 auto;/* box-shadow:0 3px 2px rgba(0, 0, 0, 0.2); */}
#gnb {background:#4c33ff;
background-image: -webkit-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: -moz-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: -o-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
}
    
#gnb > ul{width:1200px;margin:0 auto;}
#gnb > ul > li{float:left;width:20%;position:relative;}
#gnb .gnbMu > li > a{display:block;font-size:17px;color:#fff;line-height:50px;text-align:center;transition-duration: 0.5s;font-weight:bold;}
#gnb .gnbMu > li > a:hover/*, #gnb .gnbMu > li > a:focus, #gnb .gnbMu > li > a:active, #gnb .gnbMu > li.on > a*/{color:#a0ff00;}
#gnb .gnbMu2 > li{width:14%;}
#gnb_wrap .MuInner{position:absolute;top:50px;left:0;width:100%;background:transparent url('../../images/os/new_img1/common/gnb_bg.png') repeat-x;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);}
.MuInner .MuList{width:1200px;margin:0 auto;position:relative;}
.MuList .MuListL{float:left;width:450px;padding:50px 50px 50px 0;box-sizing:border-box;}
.MuList .MuListL h2{font-family: 'Lora', serif;color: #222;font-size:30px;margin-bottom:30px;}
.MuList .MuListL .MuInfo{color: #777;font-size:14px;line-height:26px;}
.MuList .MuListR{float:right;width:750px;height:100%;background:transparent url('../../images/os/new_img1/common/gnb_bg2.png') repeat-x;padding:50px 60px;box-sizing:border-box;position:relative;}
.MuList .MuListR .MuNormal li a{font-size:15px;color:#6c6c6c;line-height:36px;transition-duration: 0.5s;}
.MuList .MuListR .MuNormal li a:hover{color:#18b0bc;}
.MuList .MuListR .MuNormal li i{margin-left:20px;}
.MuList .MuListR .MuBrand{width:630px;height:250px;margin:0 auto;border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5;}
.MuList .MuListR .MuBrand li{float:left;width:33.333%;height:126px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;box-sizing:border-box;text-align:center;}
.MuList .MuListR .MuBrand li a{display: -webkit-flex;display:flex; 
-webkit-align-items:center;align-items: center;/*위아래 중앙*/ 
-webkit-justify-content: center;justify-content: center;height:125px;font-size:14px;color:#6c6c6c;transition-duration: 0.5s;}
.MuList .MuListR .MuBrand li a:hover{background:#fafafa;}
.gnbClose{position:absolute;right:-36px;bottom:0;width:36px;height:36px;background:#666;text-align:center;}
.gnbClose a{display:block;transition-duration: 0.5s;}
.gnbClose a:hover{background:#888;}
.gnbClose i{color:#fff;font-size:18px;line-height:36px;}
.MuList .MuBg01{background:url('../../images/os/new_img1/common/gnb_com.png') no-repeat center right;}
.MuList .MuBg03{background:url('../../images/os/new_img1/common/gnb_busi.png') no-repeat center right;}
.MuList .MuBg04{background:url('../../images/os/new_img1/common/gnb_center.png') no-repeat center right;}

.MuInner{ opacity: 0; display:none;}

.QuickR{position:absolute;right:0;top:200px;display:inline-block;z-index:999;}
.QuickR2{position:absolute;right:0;top:199px;display:inline-block;}
.QuickR #QuickBtn{position:fixed;width:42px;height:140px;right:0;background:#42b5ed url('../../images/os/new_img1/common/quick_tit.png') no-repeat 50% 12px; z-index:9999;cursor:default;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:#008ace;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:#79b300 !important;transition:0.3s all;}
.QuickR .QuickMu li .liveBtn:hover, .QuickR .QuickMu i .liveBtn:hover{background:#f6f6f6;color:#e00e0e !important;transition:0.3s all;}

.liveBtn i{font-size:24px !important;animation: liveBtn 0.5s linear infinite normal;}

@keyframes liveBtn {
	  0%  {
		color:#e00e0e;
	  }
	  100% {  
		color:rgba(0, 0, 0, 0.6);
	  }
	}

.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:absolute;top:16px;right:20px;display:block;cursor:pointer;}

/*-- gnb2 --*/
#gnb2{width:100%;z-index:998;position: absolute;    top: 151px;}
#gnb2 ul{width:100%;margin:0 auto;position:relative;background: rgba(255, 255, 255, 0.9);}
#gnb2 .topMenuWrap{width:100%;height:50px;margin:0 auto;/* box-shadow:0 3px 2px rgba(0, 0, 0, 0.2); */position:relative;}
/* .topMenuWrap{
    background: #749b36;
    background: -moz-linear-gradient(top, #93c44c 0%, #749b36 100%);
    background: -webkit-linear-gradient(top, #93c44c 0%,#749b36 100%);
    background: linear-gradient(to bottom, #93c44c 0%,#749b36 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93c44c', endColorstr='#749b36',GradientType=0 );
    transition-duration: 0.5s;
} */
.topMenuWrap {background:#4c33ff;
background-image: -webkit-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: -moz-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: -o-linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
background-image: linear-gradient(19deg, #4c33ff 0%, #3abfee 100%);
}

#gnb2 .topMenu{width:1200px;margin:0 auto;position:relative;height:50px;}
.topMenu ul li{float:left;width:16.66%;height:50px;text-align:center;margin:0 auto;}

.topMenu .allMenu{display:inline-block;width:50px;background:#52555e url("../../images/os/new_img1/common/mu_all.png") no-repeat 50% 50%;text-align:center;}
.topMenu li a{display:block;color:#fff;font-size:16px;height:50px;line-height:50px;transition-duration: 0.5s;text-align:center;font-weight:bold;}
.topMenu li.w-16{width:16.666% !important;}
.topMenu li a:hover{color:#a0ff00;}
.topMenu li.topMBg1{background:#18b0bc;}
.topMenu li.topMBg2{width:160px;background:#77c2cb;}
.topMenu li.topMBg3{width:165px;background:#52555e;}
#gnb2 .topMenu li a.active{color:#18b0bc;}

#gnb2 ul li.MuAllInner{display:block;width:100%;border-bottom:1px solid #a6a8ac;clear:both;margin-top:3px;}
.MuAll{width:1200px;height:200px;margin:0 auto;border-right:1px solid #dcdcdc;border-left:1px solid #dcdcdc;box-sizing:border-box;position:relative;}
.MuAll dl{float:left;width:16.66% !important;height:165px;border-left:1px solid #dcdcdc;box-sizing:border-box;padding:0 15px;margin:10px 0;}
.MuAll dt{margin-bottom:10px;}
.MuAll dt{font-size:16px;color:#000;}
.MuAll dd a{font-weight:bold;font-size:14px;color:#333;line-height:28px;transition-duration: 0.5s;}
.MuAll dl.wid01{width:159px;}
.MuAll dl.wid02{width:164px;}
.MuAll a:hover{color:#6fbd00;}

/* ============================== footer =================================== */
footer{clear:both;}
footer .footerTop{width:1200px;height:50px;margin:0 auto;position:relative;}
.footerTop .footerCs{float:left;line-height:50px;}
.footerTop .footerCs .footerTitle{float:left;font-size:14px;color:#333;font-weight:bold;}
.footerTop .footerCs ul{margin-left:85px;}
.footerTop .footerCs ul li{float:left;font-size:12px;color:#888;}
.footerTop .footerCs ul li:first-child{font-family: 'Lato', sans-serif;font-size:20px;font-weight:900;color:#222;margin-right:12px;}

.footerTop .familyLink{float:right;}
.familyLink{width:150px;height:50px;border-right:1px solid #e5e5e5; border-left:1px solid #e5e5e5;box-sizing:border-box;}
.familySite {width:100%; float:left; font-size:15px; position:relative; }
.familySite dt {padding-left:25px;line-height:50px;}
.familySite dt a {display:block; position:relative;}
.familySite dt a:after {content:""; display:block; position:absolute; right:10px; top:50%; margin-top:-2px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #333;
-webkit-transform: rotate(0deg); transform: rotate(0deg);
-webkit-transition: all .3s ease; transition: all .3s ease;}
.familySite dt a.on:after {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.familySite dd {display:none; position:absolute; left:0; bottom:50px; width:100%; z-index:101;}
.familySite dd ul{background:#fff;border:1px solid #e5e5e5;border-bottom:0}
.familySite dd ul li{border-bottom:1px solid #e5e5e5;padding:10px 20px;}
.familySite dd ul li a{font-size:13px;color:#666;transition-duration: 0.5s;}
.familySite dd ul li a:hover{color:#18b0bc;}

.footerTop .footerSns{position:absolute;top:10px;right:160px;}
.footerTop .footerSns a{display:block;float:left;width:30px;height:30px;background:#999;border-radius:50%;margin:0 5px;text-align:center;transition-duration: 0.5s;}
.footerTop .footerSns a i{font-size:18px;line-height:30px;color:#fff;}
.footerTop .footerSns a.snsfb:hover{background:#46639c;}
.footerTop .footerSns a.snstw:hover{background:#32aade;}
.footerTop .footerSns a.snsyou:hover{background:#d02330;}
.footerTop .footerSns a.snsins:hover{background:#5e4d48;}

footer .footerBottom{width:100%;background:#f5f5f5;border-top:1px solid #e5e5e5;position:relative;padding:50px 0;}
.footerBottom .footerMenu{width:1200px;margin:0 auto;height:49px;text-align:left;}
.footerMenu li{float:left;display:table;height:49px;}
.footerMenu li:first-child{background:none;}
.footerMenu li a{display:table-cell;vertical-align:middle;padding:0 10px;color:#696969;font-size:13.5px;transition-duration: 0.5s;}
.footerMenu li a.tcolor-black{color:#222;padding-left:0;}
.footerMenu li a:hover{color:#000;}

.footerBottom address{width:1200px;margin:0 auto;font-size:13px;color:#797979;line-height:20px;}
.footerBottom address p{font-size:12px;color:#999;padding:3px 0;}
.footerBottom address span{margin-right:20px;}
.footerBottom address a{display:inline-block;} 
.footerBottom address a:hover{text-decoration:underline;} 
.footerBottom .ComT{color:#222;}

.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;}


/*평균후원수당공지*/
.AvgPayWrap{position:relative;width:95%;margin:30px auto 0;}
.AvgPayWrap h5{font-size:20px;color:#333;line-height:22px;font-weight:bold;margin-bottom:15px;}
.AvgPayWrap .tab_content{width:100%;margin:30px auto;}
.AvgPayWrap .tab_content dl dt{font-size:16px;color:#555;line-height:25px;font-weight:bold;margin-bottom:10px;}
.AvgPayWrap .tab_content dl dd{font-size:14px;color:#777;line-height:20px;font-weight:normal;margin-bottom:15px;}
.AvgPayWrap thead td{background:#f4f4f4;color:#666;font-weight:600;text-align:center;}


.SubHTab{clear:both;width:100%;height:50px;position:relative;margin-bottom:35px;}
.SubHTab .TabBtn{float:left;width:200px;height:50px;margin-right:5px;}
.SubHTab .TabBtn a{background:#979797;display:block;text-align:center;font-size:16px;line-height:50px;color:#fff;}
.SubHTab .TabBtn a:hover{background:#333;color:#fff;}
.SubHTab .tabs{float:left;margin:0 auto;}
.SubHTab .tabs li{float:left;width:115.5px;height:50px;margin-right:5px;}
.SubHTab .tabs li:last-child{margin-right:0;}
.SubHTab .tabs li a{background:#979797;display:block;text-align:center;font-size:16px;line-height:50px;color:#fff;}
.SubHTab .tabs a:hover, .SubHTab .tabs a:active, .SubHTab .tabs .tabOn{background:#333;color:#fff;}

/* 리스트 바로주문 버튼 */
.galCount{margin-top:10px;font-size:0;}
.galCount a{font-size:16px;display:inline-block;width:40px;height:40px;line-height:38px;text-align:center;border-radius:3px;transition:all 0.3s;}
.galCount a i{line-height:38px;}
.addCart{color: #fff;margin-left: 5px;}
.addCart:hover{color:#fff;}
.bg_basic{background:#1761fd !important;} a.bg_basic:hover{background:#1054e4 !important;}
.galCount input{width:calc(100% - 135px) !important;margin:0 5px;padding-left:0;text-align:center;}
.countBtn{background:#e8e8e8;}
.countBtn:hover{background:#ddd;}
.addCart{color:#fff;margin-left:5px;}
.prodInfo p span{float:right;}
.prodInfo p:after{content:"";display:block;clear:both;}

/* 리스트 바로주문 정보 하단고정 */
.fixProdsWrap{width:100%;position:fixed;background:#fafcff;left:0;bottom:-170px;border-top:1px solid #d6dff3;transition:all 0.3s;z-index:99;}
.fixProdsWrap.on{bottom:0;}
.listTg{width:60px;height:30px;background:#fafcff;position:absolute;left:50%;top:-30px;margin-left:-30px;border-radius: 30px 30px 0px 0px;text-align:center;line-height:30px;font-size:18px;border:1px solid #d6dff3;border-bottom:0;color:#656d9a;}
.fixProds{width:1200px;margin:20px auto;display:table;height:50px;}
.fixProds li{display:table-cell;vertical-align:middle;}
.fixPrice p{font-size:16px;font-weight:500;}
.fixPrice p span{font-size:28px;font-weight:800;}
.fixProds .btns{width:300px;display:table-cell;vertical-align:middle;font-size:0;text-align:right;}
.fixProds .btns a{display:inline-block;width:140px;text-align:center;line-height:40px;color:#fff;font-size:16px;border-radius:3px;}
.fixNum{font-size:0;width:142px;}
.fixNum input{width:50px;height:36px;vertical-align:bottom;border-radius:0;padding-left:0;text-align:center;}
.fixNum a{display:inline-block;width:36px;height:36px;text-align:center;line-height:36px;background:#e3ebf6;font-size:14px;color:#656d9a;}
.fixNum a:first-child{border-radius:3px 0px 0px 3px;}
.fixNum a:last-child{border-radius:0px 3px 3px 0px;}
.fixCart{height:150px;overflow-y:auto;background:#fff;border:1px solid #d6dff3;padding:0 10px;width:1200px;margin:0 auto 20px;}
.fixCart ul{width:100%;display:table;padding:10px;border-bottom:1px dashed #d6dff3;height:50px;box-sizing:border-box;}
.fixCart ul:last-child{border-bottom:0;}
.fixCart li{display:table-cell;vertical-align:middle;font-size:16px;}
.fixCartPrice{width:180px;}
.fixCartCount{font-size:0;width:150px;}
.fixCartCount input{width:50px !important;height:26px;vertical-align:bottom;border-radius:0;padding-left:0;text-align:center;}
.fixCartCount a{display:inline-block;width:26px;height:26px;text-align:center;line-height:26px;background:#e3ebf6;font-size:14px;color:#656d9a;}
.fixCartCount a:first-child{border-radius:3px 0px 0px 3px;}
.fixCartCount a:last-child{border-radius:0px 3px 3px 0px;}
.fixCartDel{width:30px;text-align:right;}
.fixCartDel a{font-size:16px;}

/* 리스트팝업 */
.quickOrderPop{position:fixed;z-index:998;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.quickOrderPop a.listPopClose{color:#aaa;position:absolute;top:50%;left:50%;width:30px;line-height:30px;z-index:9;text-align:center;margin-left:170px;margin-top:-150px;}
.quickPop{width:400px;height:300px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-200px;text-align:center;border:1px solid #ddd;}
.quickPop i{display:inline-block;width:60px;line-height:60px;border:1px solid #94d527;color:#94d527;border-radius:50%;font-size:30px;margin-top:40px;}
.quickPop p{margin-top:30px;color:#222;font-size:18px;}
.quickPop .btns{margin-top:30px;}
.quickPop .btns a{display:inline-block;padding:0 15px;line-height:40px;color:#fff;background:#666;border-radius:3px;transition:all 0.3s;}
.quickPop .btns a:hover{background:#464646;}
