/* header ------------------------------------------------------------------------------------------------------------------------*/
#header {
    width: 100%;
    height: auto;
    background:#fff;
    border-bottom:1px solid #e0e0e0;
    /*position:fixed;*/
    top: 0;
    z-index:9998;
}
#header .bottom {
    height: 84px;
}
#header h1 {
    width: 231px;
    height: 39px;
    display: inline-block;
    background: url("//update.coolmessenger.com/_ImageServer/coolmessenger/img/bi.png") 0 0 no-repeat;
    text-indent: -9999px;
    margin-top: 22px;
    margin-right: 14px;
    vertical-align: top;
    float:left;
}
#header .inner_wrap h1 a{ width: 100%; height: 100%; display: block; }
#mainNav { margin-top: 38px; float:left; }
#mainNav li { float: left; margin: 0 12.9px; }
#mainNav li a { font-size: 16px; color: #444444; font-family:"NanumGothic-Bold";  }
#mainNav .CoolSmsBtn { color: #d82c2c;}
/*#mainNav li a:hover{ color:#22a7df;}*/
#header .sideNav { float: right; margin-top: 35px; }
#header .sideNav li {
    font-size: 16px;
    position: relative;
}
*+html body #header .sideNav { margin-top: 20px; }
/* #header .sideNav > li{ margin-left: 18px; } */
#header .sideNav li a {
    font-size: 16px;
    color: #a5a5a5;
    vertical-align: middle;
}
#header .sideNav li a:hover{ color:#22a7df; }
#header .sideNav li.jiranLogo {
    width: 38px;
    height: 28px;
    background: url("/common/images/logo_jiran.png") 0 0 no-repeat;
    text-indent: -9999px;
    vertical-align: middle;
    position:relative;
    margin-top: -4px;
}
#header .sideNav li.jiranLogo img{ position:absolute; top:0; left:0; }
.inner_wrap { width: 960px; margin: 0 auto; position:relative; }
 *+html body  .inner_wrap {  padding-bottom:14px;}
#header .user_btn img{ width:21px; height:21px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;   }
.gnb_ul .gnb_li{
	height:100%;
	cursor:pointer;
	text-align: center;
    display: block;
	position:relative;
}
#loginInput, #userNameInput {position:absolute !important;}

/* 로그인하면 나오는 화면 ------------------------------------------------------------------------------------------------- */
/* 로그인하면 나오는 화면 ------------------------------------------------------------------------------------------------- */
/* 로그인하면 나오는 화면 ------------------------------------------------------------------------------------------------- */
/* 로그인하면 나오는 gnb------------------------------------------------------------------------------------------ */
#after_login_gnb{ height:100%; margin-top: -11px; }
 *+html body #after_login_gnb{ height:100%; margin-top: 0; }
#pc_header #pc_header_inner1 #after_login_gnb .gnb_ul .gnb_li{ position:absolute; }
/*.user_btn{ padding: 10px; min-width: 111px; width: auto; }*/
.user_btn{ display:block; width:100%; padding: 10px 0px;  }
.toggle_btn{
    display:inline-block;
    width:15px;
    height: 10px;
    background: url(/common/images/login_arrow_down_btn.png) no-repeat top;
}
#header .sideNav li.toggle_btn{ margin-left:24px; }
.user_name{ margin-left:2px; margin-right:4px; }
#header .sideNav .user_name{
    max-width: 105px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/**+html body #header .sideNav .user_name{ max-width:90px; }*/
.user_btn.on .toggle_btn{
    display:inline-block;
    width:15px; height:10px;
    background:url(/common/images/login_arrow_down_btn_blue.png) no-repeat top;
}
.user_btn.on .user_name{ color:#25a7df; }
.user_btn:hover .user_name{ color:#25a7df; }
.user_btn:hover .toggle_btn{
    display:inline-block;
    width:15px;
    height:10px;
    background:url(/common/images/login_arrow_down_btn_blue.png) no-repeat top;
}
.user_btn.click .toggle_btn{ background:url(/common/images/login_arrow_btn_up.png) no-repeat top; }
.user_btn.click.on .toggle_btn{ background:url(/common/images/login_arrow_btn_up_blue.png) no-repeat top; }
.user_btn.click:hover .toggle_btn{ background:url(/common/images/login_arrow_btn_up_blue.png) no-repeat top; }
/*.point_btn{width:109px; top:0; right:112px;}*/
.point_btn a{ display:block;  width:100%; padding:11px 10px; }
.point_img{
    display:inline-block;
    width:16px; height:16px;
    background:url(/common/images/point_p_blue.png) no-repeat center;
    margin-top:0.4px;
    vertical-align: middle;
}
.point_num{ margin-left:2px; margin-right:5px; }
.point_btn:hover .point_img{ background:url(/common/images/point_p_hover.png) no-repeat center; }
.point_btn{
    /*min-width: 98px; */
    width:auto;
    margin-top:1px;
}
.point_btn img{margin-top:3px;}
.user_btn.white .toggle_btn{ background:url(/common/images/login_arrow_down_btn_white.png) no-repeat center; color:#fff; }
.user_btn.click.white .toggle_btn{ background:url(/common/images/login_arrow_btn_up_white.png) no-repeat center; }
.date{ font-size:12px; }




#footer {
    width: 100%;
    height: 330px;
    border-top: 1px solid #dedede; }
#footer p, #footer [name="coolschool-fair"] .fair_map h5, [name="coolschool-fair"] .fair_map #footer h5, #footer span {
    line-height: 20px;
    font-size: 12px;
    color: #adadad; }
#footer h4 {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 13px; }
#footer .inner {
    z-index: 9;
    width: 1110px;
    margin: 0 auto;
}
#footer .inner .bi-comms {
    display: inline-block;
    padding-top: 30px; }
@media screen and (max-width: 768px) {
    #footer .inner .bi-comms {
        margin: 0 auto;
        display: block;
        width: 170px; } }
#footer .inner .intro {
    margin-top: 17px;
    font-family: "Dotum", sans-serif; }
#footer .inner .intro, #footer .inner .intro a {
    color: #373737;
    font-size: 14px;
    line-height: 24px; }
#footer .inner .intro > a {
    margin-right: 35px;
    position: relative; }
#footer .inner .intro > a:after {
    content: '';
    display: block;
    width: 1px;
    height: 13px;
    background-color: #bbbbbb;
    position: absolute;
    right: -22px;
    top: 0; }
#footer .inner .intro > a:nth-of-type(8) {
    margin-right: 0; }
#footer .inner .intro > a:nth-of-type(8):after {
    display: none; }
#footer .inner .intro > a:hover {
    text-decoration: underline; }
@media screen and (max-width: 980px) {
    #footer .inner .intro > a {
        width: 50%;
        display: block;
        float: left;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center; }
    #footer .inner .intro > a:after {
        display: none; } }
#footer .inner .intro {
    color: #bbbbbb; }
#footer .inner .intro .family-site {
    display: block;
    width: 182px;
    background-color: #ffffff;
    position: relative;
    float: right;
    top: -4px; }
#footer .inner .intro .family-site .family-site-btn {
    font-size: 12px;
    color: #343434;
    width: 100%;
    line-height: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d6d6d6;
    padding: 0 10px;
    cursor: pointer; }
#footer .inner .intro .family-site .family-site-dropdown {
    display: none;
    background-color: #ffffff;
    width: 100%;
    padding: 10px 0;
    border: 1px solid #d6d6d6;
    border-bottom: 0;
    position: absolute;
    left: 0;
    bottom: 30px; }
#footer .inner .intro .family-site .family-site-dropdown a {
    padding: 0 10px;
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 28px;
    height: 28px; }
#footer .inner .intro .family-site .family-site-dropdown a:hover {
    background-color: rgba(100, 100, 100, 0.1); }
#footer .inner .intro .family-site .family-site-dropdown.show {
    display: block; }
#footer .inner .intro:after {
    content: '';
    display: block;
    clear: both; }
#footer .inner .customer-service {
    margin-top: 20px;
    margin-bottom: 10px; }
#footer .inner .customer-service, #footer .inner .customer-service a {
    font-size: 13px;
    color: #858585;
    line-height: 24px;
    font-family: "Dotum", sans-serif; }
#footer .inner .jirancomms, #footer .inner .patent {
    color: #858585;
    font-size: 12px;
    line-height: 24px;
    font-family: "Dotum", sans-serif; }
#footer .inner .patent {
    line-height: 19px;
    margin-bottom: 15px; }

@media (max-width: 1110px) {
    #footer .inner {
        width: 100%; } }
@media (max-width: 890px) {
    #wrap {
        min-height: 100%;
        position: relative;
        padding-bottom: 500px;
        /* footer height */ }

    #footer {
        height: 500px !important;
        padding-bottom: 45px; } }

.ico-to-top, .ico-to-btm {
    display: block;
    border: 1px solid #9c9c9c;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: url(//update.coolmessenger.com/_ImageServer/coolschool/2020/05/renew/arrow_quick.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-width: 100%;
    background-height: auto;
    background-position: center center;
    width: 36px;
    height: 36px;
    background-color: #fff; }

.ico-to-btm {
    border-bottom: 0;
    transform: rotate(180deg); }

.top-btm {
    position: fixed;
    right: -45px;
    bottom: 307px;
    -webkit-transition: right 0.4;
    -moz-transition: right 0.4;
    -o-transition: right 0.4;
    transition: right 0.4s;
    z-index: 1000; }
@media screen and (max-width: 980px) {
    .top-btm {
        bottom: 50px; } }

.top-btm.on {
    right: 22px; }
@media screen and (max-width: 980px) {
    .top-btm.on {
        bottom: 50px; } }