@import url("common.css");

.main div:hover, .main a:hover {transition: all .3s ease;}

.main {}

.chat {padding: 40px 20px 20px;}
.chat .chat-area {display: flex; justify-content: space-between; height: 100%;  width:100%; margin-bottom:20px; }
.chat .chat-area .chat-box {display: flex; justify-content: space-between; align-items: center; border-radius: 15px; padding:20px 20px; width:calc(100% - 150px); font-size:20px;}
.chat .chat-area .chat-box.yellow {background: #FAE100; color:#371C1D;}
.chat .chat-area .chat-box.dark {background: #371C1D; color:#FAE100;}
.chat .chat-area .chat-box .title {font-size:28px; font-weight: bold;}
.chat .chat-area .chat-box .title img {padding-right:15px;}
.chat .chat-area .chat-box a {font-size:20px;}
.chat .chat-area .chat-box a img {padding-left:20px;}
.chat .chat-area .chat-box:hover {opacity: .8;}
.chat .chat-area .password {border:2px solid #371C1D; color:#371C1D; font-size:20px; width:150px; margin-left:20px; border-radius: 15px; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 600;}

.banner-area {display: flex; margin:0 -17px; padding:0 0 60px}
.banner-area div {width: calc(100% / 2 - 34px); margin:0 17px; border-radius: 20px; min-height: 150px; border:2px solid transparent}
.banner-area div a {margin:50px; }
.banner-area div h4 {font-size:28px; font-weight: bold;}
.banner-area div span {display: inline-block; padding:10px; font-size:20px; margin-top:60px; background: #fff; border-radius: 30px; padding:10px 20px}

.banner-area div.notice {background: #F1E9F4;}
.banner-area div.notice a {display: block; background: url('../../img/ico-notice.png') right bottom no-repeat; color: #390256;}
.banner-area div.notice:hover {border:2px solid #390256}
.banner-area div.talk {background: #D7E7FF;}
.banner-area div.talk a {display: block; background: url('../../img/ico-talk.png') right bottom no-repeat; color: #021668;}
.banner-area div.talk:hover {border:2px solid #021668}

.board-area {background: #F0F2F6; padding:60px 0;}

.tabs {display: flex; margin-bottom: 20px; } 
.tab { padding: 15px 30px; cursor: pointer; background: #DADFE8; color:#222; border: 1px solid #ddd; border-bottom: none; margin-right: 10px; font-size: 18px; border-radius: 50px; }
.tab.active { background: #222222; font-weight: 700; color: #fff; }
/* 탭 콘텐츠 */ 
.tab-content { display: none; }
.tab-content.active { display: block; }
.notice-board {position: relative; width:100%;}
.notice-board li {margin-bottom:20px;}
.notice-board li a {display: flex; padding:30px; border-radius: 20px 0 20px 20px; background: #fff; font-size:20px; justify-content: space-between; align-items: center; border:1px solid transparent}
.notice-board li a h6 {font-size:24px;} 
.notice-board li a span.date {color:#888;}
.notice-board li a:hover {border:1px solid #222;}

/* 토글 박스 */
.item-container { margin-bottom: 10px; background: #fff; border-radius: 20px 0 20px 20px; margin-bottom:20px;  border:1px solid transparent;}
.item-container:hover {border:1px solid #222;}
.item-header { display: block; display: flex; justify-content: space-between; align-items: center;  padding:30px; cursor: pointer; }
.item-header span {padding-right:40px;}
.details-box { display: none; padding:0 30px 30px; }
.item-container.active .details-box { display: block; }
.details-btn { background: none; border: none; color:#222; border-bottom:2px solid #222; cursor: pointer; font-size: 16px; }
.details-box .con { position: relative; width: 100%; display: flex; justify-content:space-between; width: 100%; }
.details-box .con span {font-size:18px;}
.details-box .con .details {display: flex;}
.details-box .con .details .price {padding-right:40px; border-right:1px solid #ddd;}
.details-box .con .details span {text-align: right; padding:0 }
.details-box .con .details span strong {color:#F37777; font-weight: 700; font-size:40px; }

.details-box .con .details .price span strong {width:200px; display: inline-block;}
.details-box .con .details .period span {padding-left:40px;}
.details-box .con .details .period span strong {width:60px; display: inline-block;}

@media all and (max-width:980px) {
  .chat {padding-bottom: 20px;}
  .chat .chat-area .chat-box {display: block;}
  .chat .chat-area .chat-box a img {display: block;}
  .chat .chat-area .chat-box .btn a{display:flex; align-items: center; float: right; padding-top: 20px;}

  .banner-area {display: block; margin:0;}
  .banner-area div {width: 100%; margin:10px 0;}
  .banner-area div span {margin-top:20px;}

  .details-box .con {display: block;}
  .details-box .con .tit {padding-bottom: 20px; display: block;}
  .details-box .con .details {display: block;}
  .details-box .con .details span {padding-right:30px;}
  .details-box .con .details .price {padding-right:0; padding-bottom: 20px; border-right:0; border-bottom: 1px solid #eee; margin-bottom:20px;}
  .details-box .con .details .price span strong {width:auto;}
  .details-box .con .details .period span {padding-left:0; padding-right: 20px;}
  .details-box .con .details .period span strong {width:auto;}
}

@media all and (max-width:680px) {
  .chat .chat-area .chat-box img {width:30px;}
  .item-header {display: block;}
  .details-btn {padding-top:30px;}
}