@charset "utf-8";
/*font*/
@import '/Css/Icons.css';
@import '/Css/Fonts/nanumgothic.css';
@import './reset.css';




/*레이이아웃&메인*/
/*대표색상 #1490d7*/



body{height:100%;background:url(/M_User/image/bodyBg.jpg) top center no-repeat; background-size:auto 100%; font-size:14px;word-break: break-all;}
body.bg-no{background:#fff}
.wrap-area{height:100%; background:url(/M_User/image/over-bg.png) top left repeat;}
.wrap-area.bg-no{background:#fff}



/*      Layout css
----------------------------*/
header{width:100%;height:50px; border-bottom:1px solid #dee3eb; position:absolute;top:0px; left:0px; background:#fff;}
header h1{text-align:center; }
header h1 img{width:120px; margin-top:8px;}
header a.arrow-left{position:absolute; top:0px; left:0px; display:block; height:50px; line-height:53px; padding:0px 15px; font-size:25px;}
header a.user{position:absolute; top:0px; right:0px; display:block; height:50px; line-height:53px; padding:0px 15px; font-size:25px;}
header a i{position:Relative; top:2px;}


.mainVisual-area{padding:60px 10px 60px; height:100%; box-sizing:border-box; max-width:700px; margin:0 auto; }
.subContent-area{padding:15px 15px 65px; max-width:700px; margin:0 auto; box-sizing:border-box; }
 @media screen and (max-width:320px){
.mainVisual-area{padding:60px 5px 60px; }
}

.box1-area{width:50%; height:23%; float:left}
.box1-area .box-con{width:100%;height:100%; border:5px solid #fff; border-radius:10px;position:relative; box-sizing:border-box;}

.box2-area{width:50%; height:23%; float:left}
.box2-area .box-con{height:100%; background:#f41c54; border:5px solid #f41c54; border-radius:10px;position:relative; box-sizing:border-box;}

.box3-area{width:50%; height:23%; float:left}
.box3-area .box-con{height:100%; background:#ffff6d; border:5px solid #ffff6d; border-radius:10px;position:relative; box-sizing:border-box;}

.box4-area{width:50%; height:23%; float:left}
.box4-area .box-con{width:100%;height:100%;background:#fff; border:5px solid #fff; border-radius:10px;position:relative; box-sizing:border-box;}

.pd5{display:block; padding:5px;height:100%;box-sizing:border-box;}

.box-con .title{position:absolute;width:100%; top:10px; left:0px; color:#fff;}
.box-con .title h2{float:left; padding-left:10px;font-size:16px; font-weight:bold }
.box-con .title h2:after{content:">";position:absolute;top:3px; right:10px; font-size:14px;}
.box-con .number{position:absolute; bottom:5px; right:10px; color:#fff;}
.box-con .number strong{font-family: Tahoma,Sans-serif;font-size:30px; }
.box3-area .box-con .title, .box3-area .box-con .number,.box4-area .box-con .title, .box4-area .box-con .number{color:#333}
.box3-area .box-con .number strong{font-size:25px;}

.box5-area{width:100%; height:180px; }
.box5-area .box-con{height:100%; position:relative; box-sizing:border-box; padding:5px; }
.box5-area .box-con .title{position:absolute;width:100%; top:5px; left:5px; color:#fff;font-family: Tahoma,Sans-serif; font-size:18px;}
.box5-area .box-con .title a{ color:#fff;}
.box5-area .box-con ul{margin:25px 0px 10px;}
.box5-area .box-con ul li{width:100%; border-bottom:1px solid #7f7f7f;}
.box5-area .box-con ul li a{display:block;padding:7px 0px; }
.box5-area .box-con ul li a:after{content:""; display:block; clear:both}
.box5-area .box-con ul li a p{ float:left; color:#fff; width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.box5-area .box-con ul li span{float:right; color:#fff; font-size:12px;}

.box6-area{width:100%; height:12%;  }
.box6-area .box-con{display:table; width:100%;height:100%; position:relative; box-sizing:border-box; padding:5px; border:5px solid #f5f5d9; border-radius:25px;}
.box6-area .box-con a{display:table-cell; text-align:center; color:#f5f5d9; vertical-align:middle}



footer{ width:100%;min-height:50px; position:fixed; bottom:0px; left:0px;  background:#404649;}
footer ul.bot_menu{}
footer ul.bot_menu li{float:left; width:20%;}
footer ul.bot_menu li a{display:block; height:50px; text-align:center; color:#fff}
footer ul.bot_menu li a i{padding:9px 0px 3px; display:block; font-size:16px; color:#fff}


/* btn */
ul.btnGroup{}
ul.btnGroup li{}
ul.btnGroup li a{display:inline-block}
ul.btnGroup.mg{display:table; margin:30px auto;}
ul.btnGroup.mg li{float:left; margin:0px 5px;}
ul.btnGroup.mg li a{display:inline-block}

a.btn{display:block; width:100%; height:32px; line-height:32px; text-align:center; background:#5a6063;color:#fff; vertical-align:middle}
a.btn:hover{background:#424547; }

a.btnSmall{display:inline-block; border:1px solid #1490d7; padding:2px 5px 2px; border-radius:3px; color:#1490d7;background:#fff; line-height:29px;
font-size:14px;vertical-align:middle}
a.btnSmall:hover{background:#1490d7; color:#fff;}
table th a.btnSmall, table td a.btnSmall{font-size:12px;padding::2px 5px 2px;}

a.btnBig{display:inline-block; border:1px solid #1490d7;  padding:10px 5px 10px; border-radius:3px; color:#1490d7;background:#fff; line-height:1.5em; font-size:18px;
width:100%;text-align:center;}
a.btnBig:hover{background:#1490d7; color:#fff;}

a.bg{background:#1490d7;color:#fff;}
a.bg:hover{border:1px solid #0069a5; background:#0069a5}

a.bgDark{background:#636363;border:1px solid #636363;color:#fff;}
a.bgDark:hover{border:1px solid #414141; background:#414141}
a.bgRed{background:#f02828;border:1px solid #f02828;color:#fff;}
a.bgRed:hover{border:1px solid #c01111; background:#c01111}
a.Yellow{background:none;border:1px solid #ffba31;color:#fff;}
a.Yellow:hover{border:1px solid #da960e; background:#ffba31;}
a.Gray{background:none;border:1px solid #ccc;color:#333;}
a.Gray:hover, a.Gray.active{border:1px solid #ccc; background:#dadada;color:#333;}

a.naver{background:#3ca74a;  color:#fff; border:1px solid #3ca74a; }
a.naver:hover{background:#2f8b3b;  color:#fff;}
a.facebook{background:#1183ba;  color:#fff; border:1px solid #1183ba; }
a.facebook:hover{background:#0b6996;  color:#fff;}

/* input */
input {transition: all 0.3s ease 0s; padding:6px 0px;}
input[type="text"],input[type="password"],input[type="date"],input[type="url"],input[type="search"],input[type="text"],input[type="email"],input[type="time"],input[type="text"],
.form-control, textarea, textarea.form-control, select{
height: 35px;border: 1px solid #dadada;border-radius: 0;box-shadow: none;padding-left: 5px;background:#fafafa;vertical-align:middle}
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="email"]:focus,input[type="time"]:focus,input[type="text"]:focus,
.form-control:focus, textarea:focus, textarea.form-control:focus {
box-shadow: none;outline: 0;border-color: #1490d7;/*클릭시보더색상*/}
textarea.form-control{height:auto; padding:5px;}
input[type="submit"]:focus {outline: 0;}
input[type="checkbox"]{height: 13px;}
.form-control-area{padding:7px 0px; overflow:hidden}
.form-control-area label{display:block; padding-bottom:5px; font-weight:bold; font-size:14px;}
.form-control-area label.radio{font-weight:normal;}
.form-control-area span{display:inline-block; padding:3px 0px; margin-right:10px;}
.form-control-area .left{display:inline-block; width:70%;}
.form-control-area .right{display:inline-block; width:29%;}
.form-control-area input[type=radio]{position:Relative; top:4px;}
.form-control-area .input-btn{position:relative; padding-right:70px;}
.form-control-area .input-btn a{position:absolute;right:0px;}



/* table */
.table_list{padding-bottom:15px;}
.table_list h3{display:block; padding-bottom:5px; font-weight:bold}
.table_list h3 a.btnSmall{line-height: 16px; position:Relative; top:-5px; margin-left:2px;}
.table_list table{border-top:2px solid #8fa1aa;}
.table_list table th{background-color:#f8f8f8; border:1px solid #dee3eb; font-weight:bold; text-align:left; padding:10px; width:30%; font-weight:100}
.table_list table td{ border:1px solid #dee3eb;padding:10px; line-height:1.5em; font-size:14px; position:Relative; }
.table_list table td .flag{width:17px;position:relative; top:2px;}
.listInTd table{border-top:0px;}
.listInTd table th{border:0px; padding:2px; text-align:left; width:28%;}
.listInTd table td{border:0px; padding:2px; padding-left:10px;}
.listInTd table td a{text-decoration:underline}

.table_write{border-top:1px solid #8fa1aa;border-bottom:1px solid #8fa1aa;  background:#fff; margin-bottom:15px;}
.table_write table th, .table_write table td{ border-bottom:1px solid #dee3eb;padding:10px 0px; line-height:1.5em; font-size:13px; position:Relative; }
.table_write table th{background-color:#f8f8f8; border-right:1px solid #dee3eb; font-weight:bold; text-align:center; padding:10px; }
.table_write table th.tl{text-align:left;padding:10px 15px;}
.table_write.bdtb0{border-top:1px solid #dee3eb;border-bottom:1px solid #dee3eb; }
.table_write table th.bd0{border-right:0px;}
.table_write table td.bdr{border-right:1px solid #dee3eb; }
.table_write .bdt{border-top:1px solid #8fa1aa}


/* Sub */
.pageTitle-area{height:40px; background:#496f91;margin-top:50px; text-align:center; line-height:40px; color:#fff; font-size:16px;position:Relative; }
.pageTitle-area a{position:absolute; top:0px; left:0px; display:block; height:40px; padding:0px 17px; font-size:25px; color:#fff; line-height:40px;}
.pageTitle-area a i{position:Relative; top:3px;}

/*로그인*/
.loginPage-area{width:250px; margin:10% auto}
.loginPage-area h3{font-size:25px; text-align:center; padding-bottom:20px; border-bottom:1px solid #dee3eb;margin-bottom:20px;}
.loginPage-area input{height:40px;margin-bottom:5px;font-size:14px; }
.loginPage-area form a{height:40px; line-height:40px;font-size:14px;margin-bottom:5px;}
.loginPage-area .btnGroup{margin-top:20px;}
.loginPage-area table{margin-top:30px;}
.loginPage-area td{padding-bottom:10px;}

/*탭*/
.menu_tab{margin-bottom:20px;}
.menu_tab ul{}
.menu_tab ul li{float:left; width:49%; margin-right:1px;}
.menu_tab ul li.last-child{margin-right:0px;}
.menu_tab ul li.w3{width:33%;}
.menu_tab ul li a{display:block; padding:10px; font-weight:bold; font-size:14px; text-align:center; background:url(/image/common/myMenu-bg.png) top left repeat-x; 
border:1px solid #979eb7;box-sizing:border-box;color:#999;}
.menu_tab ul li.active a {border:1px solid #333; background:#f5f5f5; color:#333;}
.menu_tab ul li a:hover{background:#fff;}

/*search*/
.search-area{padding-bottom:12px;}
.search-area .fa{font-size:25px;color:#1490d7;position:relative; top:2px;}
.search-area .flag{width:25px;position:relative; top:3px;}
.search-area .search-con.pdr45{position:relative; padding-right:45px;}
.search-area .search-con.pdr45 .search-btn{position:absolute; right:0px;}
.search-area .search-con.pdr85{position:relative; padding-right:85px;}
.search-area .search-con.pdr85 .search-btn{position:absolute; right:40px;}
.search-area .search-con.pdr85 .write-btn{position:absolute; right:0px; width:35px; text-align:center}
.search-area .search-con.tc{display:table; margin:0 auto}
.search-area .search-con span{float:left; display:block; margin-right:5px;}
.search-area .search-con .txt{ line-height:32px;}


/* list-area */
.list-area{border-bottom:1px solid #dee3eb; padding:15px 0px;}
.list-area.first{border-top:1px solid #dee3eb;}
.list-con{padding-right:65px;position:relative; min-height:65px;}
.list-con:after{display:block;clear:both;content:"";}
.list-con .proImg{position:absolute; top:0px; right:0px;}
.list-con p{ font-size:15px; line-height:1.25em}
.list-con p strong{display:block; padding-bottom:5px;}
.list-con p .flag{width:17px; position:relative; top:2px;}
.list-con .date{font-size:12px; color:#a6a6a6; display:block; padding-top:7px;}
.list-area.check{padding-left:25px; position:Relative}
.list-area.check .list-con{padding-right:0px;}
.list-area input[type="checkbox"]{position:absolute; top:15px; left:0px; z-index:999}
.list-area .case{padding-top:10px;}
.list-area .case .btnSmall{margin-bottom:3px;}
.list-area .no{font-size:11px;position:absolute; top:18px; left:0px; z-index:999}
.list-area.img-no .list-con{padding-right:0px;}
.list-area .list-con .cpn-btn{position:absolute; right:0px;bottom:0px;}

/* list-area2 */
.notice-area{ padding:15px 0px;border-bottom:1px solid #dee3eb;}
.notice-area.first{border-top:1px solid #dee3eb;}
.notice-area .con{}
.notice-area  p{ font-size:16px; line-height:1.25em}
.notice-area .date{font-size:12px; color:#a6a6a6; display:block; padding-top:7px;}


/*결제하기*/
.pay-area{height:75px;position:Relative;border:5px solid #dee3eb;}
.pay-area .pay-t{position:absolute; top:10px; left:10px;font-size:14px;}
.pay-area .pay-p{position:absolute; bottom:10px;right:10px;font-size:20px;}
.pay-area .pay-p strong{font-size:35px; font-family: verdana !important;}


.layerBox-area,.layerBox-area2{position:fixed; width:100%; height:100%; top:0px; left:0px;background:url(/M_User/image/over-bg.png) top left repeat; z-index:999; padding:10px; box-sizing:border-box}
.ntDetCon{width:100%; height:100%; background:#fff; position:Relative}
.popup-area{height:100%; background:#fff; overflow-y:scroll;}
.popup-area .title{height:40px; background:#1490d7; text-align:center; line-height:40px; font-size:16px; font-weight:bold;color:#fff}
.popup-area .con{padding:10px;}
a.popCloseBtn,a.popCloseBtn2{position:absolute; top:0px; right:10px; display:block; width:20px; height:40px; line-height:40px; color:#fff; font-size:18px;}
a.popCloseBtn img,a.popCloseBtn2 img{width:18px; position:Relative; top:10px;}

.pageNumbersOuterWrapper2{text-align:center; padding-top:20px;}
.pageNumbersOuterWrapper2 a.pageNumber{padding:0px 7px;}
.pageNumbersOuterWrapper2 a.currentPageNumber{border:1px solid #ccc; padding:2px 7px;}

.mobile-menu{width:200px; height:100%;background:rgba(0,0,0,0.9);position:fixed; top:0px; left:-200px; z-index:99999;}
.mobile-menu .title{height:50px; border-bottom:1px solid #636363; color:#fff; line-height:50px; padding-left:10px; position:Relative}
.mobile-menu .title .menu-x{display:block;width:45px; height:50px; line-height:50px; text-align:center; position:absolute; top:0px; right:0px;
color:#fff; font-size:25px;}
.mobile-menu .title .menu-x i{position:Relative; top:2px;}
.mobile-menu ul{}
.mobile-menu ul li{border-bottom:1px solid #636363; }
.mobile-menu ul li a{display:block; height:40px; line-height:40px; padding:0px 10px; color:#fff}
.mobile-menu ul li a:after{content:">"; float:right; color:#aeaeae}

.comment{}
.comment ul{margin-top:5px;}
.comment ul li{padding:10px 0px; border-top:1px solid #ddd}
.comment ul li p{padding-top:5px;}
.comment .pdr45{padding-right:45px; position:relative; padding-top:10px;}
.comment .comment-btn{position:absolute; bottom:5px; right:0px;}


/* messages-container 주문건 문의내역*/
.messages-container{background-color:#fff;margin-top:5px; border-top:2px solid #8fa1aa;padding:5px 0px 10px; border-bottom:1px solid #ddd}

.message-bubble{display:block;position:relative;padding-bottom:15px; overflow:hidden;}
.message-bubble .message-avatar{position:absolute;left:0;top:0; width:40px; height:40px; background:#eee; color:#fff; line-height:40px; text-align:center; border-radius:50%; font-size:12px;color:#333}
.message-bubble .message-avatar img{width:40px;height:40px}
.message-bubble .message-text{margin-left:50px;background-color:#f4f4f4;border-radius:4px;padding:10px 10px;position:relative;display:inline-block;float:left;line-height:1.25em;font-size:12px; }
.message-bubble.me .message-text{float:right;}
.message-bubble .message-text p{font-size:12px;padding:0;margin:0;line-height:20px}
.message-bubble.me .message-text p{color:#fff}
.message-bubble.me .message-avatar{left:auto;right:0;background:#66676b; color:#fff}
.message-bubble.me .message-text{margin-left:0;margin-right:50px;background-color:#66676b;color:#fff;position:relative}
.message-bubble .message-text:before{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #f4f4f4;left:-6px;right:auto;top:15px;position:absolute}
.message-bubble.me .message-text:before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #66676b;border-right:none;right:-6px;left:auto}
.message-time-sign{text-align:center;display:block;position:relative;margin-bottom:15px;}
.message-time-sign:before{content:"";height:1px;background-color:#eaeaea;display:block;max-width:100%;margin:0 auto;position:relative;top:14px;z-index:10}
.message-time-sign span{background-color:#fff;font-size:12px;color:#888;z-index:11;position:relative;padding:0 10px}
.message-reply{position:relative}
.message-reply .message-btn{position:absolute; bottom:5px; right:0px;}

.typing-indicator{width:auto;height:24px;padding-top:8px}
.typing-indicator span{height:8px;width:8px;float:left;margin:0 1px;background-color:#a0a0a0;display:block;border-radius:50%;opacity:.4}
.typing-indicator span:nth-of-type(1){animation:1s blink infinite .33333s}
.typing-indicator span:nth-of-type(2){animation:1s blink infinite .66666s}
.typing-indicator span:nth-of-type(3){animation:1s blink infinite .99999s}

/* messages-container 주문건 문의내역 End*/

/* Common */
.cfx{zoom:1;}
.cfx:after{display:block;clear:both;content:"";}
.blind {position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;font-size:1px;line-height:1px;visibility:hidden;}
.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.fl {float:left;}
.fr {float:right;}
.tl{text-align:left}
.tr {text-align:right;}
.tc {text-align:center}
.vat{vertical-align:top}
.spacing {letter-spacing:normal !important;}
.hide {display:none;}
.show {display:block;}
.full{width:100%;}
.half{width:50%;}
.half2{width:49%;}
.half-x{width:35%;}
.dtPic{width:30%;}
.fred{color:#ff0000}
.fblue{color:#005ffd}
.fblack{color:#333}
.fyellow{color:#ffba31}
.fpoint{color:#1490d7;}
.wd400{width:400px;}
.wd300{width:300px;}
.wd200{width:200px;}
.wd150{width:150px;}
.wd100{width:100px;}
.wd70{width:70px;}
.wd50{width:50px;}
.wd10{width:10px;}
.pdr5{padding-right:5px;}
.pd10{padding:10px;}
.mt5{margin-top:5px;}
.mt15{margin-top:15px;}
.prt3{position:relative; top:3px;}
.prtm3{position:relative; top:-3px;}
.text{border-bottom:0px solid #dee3eb; padding-bottom:10px;margin-bottom:5px; line-height:1.5em; font-size:14px;}
td .ex{padding-top:5px;line-height:1.4em; font-size:12px; display:block}
label{margin-right:10px; display:inline-block}
h3.title{font-size:16px; font-weight:bold; padding-bottom:10px; position:relative; padding-left:15px;}
h3.title:before{content:"■"; font-size:11px; padding-right:5px;position:absolute; top:2px; left:0px; color:#1490d7}
.underline{text-decoration:underline}
.lineTh{text-decoration:line-through}
.fs20{font-size:20px;}
.fs18{font-size:18px;}
.fs16{font-size:16px;}
span.on{display:inline-block;padding:3px 8px; width:50px; text-align:center;background:#1490d7; color:#fff;border:1px solid #1490d7;}
span.off{display:inline-block;padding:3px 8px; width:50px; text-align:center; background:#e32e2e; color:#fff;}
.pat{position:absolute; top:0px;left:0px;}
.new_bg{display:inline-block;background:url(/image/common/new_bg.gif) top left repeat; color:#333}
.tip-text { position: Relative;padding-left: 10px; font-size: 12px;line-height: 18px;margin-top:5px;}
.tip-text span {position: absolute;top: auto;left: 0px;color: red;}


/*라디오체크박스*/


input.checkradios{display:inline-block;width:20px; height:20px; cursor:pointer;position:Relative; background:#fff; border-radius:0px;}
input.checkradios-circle{display:inline-block;width:20px; height:20px; cursor:pointer;position:Relative; background:#fff; }

input.checkradios-small{display:inline-block;width:15px; height:15px; cursor:pointer;position:Relative; background:#fff; }


/*checkbox*/
.checkbox{display:inline-block;margin-bottom:0; margin-right:3px}
.checkbox input{padding:0;height:initial;width:initial;margin-bottom:0;display:none;cursor:pointer}
.checkbox label{position:relative;cursor:pointer;padding-left:24px;line-height:25px;padding-top:0px;}
.checkbox label span.checkbox-icon{content:'';-webkit-appearance:none;background-color:transparent;border:2px solid #b4b4b4;height:15px;width:15px;display:inline-block;position:relative;vertical-align:middle;
cursor:pointer;margin-right:5px;border-radius:4px;transition:.3s;position:absolute;left:0;top:3px}
.checkbox input+label span.checkbox-icon:after{position:absolute;top:2px;left:0;right:0;margin:0 auto;opacity:0;content:'';display:block;width:6px;height:5px;border:solid #fff;border-width:0 2px 2px 0;
transform:scale(.5) rotate(45deg);transition:all .35s cubic-bezier(.3,-.41,.19,2),opacity .3s}
.checkbox input:checked+label span.checkbox-icon{border-color:#66676b;background-color:#66676b}
.checkbox input:checked+label span.checkbox-icon:after{transform:scale(1) rotate(45deg);opacity:1}


a.blog-post-info,.blog-post-info,.blog-post-date{font-size:13px;color:#888;margin-bottom:10px;display:inline-block;background-color:#f0f0f0;border-radius:4px;line-height:20px;padding:4px 10px;margin-right:3px;
transition:.3s}
a.blog-post-info i,.blog-post-info i,.blog-post-date i{position:Relative; top:2px}
a.blog-post-info:hover{color:#fff;background-color:#66676b}


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

.join_agreeWp{padding:10px 0 0;}
.join_agreeWp .checkbox{margin-bottom:5px;}
.agree {height:201px; margin-bottom:10px; border:1px solid #d5d5d5; line-height:27px; padding:20px; overflow-x:hidden; overflow-y:auto;}