@charset "UTF-8";

/* 공통  버튼 */
.cont_btn_list_area .list {margin-top:30px;font-size: 0;}
.cont_btn_list_area .list.mb {margin:0 auto 30px auto}
.cont_btn_list_area .list.tr {text-align: right;}
.cont_btn_list_area .list.tc {text-align: center;}
.cont_btn_list_area .list.tl {text-align: left;}
.cont_btn_list_area .list li {display: inline-block; margin: 0 10px 0 0;vertical-align:top}
.cont_btn_list_area .list li:last-child {margin: 0;}
.cont_btn_list_area .list li .btn {display: inline-block; min-width: 160px;font-size:0;background-color: #616161; text-align: center; border-radius: 5px;position:relative;z-index:1;overflow:hidden;transition:0.3s}
.cont_btn_list_area .list li .btn::before {display:block;width:100%;height:0;content:"";position:absolute;top:0;left:0;z-index:-1;transition:height 0.2s linear}
.cont_btn_list_area .list li .btn .text {display: block; font-size: 1rem; line-height: 54px; color: #ffffff;}
.cont_btn_list_area .list li .btn.green {background-color: #33b293;}
.cont_btn_list_area .list li .btn.red {background-color: #ed1c24;}
.cont_btn_list_area .list li .btn.blue {background-color: #2089ff;}
.cont_btn_list_area .list li .btn.yellow {background-color: #edbf1c;}
.cont_btn_list_area .list li .btn.gray {background-color: #555;}
.cont_btn_list_area .list li .btn.gray2 {background-color: #848690;}
.cont_btn_list_area .list li .btn.black {background-color: #191919;}
.cont_btn_list_area .list li .btn.icon01 {padding:0 30px;text-align:left}
.cont_btn_list_area .list li .btn.icon01 .text {background-image:url(/images/home/kor/user/board/download_icon.png);background-repeat:no-repeat;background-position:right center}
.cont_btn_list_area .list li .btn.icon02 {padding:0 30px;text-align:left}
.cont_btn_list_area .list li .btn.icon02 .text {background-image:url(/images/home/kor/user/board/talk_icon.png);background-repeat:no-repeat;background-position:right center}
.cont_btn_list_area .list li .btn:hover, 
.cont_btn_list_area .list li .btn:focus {height:100%;background-color:#484848}
.cont_btn_list_area .list li .btn.green:hover, 
.cont_btn_list_area .list li .btn.green:focus {background-color:#187760}
.cont_btn_list_area .list li .btn.red:hover, 
.cont_btn_list_area .list li .btn.red:focus {background-color:#b1060c}
.cont_btn_list_area .list li .btn.blue:hover, 
.cont_btn_list_area .list li .btn.blue:focus {background-color:#0c63c4}
.cont_btn_list_area .list li .btn.yellow:hover, 
.cont_btn_list_area .list li .btn.yellow:focus {background-color:#eda61c}
.cont_btn_list_area .list li .btn.gray:hover, 
.cont_btn_list_area .list li .btn.gray:focus {background-color:#333}
.cont_btn_list_area .list li .btn.gray2:hover, 
.cont_btn_list_area .list li .btn.gray2:focus {background-color:#77787e}
.cont_btn_list_area .list li .btn.black:hover, 
.cont_btn_list_area .list li .btn.black:focus {background-color:#000}

/* border btn */
.cont_btn_list_area .list li .btn2 {display:inline-block;min-width:160px;color:#767676;background-color:#fff;text-align:center; border-radius: 5px;border:1px solid #616161;position:relative;z-index:1;overflow:hidden;transition:0.2s}
.cont_btn_list_area .list li .btn2 .text {display: block; font-size: 1rem; line-height: 52px;transition:0.2s}
.cont_btn_list_area .list li .btn2.green {border-color: #33b293;color: #33b293}
.cont_btn_list_area .list li .btn2.red {border-color: #ed1c24;color: #ed1c24}
.cont_btn_list_area .list li .btn2.blue {border-color: #2089ff;color: #2089ff}
.cont_btn_list_area .list li .btn2.yellow {border-color: #edbf1c;color: #edbf1c}
.cont_btn_list_area .list li .btn2.gray {border-color: #555;color: #555}
.cont_btn_list_area .list li .btn2.gray2 {border-color: #b8b8bf;color: #767676}
.cont_btn_list_area .list li .btn2.black {border-color: #191919;color: #191919}
.cont_btn_list_area .list li .btn2.icon01 {padding:0 30px;text-align:left}
.cont_btn_list_area .list li .btn2.icon01 .text {background-image:url(/images/home/kor/user/board/download_icon.png);background-repeat:no-repeat;background-position:right center}
.cont_btn_list_area .list li .btn2.icon02 {padding:0 30px;text-align:left}
.cont_btn_list_area .list li .btn2.icon02 .text {background-image:url(/images/home/kor/user/board/talk_icon.png);background-repeat:no-repeat;background-position:right center}

.cont_btn_list_area .list li .btn2:hover,
.cont_btn_list_area .list li .btn2:focus {border-color:#333}
.cont_btn_list_area .list li .btn2:hover .text,
.cont_btn_list_area .list li .btn2:focus .text {color:#333}
.cont_btn_list_area .list li .btn2.green:hover,
.cont_btn_list_area .list li .btn2.green:focus {border-color:#187760}
.cont_btn_list_area .list li .btn2.green:hover .text,
.cont_btn_list_area .list li .btn2.green:focus .text {color:#187760}
.cont_btn_list_area .list li .btn2.red:hover,
.cont_btn_list_area .list li .btn2.red:focus {border-color:#000}
.cont_btn_list_area .list li .btn2.red:hover .text,
.cont_btn_list_area .list li .btn2.red:focus .text {color:#000}
.cont_btn_list_area .list li .btn2.blue:hover,
.cont_btn_list_area .list li .btn2.blue:focus {border-color:#0c63c4}
.cont_btn_list_area .list li .btn2.blue:hover .text,
.cont_btn_list_area .list li .btn2.blue:focus .text {color:#0c63c4}
.cont_btn_list_area .list li .btn2.yellow:hover,
.cont_btn_list_area .list li .btn2.yellow:focus {border-color:#eda61c}
.cont_btn_list_area .list li .btn2.yellow:hover .text,
.cont_btn_list_area .list li .btn2.yellow:focus .text {color:#eda61c}
.cont_btn_list_area .list li .btn2.gray:hover,
.cont_btn_list_area .list li .btn2.gray:focus {border-color:#555}
.cont_btn_list_area .list li .btn2.gray:hover .text,
.cont_btn_list_area .list li .btn2.gray:focus .text {color:#555}
.cont_btn_list_area .list li .btn2.gray2:hover,
.cont_btn_list_area .list li .btn2.gray2:focus {border-color:#77787e}
.cont_btn_list_area .list li .btn2.gray2:hover .text,
.cont_btn_list_area .list li .btn2.gray2:focus .text {color:#77787e}
.cont_btn_list_area .list li .btn2.black:hover,
.cont_btn_list_area .list li .btn2.black:focus {border-color:#000}
.cont_btn_list_area .list li .btn2.black:hover .text,
.cont_btn_list_area .list li .btn2.black:focus .text {color:#000}

.cont_btn_list_area .list li .btn.small, 
.cont_btn_list_area .list li .btn2.small {min-width:100px;padding:0 30px}
.cont_btn_list_area .list li .btn.small .text {line-height:42px}
.cont_btn_list_area .list li .btn2.small .text {line-height:40px}


.btn_default {display: inline-block; position: relative; overflow: hidden; min-width: 100px; border: 2px solid #33b293; background-color: #33b293; padding: 0 20px; border-radius: 5px; font-size: 0; text-align:center;z-index: 1;transition:all 0.3s}
.btn_default .text {display: inline-block; font-weight: 400; font-size: 1rem; line-height: 43px; color: #ffffff; z-index: 1;}
.btn_default.small {min-width:40px;padding:0 12px}
.btn_default.small .text {font-size:0.9375rem;line-height:41px}
.btn_default:hover, 
.btn_default:focus {border-color:#187760;background-color:#187760}
.btn_default:hover .text, 
.btn_default:focus .text {color: #ffffff;transition:0.3s}

.btn_default.green {background-color:#33b293;border-color:#33b293}
.btn_default.red {background-color:#ed1c24;border-color:#ed1c24}
.btn_default.blue {background-color:#2089ff;border-color:#2089ff}
.btn_default.gray {background-color:#333;border-color:#333}
.btn_default.gray2 {background-color:#848690;border-color:#848690}
.btn_default.black {background-color:#000;border-color:#000}
.btn_default.green:hover, 
.btn_default.green:focus {border-color:#187760 !important;background-color:#187760}
.btn_default.red:hover, 
.btn_default.red:focus {border-color:#b1060c !important;background-color:#b1060c}
.btn_default.blue:hover, 
.btn_default.blue:focus {border-color:#0c63c4 !important;background-color:#0c63c4}
.btn_default.gray:hover, 
.btn_default.gray:focus {border-color:#555 !important;background-color:#555}
.btn_default.gray2:hover, 
.btn_default.gray2:focus {border-color:#77787e !important;background-color:#77787e}
.btn_default.black:hover, 
.btn_default.black:focus {border-color:#212121 !important;background-color:#212121}

/* border button */
.btn_default.sty2 {border-width:1px;background-color:#fff !important}
.btn_default.sty2 .text {color:#33b293}
.btn_default.sty2.green {border-color:#33b293}
.btn_default.sty2.green .text {color:#33b293}
.btn_default.sty2.red {border-color:#ed1c24}
.btn_default.sty2.red .text {color:#ed1c24}
.btn_default.sty2.blue {border-color:#2089ff}
.btn_default.sty2.blue .text {color:#2089ff}
.btn_default.sty2.gray {border-color:#333}
.btn_default.sty2.gray .text {color:#333}
.btn_default.sty2.gray2 {border-color:#aaa}
.btn_default.sty2.gray2 .text {color:#212121}
.btn_default.sty2.black {border-color:#000}
.btn_default.sty2.black .text {color:#000}

.btn_default.sty2.green:hover .text, 
.btn_default.sty2.green:focus .text {color:#187760}
.btn_default.sty2.red:hover .text, 
.btn_default.sty2.red:focus .text {color:#b1060c}
.btn_default.sty2.blue:hover .text, 
.btn_default.sty2.blue:focus .text {color:#0c63c4}
.btn_default.sty2.gray:hover .text, 
.btn_default.sty2.gray:focus .text {color:#555}
.btn_default.sty2.gray2:hover .text, 
.btn_default.sty2.gray2:focus .text {color:#000}
.btn_default.sty2.black:hover .text, 
.btn_default.sty2.black:focus .text {color:#212121}


/* + (더보기) 버튼 */
.btn_more {display:inline-block;width:38px;height:38px;font-size:0;line-height:0;background-color:#33b293;border-radius:8px;position:relative;transition:0.3s}
.btn_more::before, .btn_more::after {display:block;content:"";background-color:#fff;border-radius:4px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
.btn_more::before {width:16px;height:4px}
.btn_more::after {width:4px;height:16px}
.btn_more.big {width:72px;height:72px;}
.btn_more.big::before {width:24px;height:6px;border-radius:6px}
.btn_more.big::after {width:6px;height:24px;border-radius:6px}

.btn_more:hover, 
.btn_more:focus {background-color:#187760}
.btn_more:hover, 
.btn_more:focus {}
.btn_more:hover::after, 
.btn_more:focus::after {animation:btn_more 0.8s 1 forwards}

.btn_more.purple {background-color:#712aff;border-color:#712aff}
.btn_more.blue {background-color:#2089ff;border-color:#2089ff}
.btn_more.yellow {background-color:#edbf1c;border-color:#edbf1c}
.btn_more.gray {background-color:#555;border-color:#777}
.btn_more.gray2 {background-color:#77787e;border-color:#848690}
.btn_more.black {background-color:#000;border-color:#191919}

.btn_more.purple:hover, 
.btn_more.purple:focus {background-color:#4710b5}
.btn_more.blue:hover, 
.btn_more.blue:focus {background-color:#0a5bb6}
.btn_more.yellow:hover, 
.btn_more.yellow:focus {background-color:#eda61c}
.btn_more.gray:hover, 
.btn_more.gray:focus {background-color:#555}
.btn_more.gray2:hover, 
.btn_more.gray2:focus {background-color:#77787e}
.btn_more.black:hover, 
.btn_more.black:focus {background-color:#000}

@keyframes btn_more{
	100% {transform:translate(-50%, -50%) rotate(180deg)}
}

.btn_add, 
.btn_remove {width:69px;color:#2089ff;line-height:28px;font-size:0.875rem;font-weight:600;border:1px solid #2089ff;border-radius:4px;transition:0.3s}
.btn_remove {color:#ed1c24;border-color:#ed1c24}
.btn_add:hover, .btn_remove:hover, 
.btn_add:focus, .btn_remove:focus {color:#212121;border-color:#212121}
.btn_add::before,  
.btn_remove::before {display:inline-block;margin:-4px 6px 0 0;vertical-align:middle}
.btn_add::before {content:"+"}
.btn_remove::before {content:"-"}