.join-progress {
    width: 100%;
    height: 5px;
    background-color: rgba(0,0,0,.03);
}
.join-progress>span {
    display: inline-block;
    vertical-align: top;
    height: 5px;
}
.join-step01 {
    width: 25%;
}
.gradation-blue {
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#a028e6),color-stop(.3,#882dd3),color-stop(.67,#8241dd),color-stop(1,#5541ef));
    background: -moz-linear-gradient(left,#a028e6 0%,#882dd3 30%,#8241dd 67%,#5541ef 100%);
    background: -webkit-linear-gradient(left,#a028e6 0%,#882dd3 30%,#8241dd 67%,#5541ef 100%);
    background: -o-linear-gradient(left,#a028e6 0%,#882dd3 30%,#8241dd 67%,#5541ef 100%);
    background: -ms-linear-gradient(left,#a028e6 0%,#882dd3 30%,#8241dd 67%,#5541ef 100%);
    background: linear-gradient(left,#a028e6 0%,#882dd3 30%,#8241dd 67%,#5541ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a028e6',endColorstr='#5541ef',gradientType=1);
}
.join-top-text {
    font-family: 'NanumSquare Light';
    font-size: 21px;
    color: #23212a;
}
.join-top-text {
    padding: 10px 20px 20px 30px;
    background-color: #fff;
}

	
.font12{font-size:12px !important;}
.font14{font-size:14px !important;}
.font16{font-size:16px !important;}
.font18{font-size:18px !important;}

.ff_tahoma {font-family: 'tahoma' !important;}

.h10 {height:10px;}
.h20 {height:20px;}
.h30 {height:30px;}

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}

.bold {font-weight:bold !important;}
.underline {display:inline-block; border-bottom:2px solid #bfe8f1 !important}
.underline_orange {display:inline-block; border-bottom:2px solid #ff9a5b !important}
.underline_red {display:inline-block; padding-bottom:4px; border-bottom:3px solid #ff1111 !important}
.underline_red5 {display:inline-block; padding-bottom:4px; border-bottom:5px solid #ff7c7c !important}

.color_red {color: #f00 !important;}
.color_sky {color: #64baef !important;}
.color_orange {color: #f48a47 !important;}
.color_violet {color: #ae4ed7 !important;}
.color_gray {color: #ccc !important;}
.color_white {color: #fff !important;}
.text_shadow{ text-shadow:0 0 7px rgba(0,0,0,.5)}

.h20 {
    height: 20px;
}

.div-separator {
    margin: 20px auto 0;
    border: 0 solid #e7e6e6;
    clear: both;
    position: relative;
    z-index: 1;
}
.div-separator2 {
    margin: 0 auto 0;
    border: 0 solid #e7e6e6;
    clear: both;
    position: relative;
    z-index: 1;
}
.div-sep-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -13px;
    height: 26px;
    width: 26px;
    font-size: 14px;
    color: rgb(205, 205, 205);
    background: none repeat scroll 0 0 #FFF;
    border: 1px solid rgb(205, 205, 205);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
    line-height: 26px !important;
}

.div-sep-icon2 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -33px 0 0 -13px;
    height: 26px;
    width: 26px;
    font-size: 14px;
    color: rgb(205, 205, 205);
    background: none repeat scroll 0 0 #FFF;
    border: 1px solid rgb(205, 205, 205);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
    line-height: 26px !important;
}

.div-sep-line {
    clear: both;
    height: 10px;
    border-top: 1px solid #e7e6e6;
}