@charset "utf-8";
.fnt_roboto {
    font-family: roboto
}

.fnt_lato {
    font-family: lato
}

.fw300 {
    font-weight: 300
}

.fw400 {
    font-weight: 400
}

.fw500 {
    font-weight: 500
}

.fw700 {
    font-weight: 700
}

.fw900 {
    font-weight: 900
}

.frm_input {
    display: block;
    width: 100%;
    height: 40px;
    color: #444;
    text-indent: 10px;
    line-height: 38px;
    background: #fff;
    border: solid 1px #444
}

.half_input {
    width: 50%
}

.third_input {
    width: 30%
}

.quarter_input {
    width: 25%
}

.zip_input {
    float: left;
    width: 30%;
    margin: 0 0 10px
}

.frm_address {
    margin: 0 0 10px
}

.tel_input {
    float: left;
    width: 32%;
    margin: 0 2% 0 0
}

.tel_input_last {
    float: left;
    width: 32%;
    margin: 0
}

.account_input {
    float: left;
    width: 30%
}

.frm_input,
.half_input,
.third_input,
.quater_input,
.tel_input,
.tel_input_last {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.frm_info {
    margin: 5px 0 0;
    color: #15aacf;
    font-size: 12px;
    line-height: 18px
}

.frm_info strong {
    font-weight: 500
}

.frm_info i {
    font-size: 16px
}

.selec_chk {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    outline: 0;
    z-index: -1
}

.chk_box {
    position: relative
}

.chk_box input[type=checkbox]+label {
    position: relative;
    padding-left: 22px;
    vertical-align: baseline;
    cursor: pointer
}

.chk_box input[type=checkbox]+label:hover {}

.chk_box input[type=checkbox]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #ccc
}

.write_div .chk_box input[type=checkbox]+label,
.bo_vc_w .chk_box input[type=checkbox]+label {
    padding-left: 22px
}

.write_div .chk_box input[type=checkbox]+label span,
.bo_vc_w .chk_box input[type=checkbox]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc
}

.chk_box input[type=checkbox]:checked+label {
    color: #000000
}

.chk_box input[type=checkbox]:checked+label span {
    background: url(../img/chk.png) no-repeat 50% 50% #15aacf;
    border: solid 1px #0b92b4
}

.all_chk.chk_box input[type=checkbox]+label span {}

.chk_box input[type=radio]+label {
    position: relative;
    padding-left: 22px;
    vertical-align: baseline;
    cursor: pointer
}

.chk_box input[type=radio]+label:hover {}

.chk_box input[type=radio]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%
}

.write_div .chk_box input[type=radio]+label,
.bo_vc_w .chk_box input[type=radio]+label {
    padding-left: 22px
}

.write_div .chk_box input[type=radio]+label span,
.bo_vc_w .chk_box input[type=radio]+label span {
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc
}

.chk_box input[type=radio]:checked+label {
    color: #000000
}

.chk_box input[type=radio]:checked+label span {
    background: url(../img/chk_radio.png) no-repeat 50% 50% #15aacf;
    border: solid 1px #0b92b4
}

.write_div .select {
    display: block;
    position: relative;
    height: 40px;
    line-height: 38px;
    background: #fff;
    border: 1px solid #444;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    transition: all .6s ease-out
}

.write_div .select label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    color: #444;
    font-weight: 300;
    line-height: 38px;
    text-indent: 10px
}

.write_div .select label:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    content: '';
    font-size: 13px;
    color: #444;
    text-align: center;
    background: url(../img/icon_select_b.png) no-repeat 50% 50%
}

.write_div .select select {
    display: block;
    width: 100%;
    height: 40px;
    color: #444;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0)
}

.btn {
    display: inline-block;
    padding: 0 12px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn i {
    font-size: 18px
}

.btn.btn_submit {
    background: #444
}

.btn.btn_act {
    background: #444
}

.btn.btn_act:hover {
    color: #fff;
    background: #000000
}

.btn.btn_normal {
    background: #444
}

.btn.btn_normal:hover {
    color: #fff;
    background: #000000
}

.btn.btn_close {
    color: #999;
    line-height: 38px;
    background: #fff;
    border: solid 1px #ccc
}

.btn.btn_close:hover {
    color: #000000;
    background: #f6f6f6
}

.btn.btn_close_full {
    width: 100%;
    color: #999;
    line-height: 38px;
    background: #fff;
    border: solid 1px #ccc
}

.btn.btn_close_full:hover {
    color: #000000;
    background: #f6f6f6
}

.btn.btn_cancel {
    color: #999;
    line-height: 38px;
    background: #fff;
    border: solid 1px #ccc
}

.btn.btn_cancel:hover {
    color: #000000;
    background: #f6f6f6
}

.btn_confirm {
    position: relative;
    text-align: center;
    z-index: 9
}

.btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.btn_confirm .btn_submit,
.btn_confirm .btn_cancel {
    width: 160px;
    height: 50px;
    line-height: 50px;
	background-color: #60584c;
    border: 2px solid #60584c;
    border-radius: 3px;
}

.btn.btn_frmline {
    margin: 0 0 0 5px;
    background: #444
}

.btn.btn_frmline:hover {
    color: #fff;
    background: #000000
}

.btn.btn_admin {
    background: #f63941
}

.btn.btn_admin:hover {
    background: #000000
}

.btn_confirm input,
.btn_confirm span,
.btn_confirm img,
.btn_confirm a {
    vertical-align: top
}

.kakaotalk {
    color: #3c1e20
}

.kakaotalk_bg {
    background-color: #fce000
}

.naver {
    color: #00c73c
}

.naver_bg {
    background-color: #00c73c
}

.google {
    color: #e84134
}

.google_bg {
    background-color: #e84134
}

.facebook {
    color: #3a589e
}

.facebook_bg {
    background-color: #3a589e
}

.twitter {
    color: #1da1f3
}

.twitter_bg {
    background-color: #1da1f3
}

.instagram {
    color: #f4555a
}

.instagram_bg {
    background: #f5cf00;
    background: -moz-linear-gradient(45deg, #f5cf00 0%, #e90b22 51%, #803db0 100%, #803db0 100%);
    background: -webkit-linear-gradient(45deg, #f5cf00 0%, #e90b22 51%, #803db0 100%, #803db0 100%);
    background: linear-gradient(45deg, #f5cf00 0%, #e90b22 51%, #803db0 100%, #803db0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5cf00', endColorstr='#803db0', GradientType=1)
}

.telegram {
    color: #31ade0
}

.telegram_bg {
    background-color: #31ade0
}

.youtube {
    color: #ee1c1b
}

.youtube_bg {
    background-color: #ee1c1b
}

.txt_active {
    color: #117cce
}

.txt_done {
    color: #f00001
}

.txt_expired {
    color: #ccc
}

.txt_rdy {
    color: #15aacf
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.animated.standby {
    -webkit-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
    visibility: hidden
}

.pg_wrap {
    clear: both;
    display: block;
    margin: 40px 0;
    text-align: center
}

.pg_wrap:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.pg {
    text-align: center
}

.pg_page,
.pg_current {
    display: inline-block;
    vertical-align: middle;
    font-family: roboto;
    font-weight: 400;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.pg a:focus,
.pg a:hover {
    text-decoration: none
}

.pg_page {
    width: 30px;
    min-width: 30px;
    height: 30px;
    color: #666;
    font-size: 11px;
    line-height: 28px;
    padding: 0 5px;
    text-decoration: none
}

.pg_page:hover {
    background-color: #eee
}

.pg_start {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/btn_first.gif) no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #ccc
}

.pg_prev {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/btn_prev.gif) no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #ccc
}

.pg_end {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/btn_end.gif) no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #ccc
}

.pg_next {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/btn_next.gif) no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #ccc
}

.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {
    background-color: #eee
}

.pg_current {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 28px;
    background: #1398d9;
    border: 1px solid #117cce
}

#data_type {}

#data_type table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 5px
}

#data_type caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#data_type th {
    padding: 12px 10px;
    font-weight: 500;
    text-align: center;
    background: #222;
    border: solid 1px #444
}

#data_type td {
    padding: 12px 10px;
    text-align: center;
    border: solid 1px #444
}

#data_type .td_chk {
    width: 40px;
    text-align: center
}

#data_type .td_subject {}

#data_type .td_mobile label {
    font-size: 12px;
    cursor: pointer
}

#data_type td i {
    color: #15aacf;
    font-size: 12px
}

#data_type td input,
#data_type td span,
#data_type td img,
#data_type td a {
    vertical-align: middle
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:768px) {
    .half_input {
        width: 100%
    }
    .third_input {
        width: 100%
    }
    .quarter_input {
        width: 100%
    }
    .select {
        width: 100%
    }
    .btn {
        padding: 0 8px
    }
    .pg_wrap {
        margin: 30px 0
    }
    .pg_page {
        width: 22px;
        min-width: 22px;
        height: 22px;
        line-height: 22px
    }
    .pg_current {
        width: 22px;
        min-width: 22px;
        height: 22px;
        line-height: 20px
    }
}

@media screen and (max-width:480px) {}