* {box-sizing: border-box; font-family: 'Noto_R';}
body {max-width: 550px; height: 100vh; margin:0 auto;  }

.card_a_sample {width: 100vw; outline: 1px solid red;}

.card_a01 {width: 100%; background: url(images/back.png); background-size:100%; text-align: center;}
.card_a01 .inner {width: 80%; padding: 100px 0 50px 0; display: inline-block;}
.card_a01 .top {display: inline-block;}
.card_a01 .top .left {width: 140px; float: left; }
.card_a01 .top .left .circle {width: 140px; height: 140px; border-radius: 100%; }
.card_a01 .top .right {width: calc(100% - 140px); float: right; padding-left: 20px;}
.card_a01 .top .right .down_btn_wrap {width: 100%;text-align: right;}
.card_a01 .top .right .down_btn_wrap .down_btn {display: inline-block; width: 106px; height: 30px; border-radius: 10px; background: #f3f3f3;
                                              text-align: center;}
.card_a01 .top .right .down_btn_wrap .down_btn img {display: inline-block; width: 20px; height: 20px; transform: translateY(5px);
                                                margin-right: 4px;}
.card_a01 .top .right .down_btn_wrap .down_btn p {display: inline-block; height: 20px; line-height: 30px;}
.card_a01 .top h1 {margin-bottom: 20px;}
.card_a01 .top .image_logo {display: inline-block; width:180px; height: 50px; margin-bottom: 20px;}

.card_a01 .rank_name_wrap {text-align: left; margin-top: 20px;}
.card_a01 .rank_name_wrap h2 {display: inline-block; font-family: 'Noto_B'; color: #494949; font-size: 22px;
                          letter-spacing: 4px;}
.card_a01 .rank_name_wrap p {display: inline-block; font-size: 16px; color: #494949;}
.card_a01 .rank_name_wrap .phone a{font-family: 'Noto_B'; color: #494949; font-size: 16px; margin-top:20px;}


.card_a01 .number {position: relative; width: 100%; text-align: left;color: #848484; padding: 40px 0 0 40px;}
.card_a01 .number p {margin-bottom: 20px;}
.card_a01 .number span {display: inline-block; width: 24px; transform: translateY(7px); margin-right: 20px;}
.card_a01 .number span img {width: 100%;}

.card_a01 .info_text {width: 100%;  background: rgba(179, 136, 80, 0.46); border-radius: 6px; padding: 16px; margin-top: 40px;
                      text-align: left; color: #fff;}
.card_a01 .info_text h2 {display: block; width: 100%; border-bottom: 1px solid rgba(158, 132, 100, 0.5); font-weight: normal; color: #fff;
                      padding-bottom: 14px; margin-bottom: 14px;}
.card_a01 .info_text p {color: #fff;}
.card_a01 .info_text .max_info {font-family: 'Noto_L'; margin-top: 20px;}

/* 스토리,연락처남기기 버튼 */
.card_a01 .btn_wrap {width:100%; margin-top: 20px;}
.card_a01 .btn_wrap a {display: inline-block; width:48%; background: #815c4d; line-height: 40px; text-align: center;
                          border-radius: 4px; font-size: 12px;}
.card_a01 .btn_wrap a:nth-of-type(1) {margin-right: 4%;}
.card_a01 .btn_wrap a span {color: #fff;}

/* 갤러리 */
.card_a01 .video {margin-top: 40px;}
.card_a01 .gallery {display: inline-block; width: 100%; padding: 20px 0;}
.card_a01 .gallery .icon {display: block; width: 20px; margin-bottom: 10px;}
.card_a01 .gallery .icon img {width: 100%;}

.card_a01 .movie_check iframe {border-radius: 10px; display: block; }
.card_a01 .movie_check li {width: 100% !important; height: 100% !important; border-radius: 0 !important; display: inline-block !important;}
.card_a01 .movie_check li img {display: block;}

.card_a01 #movie_common {margin-bottom: 0 !important;}
.card_a01 #gall_common {width: 100%;}
.card_a01 #gall_common>li {display: block; float: left; width: 32%; margin: 0 2% 10px 0; height: 100px;}
.card_a01 #gall_common>li:nth-of-type(3n) {margin-right: 0;}
/* 지도 */
.card_a01 .map_wrap p {font-family: 'Noto_R'; line-height: 30px; margin-bottom: 4px; color: #5e5e5e; text-align: left}
.card_a01 #map {width: 100% !important; height: 30vh !important; border-radius: 10px;}
.card_a01 .map_wrap .navi_btn {float: left; width: 40%; margin-top: 10px;}
.card_a01 .map_wrap .navi_btn img {display: block; width: 100%;}

/*  sns */
.card_a01 .sns {width: 100%; display: inline-block; height: 50px; text-align: center; border-top: 1px solid rgba(158, 132, 100, 0.5);
                margin:40px 0 80px 0; padding-top: 10px;}
.card_a01 .sns a {display: inline-block;width: 70px;/* margin-right: 26px; */}
.card_a01 .sns a:last-of-type {margin-right: 0;}
.card_a01 .sns a p {font-size: 11px; color: #b5b5b5}
.card_a01 .sns a img {width: 44%;}

@media screen and (max-width:320px){
  .card_a01 .top .left {width: 110px;}
  .card_a01 .top .left .circle {width: 110px; height: 110px; border-radius: 100%; }
  .card_a01 .top .right {width: calc(100% - 110px); float: right; }

  .card_a01 .rank_name_wrap h2 {font-size: 18px;}
  .card_a01 .rank_name_wrap p {display: inline-block; font-size: 14px; color: #494949;}
  .card_a01 .rank_name_wrap .phone a{font-family: 'Noto_B'; color: #494949; font-size: 14px; margin-top:20px;}

  .card_a01 .number {padding: 40px 0 0 20px;}

  .card_a01 .sns a {display: inline-block; width: 50px; margin-right: 14px;}
  .card_a01 .sns a:last-of-type {margin-right: 0;}
  .card_a01 .sns a img {width:60%;}
}