@charset "utf-8";

/*------------ message ------------*/

.reminder br{

    display: none;

}

.btn-box{

    padding-top: 20px;

}

.write-question-box{

    text-align: center;

}

.write-question{

    background-image: url(../../../images/layout01-1/common/message/btn_gomsg.png);

    width: 140px;

    height: 140px;

    display: block;

    color: #fff;

    margin: 0 auto 30px;

    font-size: 17px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.write-question .font{

    line-height:1.2;

}

.write-question:before{

    content: '';

    display: block;

    background: url(../../../images/layout01-1/common/message/ic.png);

    width: 60px;

    height: 58px;

    margin: 0 auto 4px;

}

.write-question:hover{

    background-position: 100% 0;

}

/*------------ message ------------*/

.message-list{

    max-width: 1000px;

    margin: auto;

}

.message-list .message-item{

    margin-bottom: 20px;

    flex-wrap: wrap;

    display: flex;

    position: relative;

    background: #162837;

    color: #FFFFFF;

    font-size: 15px;

    min-height: 27px;

    padding-top: 8px;

    transition: all 0.3s;

}

.message-list li:last-child{

    margin-bottom: 10px;

}

.author-box{

    margin-top: 5px;

}

.message-question{

    order: 2;

    cursor: pointer;

    position: relative;

    width: 100%;

}

.message-question:before{

    content: '';

    display: block;

    width: 100%;

    height: 40px;

    position: absolute;

    bottom: 100%;

    z-index: 5;

}

.message-question:hover{

    opacity: 0.7;

}

.message-question .title{

    padding: 0 16px 15px 66px;

    font-size: 16px;

    line-height: 1.4;

    overflow: hidden;

    text-overflow: ellipsis;

    position: relative;

    letter-spacing: 2px;

}

.message-question .date{

    font-size: 13px;

    line-height: 1.2;

    color: #999999;

}

.message-answer{

    order: 2;

    display: none;

    overflow: hidden;

    padding: 1px;

    background: #e4e4e4;

    border-radius: 0;

    color: #9CA3AF;

    width: 100%;

}

.message-answer .editor{

    padding: 0px 16px 30px 66px;

    position: relative;

}

.author-box{

    order: 1;

    font-weight: 600;

    text-align: right;

    font-size: 15px;

    color: #F9FAFB;

    padding: 0 16px 0 66px;

    margin-bottom: 10px;

    display: flex;

}

.author-box:before{

    content: '';

    display: block;

    background: url(../../../images/layout01-1/common/message/accordion.png) no-repeat;

    width: 33px;

    height: 33px;

    border-radius: 50px;

    position: absolute;

    top: 10px;

    left: 12px;

}

.author-box .date:before{

    content: '｜';

    display: inline-block;

}

.author-box .date{

    font-family: 'Open Sans', sans-serif;

    margin: 0 10px 0 5px;

    order: 2;

}

.author-box.reply{

    order: 2;

    position: relative;

    text-align: left;

    width: 100%;

    background: #e4e4e4;

    padding: 8px 16px 15px 66px;

    margin-bottom: 0;

    color: #0D233A;

}

.author-box.reply:before{

    background: url(../../../images/layout01-1/common/message/accordion.png) 0 100% no-repeat;

    width: 33px;

    height: 33px;

    border-radius: 50px;

    position: absolute;

    top: 12px;

    left: 12px;

    margin-top: -5px;

}

/*------------ message-form ------------*/

#message-form{

    margin-top: 80px;

    margin-bottom: 20px;

    display: block;

    width: 100%;

    box-sizing: border-box;

}

#message-form .form-title{

    vertical-align: middle;

    text-align: left;

    padding: 45px;

    line-height: 1.5;

    width: 100%;

    box-sizing: border-box;

    position: relative;

}

#message-form .form-title:before{

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: #f5f5f5;

    z-index: -1;

}

#message-form .form-title i{

    font-style: normal;

    text-align: center;

    display: block;

    color: #5d5d5d;

    font-family: 'Times new roman', cursive;

    font-size: 46px;

    text-align: center;

    line-height: 1.2;

    margin-bottom: 10px;

    font-size: 0;

}

#message-form .form-title i span{

    font-size: 46px;

}

#message-form .reminder{

    margin: 0;

    font-size: 14px;

}

#message-form .form-wrap{

    border: 3px solid #162837;

    max-width: 1000px;

    margin: 0 auto;

    background: #F4F4F4;

    border-radius: 20px;

    padding-bottom: 30px; 

}

#message-form .form-box{

    padding: 30px 30px 10px;

    max-width: 830px;

    margin: 0 auto;

}

#message-form .form-title i > .font > span,

.write-question .font > span{

    display: none!important;

}

/*------------ rwd ------------*/

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

    #message-form,

    #message-form .col{

        display: block;

        width: auto;

    }

    #message-form{

        margin-top: 60px;

        margin-bottom: 0px;

    }

    #message-form .form-box{

        padding: 15px;

    }

}

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

    #message-form .form-title{

        padding: 25px 15px;

    }

}

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

    .message-answer .editor:before{

        display: none;

    }

    .message-answer .editor{

        padding: 10px 15px;

    }

}