@charset "UTF-8";

/* app-header */
.tit_img {position: absolute; top: 8px; left: 12px;}
.app-header span {position: absolute; top: 0; left: 80px; font-family: 'Jalnan'; color: #fff; font-size: 17px;}
.app-close {position: absolute; top: 0; right: 0; width: 55px; height: 59px;background-color: #2c3032; display: block; padding: 20px; box-sizing: border-box;}
.app-close img {display: block;}


/* app-content */
.tab_wrap {padding: 38px 0; box-sizing: border-box; border-radius: 20px 20px 0 0; box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.3); z-index: 1;}
/* .tab_wrap::before {content: ''; display: block; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background-color: #9e9e9e; border-radius: 50px;} */

button {border: 0; outline: 0; background: 0; cursor: pointer;}
button.tablinks {font-family: 'NotoKrM'; font-size: 16px; color: #9e9e9e; height: 30px; width: 100px; border: 1px solid #9e9e9e; border-radius: 30px; margin-right: 9px;}
button.tablinks:last-child {margin-right: 0;}

.tabcontent {display: none;}
.tabcontent {display: none;}
.tabcontent .inner {transition: 0.3s ease;}
.tabcontent .inner:hover {background-color: #f0f0f0;}
.tabcontent .inner a {width: 100%;}
.tabcontent .first {}
.tabcontent .middle {display: flex; flex-direction: column;}
.tabcontent .middle span {font-family: 'NotoKrM'; font-weight: bold; font-size: 18px; color: #2c3032; margin-right: 5px;}
.tabcontent .middle>div span, .tabcontent .middle>div p {font-family: 'NotoKrR'; font-size: 13px; color: #666666; display: inline-block;}
.tabcontent .middle div {position: relative;}
.tabcontent .middle div span {background: url('/images/Culture/mobile/img/location.png') no-repeat center top; background-position: 1px 1px; padding-left: 16px;}
.tabcontent .middle div span::before {content: ''; display: block; position: absolute; top: 7px; left: 45px; width: 1px; height: 11px; background-color: #666666;}
.tabcontent .middle p {margin-left:5px;}
.tabcontent .last {}

.tabcontent > div .first {width: 40px; height: 40px; border-radius: 50%; margin-top: 20px; display: inline-block;}
.tabcontent > div .first span {color: #fff; font-family: 'NotoKrM'; font-size: 10px; padding: 20px 0 0; display: block;}

.green {background-color: #18a833;}
.blue {background-color: #32a6d6;}
.red {background-color: #ea471c;}
.purple {background-color: #6f1be2;}


/* detail_wrap */
.detail_wrap {display: none; box-sizing: border-box; border-radius: 20px 20px 0 0; box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.3); z-index: 1;}
.detail_wrap .top a span {display: block; font-family: 'NotoKrM'; font-size: 16px; color: #525252; height: 30px; width: 65px; border: 1px solid #9e9e9e; border-radius: 30px; box-sizing: border-box; padding: 1px 0px; text-align: center;}
.detail_wrap .top a:nth-child(1) span {background: url('/images/Culture/mobile/img/prev_.png') no-repeat center top; background-position: 10px 10px; padding-left: 10px; transition: 0.3s ease;}
.detail_wrap .top a:nth-child(1) span:hover {background-color: rgba(0,0,0,0.05);}
.detail_wrap .top a:nth-child(2) span {background-color: #525252 !important; color: #fff; background: url('/images/Culture/mobile/img/ham-menu_.png') no-repeat center top; background-position: 10px 10px; padding-left: 12px;}
.detail_wrap .top a:nth-child(2) span:hover {background-color: #333333 !important;}

.detail_wrap .middle .first .imgWrap {width: 125px;  height: 125px; overflow: hidden; margin-right: 20px;}
.detail_wrap .middle .first img {/*width: 100%;*/ height: 100%; object-fit: cover; margin-right: 20px; border-radius: 7px;}
.detail_wrap .middle span.tag {position: absolute;  top: 0; left: 0;font-family: 'NotoKrM'; font-size: 11px; text-align: center; padding: 4px 10px; padding-left: 20px; background-color: #32a6d6 !important; color: #fff; border-radius: 5px 0 0 0; background: url('/images/Culture/mobile/img/balloon_.png') no-repeat center top; background-position: 8px 5px;}
.detail_wrap .middle .second {font-family: 'NotoKrM';}
.detail_wrap .middle .second>span {font-size: 18px; font-weight: bold; color: #2c3032; display: inline-block; margin-bottom: 7px; line-height: 1;}

.detail_wrap .middle .second p {font-size: 14px; color: #666666; display: inline-block;}
.detail_wrap .middle .second div {display: flex; margin-bottom: 5px;}
.detail_wrap .middle .second div:last-child {margin-bottom: 0;}
.detail_wrap .middle .second div figure{width: 10px; height: 10px; border-radius: 50%; margin-right: 10px;}
.detail_wrap .middle .second .third {/* align-items: center; */}
.detail_wrap .middle .second .third figure {padding-bottom: 26px;}
.detail_wrap .middle .second .third span {font-size: 14px; color: #666666; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: ellipsis; line-height: 1.3;}

.detail_wrap .middle .second img {background-color: #525252; padding: 3px; border-radius: 50%; margin-right: 10px; display: inline-block;}

.detail_wrap .bottom a {color: #fff; font-family: 'NotoKrM'; font-size: 18px; font-weight: bold; padding: 13px 0; box-sizing: border-box;}
.detail_wrap .bottom a:first-child {background-color: #65a4d0 !important; background: url('/images/Culture/mobile/img/plus_.png') no-repeat center top; background-position: 38px 19px; margin-right: 0.5px; transition: 0.3s;}
.detail_wrap .bottom a:first-child:hover {background-color: #5d98c2 !important;}
.detail_wrap .bottom a:first-child div {padding-left: 19px;}
.detail_wrap .bottom a:last-child {background-color: #395d75 !important; background: url('/images/Culture/mobile/img/bottom-call_.png') no-repeat center top; background-position: 37px 22px; margin-left: 0.5px;  transition: 0.3s;}
.detail_wrap .bottom a:last-child:hover {background-color: #2c485a !important;}
.detail_wrap .bottom a:last-child div {padding-left: 19px;}