@charset "utf-8"; 

/*******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://www.firstmall.kr
Creation Date : 2016-06-01
Modify Date : 2016-12-31
*******************************************/

/*----------------------------------*/
/* 구 버튼 스타일
/*----------------------------------*/

#buttons {padding:50px;text-align:center}

/* 버튼 설정 */
.btn,
.btn input ,
.btn a ,
.btn button {display:inline-block;overflow:visible;position:relative;margin:0;padding:0;border:0;background:url('../images/common/btnBg.gif') no-repeat;color:#333 !important;text-decoration:none !important;vertical-align:middle;white-space:nowrap;cursor:pointer}
.btn-plus button {display:inline-block;width:12px;height:12px;overflow:visible;position:relative;margin:0;padding:0;border:0;background:url('../images/common/icon_plus.gif') no-repeat;cursor:pointer}
.btn-minus button {display:inline-block;width:12px;height:12px;overflow:visible;position:relative;margin:0;padding:0;border:0;background:url('../images/common/icon_minus.gif') no-repeat;cursor:pointer}
.btn-plus.gray button {width:19px;height:19px;background:url('../images/common/btn_plus.gif') no-repeat; background-size:19px 19px; }
.btn-minus.gray button {width:19px;height:19px;background:url('../images/common/btn_minus.gif') no-repeat;background-size:19px 19px; }
/* //버튼 설정 */

/* 사이즈 설정 */
.small{padding-right:1px; background-position:right 0;}
.medium{padding-right:1px; background-position:right -100px;}
.large{padding-right:1px; background-position:right -200px;}
/* //사이즈 설정 */

/* 디테일 */
.small a,.small input,.small button{height:17px;padding:3px 7px 0;background-position:0 0;font-size:11px;line-height:15px;letter-spacing:-1px}
.medium a,.medium input,.medium button{height:20px;padding:5px 10px 0;background-position:0 -100px;line-height:18px;font-weight:600;letter-spacing:-1px}
.large a,.large input,.large button{height:25px;padding:7px 10px 0;background-position:0 -200px;line-height:20px;font-weight:600;letter-spacing:-1px}
.small input,.small button {height:20px;padding:0 7px;font-size:11px;line-height:20px}
.medium input,.medium button {height:25px;padding:0 10px 0 13px;line-height:25px}
.large input,.large button{height:31px;padding:0 13px;line-height:31px}
/* //디테일 */

/* 페이지 버튼 */
.btn .page{padding:4px 9px 0; font-size:12px !important;font-weight:700;color:#666;letter-spacing:-2px}
/* //페이지 버튼 */

/* 오버시 */
.small:hover{background-position:right -50px}
.medium:hover{background-position:right -150px}
.large:hover{background-position:right -250px}
.small:hover a,.small:hover input,.small:hover button{background-position:0 -50px;color:#ff3232}
.medium:hover a,.medium:hover input,.medium:hover button{background-position:0 -150px;color:#ff3232}
.large:hover a,.large:hover input,.large:hover button{background-position:0 -250px;color:#ff3232}
/* //오버시 */

/* 컬러 설정 */
.small.black{background-position:right -350px}
.medium.black{background-position:right -450px}
.large.black{background-position:right -550px}

.small.black a,.small.black input,.small.black button{background-position:0 -350px;color:#FFF !important}
.medium.black a,.medium.black input,.medium.black button{background-position:0 -450px;color:#FFF !important}
.large.black a,.large.black input,.large.black button{background-position:0 -550px;color:#FFF !important}
.small.black input,.small.black button{color:#FFF !important}
.medium.black input,.medium.black button{color:#FFF !important}
.large.black input,.large.black button{color:#FFF !important}

.small.black:hover{background-position:right -400px}
.medium.black:hover{background-position:right -500px}
.large.black:hover{background-position:right -600px}
.small.black:hover a,.small.black:hover input,.small.black:hover button{background-position:0 -400px;color:#DDD !important}
.medium.black:hover a,.medium.black:hover input,.medium.black:hover button{background-position:0 -500px;color:#DDD !important}
.large.black:hover a,.large.black:hover input,.large.black:hover button{background-position:0 -600px;color:#DDD !important}

.small.cyanblue{background-position:right -650px}
.medium.cyanblue{background-position:right -750px}
.large.cyanblue{background-position:right -850px}

.small.cyanblue a,.small.cyanblue input,.small.cyanblue button{background-position:0 -650px;color:#FFF !important}
.medium.cyanblue a,.medium.cyanblue input,.medium.cyanblue button{background-position:0 -750px;color:#FFF !important}
.large.cyanblue a,.large.cyanblue input,.large.cyanblue button{background-position:0 -850px;color:#FFF !important}
.small.cyanblue input,.small.cyanblue button{color:#FFF !important}
.medium.cyanblue input,.medium.cyanblue button{color:#FFF !important}
.large.cyanblue input,.large.cyanblue button{color:#FFF !important}

.small.cyanblue:hover{background-position:right -700px}
.medium.cyanblue:hover{background-position:right -800px}
.large.cyanblue:hover{background-position:right -900px}
.small.cyanblue:hover a,.small.cyanblue:hover input{background-position:0 -700px;color:#EEE}
.medium.cyanblue:hover a,.medium.cyanblue:hover input{background-position:0 -800px;color:#EEE}
.large.cyanblue:hover a,.large.cyanblue:hover input{background-position:0 -900px;color:#EEE}

.small.red{background-position:right -950px}
.medium.red{background-position:right -1050px}
.large.red{background-position:right -1150px}

.small.red a,.small.red input,.small.red button{background-position:0 -950px;color:#FFF !important}
.medium.red a,.medium.red input,.medium.red button{background-position:0 -1050px;color:#FFF !important}
.large.red a,.large.red input,.large.red button{background-position:0 -1150px;color:#FFF !important}
.small.red input,.small.red button{color:#FFF !important}
.medium.red input,.small.red button{color:#FFF !important}
.large.red input,.small.red button{color:#FFF !important}

.small.red:hover{background-position:right -1000px}
.medium.red:hover{background-position:right -1100px}
.large.red:hover{background-position:right -1200px}
.small.red:hover a,.small.red:hover input,.small.red:hover button{background-position:0 -1000px;color:#EEE}
.medium.red:hover a,.medium.red:hover input,.medium.red:hover button{background-position:0 -1100px;color:#EEE}
.large.red:hover a,.large.red:hover input,.large.red:hover button{background-position:0 -1200px;color:#EEE}

.btn.grayarrow {padding:0 15px; background-position:right -1240px}
.btn.grayarrow a,.btn.grayarrow input,.btn.grayarrow button{background-position:0 -1240px;letter-spacing:-1px;height:20px;padding:2px 7px 0;font-size:11px;line-height:20px; color:#333;}
.btn.grayarrow:hover {background-position:right -1240px}
.btn.grayarrow:hover a,.btn.grayarrow:hover input,.btn.grayarrow:hover button{background-position:0 -1240px;}

.btn.bluearrow {padding:0 15px; background-position:right -1270px}
.btn.bluearrow a,.btn.bluearrow input,.btn.bluearrow button{background-position:0 -1270px;letter-spacing:-1px;height:20px;padding:2px 7px 0;font-size:11px;line-height:20px; color:#fff !important}
.btn.bluearrow:hover {background-position:right -1270px}
.btn.bluearrow:hover a,.btn.bluearrow:hover input,.btn.bluearrow:hover button{background-position:0 -1270px; color:#eee !important}

.btn.bluegray {padding-right:2px; background-position:right -1300px}
.btn.bluegray a,.btn.bluegray input,.btn.bluegray button{background-position:0 -1300px;letter-spacing:-1px;height:27px;padding:2px 7px 0;font-size:11px;line-height:25px; color:#fff !important}
.btn.bluegray:hover {background-position:right -1300px}
.btn.bluegray:hover a,.btn.bluegray:hover input,.btn.bluegray:hover button{background-position:0 -1300px; color:#eee !important}
/* //컬러 설정 */

/* 아이콘설정(A태그에만 적용) */
.icon a{vertical-align:middle;}
.icon-right a {padding-right:5px;}
.medium .plus{width:20px;height:14px;background-position:0px -300px; vertical-align:middle; margin-top:-3px;}
.large  .plus{width:20px;height:14px;background-position:0px -300px; vertical-align:middle;}
.medium .pencle{width:20px;height:14px;background-position:-30px -300px; vertical-align:middle; margin-top:-3px;}
.large  .pencle{width:20px;height:14px;background-position:-30px -300px; vertical-align:middle;}
.medium .minus{width:20px;height:14px;background-position:-60px -300px; vertical-align:middle; margin-top:-3px;}
.large  .minus{width:20px;height:14px;background-position:-60px -300px; vertical-align:middle;}
.medium .check{width:20px;height:14px;background-position:-90px -300px; vertical-align:middle; margin-top:-3px;}
.large  .check{width:20px;height:14px;background-position:-90px -300px; vertical-align:middle;}
.medium .people{width:20px;height:14px;background-position:-120px -300px; vertical-align:middle; margin-top:-3px;}
.large  .people{width:20px;height:14px;background-position:-120px -300px; vertical-align:middle;}
.medium .config{width:20px;height:14px;background-position:-150px -300px; vertical-align:middle; margin-top:-3px;}
.large  .config{width:20px;height:14px;background-position:-150px -300px; vertical-align:middle;}
.medium .search{width:20px;height:14px;background-position:-180px -300px; vertical-align:middle; margin-top:-3px;}
.large  .search{width:20px;height:14px;background-position:-180px -300px; vertical-align:middle;}
.large  .arrowleft{background:url('../images/common/btn_arrow_l.gif') no-repeat;width:15px;height:12px;vertical-align:middle; background-position:0px 1px;}
.large  .arrowright{background:url('../images/common/btn_arrow_r.gif') no-repeat;width:15px;height:12px;vertical-align:middle; background-position:10px 1px;}
.small  .checkleft{margin-left:-3px;background:url('../images/common/icon_check.gif') no-repeat;width:13px;height:7px;vertical-align:middle;}
/* //아이콘설정 */

/* Drop */
.drop {background-position:0 -1240px}
.drop.hover,
.drop:hover{background-position:0 -1271px}
.drop.hover a,.drop.hover input,
.drop:hover a,.drop:hover input {background-position:right -1271px;color:#fff !important;}
.drop a,.drop input{height:20px;padding:3px 20px 2px 10px;background-position:right -1240px;font-size:11px;line-height:15px;letter-spacing:-1px; font-weight:normal;}
.drop a {padding:0px 20px 0px 10px; line-height:20px;}

/* Drop 확장형(a태그만 사용가능) */
.drop_multi_main {background-position:0 -1240px}
.drop_multi_main:hover{background-position:0 -1271px}
.drop_multi_main:hover a{background-position:right -1271px;color:#fff !important;}
.drop_multi_main a {height:20px;padding:0px 5px 0px 10px; line-height:20px;background:none;font-size:11px;letter-spacing:-1px; font-weight:normal;}
.drop_multi_sub {background:url('../images/common/select_bg_back.gif') no-repeat; background-position:right 0px}
.drop_multi_sub:hover{background-position:right -20px}
.drop_multi_sub:hover a{background-position:right -1271px;color:#fff !important;}
.drop_multi_sub a {height:20px;padding:0px 20px 0px 0px; line-height:20px;background-position:right -1240px;font-size:11px;line-height:15px;letter-spacing:-1px; font-weight:normal;}

table.mqs-menu {border:0px;border-collapse:collapse;}
table.mqs-menu td {background-color:#fbfbfb; border:1px solid #dfdfe4; border-bottom:1px solid #c5c7ce;}
table.mqs-menu td.selected {background-color:#fff; border-bottom:0px;}
table.mqs-menu td a {display:inline-block; padding:4px 0px; width:135px; text-align:center; color:#9194a1}
table.mqs-menu td.selected a {font-weight:600; color:#333}

.black_btn {border:0px; background-color:#000; color:#fff; font-family:dotum; font-size:11px; height:20px; line-height:20px; letter-spacing:-1px; padding:0px 5px; cursor:pointer; vertical-align:middle;}
.gray_btn {border:0px; background-color:#777; color:#fff; font-family:dotum; font-size:11px; height:20px; line-height:20px; letter-spacing:-1px; padding:0 5px; cursor:pointer}
.white_btn {display:inline-block; height:20px; line-height:20px; background:url('../images/common/btn_ps_bg.gif') no-repeat right top; padding:0 8px 0 0;}
.white_btn button,.white_btn a,.white_btn input[type='button'] {font-size:11px; color:#515151; border:none; margin:0px; padding:0 0 0 8px; height:20px; line-height:20px; background:url('../images/common/btn_ps_bg.gif') no-repeat left top;}
  

/*----------------------------------*/
/* 신규 버튼 스타일
/*----------------------------------*/

/*.bbs_btn, */.btnblue, .bbs_btn_gray, .btngray {border:1px solid #ccc; background:#fff; color:#666; padding:6px 7px 3px; font-size:11px; letter-spacing:-1px; cursor:pointer;}
.btn_chg, .btn_sch, .bbs_btn.btn_sch, .btn_gray, .btn_move {display:inline-block; -webkit-box-sizing:border-box; box-sizing:border-box; padding:5px 10px; min-width:80px;  line-height:1; text-align:center; font-size:12px; letter-spacing:-1px; cursor:pointer; vertical-align:middle; transition:all linear 0.5s;}
.btn_chg.large, .btn_sch.large, .btn_gray.large, .btn_move.large {padding:12px 10px; min-width:150px; font-size:14px; font-weight:600;}
.btn_chg.medium, .btn_sch.medium, .btn_gray.medium, .btn_move.medium {padding:10px 10px; min-width:100px; font-size:13px; font-weight:600;}

.btn_ntalk {margin-right:10px; margin-top:10px; margin-bottom:-15px; z-index:999;}
.btn_ntalk img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.4s;
    -moz-transition:.4s;
    -ms-transition:.4s;
    -o-transition:.4s;
    transition:.4s;
}
.btn_ntalk:hover img {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
}

.btn_chg2.medium, .btn_sch2.medium, .btn_gray2.medium, .btn_move2.medium {
font-size:16px; font-weight:bold;
vertical-align:top; 
width:186px;
height:60px;
line-height:60px;
border:0 none; 
display:block;
float:left; 
text-align:center; 
}

.btn_pet { font-size:20px; font-family: 'NanumSquare'; color:#fff !important; background: #4cb78d; vertical-align:top; width:160px; 
border:2px solid #4cb78d; border-radius: 5px; display:block; float:left; text-align:center; margin:5px; padding-top:10px; padding-bottom:10px; }

.btn_pet:hover { font-size:22px; font-family: 'NanumSquare'; color:#4cb78d !important; background: #fff;
}

.btn_pet2 { font-size:20px; font-family: 'NanumSquare'; color:#fff !important; background: #4cb78d; vertical-align:top; width:105px; 
border:2px solid #4cb78d; border-radius: 5px; display:block; float:left; text-align:center; margin-right:10px; padding-top:10px; padding-bottom:10px; }

.btn_pet2:hover { font-size:22px; font-family: 'NanumSquare'; color:#4cb78d !important; background: #fff;
}

.btn_chg.small, .btn_sch.small, .btn_gray.small, .btn_move.small, .bbs_btn {padding:6px 7px 3px; min-width:0; font-family:'Dotum' !important; font-size:11px;}
.btn_chg.icon, .btn_sch.icon, .btn_gray.icon, .btn_move.icon, .btn_red.icon {display:inline-block; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; padding:3px 2px 0; min-width:0; font-family:'Dotum' !important; font-size:11px; cursor:default; line-height:1.0;}
.btn_red.icon {background:#fd6666; color:#fff;}

/* 크롬핵 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.btn_chg.small, .btn_sch.small, .btn_gray.small, .btn_move.small, .bbs_btn {padding:4px 7px;}
.btn_chg.icon, .btn_sch.icon, .btn_gray.icon, .btn_move.icon, .btn_red.icon {padding:1px 2px 0;}
}

.btn_chg {border:1px solid #6a83c8; background:#778ece; color:#fff;}
.btn_sch, .bbs_btn.btn_sch {border:1px solid #58668d; background:#6f7b9c; color:#fff;}
.btn_gray {border:1px solid #969696; background:#aaa; color:#fff;}
.btn_move, .bbs_btn {border:1px solid #ccc; background:#fff; color:#666;}

.btn_chg:hover {background:#6a83c8;}
.btn_sch:hover, .bbs_btn.btn_sch:hover {background:#58668d;}
.btn_gray:hover {background:#969696;}
.btn_move:hover, .bbs_btn:hover {border:1px solid #999;}

.btn_chg.icon, .btn_chg.icon:hover {border:1px solid #8da3df; background:#8da3df;}
.btn_sch.icon, .btn_sch.icon:hover {border:1px solid #808cae; background:#808cae;}
.btn_gray.icon, .btn_gray.icon:hover {border:1px solid #B9B9B9; background:#B9B9B9;}
.btn_move.icon, .btn_move.icon:hover {border:1px solid #ddd; background:#fff; color:#888;}

a.btn_chg, a.btn_sch, a.btn_gray, a.btn_move {text-decoration:none; vertical-align:middle;}
a.btn_chg.large, a.btn_sch.large, a.btn_gray.large, a.btn_move.large {}
a.btn_chg.medium, a.btn_sch.medium, a.btn_gray.medium, a.btn_move.medium {}
a.btn_chg.small, a.btn_sch.small, a.btn_gray.small, a.btn_move.small {min-width:0;}
a.btn_chg, a.btn_sch, a.btn_gray {color:#fff !important;}
a.btn_move {color:#666 !important;}


/* 버튼 위치 - 기존스킨에도 포함 */
.btn_wrap {margin-top:40px; text-align:center;}
.float_wrap {zoom:1;}
.float_wrap:after {clear:both; display:block; content:'';}
.float_wrap > li {float:right; width:12%;height:54px; border-left:1px solid #e9e9e9; box-sizing:border-box; }
.float_wrap > li:first-child {float:left; width:88%; border-left:0 none;  }
.float_wrap > li .list_view_select1{height:50px;line-height:50px;}
.float_wrap2 {zoom:1;}
.float_wrap2:after {clear:both; display:block; content:'';}
.float_wrap2 > li {float:right; width:40%;  box-sizing:border-box; }
.float_wrap2 > li:first-child {float:left; width:60%; border-left:0 none;  }


.bbsbtn_wrap {margin-bottom:10px; zoom:1;}
.bbsbtn_wrap:after {clear:both; display:block; content:'';}
.bbsbtn_wrap > li {float:right; width:20%; text-align:right;  }
.bbsbtn_wrap > li:first-child {float:left; width:80%; text-align:left;}

.bbsbtn_wrap2 {zoom:1; clear:both; }
.bbsbtn_wrap2:after {clear:both; display:block; content:'';}
.bbsbtn_wrap2 > li {float:left; width:60%;}
.bbsbtn_wrap2 > li:first-child {float:left; width:20%; padding-top:15px;}
.bbsbtn_wrap2 > li:last-child, .bbsbtn_wrap2 > li.last {float:right; width:20%; padding-top:20px; text-align:right;}

.bbsbtn_wrap3 {margin-top:20px; zoom:1;}
.bbsbtn_wrap3:after {clear:both; display:block; content:'';}
.bbsbtn_wrap3 > li {float:right; width:49%; text-align:right;}
.bbsbtn_wrap3 > li:first-child {float:left; width:49%; }