﻿* { box-sizing: border-box; font-family:"Nanum Gothic", "맑은 고딕", "Malgun Gothic", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.035em;}
.nsquare { font-family: "NanumSquare" !important; }

html { font-size: 16px; }

.vtop { vertical-align: top !important; }
.vmid { vertical-align: middle !important; }
.vbot { vertical-align: bottom !important; }
.hidden { display: none; }

.m_b_5 { margin-bottom: 5px; }
.m_b_10 { margin-bottom: 10px; }
.m_b_15 { margin-bottom: 15px; }
.m_b_20 { margin-bottom: 20px; }
.m_b_25 { margin-bottom: 25px; }
.m_b_30 { margin-bottom: 30px; }
.m_t_10 { margin-top: 10px; }
.m_t_15 { margin-top: 15px; }
.m_t_20 { margin-top: 20px; }
.m_t_25 { margin-top: 25px; }
.m_t_30 { margin-top: 30px; }

.txtl {text-align:left !important;}
.txtc {text-align:center !important;}
.txtr {text-align:right !important;}
.div_line { background: url(/assets/img/stroke.png) 0 0 repeat-x; /*background-color:#ddd;*/ height: 1px; width: 100%; margin: 40px 0; }
.div_line1 {background:#eee; width:100%; height:1px; margin:15px 0;}
.div_line2 {background:#eee; width:100%; height:1px; margin:10px 0;}
.div_line3 {background:transparent; width:100%; height:1px; margin:3px 0;}
.clear-fix:after { content: ''; display: block; clear: both; }

.container > .title { margin: 15px 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; font-weight: normal; }
.intro_text {float:left; line-height:90px; font-size:14px; color:#8a8a8a;}
.intro_text span {color:#0551ff;}
/*** heading 시작 ***/
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0; }
h1, h2, h3, h4, h5 { /*margin: 1em 0 0.5em 0;*/ line-height:120%;}
h1 {font-size:32px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
h4 {font-size:15px;}
h5 {font-size:13px;}
h1.thin, h2.thin, h3.thin, h4.thin, h5.thin {font-weight:300;}
/*** heading 끝 ***/

/**** buttons 시작 ****/
.btn { cursor: pointer; display: inline-block; vertical-align: middle; min-width:75px; height:30px; background-color: #ddd; color: #000; text-align: center; border: 0; outline:none; padding:0 20px; font-size:16px; font-weight:700;/*border-radius:3px;*/
	line-height: 1.3; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn_xs { font-size: 10px; }
.btn_sm { font-size: 12px; }
.btn_md { font-size: 14px; }
.btn_lg { font-size: 16px; }
.btn_xl { font-size: 18px; }
.btn_w_xs { width:10%; }
.btn_w_sm { width:25%; }
.btn_w_md { width:50%; }
.btn_w_lg { width:70%; }
.btn_w_xl { width:100%; }
.btn_h_xs { height:25px; line-height:25px;}
.btn_h_sm { height:30px; line-height:30px;}
.btn_h_md { height:35px; line-height:35px;}
.btn_h_lg { height:40px; line-height:40px;}
.btn_h_xl { height:45px; line-height:45px;}
.btn:hover { background-color: #ccc; color: #333; }
.btn:focus { background-color: #ccc; color: #333; }
.btn:active { background-color: #bbb; color: #333; }
.btn.lightblue { background-color: #add8e6; color: #fff; }
.btn.lightblue:hover, .btn.lightblue:focus, .btn.lightblue:active { background-color: #99cfe0; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.blue { background-color: #87ceeb; color: #fff; }
.btn.blue:hover, .btn.blue:focus, .btn.blue:active { background-color: #71c5e7; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkblue { background-color: #6495ed; color: #fff; }
.btn.darkblue:hover, .btn.darkblue:focus, .btn.darkblue:active { background-color: #4d85ea; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.lightorange { background-color: #ffdab9; color: #fff; }
.btn.lightorange:hover, .btn.lightorange:focus, .btn.lightorange:active { background-color: #ffcd9f; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.orange { background-color: #ffa07a; color: #fff; }
.btn.orange:hover, .btn.orange:focus, .btn.orange:active { background-color: #ff8e60; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkorange { background-color: #ff7f50; color: #fff; }
.btn.darkorange:hover, .btn.darkorange:focus, .btn.darkorange:active { background-color: #ff6c36; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.lightmint { background-color: #afeeee; color: #fff; }
.btn.lightmint:hover, .btn.lightmint:focus, .btn.lightmint:active { background-color: #9aeaea; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.mint { background-color: #40e0d0; color: #fff; }
.btn.mint:hover, .btn.mint:focus, .btn.mint:active { background-color: #2adccb; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkmint { background-color: #00ced1; color: #fff; }
.btn.darkmint:hover, .btn.darkmint:focus, .btn.darkmint:active { background-color: #00b5b7; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.lightyellow { background-color: #fff176; color: #fff; }
.btn.lightyellow:hover, .btn.lightyellow:focus, .btn.lightyellow:active { background-color: #ffee5c; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.yellow { background-color: #ffeb3b; color: #fff; }
.btn.yellow:hover, .btn.yellow:focus, .btn.yellow:active { background-color: #ffe821; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkyellow { background-color: #fbc02d; color: #fff; }
.btn.darkyellow:hover, .btn.darkyellow:focus, .btn.darkyellow:active { background-color: #fbb814; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.lightviolet { background-color: #e6e6fa; color: #fff; }
.btn.lightviolet:hover, .btn.lightviolet:focus, .btn.lightviolet:active { background-color: #d1d1f6; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.violet { background-color: #ee82ee; color: #fff; }
.btn.violet:hover, .btn.violet:focus, .btn.violet:active { background-color: #eb6ceb; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkviolet { background-color: #ba55d3; color: #fff; }
.btn.darkviolet:hover, .btn.darkviolet:focus, .btn.darkviolet:active { background-color: #b241ce; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.grey { background-color: #dcdcdc; color: #fff; }
.btn.grey:hover, .btn.grey:focus, .btn.grey:active { background-color: #cfcfcf; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.darkgrey { background-color: #a9a9a9; color: #fff; }
.btn.darkgrey:hover, .btn.darkgrey:focus, .btn.darkgrey:active { background-color: #9c9c9c; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}
.btn.black { background-color: #362f2d; color: #fff; }
.btn.black:hover, .btn.black:focus, .btn.black:active { background-color: #282321; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.05);}

.btn.outline { color: inherit; background-color: transparent; border: 1px solid #888; background-color: #fff; }
.btn.outline.lightblue { border: 1px solid #add8e6; color: #6495ed; }
.btn.outline.lightblue:hover, .btn.outline.lightblue:focus, .btn.outline.lightblue:active { color: #fff; }
.btn.outline.blue { border: 1px solid #87ceeb; color: #6495ed; }
.btn.outline.blue:hover, .btn.outline.blue:focus, .btn.outline.blue:active { color: #fff; }
.btn.outline.darkblue { border: 1px solid #6495ed; color: #6495ed; }
.btn.outline.darkblue:hover, .btn.outline.darkblue:focus, .btn.outline.darkblue:active { color: #fff; }
.btn.outline.lightorange { border: 1px solid #ffdab9; color: #ff7f50; }
.btn.outline.lightorange:hover, .btn.outline.lightorange:focus, .btn.outline.lightorange:active { color: #fff; }
.btn.outline.orange { border: 1px solid #ffa07a; color: #ff7f50; }
.btn.outline.orange:hover, .btn.outline.orange:focus, .btn.outline.orange:active { color: #fff; }
.btn.outline.darkorange { border: 1px solid #ff7f50; color: #ff7f50; }
.btn.outline.darkorange:hover, .btn.outline.darkorange:focus, .btn.outline.darkorange:active { color: #fff; }
.btn.outline.lightmint { border: 1px solid #afeeee; color: #00ced1; }
.btn.outline.lightmint:hover, .btn.outline.lightmint:focus, .btn.outline.lightmint:active { color: #fff; }
.btn.outline.mint { border: 1px solid #40e0d0; color: #00ced1; }
.btn.outline.mint:hover, .btn.outline.mint:focus, .btn.outline.mint:active { color: #fff; }
.btn.outline.darkmint { border: 1px solid #00ced1; color: #00ced1; }
.btn.outline.darkmint:hover, .btn.outline.darkmint:focus, .btn.outline.darkmint:active { color: #fff; }
.btn.outline.lightyellow { border: 1px solid #fff176; color: #fbc02d; }
.btn.outline.lightyellow:hover, .btn.outline.lightyellow:focus, .btn.outline.lightyellow:active { color: #fff; }
.btn.outline.yellow { border: 1px solid #ffeb3b; color: #fbc02d; }
.btn.outline.yellow:hover, .btn.outline.yellow:focus, .btn.outline.yellow:active { color: #fff; }
.btn.outline.darkyellow { border: 1px solid #fbc02d; color: #fbc02d; }
.btn.outline.darkyellow:hover, .btn.outline.darkyellow:focus, .btn.outline.darkyellow:active { color: #fff; }
.btn.outline.lightviolet { border: 1px solid #e6e6fa; color: #ba55d3; }
.btn.outline.lightviolet:hover, .btn.outline.lightviolet:focus, .btn.outline.lightviolet:active { color: #fff; }
.btn.outline.violet { border: 1px solid #ee82ee; color: #ba55d3; }
.btn.outline.violet:hover, .btn.outline.violet:focus, .btn.outline.violet:active { color: #fff; }
.btn.outline.darkviolet { border: 1px solid #ba55d3; color: #ba55d3; }
.btn.outline.darkviolet:hover, .btn.outline.darkviolet:focus, .btn.outline.darkviolet:active { color: #fff; }
.btn.outline.grey { border: 1px solid #dcdcdc; color: #362f2d; }
.btn.outline.grey:hover, .btn.outline.grey:focus, .btn.outline.grey:active { color: #fff; }
.btn.outline.darkgrey { border: 1px solid #a9a9a9; color: #362f2d; }
.btn.outline.darkgrey:hover, .btn.outline.darkgrey:focus, .btn.outline.darkgrey:active { color: #fff; }
.btn.outline.black { border: 1px solid #362f2d; color: #362f2d; }
.btn.outline.black:hover, .btn.outline.black:focus, .btn.outline.black:active { color: #fff; }

.btn.rounded {border-radius:50px;}
.btn_icon_r i { margin-left: 5px; margin-right: -5px; vertical-align:middle;}
.btn_icon_l i {margin-left: -5px; margin-right: 5px; vertical-align:middle;}
.btn_group { position: relative; display: inline-block; vertical-align: middle; }
.btn_group:after {content:''; clear:both; display:block;}
.btn_group > .btn { float: left; margin-left: -1px; }
.btn_group > .btn:first-child { margin-left: 0; }
.btn_group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn_group > .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.btn_group > .btn_group { float: left; }
.btn_group > .btn_group:not(:first-child):not(:last-child) > .btn { border-radius: 0; }
.btn_group > .btn_group:first-child > .btn:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.btn_group > .btn_group:last-child > .btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.btn.widget {min-width:25px; width:25px; height:25px; padding:0; text-align:center;}
.btn .checkbox {margin:0;}

.btn.btn_upload ~ .btn_upload_file {position:fixed; left:-9999px; top:-9999px; opacity:0;}
.btn_guide .btn {width:110px;}
/**** buttons 끝 ****/

/**** icon 시작 ****/
.icon-box:after { clear: both; display: block; content: ''; }
.icon-box .in_icon { width: 33.333%; float: left; }
.icon-box .in_icon a { padding: 15px 10px; display: block; }
.icon-box .in_icon a { color: #a6a8a9; text-align: center; }
.icon-box .in_icon a i { font-size: 25px; display: block; color: #555; }
/**** icon 끝 ****/
/**** input 시작 ****/
input[type="password"] { font-family:"맑은 고딕", "Malgun Gothic";}
.ipt { width: 200px; text-align: left; padding: 0 12px; min-height:20px; font-size:12px; background: #fff; border: 1px solid #e3e5e4; color: #555; vertical-align: middle; box-sizing: border-box; font-weight:400; -webkit-border-radius: unset; -webkit-appearance: none;}
.ipt::-webkit-input-placeholder { color:#aaa; }
.ipt::-moz-placeholder { color:#aaa; }
.ipt:-ms-input-placeholder { color:#aaa; }
.ipt:active { border-color: #888; background: #fafafa; color: #555; }
.ipt:focus { border-color: #888; background: #fff; color: #555 }
.ipt:focus::-webkit-input-placeholder { color:#888; }
.ipt:focus::-moz-placeholder { color:#888; }
.ipt:focus:-ms-input-placeholder { color:#888; }
.ipt[disabled], .ipt[readonly], fieldset[disabled] { background-color: #eee; }

.ipt:active.bg_light_gray, .ipt:focus.bg_light_gray, .ipt:hover.bg_light_gray {background: #f3f3f3;}
textarea.ipt {padding:10px 12px; min-height:0;}
.ipt_group { display: block; position: relative; max-width: 100%; }
.ipt_group:after { clear: both; display: block; content: ''; }
.ipt_group:hover > .ipt_icon { color: #999; }
.ipt_inline { display: inline-block; position: relative; vertical-align:middle; max-width: 100%; }
.ipt_inline:after { clear: both; display: block; content: ''; }
.ipt_inline:hover > .ipt_icon { color: #999; }
.ipt_icon { position: absolute; z-index:1; left: 0; top: 0; bottom: 0; width: 40px; display: inline-flex !important; align-items: center; justify-content: center; color: #ddd; }
.ipt_icon.ipt_icon_right { left: auto; right: 0; }
.ipt_icon:not(.ipt_icon_right)~.ipt { padding-left: 40px !important; }
.ipt_icon.ipt_icon_right~.ipt { padding-right: 40px !important }
.ipt_icon:not(.ipt_icon_right)~.datepicker .ipt { padding-left: 40px !important; }
.ipt_icon.ipt_icon_right~.datepicker .ipt { padding-right: 40px !important }
.ipt_box { border: 1px solid #e4e4e4; background: #fff; padding: 10px 10px 10px 10px; }
.ipt_box:after { clear: both; display: block; content: ''; }
.ipt_box .ipt { border: 0; }
.ipt_box label { display: block; width: 100%; font-size: 16px; line-height: 28px; color: #555; padding-left: 20px; border-right: 1px solid #e9e9e9; }
.ipt_box select { display: block; width: 100%; font-size: 14px; height: 28px; color: #555; border: 0; border-right: 1px solid #e9e9e9 !important; }
/* input size 시작 */
.ipt.ipt_h_xl { height: 45px; /*line-height:45px;*/}
.ipt.ipt_h_lg { height: 36px; /*line-height:36px;*/}
.ipt.ipt_h_md { height: 30px; /*line-height:30px;*/}
.ipt.ipt_h_sm { height: 20px; /*line-height:20px;*/padding:0 5px;}
.ipt.ipt_h_lg ~ .chosen-container-multi .chosen-choices {height:40px; overflow:auto;}
.ipt.ipt_h_md ~ .chosen-container-multi .chosen-choices {height:30px; overflow:auto;}
.ipt.ipt_h_sm ~ .chosen-container-multi .chosen-choices {height:20px; overflow:auto;}
.ipt.ipt_w_xl { width: 100%; }
.ipt.ipt_w_lg { width: 70%; }
.ipt.ipt_w_md { width: 50%; }
.ipt.ipt_w_sm { width: 25%; }
.ipt.ipt_w_xs { width: 10%; }
/* input size 끝 */
.ipt.ipt_date { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.ipt.ipt_date.ipt_w_xl { width: calc(100% - 35px); }
.ipt.ipt_datepicker.ipt_w_xl { padding-right: 35px; background: url(/assets/img/datepicker1.gif) right top no-repeat; }
.ui-datepicker-trigger { vertical-align: middle; }

.filecontainer {position:relative; padding-left:0 !important; line-height:normal !important;}
.filecontainer span {display:inline-block; font-size:13px; color:#c7c7c7;}
.ipt_file {position: absolute; opacity: 0;}

.checkbox { display: inline-block; position: relative; min-height: 18px; line-height: 18px; min-width: 18px; padding-left: 25px; vertical-align: middle; margin-right: 15px; font-size:14px; }
.checkbox.news_create { display: inline-block; position: relative; min-height: 18px; line-height: 18px; min-width: 18px; padding-left: 25px; vertical-align: middle; margin-right: 15px; font-size:14px; background-color: #ededed; }
.checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkbox .checkmark { position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: #fff; border:1px solid #ddd;}
.checkbox .checkmark_complete { position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: #fff; border:1px solid #ddd;}
.checkmark:after { content: ''; position: absolute; display: none; }
.checkbox input:checked ~ .checkmark { background-color: #fff; }
.checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox .checkmark:after { left: 5px; top: 1px; width: 5px; height: 9px; border: solid #4c9bfb; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.checkbox label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; }
.checkbox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; background-color: #fff; }
.checkbox label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; }
.checkbox input[type="checkbox"]:focus + label::before { outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after { font-family: "FontAwesome"; content: "\f00c"; }
.checkbox-success input[type="checkbox"]:checked + label::before { background-color: #ffffff; border-color: #5e7a8f; }
.checkbox-success input[type="checkbox"]:checked + label::after { color: #4c9bfb; }

.checkbox.type_min { width:15px; height:15px; min-height:15px; line-height:15px; }
.checkbox.type_min .checkmark { position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: #fff; border:1px solid #4c9bfb}
.checkbox.type_min .checkmark:after { left: 5px; top: 2px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.checkbox_btn:after { display: block; clear: both; content: ''; }
.checkbox_btn .checkbox { float:left; position: relative; margin-top:-1px; font-size:12px; /*min-height:40px;*/ line-height:36px; width:100%; text-align:center; padding:0; vertical-align: middle; margin-left:-1px; margin-right:0; }
.checkbox_btn .checkbox:first-child {margin-left:0;}
.checkbox_btn .checkbox:nth-child(4n + 1) {margin-left:0;}
.checkbox_btn .checkbox input { position: absolute; opacity: 0;  cursor: pointer; height: 0; width: 0; }
.checkbox_btn .checkbox .checkmark { position: absolute; left: 0; top: 0; width:100%; height: 36px; border-radius:0; background:transparent; border:1px solid #e3e5e4;}
.checkbox_btn .checkbox input:checked ~ span {color:#4c9bfb;}
.checkbox_btn .checkbox input:checked ~ .checkmark { z-index:2; border:1px solid #4c9bfb; background:transparent; }
.checkbox_btn .checkbox input:checked ~ .checkmark:after {display:none;}
.checkbox_btn .checkbox .checkmark:after { display:none; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

.radio { display: inline-block; position: relative; min-height: 18px; line-height: 18px; min-width: 18px; padding-left: 25px; vertical-align: middle; margin-right: 15px; font-size:13px;}
.radio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.radio .checkmark { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #eee; }
.checkmark:after { content: ''; position: absolute; display: none; }
.radio input:checked ~ .checkmark { background-color: #2196F3; }
.radio input:checked ~ .checkmark:after { display: block; }
.radio .checkmark:after { left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

.radio_btn:after { display: block; clear: both; content: ''; }
.radio_btn .radio { float:left; position: relative; font-size:13px; min-height:40px; line-height:40px; width:100%; text-align:center; padding:0; vertical-align: middle; margin-left:-1px; margin-right:0; }
.radio_btn .radio:first-child {margin-left:0;}
.radio_btn .radio input { position: absolute; opacity: 0;  cursor: pointer; height: 0; width: 0; }
.radio_btn .radio .checkmark { position: absolute; left: 0; top: 0; width:100%; height: 40px; border-radius:0; background:transparent; border:1px solid #e3e5e4;}
.radio_btn .checkmark:after { content: ''; position: absolute; display: none; }
.radio_btn .radio input:checked ~ span {color:#4c9bfb;}
.radio_btn .radio input:checked ~ .checkmark { z-index:2; border:1px solid #4c9bfb; background:transparent; }
.radio_btn .radio input:checked ~ .checkmark:after { display: none; }
.radio_btn .radio .checkmark:after { left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

.ipt_label_group {position:relative; }
.ipt_label_group .label_title {position:absolute; top:-7px; left:13px; display:block; padding:0 3px; /*background:#fff;*/ font-size:12px; line-height:15px; vertical-align:middle; color:#4c9bfb;}
.ipt_label_group .ipt_label_box {border:1px solid #e3e5e4; padding:10px 14px 0;}
.ipt_label_group .ipt_label_box h5 {font-weight:700; font-size:12px; color:#555; margin:8px 0 7px 0;}
.ipt_label_group .ipt_label_box .line {width:100%; height:1px; background:#e3e5e4; margin:5px 0 15px;}
.ipt_label_group .checkbox, .ipt_label_group .radio {margin-bottom:10px;}
/**** input 끝 ****/

/**** tab 시작 ****/
.nav_tabs { position: relative; border: 0; border-bottom: 1px solid #ddd; }
.nav_tabs:after { display: block; clear: both; content: ''; }
.nav_tabs > li { float: left; margin-bottom: -1px; min-width:100px; text-align:center;}
.nav_tabs.tab_col_2 > li { width: 50%; min-width:0; text-align: center; }
.nav_tabs.tab_col_3 > li { width: 33.333%; min-width:0; text-align: center; }
.nav_tabs.tab_col_4 > li { width: 25%; min-width:0; text-align: center; }
.nav_tabs > li > a { display: block; color: #a1a1a1; font-size: 14px; font-weight: 400; padding: 12px 10px; margin-right: -1px; background: #efefef; border: 1px solid #c1c1c1; }
.nav_tabs > li:first-child > a { margin-left: 0; }
.nav_tabs > li > a:hover { background-color: #f4f4f4; }
.nav_tabs > li.active > a, .nav_tabs > li.active > a:hover, .nav_tabs > li.active > a:focus { cursor: default; color: #333; background: #fff; border-bottom: 1px solid #fff; }
.nav_tabs_wrap > div { display: none; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding: 10px; }
.nav_tabs_wrap > div.on { display: block; }
.nav_tabs_wrap > div .none_data { display: block; line-height: 150px; text-align: center; }

.nav_tabs.tab_sty1 {border-bottom:0;}
.nav_tabs.tab_sty1 li > a {color:#777; background:#fff; border:1px solid #f1f2f1; border-bottom:1px solid #4c9bfb; height:45px;}
.nav_tabs.tab_sty1 li {}
.nav_tabs.tab_sty1 > li.active > a, .nav_tabs.tab_sty1 > li.active > a:hover, .nav_tabs.tab_sty1 > li.active > a:focus { position:relative; z-index:2; cursor: default; color: #4c9bfb; background: #eff7ff; border:1px solid #4c9bfb; border-bottom: 1px solid #eff7ff; }
.nav_tabs_wrap.tab_sty1 > div { display: none; background:#fff; border:1px solid #e3e5e4; margin: 10px 0; }
.nav_tabs_wrap.tab_sty1 > div.on {display:block;}

.nav_tabs.tab_sty2 {border-bottom:0;}
.nav_tabs.tab_sty2 li > a {color:#777; background:#fff; border:1px solid #eee;}
.nav_tabs.tab_sty2 > li.active > a, .nav_tabs.tab_sty2 > li.active > a:hover, .nav_tabs.tab_sty2 > li.active > a:focus { position:relative; z-index:2; cursor: default; color: #4c9bfb; background: #eff7ff; border:1px solid #d5eaff; }
.nav_tabs_wrap.tab_sty2 > div { display: none; border-left:0; border-right: 0; border-bottom: 0; padding: 15px 0; }
.nav_tabs_wrap.tab_sty2 > div.on {display:block;}

.nav_tabs.tab_sty3 {border-bottom:0;}
.nav_tabs.tab_sty3 li {margin-right:5px; margin-bottom:0;}
.nav_tabs.tab_sty3 li > a {color:#777; background:#fff; border:1px solid #e3e5e4; padding:13px 20px;}
.nav_tabs.tab_sty3 > li.active > a, .nav_tabs.tab_sty3 > li.active > a:hover, .nav_tabs.tab_sty3 > li.active > a:focus { position:relative; z-index:2; cursor: default; color: #fff; background: #252525; border:1px solid #252525; }
.nav_tabs_wrap.tab_sty3 > div { display: none; border-left:0; border-right: 0; border-bottom: 0; padding: 0; }
.nav_tabs_wrap.tab_sty3 > div.on {display:block;}
.nav_tabs_wrap.tab_sty3 > div .guide_note {margin:0 0 40px 0;}

.panel_tabs { position: relative; background: #fafafa; border: 1px solid #e2e2e2; }
.panel_tabs:after { display: block; clear: both; content: ''; }
.panel_tabs > li { position: relative; float: left; margin-bottom: -1px; }
.panel_tabs > li > a { display: block; color: #a1a1a1; font-size: 14px; padding: 12px 20px; border-radius: 0; border-left: 1px solid transparent; border-right: 1px solid transparent; }
.panel_tabs > li > a:hover { color: #444; background-color: transparent; }
.panel_tabs > li.active > a, .panel_tabs > li.active > a:hover, .panel_tabs > li.active > a:focus { color: #555; cursor: default; background: #fff; }
.panel_tabs > li.active > a { border-left-color: #d1d1d1; border-right-color: #d1d1d1; }
.panel_tabs > li.active:first-child > a { border-left-color: transparent; }
.panel_tabs_left { left: 0; }
.panel_tabs_left > li.active:first-child > a { border-left-color: transparent; }
.panel_tabs_left > li.active:last-child > a { border-right-color: #ddd; }
/**** tab 끝 ****/

/**** 가이드 라인 시작 ****/
.guide_tit { font-weight: normal; margin-top: 15px; margin-bottom: 15px; font-size: 22px; color: #0853ff; }
.guide_note { background-color: #252525; color:#fff; margin: 15px 0 40px 0; padding: 25px 40px; font-size: 14px; overflow: hidden; }
/**** 가이드 라인 끝 ****/

/**** 테이블 시작 ****/
table { border-collapse: collapse; border-spacing: 0; }
.table { width: 100%; font-size: 13px; box-shadow: 5px 5px 20px 0.2px rgba(0,0,0,0.1);}
.table.table_mt { margin-top: 10px; }
.table th { font-size: 14px; font-weight:400; padding: 17px 5px; color: #000; background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;  vertical-align:middle; }
.table tr th:first-child {border-left:1px solid #e8e8e8;}
.table tr th:last-child {border-right:1px solid #e8e8e8;}
/*.table th:first-child {border-top-left-radius:5px;}
.table th:last-child {border-top-right-radius:5px;}*/
.table td { text-align: center; color: #000; background: #fff; border-bottom: 1px solid #e8e8e8; padding: 15px 10px; line-height: 18px; vertical-align:middle; }
.table tr td:first-child {border-left:1px solid #e8e8e8;}
.table tr td:last-child {border-right:1px solid #e8e8e8;}
.table tr td.title {text-align:left; padding-left:20px;}
.table td a { color: #888; }
.table.table_stripe tr:nth-child(odd) td { background: #f7f8fb; }
.table.table_hover tr:hover td { color: #333; background: #f9f9f9; }
.table.table_hover tr:hover td a { color: #333; }
.table.table_border tr th { border-right: 1px solid #e8e8e8; background-color: #f9f9f9; }
.table.table_border tr th:first-child { border-left: 1px solid #e8e8e8; }
.table.table_border tr td { border-right: 1px solid #ddd; }
.table.table_border tr td:first-child { border-left: 1px solid #e8e8e8; }
.table_responsive { width: 100%; overflow-x: auto; }
.table_responsive .table { width: 100%; max-width: 100%; }
.table_responsive .table td { white-space: nowrap; }
.table.txtl th {text-align:left;}
.table.txtl td {text-align:left;}
.table.txtr th {text-align:right;}
.table.txtr td {text-align:right;}
.table.guide th {height:50px; padding:0 25px;}
.table.guide td {height:90px; padding:0 25px;}
.table.table_h_sm th {padding:10px 5px;}
.table.table_h_sm td {padding:10px 5px;}

.table.table_sty1 th {border-top:1px solid #4c9bfb; background:#f7f8fb; font-size:13px; border-bottom:0;}
.table.table_sty1 td {border-bottom:1px solid #f1f1f1; font-size:13px;}
.table.table_sty1 tr th:first-child {border-left:0;}
.table.table_sty1 tr th:last-child {border-right:0;}
.table.table_sty1 tr td:first-child {border-left:0;}
.table.table_sty1 tr td:last-child {border-right:0;}
/**** 테이블 끝 ****/

/**** 페이징 시작 ****/
.paging { margin: 10px auto; text-align: center; }
.paging:after { content: ''; clear: both; display: block; }
.paging li { display: inline-block; width: 30px; height: 30px; font-size: 14px; border: 1px solid #ddd; margin: 0 2px; vertical-align: middle; }
.paging li a { display: block; width: 100%; height: 100%; line-height: 28px; color: #555; text-align: center; vertical-align: middle; }
.paging li:hover { border: 1px solid #1e294a; }
.paging li:hover a { color: #1e294a; }
.paging li.on { border: 1px solid #1e294a; }
.paging li.on a { color: #1e294a; }
.paging li.paging_prev { width: auto; padding: 0 10px; }
.paging li.paging_next { width: auto; padding: 0 10px; }
/**** 페이징 끝 ****/
/**** 게시판 시작 ****/
.board_view { }
.board_view .top { padding: 10px 20px 20px; border-bottom: 1px solid #ddd; }
.board_view .top .title { font-size: 22px; color: #000; }
.board_view .top .title .cate { }
.board_view .top .byline { font-size: 14px; margin-top: 15px; }
.board_view .content { padding: 20px 20px; }
.board_view .content p { margin: 1em 0; }
.board_view .bottom { padding: 20px 20px 10px; border-top: 1px solid #ddd; }
.board_view .bottom .file_view {border:1px solid #d8d8d8;}
.board_view .bottom .file_view h5 {padding:10px; background:#f1f1f1;}
.board_view .bottom .file_view ul li {position:relative; padding:5px 10px; font-size:14px;}
.board_view .bottom .file_view ul li a {text-decoration:underline;}
.board_view .bottom .file_view ul li .file_info {position:absolute; top:5px; right:10px;}
.board_view .bottom .view_btns {margin-top:20px; text-align:center;}
.board_write {}
/**** 게시판 끝 ****/

/* 반응형 슬라이더 시작 */
.visual_wrap:after { content: ''; clear: both; display: block; }
#main_visual { width: 60%; position: relative; float: left; }
#main_visual_r { width: 35%; position: relative; float: right; }
.bx-wrapper { margin: 0 auto !important; }
.bx-wrapper img { width: 100%; }
/* 사용자 페이징 위치와 모양을 자유롭게 변형 */
#bx-pager1 { position: absolute; bottom: 0; left: 0; width: 100%; }
#bx-pager1 a { float: left; display: block; width: 16.666%; height: 40px; line-height: 40px; font-size: 16px; text-align: center; background: #999; color: #333 }
#bx-pager1 a:hover, .bx-pager1 a:active { background: #000; color: #fff; }
/* 엑티브상태에 대한 속성값 지정 */
#bx-pager1 a.active { background: #000; color: #fff; }
#bx2_next { cursor: pointer; }
#bx2_prev { cursor: pointer; }
.bxslider3 { width: 100%; }
.bxslider3 > div { width: 25%; }
/* 반응형 슬라이더 끝 */

/* 아이콘버튼 시작 */
.intro-container { position: relative; width: 100%; max-width: 1200px; margin: 30px auto; padding: 0 15px; }
.intro-btn-wrap { position: relative; width: 100%; font-size: 0; text-align: center; }
.intro-btn-wrap li { position: relative; display: inline-block; width: 33.333%; height: 150px; margin: 0; padding: 0; }
.intro-btn-wrap li a { position: absolute; bottom: 0; display: block; width: 100%; height: 100%; padding: 0; background: rgba(51,51,51,.9); font-size: 18px; color: #fff; -webkit-transition: background .5s ease-in-out; -moz-transition: background .5s ease-in-out; -o-transition: background .5s ease-in-out; transition: background .5s ease-in-out; }
.intro-btn-wrap li a .intro-icon { width: 30%; margin: 15px auto; }
.intro-btn-wrap li a .intro-icon img { max-width: 100%; vertical-align: top; }
.intro-btn-wrap li a p { padding: 0 10px; font-size: 18px; line-height: 1.2; word-break: keep-all; }
/* 아이콘버튼 끝 */

/* 탭메뉴 시작 */
.tab_menu_wrap { padding: 0 70px; border-bottom: 1px solid #000; }
.tab_menu_wrap ul { width: 100%; margin-bottom: -1px; }
.tab_menu_wrap ul:after { content: ''; clear: both; display: block; }
.tab_menu_wrap ul li { float: left; height: 40px; line-height: 40px; border: 1px solid #000; margin-left: -1px; width: 20%; text-align: center; }
.tab_menu_wrap ul li a { display: block; color: #000; }
.tab_menu_wrap ul li:hover { border-bottom: 1px solid #fff; }
/* 탭메뉴 끝 */

/* Grid 시작 */
.row { /*margin-left: -2px; margin-right: -2px;*/ }
.row.ca_type { margin-left: 0; margin-right: -1px; }
.row.ca_type_three { margin-left: 0; margin-right: -2px; }
.row:after { content: ''; display: block; clear: both; }
/*.row > div { padding-left: 2px; padding-right: 2px; box-sizing: border-box; }*/
.row.no_p {margin-left:0; margin-right:0;}
.row.no_p > div {padding-left:0; padding-right:0;}
.row .col_1 { float: left; width: 8.3333333%; }
.row .col_2 { float: left; width: 16.6666666%; }
.row .col_3 { float: left; width: 25%; }
.row .col_4 { float: left; width: 33.3333333%; }
.row .col_5 { float: left; width: 41.66666667%; }
.row .col_6 { float: left; width: 50%; }
.row .col_7 { float: left; width: 58.33333333%; }
.row .col_8 { float: left; width: 66.66666667%; }
.row .col_9 { float: left; width: 75%; }
.row .col_10 { float: left; width: 83.33333333%; }
.row .col_11 { float: left; width: 91.66666667%; }
.row .col_12 { float: left; width: 100%; }
@media all and (min-width: 320px) and (max-width: 700px) {
	.row .col_1 { float: left; width: 100%; }
	.row .col_2 { float: left; width: 100%; }
	.row .col_3 { float: left; width: 100%; }
	.row .col_4 { float: left; width: 100%; }
	.row .col_5 { float: left; width: 100%; }
	.row .col_6 { float: left; width: 100%; }
	.row .col_7 { float: left; width: 100%; }
	.row .col_8 { float: left; width: 100%; }
	.row .col_9 { float: left; width: 100%; }
	.row .col_10 { float: left; width: 100%; }
	.row .col_11 { float: left; width: 100%; }
	.row .col_12 { float: left; width: 100%; }
}
@media all and (min-width: 700px) and (max-width: 1280px) {
	.row .col_md_1 { float: left; width: 8.3333333%; }
	.row .col_md_2 { float: left; width: 16.6666666%; }
	.row .col_md_3 { float: left; width: 25%; }
	.row .col_md_4 { float: left; width: 33.3333333%; }
	.row .col_md_5 { float: left; width: 41.66666667%; }
	.row .col_md_6 { float: left; width: 50%; }
	.row .col_md_7 { float: left; width: 58.33333333%; }
	.row .col_md_8 { float: left; width: 66.66666667%; }
	.row .col_md_9 { float: left; width: 75%; }
	.row .col_md_10 { float: left; width: 83.33333333%; }
	.row .col_md_11 { float: left; width: 91.66666667%; }
	.row .col_md_12 { float: left; width: 100%; }
}
@media all and (min-width: 320px) and (max-width: 700px) {
	.row .col_sm_1 { float: left; width: 8.3333333%; }
	.row .col_sm_2 { float: left; width: 16.6666666%; }
	.row .col_sm_3 { float: left; width: 25%; }
	.row .col_sm_4 { float: left; width: 33.3333333%; }
	.row .col_sm_5 { float: left; width: 41.66666667%; }
	.row .col_sm_6 { float: left; width: 50%; }
	.row .col_sm_7 { float: left; width: 58.33333333%; }
	.row .col_sm_8 { float: left; width: 66.66666667%; }
	.row .col_sm_9 { float: left; width: 75%; }
	.row .col_sm_10 { float: left; width: 83.33333333%; }
	.row .col_sm_11 { float: left; width: 91.66666667%; }
	.row .col_sm_12 { float: left; width: 100%; }
}

.grid_test { margin-top: 10px; }
.grid_test .row { margin-top: 10px; margin-bottom: 10px; padding:10px 5px; background:#c4e5f2;}
.grid_test .row.no_p { margin-top: 10px; margin-bottom: 10px; padding:10px 10px; background:#c4e5f2;}
.grid_test .row > div {height:40px; line-height:40px; text-align: center;  color: #fff; }
.grid_test .row > div > div {background: #96daf5;}
/*.grid_test .row > div:nth-child(even) {background: #7aaeff;}*/
/* Grid 끝 */

/* Flex 시작 */
.flex {display:flex;  flex-direction: row; flex-wrap : wrap}
.flex.space_between {justify-content: space-between; }
@media only screen and (max-width:800px) {
	.flex.space_between {justify-content: initial; }
}
.flex.flex_end {align-items: flex-end; }
/* Flex 끝 */

/* Breadcrumb 시작 */
.breadcrumb { width: 100%; }
.breadcrumb ul { width: 100%; }
.breadcrumb ul:after { clear: both; content: ''; display: block; }
.breadcrumb ul li { float: left; font-size: 14px; }
.breadcrumb ul li:first-child:before { content: ''; margin: 0; }
.breadcrumb ul li:before { content: '|'; float: left; margin: 0 20px; color: #888; }
.breadcrumb ul li a { color: #888; }
.breadcrumb ul li:hover a { color: #333; }
/* Breadcrumb 끝 */

/* Dropdown 시작 */
.dropdown { position: relative; display: inline-block; }
.dropdown .dropdown_toggle { display: inline-block; }
.dropdown .dropdown_menu { display:none; position: absolute; min-width: 150px; background: #fff; padding: 10px; border: 1px solid #eee; }
.dropdown .dropdown_menu li { font-size: 14px; line-height:24px; color: #333; padding: 0 5px; }
.dropdown .dropdown_menu li a { color: #333; }

.blue ~ .dropdown_menu {border:1px solid #87ceeb;}
.orange ~ .dropdown_menu {border:1px solid #ffa07a;}
.mint ~ .dropdown_menu {border:1px solid #40e0d0;}
.yellow ~ .dropdown_menu {border:1px solid #ffeb3b;}
.violet ~ .dropdown_menu {border:1px solid #ee82ee;}
.grey ~ .dropdown_menu {border:1px solid #dcdcdc;}
.darkgrey ~ .dropdown_menu {border:1px solid #a9a9a9;}
.black ~ .dropdown_menu {border:1px solid #362f2d;}
/* Dropdown 끝 */

/* Alert 시작 */
.alert { position: relative; padding: 11px 15px; font-size:14px; margin-bottom: 15px; border: 1px solid transparent; }
.alert > i {margin-right:5px;}
.alert.alert_red { border-color: #ffb8d1; color: #850024; background: #ffccda; }
.alert.alert_orange { border-color: #ffeeb8; color: #854b00; background: #ffe4cc; }
.alert.alert_yellow { border-color: #f9ffb8; color: #96c310; background: #fbffcc; }
.alert.alert_green { border-color: #c2ffb8; color: #138500; background: #ccffce; }
.alert.alert_blue { border-color: #b8daff; color: #004085; background: #cce5ff; }
.alert.alert_darkblue { border-color: #c4b8ff; color: #090085; background: #d2ccff; }
.alert.alert_gray { border-color: #dedede; color: #353535; background: #ececec; }

.alert.alert_error { border-color: #fa7d6f; color: #fff; background: #fa7d6f; }
.alert.alert_warning { border-color: #f7d36c; color: #fff; background: #f7d36c; }
.alert.alert_success { border-color: #80eae2; color: #fff; background: #80eae2; }
.alert.alert_info { border-color: #96daf5; color: #fff; background: #96daf5; }
/* Alert 끝 */

/* Badge 시작 */
.badge { position:relative; display: inline-block; padding:0 9px; height:20px; line-height:20px; font-size: 12px; background: #3c3c3c; color: #fff; }
.badge.badge_blue { background-color: #87ceeb; }
.badge.badge_orange { background-color: #ffa07a; }
.badge.badge_mint { background-color: #40e0d0; }
.badge.badge_yellow { background-color: #fbb814; }
.badge.badge_violet { background-color: #ee82ee; }
.badge.badge_grey { background-color: #dcdcdc;}
.badge.badge_darkgrey { background-color: #a9a9a9; }
.badge.badge_black { background-color: #362f2d; }
.badge.rounded {border-radius:50px;}

.badge.outline {color: inherit; background-color: transparent; border: 1px solid #888; background-color: #fff;}
.badge.outline.badge_blue { border: 1px solid #87ceeb; color:#87ceeb;}
.badge.outline.badge_orange { border: 1px solid #ffa07a; color:#ffa07a;}
.badge.outline.badge_mint { border: 1px solid #40e0d0; color:#40e0d0;}
.badge.outline.badge_yellow { border: 1px solid #fbb814; color:#fbb814;}
.badge.outline.badge_violet { border: 1px solid #ee82ee; color:#ee82ee;}
.badge.outline.badge_grey { border: 1px solid #dcdcdc; color:#dcdcdc;}
.badge.outline.badge_darkgrey { border: 1px solid #a9a9a9; color:#a9a9a9;}
.badge.outline.badge_black { border: 1px solid #362f2d; color:#362f2d;}

.badge.widget {width:30px; height:30px; line-height:30px; text-align:center; padding:0; color:#777; cursor:pointer;}
.badge.widget .badge_count { position:absolute; z-index:1; top:-4px; right:6px; transform: translateX(50%); background:#888; font-size:12px; color:#fff; height:15px; line-height:15px; border-radius:15px; text-align:center; padding:0 4px;}

.badge.widget.badge_blue {background:transparent;}
.badge.widget.badge_orange {background:transparent;}
.badge.widget.badge_mint {background:transparent;}
.badge.widget.badge_yellow {background:transparent;}
.badge.widget.badge_violet {background:transparent;}
.badge.widget.badge_grey {background:transparent;}
.badge.widget.badge_darkgrey {background:transparent;}
.badge.widget.badge_black {background:transparent;}

.badge.widget.badge_blue .badge_count {background:#87ceeb;}
.badge.widget.badge_orange .badge_count {background:#ffa07a;}
.badge.widget.badge_mint .badge_count {background:#40e0d0;}
.badge.widget.badge_yellow .badge_count {background:#ffeb3b;}
.badge.widget.badge_violet .badge_count {background:#ee82ee;}
.badge.widget.badge_grey .badge_count {background:#dcdcdc;}
.badge.widget.badge_darkgrey .badge_count {background:#a9a9a9;}
.badge.widget.badge_black .badge_count {background:#362f2d;}

.badge_widget_test > span {margin-right:25px;}

.badge.radius {border-radius:3px;}
/* Badge 끝 */

/* Card 시작 */
.cards {margin:0 -10px;}
.cards:after { content: ''; display: block; clear: both; }
.cards > .card { width:100%; float:left; padding:0 10px;}
.cards.card_col_2 > .card {width:50%;}
.cards.card_col_3 > .card {width:33.333%;}
.cards.card_col_4 > .card {width:25%;}
.cards.card_col_5 > .card {width:20%;}
.card { position: relative; background: #fff; padding: 0; border: 0;}
.card > .image { position: relative; display: block; padding: 0em; }
.card > .image > img { display: block; width: 100%; height: auto; border-radius: inherit; }
.card > .content {border:1px solid #eee;  padding: 20px; }
.card > .content.more { padding: 7px 15px; }
.card .title { font-size: 18px; color: #555; margin-bottom:5px; font-weight: bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card .cate { display:block; font-size: 12px; color: #f7835a; margin-bottom:14px;}
.card .body { font-size: 13px; line-height:23px; height:69px; overflow:hidden; color: #999; margin-bottom:9px;}
/* Card 끝 */

/* Loadingbar 시작 */
.loadingbar {position:relative; height: 20px; margin-bottom: 15px; background-color: #fff; border:1px solid #79adda; border-radius: 3px; }
.loadingbar:after { content: ''; display: block; clear: both; }
.loadingbar .bar {width:0; height: 100%; border-radius: 3px; font-size: 13px; line-height: 15px; color: #fff; text-align: center; background-color: #79adda; -webkit-transition: width .8s ease; -o-transition: width .8s ease; transition: width .8s ease; }
.loadingbar.red {border:1px solid #f7835a; color:#f7835a;}
.loadingbar.red .bar {background-color:#f7835a;}
.loadingbar.yellow {border:1px solid #f7d36c; color:#f7d36c;}
.loadingbar.yellow .bar {background-color:#f7d36c;}
.loadingbar.mint {border:1px solid #80eae2; color:#80eae2;}
.loadingbar.mint .bar {background-color:#80eae2;}

.loadingbar.round {border-radius: 6px;}
.loadingbar.round .bar {border-radius: 6px;}

.loadingbar.bordered {padding:3px; border-radius: 9px;}
.loadingbar.bordered .bar {line-height: 12px; border-radius: 6px;}
.loadingbar.bordered .bar_text {position:absolute; top:3px; right:6px; font-size:12px;}

.loadingbar.gradual {display:inline-block; border:0; background:none; border:0;}
.loadingbar.gradual .bar {width:auto; display:inline-block; margin-left:-10px; line-height: 15px; background:none;}
.loadingbar.gradual .bar:after {content:''; clear:both; display:block;}
.loadingbar.gradual .bar_dot {width:15px; height:15px; margin-left:10px; border:1px solid #96daf5; float:left;}
.loadingbar.gradual .bar_dot.on {background:#96daf5;}

.loadingbar .status {position: absolute; top:24px; display:none; z-index:1; border-radius:4px; padding: 5px 18px; font-size: 12px; line-height: 20px; color: #fff; background: #252525; transform:translateX(-50%);}
.loadingbar .status .tri {position:absolute; top:-5px; left:50%; margin-left:-5px; width: 5px; height: 5px; border-top:5px solid none; border-bottom:5px solid #252525; border-right: 5px solid transparent; border-left: 5px solid  transparent;}

.loadingbar.circle {border-width:5px; border-radius:50%; width:100px; height:100px; clip: rect( 20px, 220px, 220px, 20px );}
.loadingbar.circle .bar { width:100%; height:100%; background:transparent;}
.loadingbar.circle .bar_text {position:absolute; top:0; left:0; line-height:100px; width:100px; text-align:center;}
.loadingbar.easeincirc .bar {-webkit-transition: width .8s cubic-bezier(0.6, 0.04, 0.98, 0.335); -o-transition: width .8s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: width .8s cubic-bezier(0.6, 0.04, 0.98, 0.335);}
.loadingbar.easeoutcubic .bar {-webkit-transition: width .8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: width .8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: width .8s cubic-bezier(0.215, 0.61, 0.355, 1);}
.loadingbar.easeinoutquad .bar {-webkit-transition: width .8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: width .8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width .8s cubic-bezier(0.455, 0.03, 0.515, 0.955);}
.loadingbar.easeinoutcirc .bar {-webkit-transition: width .8s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: width .8s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: width .8s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
/* Loadingbar 끝 */

/* 모달 시작 */
.modal_wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; overflow-y: auto; padding: 30px 15px; display: none; }
.modal_wrap .modal_back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); transition: opacity .15s linear; }
.modal_wrap .modal { position: relative; box-sizing: border-box; margin: 30px auto; width: 600px; background: #fff; }
.modal_wrap .modal .modal_header .modal_close { position: absolute; top:50%; margin-top:-7px; right: 25px; width: 15px; height: 15px; border: 0; background: url(/assets/img/icon_close1.png) 0 0 no-repeat; cursor:pointer; }
.modal_wrap .modal .modal_header { position:relative; padding: 15px 25px; background: #4c9bfb; }
.modal_wrap .modal .modal_header h2 { font-size: 18px; color: #fff; }
.modal_wrap .modal .modal_body { padding: 25px 25px 10px; font-size: 14px; line-height:25px; color: #999; }
.modal_wrap .modal .modal_footer { padding: 15px 25px 30px; background: #fff; }
.modal_wrap .modal .modal_footer .btn {margin:0 3px;}
.modal_wrap .modal.modal_w_xl {width:1400px;}
.modal_wrap .modal.modal_w_lg {width:1200px;}
.modal_wrap .modal.modal_w_md {width:1000px;}
.modal_wrap .modal.modal_w_sm {width:800px;}
.modal_wrap .modal.modal_w_xs {width:600px;}

.modal_wrap.blue .modal .modal_header {background: #87ceeb;}
.modal_wrap.orange .modal .modal_header {background: #ffa07a;}
.modal_wrap.mint .modal .modal_header {background: #40e0d0;}
.modal_wrap.yellow .modal .modal_header {background: #ffeb3b;}
.modal_wrap.violet .modal .modal_header {background: #ee82ee;}
.modal_wrap.grey .modal .modal_header {background: #dcdcdc;}
.modal_wrap.darkgrey .modal .modal_header {background: #9c9c9c;}
.modal_wrap.black .modal .modal_header {background: #362f2d;}
/* 모달 끝 */

/* 패널 시작 */
.panel { position: relative; /*margin-bottom: 20px;*/ background-color: #fff; }
.panel_header { position: relative; height: 50px; line-height: 48px; color: #888; font-size: 14px; padding: 0 15px; background: #f9f9f9; border: 1px solid #e2e2e2; }
.panel_header .widget { position: absolute; top: 0; right: 15px; }
.panel_header .widget span { cursor: pointer; }
.panel_header + .panel_body { border-top: 0; }
.panel_body .panel-menu { border-left: 0; border-right: 0; }
.panel_body { position: relative; padding: 15px; border: 1px solid #e2e2e2; font-size: 14px; }
.panel_body + .panel_footer { border-top: 0; }
.panel_footer { padding: 10px 15px; background-color: #fafafa; border: 1px solid #e2e2e2; font-size: 14px; color: #888; }
.panel.panel_fullscreen { position: fixed; z-index: 10000; width:100%; height:100%; overflow-y:auto; left: 0; top: 0; right: 0; bottom: 0; }

.panel.panel_blue .panel_header {background:#87ceeb; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_blue .panel_body {background:#87ceeb; border:0; color:#fff;}
.panel.panel_orange .panel_header {background:#ffa07a; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_orange .panel_body {background:#ffa07a; border:0; color:#fff;}
.panel.panel_mint .panel_header {background:#40e0d0; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_mint .panel_body {background:#40e0d0; border:0; color:#fff;}
.panel.panel_yellow .panel_header {background:#ffeb3b; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_yellow .panel_body {background:#ffeb3b; border:0; color:#fff;}
.panel.panel_violet .panel_header {background:#ee82ee; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_violet .panel_body {background:#ee82ee; border:0; color:#fff;}
.panel.panel_grey .panel_header {background:#dcdcdc; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_grey .panel_body {background:#dcdcdc; border:0; color:#fff;}
.panel.panel_darkgrey .panel_header {background:#a9a9a9; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_darkgrey .panel_body {background:#a9a9a9; border:0; color:#fff;}
.panel.panel_black .panel_header {background:#362f2d; color:#fff; border:0; border-bottom:1px solid #fff;}
.panel.panel_black .panel_body {background:#362f2d; border:0; color:#fff;}

.panel.panel_blue.outline .panel_header {background:#def2fa; color:#87ceeb; border:1px solid #87ceeb; border-bottom:0;}
.panel.panel_blue.outline .panel_body {background:#fff; border:1px solid #87ceeb; color:#87ceeb;}
.panel.panel_orange.outline .panel_header {background:#ffe9e0; color:#ffa07a; border:1px solid #ffa07a; border-bottom:0;}
.panel.panel_orange.outline .panel_body {background:#fff; border:1px solid #ffa07a; color:#ffa07a;}
.panel.panel_mint.outline .panel_header {background:#6ce7db; color:#1aa093; border:1px solid #40e0d0; border-bottom:0;}
.panel.panel_mint.outline .panel_body {background:#fff; border:1px solid #40e0d0; color:#1aa093;}
.panel.panel_yellow.outline .panel_header {background:#fff5a1; color:#d4be00; border:1px solid #ffeb3b; border-bottom:0;}
.panel.panel_yellow.outline .panel_body {background:#fff; border:1px solid #ffeb3b; color:#d4be00;}
.panel.panel_violet.outline .panel_header {background:#fadcfa; color:#ee82ee; border:1px solid #ee82ee; border-bottom:0;}
.panel.panel_violet.outline .panel_body {background:#fff; border:1px solid #ee82ee; color:#ee82ee;}
.panel.panel_grey.outline .panel_header {background:#f5f5f5; color:#dcdcdc; border:1px solid #dcdcdc; border-bottom:0;}
.panel.panel_grey.outline .panel_body {background:#fff; border:1px solid #dcdcdc; color:#dcdcdc;}
.panel.panel_darkgrey.outline .panel_header {background:#c2c2c2; color:#fff; border:1px solid #a9a9a9; border-bottom:0;}
.panel.panel_darkgrey.outline .panel_body {background:#fff; border:1px solid #a9a9a9; color:#a9a9a9;}
.panel.panel_black.outline .panel_header {background:#524744; color:#fff; border:1px solid #362f2d; border-bottom:0;}
.panel.panel_black.outline .panel_body {background:#fff; border:1px solid #362f2d; color:#362f2d;}

.panel.panel_sty1 .panel_header {background:#eff7ff; color:#4c9bfb; border:1px solid #e3e5e4; height:45px; line-height:43px; font-weight:600;}
.panel.panel_sty1 .panel_body {border:1px solid #e3e5e4; border-top:0;}

/* 패널 끝 */

/* 페이지네이션 시작 */
.page { text-align: center; margin-top: 10px; }
.page.left_page { text-align: left; }
.page.right_page { text-align: right; }
.page > a { display: inline-block; width: 28px; height: 28px; line-height: 28px; border: 1px solid #ebebeb; vertical-align: middle; }
.page > a.prev { background: transparent url(/assets/img/icon_arw_left.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page > a.next { background: transparent url(/assets/img/icon_arw_right.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page > .paging { display: inline-block; vertical-align: middle; }
.page > .paging > a { display: inline-block; color: #424242; font-size: 15px; width: 28px; height: 28px; line-height: 26px; border: 1px solid #ebebeb; vertical-align: middle; }
.page > .paging > a:hover { background-color: #1b75bb; border: 0; color: #fff; line-height: 28px; }
.page > .paging > a.on { background-color: #1b75bb; border: 0; color: #fff; line-height: 28px; }
.page.custom1 > a { border: 0; }
.page.custom1 > .paging > a { border: 0; line-height: 28px; }
.page.custom2 > .paging > a { float: left; margin-left: -1px; }
.page.custom3 > a { border: 0; }
.page.custom3 > .paging > a { border: 0; line-height: 28px; border-radius: 50%; }
.page.custom4 > a { border-radius: 50%; }
.page.custom4 > .paging > a { border-radius: 50%; }
.page.custom5 > a {border:0; width:20px; height:20px; line-height:20px;}
.page.custom5 > .paging > a {background:#eff0f6; font-size:13px; width:20px; height:20px; line-height:20px; border:0; }
.page.custom5 > .paging > a.on {background:#4c9bfb;}
.page.custom5 > .paging > a:hover {background:#4c9bfb;}
.page.custom5 > a.begin { background: #eff0f6 url(/assets/img/icon_page_begin.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom5 > a.prev { background: #eff0f6 url(/assets/img/icon_page_prev.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom5 > a.next { background: #eff0f6 url(/assets/img/icon_page_next.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom5 > a.end { background: #eff0f6 url(/assets/img/icon_page_end.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom6 > a {border:0; width:30px; height:30px; line-height:30px;}
.page.custom6 > .paging > a {background:#eff0f6; font-size:13px; width:30px; height:30px; line-height:30px; border:0; }
.page.custom6 > .paging > a.on {background:#4c9bfb;}
.page.custom6 > .paging > a:hover {background:#4c9bfb;}
.page.custom6 > a.begin { background: #eff0f6 url(/assets/img/icon_page_begin.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom6 > a.prev { background: #eff0f6 url(/assets/img/icon_page_prev.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom6 > a.next { background: #eff0f6 url(/assets/img/icon_page_next.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
.page.custom6 > a.end { background: #eff0f6 url(/assets/img/icon_page_end.png) center center no-repeat; text-indent: -99999px; font-size: 0; }
/* 페이지네이션 끝 */

/* 메뉴 시작 */
.menu_wrap { position: relative; width: 100%; height: 50px; background: #404b8a; }
.menu { height: 100%; display: flex; }
.menu ul { height: 100%; }
.menu ul:after { content: ''; display: block; clear: both; }
.menu ul li { float:left; text-align:center;   line-height:50px; }
.menu ul li:hover {background: #1d223e;}
.menu ul li a { display:block; color: #fff; font-size: 14px; padding: 0 35px;}
.menu_wrap .widget { position: absolute; right: 10px; top: 0; height: 100%; line-height: 50px; }
.menu_wrap .widget .btn {background:transparent; color:#fff; border:1px solid rgba(255, 255, 255, .2);}

.menu_wrap.blue {background:#87ceeb;}
.menu_wrap.blue ul li:hover {background:#71c5e7;}
.menu_wrap.orange {background:#ffa07a;}
.menu_wrap.orange ul li:hover {background:#ff8e60;}
.menu_wrap.mint {background:#40e0d0;}
.menu_wrap.mint ul li:hover {background:#2adccb;}
.menu_wrap.yellow {background:#ffeb3b;}
.menu_wrap.yellow ul li:hover {background:#ffe821;}
.menu_wrap.violet {background:#ee82ee;}
.menu_wrap.violet ul li:hover {background:#eb6ceb;}
.menu_wrap.grey {background:#dcdcdc;}
.menu_wrap.grey ul li:hover {background:#cfcfcf;}
.menu_wrap.darkgrey {background:#a9a9a9;}
.menu_wrap.darkgrey ul li:hover {background:#9c9c9c;}
.menu_wrap.black {background:#362f2d;}
.menu_wrap.black ul li:hover {background:#282321;}
/* 메뉴 끝 */

/* 스텝 시작 */
.step { display: flex; width: 100%; }
.step .step_item { position: relative; flex: 1; display: inline-block; }
.step .step_item .step_line { position: absolute; top: 7px; left: 0; width: 100%; height: 3px; background: #e9e9e9; }
.step .step_item .step_icon { position: absolute; z-index: 5; width: 30px; height: 20px; line-height: 20px; text-align: center; background: #fff; }
.step .step_item:first-child .step_icon { margin: 0 0 0 55px; }
.step .step_item:first-child .step_line { margin-left: 55px; }
.step .step_item .step_icon .step_icon_dot { color: #ddd; }
.step .step_item .step_content { width: 140px; margin-top: 20px; text-align: center; color: #333; font-size: 14px; line-height: 18px; margin-left: -55px; }
.step .step_item:first-child .step_content { margin-left: 0; }
.step .step_item:last-child { flex: 0; }
.step .step_item:last-child .step_line { display: none; }
.step .step_item.stay .step_line { background: #1c84c6; }
.step .step_item.stay .step_icon .step_icon_dot { color: #1c84c6; }
.step.type_text .step_item:first-child .step_line { margin-left: 0; }
.step.type_text .step_item .step_icon { position: relative; display: inline-block; margin-left: 0; }
.step.type_text .step_item .step_content { position: relative; z-index: 5; background: #fff; width: auto; display: inline-block; margin-top: 0; margin-left: -5px; padding-right: 10px; text-align: right; }
.step.type_text .step_item:last-child { flex: none; }
.step.type_num .step_item:first-child .step_line { margin-left: 0; }
.step.type_num .step_item .step_line { top: 12px; }
.step.type_num .step_item .step_icon { position: relative; display: inline-block; margin-left: 0; width: 36px; text-align: center; }
.step.type_num .step_item .step_icon .step_num { display: inline-block; border: 1px solid #eee; border-radius: 50%; width: 30px; height: 30px; line-height: 28px; color: #ddd; }
.step.type_num .step_item .step_content { position: relative; z-index: 5; background: #fff; width: auto; display: inline-block; margin-top: 0; margin-left: -5px; padding-right: 10px; padding-left: 5px; text-align: right; }
.step.type_num .step_item:last-child { flex: none; }
.step.type_num .step_item.stay .step_icon .step_num { border: 1px solid #1c84c6; background: #1c84c6; color: #fff; }
.step.type_num .step_item.stay { }
/* 스텝 끝 */

/* 노티피케이션 시작 */
.notification { position: fixed; top: 10px; z-index: 1000; width: 300px; left: 50%; margin-left: -150px; }
.notification .message { position: relative; margin-bottom: 10px; padding: 10px; background: #e1e1e1; color: #333; font-size: 18px; line-height: 24px; cursor: pointer; display: none; }
/* 노티피케이션 끝 */

/* 타임라인 시작 */
.timeline { }
.timeline .timeline_item { position: relative; display: block; padding: 0 0 30px 0; }
.timeline .timeline_item .timeline_line { position: absolute; top: 3px; left: 9px; width: 2px; height: 100%; background: #e9e9e9; }
.timeline .timeline_item .timeline_icon { position: absolute; z-index: 5; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #fff; }
.timeline .timeline_item .timeline_icon .timeline_icon_dot { color: #1c84c6; }
.timeline .timeline_item .timeline_content { text-align: left; color: #333; font-size: 14px; line-height: 18px; margin-left: 25px; }
.timeline .timeline_item:last-child .timeline_line { display: none; }
/* 타임라인 끝 */

/* 툴팁 시작 */
.tooltip { position: relative; }
.tooltip_content { position: absolute; display: none; border-radius:4px; padding: 5px 10px; font-size: 14px; line-height: 20px; color: #fff; background: #333; content: attr(data-content); }
.tooltip_content.orange {background:#ffa07a; }
.tooltip_content.orange .tri.top {position:absolute; bottom:-5px; left:50%; margin-left:-5px; width: 5px; height: 5px; border-top:5px solid #ffa07a; border-bottom:5px solid none; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.tooltip_content.orange .tri.bottom {position:absolute; top:-5px; left:50%; margin-left:-5px; width: 5px; height: 5px; border-top:5px solid none; border-bottom:5px solid #ffa07a; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.tooltip_content.orange .tri.left {position:absolute; top:50%; right:-5px; margin-top:-5px; width: 5px; height: 5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right: 5px solid none; border-left: 5px solid #ffa07a;}
.tooltip_content.orange .tri.right {position:absolute; top:50%; left:-5px; margin-top:-5px; width: 5px; height: 5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right: 5px solid #ffa07a; border-left: 5px solid none;}
.tooltip_content.blue {background:#87ceeb; }
.tooltip_content.blue .tri.top {position:absolute; bottom:-5px; left:50%; margin-left:-5px; width: 5px; height: 5px; border-top:5px solid #87ceeb; border-bottom:5px solid none; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.tooltip_content.blue .tri.bottom {position:absolute; top:-5px; left:50%; margin-left:-5px; width: 5px; height: 5px; border-top:5px solid none; border-bottom:5px solid #87ceeb; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.tooltip_content.blue .tri.left {position:absolute; top:50%; right:-5px; margin-top:-5px; width: 5px; height: 5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right: 5px solid none; border-left: 5px solid #87ceeb;}
.tooltip_content.blue .tri.right {position:absolute; top:50%; left:-5px; margin-top:-5px; width: 5px; height: 5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right: 5px solid #87ceeb; border-left: 5px solid none;}
/*.tooltip_top:hover:after {display:block; top:-35px; left:50%;}
.tooltip_bottom:hover:after {display:block; bottom:-35px; left:50%;}
.tooltip_left:hover:after {display:block; top:50%; left:-30px;}
.tooltip_right:hover:after {display:block; top:50%; right:-30px;}*/
/* 툴팁 끝 */
/* 타이틀 박스 시작 */
.title_box {width:100%; height:45px; line-height:45px; text-align:center; font-size:14px;}
.title_box.blue {background:#4c9bfb; color:#fff;}
/* 타이틀 박스 끝 */
/* 다용도 박스 시작 */
.mtbox { margin-bottom: 5px; padding: 0; }
.mtbox .mtbox_content { padding: 10px 15px; border: 1px solid #e3e5e4; background:#fff;}
.mtbox .mtbox_content .ip_group > .ipt { /*border: 0;*/ }
/* 다용도 박스 끝 */

/* 리스트 시작 */
.list {padding:20px; border:1px solid #e1e1e1;}
.list ul li { position: relative; font-size: 13px; line-height: 28px;}
.list ul li > a { display:inline-block; color:#999; width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
.list ul li > a:hover { color:#333; }
.list ul li .cate { color:#3474ff; display:inline-block; width:25%; vertical-align:middle; }
.list ul li .cate a { color: #3474ff; }
.list ul li .article_add {display:inline-block; width:10%; height:16px; background:url(/assets/img/btn_article_add.gif) right center no-repeat; vertical-align:middle; cursor:pointer;}

.list.type_photo ul {margin:0 -5px;}
.list.type_photo ul:after {content:''; clear:both; display:block;}
.list.type_photo ul li {position:relative; float:left; width:33.333%; padding:0 5px; margin-bottom:10px;}
.list.type_photo ul li .checkbox {position:absolute; top:0; left:5px; width:15px; height:15px; display:none;}
.list.type_photo ul li .thumb {border:1px solid #f1f1f1;}
.list.type_photo ul li:hover .thumb {border:1px solid #4c9bfb;}
.list.type_photo ul li:hover .checkbox {display:block;}
.list.type_photo ul li img {display:block; width:100%;}
/* 리스트 끝 */

/* 스위치 시작 */
/*
.switch { display: inline-block; vertical-align: middle; position: relative; margin-right: 30px; height: 30px; width: 170px; border: 2px solid #dfdfdf; border-radius: 15px; box-sizing: border-box; }
.switch-label { position: relative; z-index: 4; float: left; width: 80px; line-height: 26px; font-size: 14px; color: #777; text-align: center; cursor: pointer; }
.switch-label-off { padding-left: 4px; }
.switch-label-on { padding-left: 4px; }
.switch-input { display: none; }
.switch-input:checked + .switch-label { color: #fff; -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; }
.switch-input:checked + .switch-label-on ~ .switch-selection { left: 78px; }
.switch-selection { display: block; position: absolute; z-index: 3; top: -2px; left: -2px; width: 90px; height: 30px; background: #65bd63; border-radius: 15px; -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; }
.switch-blue .switch-selection { background: #6a8dd8; }
.switch-yellow .switch-selection { background: #c4bb61; }*/
/* 스위치 끝 */

/* 프로필 시작 */
.profile {width:100%; padding:20px 20px 15px; border-bottom:1px solid #eee;}
.profile:after {content:''; clear:both; display:block;}
.profile .thumb {float:left; width:50px; height:50px; margin-right:10px; }
.profile .thumb img {display:block; width:100%; height:100%; border-radius:50%;}
.profile .profile_info {float:left;}
.profile .profile_info .part {display:block; font-size:14px; line-height:18px; color:#555; font-weight:700;}
.profile .profile_info .name {display:block; font-size:18px; line-height:27px; color:#222; font-weight:700;}
.profile .profile_info .name .my_service {position:relative; display:inline-block; vertical-align:middle; }
.profile .profile_info .name .my_service .btn_cog {line-height:22px; width:17px; height:17px; margin-left:9px; background:url(/assets/img/icon_cog.png) 0 0 no-repeat; cursor:pointer;}
.profile .profile_info .name .my_service .service_list { display:none; position:absolute; top:30px; left:50%; transform:translate(-50%); background:url(/assets/img/icon_blue_arw.png) top center no-repeat;}
.profile .profile_info .name .my_service ul {background:linear-gradient(to right, #0551ff , #6191fe); padding:10px 0 0 0; border-radius:4px; margin-top:4px;}
.profile .profile_info .name .my_service ul li { white-space:nowrap; padding:0 10px; text-align:center;}
.profile .profile_info .name .my_service ul li a {color:#fff; font-size:12px; line-height:30px;}
.profile .profile_info .name .my_service ul li.util_wrap {border-bottom:1px solid #ddd;}
.profile .logout {float:right; margin-top:15px; border:1px solid #4c9bfb; text-align:center; font-size:14px; color:#4c9bfb; width:80px; height:30px; line-height:28px; }

.profile.blue {background:#4c9bfb;}
.profile.blue .profile_info .part {color:#fff;}
.profile.blue .profile_info .name {color:#fff;}
.profile.green {background:#17c671;}
.profile.green .profile_info .part {color:#fff;}
.profile.green .profile_info .name {color:#fff;}
.profile.red {background:#c4183c;}
.profile.red .profile_info .part {color:#fff;}
.profile.red .profile_info .name {color:#fff;}
.profile.yellow {background:#ffb400;}
.profile.yellow .profile_info .part {color:#fff;}
.profile.yellow .profile_info .name {color:#fff;}
.profile.mint {background:#00b8d8;}
.profile.mint .profile_info .part {color:#fff;}
.profile.mint .profile_info .name {color:#fff;}
.profile.grey {background:#e3e5e4;}
.profile.grey .profile_info .part {color:#362f2d;}
.profile.grey .profile_info .name {color:#362f2d;}
.profile.darkgrey {background:#5a6169;}
.profile.darkgrey .profile_info .part {color:#fff;}
.profile.darkgrey .profile_info .name {color:#fff;}
.profile.black {background:#362f2d;}
.profile.black .profile_info .part {color:#fff;}
.profile.black .profile_info .name {color:#fff;}
.header-wrap .profile.type_article {float:left; width:auto; padding:30px 0; border:0;}
.header-wrap .profile.type_article .thumb {width:30px; height:30px; margin-right:11px;}
.profile.type_article .profile_info .part {display:none;}
.profile.type_article .profile_info .name {font-size:16px; line-height:30px; color:#555; font-weight:normal;}
.profile.type_article .profile_info .name .my_service {margin-left:5px;}
.profile.type_article .profile_info .name .my_service .service_list {background:none; transform:translate(-90%);}
.profile.type_article .profile_info .name .my_service ul {background:#fff; border:1px solid #ddd;}
.profile.type_article .profile_info .name .my_service ul li a {color:#555;}

.header_bar .profile {width:auto; padding:0; margin-left:20px; min-width:150px; margin-top:20px;}
.header_bar .profile:after {content:''; clear:both; display:block;}
.header_bar .profile .thumb {float:left; width:50px; height:50px; margin-right:10px;}
.header_bar .profile .thumb img {display:block; width:100%; height:100%; border-radius:50%;}
.header_bar .profile .profile_info {float:left;}
.header_bar .profile .profile_info .part {display:block; font-size:13px; line-height:17px; margin:7px 0 3px 0; color:#555;}
.header_bar .profile .profile_info .name {display:block; font-size:14px; line-height:18px; color:#222; font-weight:bold;}
/* 프로필 끝 */

/* 애니메이션 효과 시작 */
.ani_grow {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;}
.ani_grow:hover {-webkit-transform: scale(1.1); transform: scale(1.1);}
.ani_shrink {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;}
.ani_shrink:hover {-webkit-transform: scale(0.9); transform: scale(0.9);}
.ani_pulse {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.ani_pulse:hover {-webkit-animation-name: ani_pulse; animation-name: ani_pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
@keyframes ani_pulse {
	25% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	75% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}
.ani_pulsegrow {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.ani_pulsegrow:hover {-webkit-animation-name: ani_pulsegrow; animation-name: ani_pulsegrow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;}
@keyframes ani_pulsegrow {
	100% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}
.ani_pulseshrink {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.ani_pulseshrink:hover { -webkit-animation-name: ani_pulseshrink; animation-name: ani_pulseshrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;}
@keyframes ani_pulseshrink {
	100% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}
.ani_push {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.ani_push:hover {-webkit-animation-name: ani_push; animation-name: ani_push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
@keyframes ani_push {
	50% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.ani_pop {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.ani_pop:hover {-webkit-animation-name: ani_pop; animation-name: ani_pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
@keyframes ani_pop {
	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}
.ani_bouncein {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
.ani_bouncein:hover {-webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);}
.ani_bounceout {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
.ani_bounceout:hover {-webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);}
.ani_skew {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;}
.ani_skew:hover {-webkit-transform: skew(-10deg); transform: skew(-10deg);}
.ani_skewforward {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%;}
.ani_skewforward:hover {-webkit-transform: skew(-10deg); transform: skew(-10deg);}
.ani_skewbackward {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%;}
.ani_skewbackward:hover {-webkit-transform: skew(10deg); transform: skew(10deg);}
/* 애니메이션 효과 끝 */

.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-heading { color: inherit; }
.alert-link { font-weight: 700; }

.alert-dismissible { padding-right: 3.85rem; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; padding: 0.75rem 1.25rem;  color: inherit; }

.alert-primary { color: #1b4b72; background-color: #d6e9f8; border-color: #c6e0f5; }
.alert-primary hr { border-top-color: #b0d4f1; }
.alert-primary .alert-link { color: #113049; }

.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.alert-secondary hr { border-top-color: #c8cbcf; }

.alert-secondary .alert-link { color: #202326; }

.alert-success { color: #1d643b; background-color: #d7f3e3; border-color: #c7eed8; }
.alert-success hr { border-top-color: #b3e8ca; }
.alert-success .alert-link { color: #123c24; }

.alert-info { color: #385d7a; background-color: #e2f0fb; border-color: #d6e9f9; }
.alert-info hr { border-top-color: #c0ddf6; }
.alert-info .alert-link { color: #284257; }

.alert-warning { color: #857b26; background-color: #fffbdb; border-color: #fffacc; }
.alert-warning hr { border-top-color: #fff8b3; }
.alert-warning .alert-link { color: #5d561b; }

.alert-danger { color: #761b18; background-color: #f9d6d5; border-color: #f7c6c5; }
.alert-danger hr { border-top-color: #f4b0af; }
.alert-danger .alert-link { color: #4c110f; }

.alert-light { color: #818182; background-color: #fefefe; border-color: #fdfdfe; }
.alert-light hr { border-top-color: #ececf6; }
.alert-light .alert-link { color: #686868; }

.alert-dark { color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; }
.alert-dark hr { border-top-color: #b9bbbe; }
.alert-dark .alert-link { color: #040505; }

.hide { display: none;}

.bd_r_remove { border-right: 0}
.bd_bt_remove { border-bottom: 0}
.bd_up_remove { border-top: 0}

.bg_light_gray {background-color: #f3f3f3}

.slide_box { position: relative; border: 1px solid #e3e5e4; margin-top: 10px; }
.slide_box_name { margin: 10px; font-size: 12px; }
.slide_box_arw { background: url(/assets/img/select_arw.png) no-repeat; display: block; transition: all .2s linear; width: 12px; height: 12px; float: right; margin-top: 4px;}
.slide_box_arw.open { background: url(/assets/img/select_arw.png) no-repeat; display: block; transition: all .2s linear; width: 12px; height: 12px; float: right; margin-top: 4px;
	-ms-transform-origin: 50% 28%; -webkit-transform-origin: 50% 28%; transform-origin: 50% 28%; -ms-transform: rotate3d(0, 0, 1, 180deg); -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); }
.slide_box_in { padding: 10px; border-top: 1px solid #e3e5e4; display: none;}
.slide_box_circle { width: 5px; height: 5px; background: #cd4c4c; border-radius: 50%; position: absolute; margin: 6px; }