/**=== == == == == == == == == == == == == == == == == == == == == 
=>                     plan css
== == == == == == == == == == == == == == == == == == == == === * */
#roomplan{font-family: 'Ryumin-Pro', sans-serif;}
.modal-plan-type .btn-close {background: black;color: white;font-size: 20px;padding: 7px 57px !important;text-transform: uppercase;cursor: pointer;line-height: 1;}
.modal-plan-type .modal-button {padding: 48px 0 30px;}
.modal-plan-type .btn-close:hover{opacity: 0.7;}
.modal-plan-type .txt{color: black;margin-top: 20px;}

#roomplan .plan-title{ position: relative;color: #000;text-align: left;padding: 0 0 6px;border-bottom: 1px solid #000;font-weight: 600;}
#roomplan .plan-title .fs-15{font-weight: 400;}
#roomplan .plan-title::after{ position: absolute;bottom: 3px;left: 0;width: 100%;border-top: 4px solid #000;content: '';display: block;}
#roomplan .plan-title .fs-25{margin-right: 20px;}

#roomplan .sect1 .row1 {padding: 30px 20px;}
#roomplan .sect1 .row1 .col{width: 50%;margin-bottom: 68px;}
#roomplan .sect1 .row1 .col img{width: 100%;}
#roomplan .sect1 .row1 .col .img-sp{display: none;}

#roomplan .sect2 .navs{padding: 20px 0  ;}
#roomplan .sect2 .navs .nav{ font-weight: 500; width: calc((100% / 9) - (112px / 9));margin-right: 14px; color: #3e4853;border: 1px solid #4b6276;background: white;display: block;cursor: pointer;padding: 9px 2px;}
#roomplan .sect2 .navs .nav:nth-child(9){margin-right: 0;}
#roomplan .sect2 .navs .nav:hover,
#roomplan .sect2 .navs .nav.active{background: #4b6276;color: white;}
#roomplan .sect2 .map{border: 3px solid black;padding: 30px;position: relative}
#roomplan .sect2 .icon-bar-navigation{position: absolute;right: 27px;bottom: 27px;}

#roomplan .sect2 .notes{padding: 18px 0 0 0;}
#roomplan .sect2 .notes .note{margin-right: 18px;margin-bottom: 10px;}
#roomplan .sect2 .notes .note p{margin-left: 6px;}

#roomplan .sect3{padding: 56px 0 100px 0;}
#roomplan .sect3 .row {padding: 30px 0 0 0  ;}
#roomplan .sect3 .row .col{width: calc((100% / 3) - 20px);margin-right: 30px;margin-bottom: 20px;position: relative;}
#roomplan .sect3 .row .col:nth-child(3n){margin-right: 0;}
#roomplan .sect3 .card{background: #3e4853;color: white;display: flex;position: relative;width: 100%;padding: 20px 30px 16px 16px;min-height: 136px;flex-direction: column;justify-content: space-between;}
#roomplan .sect3 .card .fs-35{line-height: 0.7;letter-spacing: -0.05em;}
#roomplan .sect3 .card .fs-20{line-height: 1.2;margin-left: 4px;}
#roomplan .sect3 .card .fs-10{font-size: 12px;}
#roomplan .sect3 .card::before{content: '';display: block;width: 20px;right: 5px;top: 5px;bottom: 5px;background: white;z-index: 1;position: absolute;}
#roomplan .sect3 .card::after{content: '';display: block;width: 8px;height: 8px;border-top:2px solid #3e4853 ;border-right:2px solid #3e4853 ;position: absolute;right: 12px;top: calc(50% - 4px);z-index: 2;transform: rotate(45deg);}
#roomplan .sect3 .card:hover{opacity: 0.7;}
@media screen and (max-width: 768px) {
  #roomplan .sect1 .row1{ padding: 20px 10px;}
  #roomplan .sect1 .row1 .col{ width: 50%;margin-bottom: 30px;}

  #roomplan .sect2 .navs .nav{ width: calc((100% / 3) - (28px / 3));padding: 9px 2px;margin-bottom: 14px;}
  #roomplan .sect2 .navs .nav:nth-child(9){ margin-right: 14px;}
  #roomplan .sect2 .navs .nav:nth-child(3n){ margin-right: 0;}
  #roomplan .sect2 .navs{ padding: 14px 0;}
  #roomplan .sect2 .icon-bar-navigation{width: 26px; right: 10px;bottom: 10px;}
  #roomplan .sect2 .map{padding: 20px 38px;}

  #roomplan .sect3{ padding: 24px 0 30px 0;}
  #roomplan .sect3 .row{ padding: 14px 0 0 0;}
  #roomplan .sect3 .row .col{ width: calc(50% - 14px);margin-right: 14px;margin-bottom: 14px;}
  #roomplan .sect3 .row .col:nth-child(3n){ margin-right: 14px;}
  #roomplan .sect3 .row .col:nth-child(2n){ margin-right: 0;}
}
/*sx<=567px,sm <= 767px,md <= 992px,lg <= 1200px,xl <= 1600px*/
@media screen and (max-width: 480px) {
  #roomplan .sect1 .row1 .col{ width: 100%;margin-bottom: 30px;}
  #roomplan .sect1 .row1 .col .img-sp{ display: block;}
  #roomplan .sect1 .row1 .col .img-pc{ display: none;}
#roomplan .sect3 .card .fs-10{font-size: 10px;}

}
/*sx<=567px,sm <= 767px,md <= 992px,lg <= 1200px,xl <= 1600px*/
@media screen and (max-width: 430px) {
    #roomplan .sect3 .row .col{width: 100%;margin-right: 0;}
    #roomplan .sect3 .row .col:nth-child(3n){margin-right: 0;}
}