@charset "utf-8";

.sub-top {margin-top: 203px; padding-top: 66px;}
.sub-top .path {margin-bottom: 35px;}
.sub-top .path ul {display: flex; align-items: center;}
.sub-top .path ul li {font-size: 14px; font-weight: 500; line-height: 1.3em; color: #000;}
.sub-top .path ul li.home {margin-right: 11px;}
.sub-top .path ul li.home img {display: block;}
.sub-top .path ul li.depth02 {position: relative; padding-left: 12px; margin-left: 12px;}
.sub-top .path ul li.depth02:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 1px; height: 12px; background: #000;}
.sub-top .page-title {padding-bottom: 32px; border-bottom: 1px solid #c7c7c7;}
.sub-top .page-title h2 {font-size: 44px; font-weight: 700; line-height: 1.4em; color: #000;}
.sub-top .page-title ul {margin-top: 12px;}
.sub-top .page-title ul li {position: relative; font-size: 18px; line-height: 1.72em; color: #555; padding-left: 13px;}
.sub-top .page-title ul li:before {position: absolute; top: 10px; left: 0; content: ''; width: 6px; height: 6px; border-radius: 50%;}
.sub-top .page-title ul li:nth-child(1):before {background: #f04d22;}
.sub-top .page-title ul li:nth-child(2):before {background: #94553a;}
.sub-top .page-title ul li b {font-weight: 700; color: #333;}

.sub-cont {position: relative; padding: 100px 0 400px; overflow: hidden;}
.real-cont {padding: 100px 0 215px;}
.sub-cont:before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; width: 100%; height: 1278px; background: url('../img/sub/sub_cont_bg.jpg') no-repeat center bottom/cover;}

.sub_10 .sub-top .path,
.sub_10 .sub-top .page-title {display: none;}

/* s101 */
.history .wrap {display: flex; gap: 130px;}
.history .img-box {max-width: 550px; width: 100%;}
.history .text-box {width: 1%; flex: 1 1 auto;}
.history-wrap {margin-top: 23px;}
.history .year-wrap {position: relative; display: flex; padding-bottom: 69px;}
.history .year-wrap:before {position: absolute; top: 25px; left: 143px; content: ''; width: 1px; height: calc(100% - 16px); background: #d2d2d2;}
.history .year {max-width: 143px; width: 100%;}
.history .year h3 {font-size: 40px; font-weight: 600; line-height: 1.2em; color: #333;}
.history .details {width: 1%; flex: 1 1 auto; margin-top: 12px;}
.history .month-wrap {position: relative; display: flex; padding-left: 22px;}
.history .month-wrap:not(:last-child) {margin-bottom: 10px;}
.history .month-wrap:before {position: absolute; top: 11px; left: -3px; content: ''; width: 7px; height: 7px; border: 2px solid #f04d22; border-radius: 50%; background: #fff;}
.history .month-wrap .month {max-width: 70px; width: 100%; font-size: 18px; font-weight: 600; line-height: 1.6em; color: #888;}
.history .month-wrap ul li {font-size: 18px; font-weight: 600; line-height: 1.6em; color: #333;}

/* s102 */
.philosophy {position: relative;}
/* .philosophy .container:before {position: absolute; top: -50px; right: -60px; width: 641px; height: 969px; content: ''; background: url('../img/sub/s102_bg.png') no-repeat center top;} */
.philosophy .wrap {max-width: 940px;}
.philosophy .text-box h3 {font-size: 26px; font-weight: 400; line-height: 1.53em; color: #333; margin-bottom: 43px;}
.philosophy .text-box p {font-size: 18px; line-height: 1.72em; color: #333; margin-bottom: 30px;}
.philosophy .text-box b {display: block; font-size: 26px; font-weight: 600; line-height: 1.53em; color: #333;}
.philosophy .text-box02 b {margin-top: 50px;} 
.philosophy .text-box .font-orange {font-weight: 600; color: #f04d22;}
.philosophy .confidence-wrap {padding: 42px 0 55px; margin: 108px 0 105px; text-align: center; border-top: 1px dashed #7f7f7f; border-bottom: 1px dashed #7f7f7f;}
.philosophy .confidence-wrap h4 {position: relative; display: inline-block; font-size: 26px; font-weight: 700; line-height: 1.3em; color: #f04d22; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; padding-left: 53px; margin-bottom: 40px;}
.philosophy .confidence-wrap h4:before {position: absolute; top: 0; left: 0; content: ''; width: 39px; height: 39px; background: url('../img/sub/s102_title_deco.png') no-repeat center center;}
.philosophy .confidence-wrap .box-items {position: relative; display: flex; margin-bottom: 36px;}
/* .philosophy .confidence-wrap .box-items:after {position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); content: ''; width: 29px; height: 74px; background: url('../img/sub/s102_box_item_deco.png') no-repeat center center;} */
.philosophy .confidence-wrap .box-item {display: flex; flex-direction: column; justify-content: center; width: calc(50% + 20px); min-height: 244px; border-radius: 122px; background: #a3835d; mix-blend-mode: multiply; padding: 25px 60px;}
.philosophy .confidence-wrap .box-item:nth-child(2) {margin-left: -40px;}
.philosophy .confidence-wrap .box-item b {display: block; font-size: 24px; font-weight: 600; line-height: 1.45em; color: #fff; margin-bottom: 14px;}
.philosophy .confidence-wrap .box-item p {font-size: 18px; font-weight: 600; line-height: 1.55em; color: #fff;}
.philosophy .confidence-wrap .box-item p span {color: #351f05; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;}
.philosophy .confidence-wrap .text-result {font-size: 24px; font-weight: 700; line-height: 1.66em; color: #333;}

/* s103 */
.greeting {background: url('../img/sub/s103_bg.jpg') no-repeat center center/cover;}
.sub-cont.greeting:before {display: none;}
.greeting .wrap {display: flex; gap: 146px}
.greeting .img-box {max-width: 380px; width: 100%;}
.greeting .img-box .pic {border-radius: 188px; overflow: hidden;}
.greeting .text-box {width: 1%; flex: 1 1 auto; margin-top: 40px;}
.greeting .text-box .headline {margin-bottom: 31px;}
.greeting .text-box h3 {display: inline; font-size: 26px; font-weight: 400; line-height: 1.6em; background: #f04d22; color: #fff; padding: 3px 10px;}
.greeting .text-box p {font-size: 18px; line-height: 1.72em; color: #333;}
.greeting .text-box p:not(:last-of-type) {margin-bottom: 30px;}
.greeting .text-box .font-gold {font-weight: 600; color: #a3835d;}
.greeting .text-box .font-orange {font-weight: 600; color: #f04d22;}
.greeting .text-box .name {font-size: 18px; font-weight: 700; color: #333;}
.greeting .text-box .name span {display: inline-block; font-family: 'KccEunyeong'; font-size: 46px; font-weight: 400; margin-left: 5px;}

/* s104 */
.facilities .wrap {display: flex; gap: 120px;}
.facilities .board-tab-menu {max-width: 268px; width: 100%; text-align: center;}
.facilities .board-tab-menu ul li:nth-child(1) a {background: #fff url('../img/sub/s104_cate01.png') no-repeat center center;}
.facilities .board-tab-menu ul li:nth-child(2) a {background: #fff url('../img/sub/s104_cate02.png') no-repeat center center;}
.facilities .board-tab-menu ul li:nth-child(1) a:hover {background: #94553a url('../img/sub/s104_cate01_active.png') no-repeat center center;}
.facilities .board-tab-menu ul li:nth-child(2) a:hover {background: #94553a url('../img/sub/s104_cate02_active.png') no-repeat center center;}
.facilities .board-tab-menu ul li:nth-child(1).active a {background: #94553a url('../img/sub/s104_cate01_active.png') no-repeat center center;}
.facilities .board-tab-menu ul li:nth-child(2).active a {background: #94553a url('../img/sub/s104_cate02_active.png') no-repeat center center;}
.facilities-cont {width: 1%; flex: 1 1 auto;} 
.facilities-cont .slick-arrow {position: absolute; top: 50%; margin-top: -30px; width: 60px; height: 60px; border-radius: 50%; background-color: rgba(0,0,0,0.8); background-repeat: no-repeat; background-position: center center; transition: all 0.5s; z-index: 10; font-size: 0; border: 0;}
.facilities-cont .slick-prev {left: 32px; background-image: url('../img/sub/s104_icon_slide_prev.png');}
.facilities-cont .slick-next {right: 32px; background-image: url('../img/sub/s104_icon_slide_next.png');}
.facilities-cont .slick-arrow:hover {background-color: rgba(0,0,0,0.6);}

/* s105 */
.stories .wrap {display: flex; gap: 125px;}
.board-tab-menu {max-width: 157px; width: 100%; text-align: center;}
.board-tab-menu ul li {margin: 10px 0;}
.board-tab-menu ul li a {width: 100%; height: 40px; border: 1px solid #94553a; font-size: 18px; line-height: 40px; color: #94553a; text-align: center; border-radius: 20px; transition: all 0.5s;}
.board-tab-menu ul li a:hover {background: #94553a; color: #fff;}
.board-tab-menu ul li.active a {background: #94553a; color: #fff;} 
.stories .board-tab-menu .slick-arrow {width: 38px; height: 38px; background-repeat: no-repeat; background-position: center center; font-size: 0; border:0; background-color: transparent; transition: all 0.5s;}
.stories .board-tab-menu .slick-prev {background-image: url('../img/sub/tab_menu_btn_up.png'); margin-bottom: 20px;}
.stories .board-tab-menu .slick-next {background-image: url('../img/sub/tab_menu_btn_down.png'); margin-top: 20px;}
.stories .board-tab-menu .slick-prev:hover {background-image: url('../img/sub/tab_menu_btn_up_hover.png');}
.stories .board-tab-menu .slick-next:hover {background-image: url('../img/sub/tab_menu_btn_down_hover.png');}
.stories-list-wrap {width: 1%; flex: 1 1 auto;}
.stories-list {margin-bottom: 50px;}
.stories-list li:not(:last-child) {margin-bottom: 50px;}
.stories-list li .inner {position: relative; display: flex; gap: 50px; padding: 65px 130px 60px 110px; background: #fff; border: 1px solid #909090; border-radius: 20px;}
.stories-list li .img-box {position: relative; max-width: 125px; width: 100%; margin-top: 10px;}
.stories-list li .img-box:before {z-index: 5; position: absolute; top: -46px; left: -32px; content: ''; width: 80px; height: 80px; background: url('../img/sub/s105_list_deco01.png') no-repeat center center;}
.stories-list li:nth-child(2) .img-box:before {background-image: url('../img/sub/s105_list_deco03.png');}
.stories-list li:nth-child(3) .img-box:before {background-image: url('../img/sub/s105_list_deco04.png');}
.stories-list li .img-box:after {z-index: 5; position: absolute; top: 165px; left: 50%; transform: translateX(-50%); content: ''; width: 56px; height: 72px; background: url('../img/sub/s105_list_deco02.png') no-repeat center top;}
.stories-list li .img-box .pic {position:relative; height:0; padding-bottom:133.87%; border-radius: 62px; overflow:hidden; transition:all 0.6s;}
.stories-list li .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.stories-list li .text-box {width: 1%; flex: 1 1 auto;}
.stories-list li .text-box .name-wrap {display: flex; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid #e3e4e5;}
.stories-list li .text-box .university {font-size: 32px; font-weight: 700; line-height: 1.3em; color: #333; margin-right: 20px;}
.stories-list li .text-box .name {display: flex; align-items: flex-end; flex-wrap: wrap; font-weight: 700; color: #f04d22; padding-bottom: 5px;}
.stories-list li .text-box .student {position: relative; font-size: 20px; line-height: 1.3em; padding-right: 16px; margin-right: 12px;}
.stories-list li .text-box .student:after {position: absolute; top: 3px; right: 0; content: ''; width: 2px; height: 16px; background: #f04d22;}
.stories-list li .text-box .school {font-size: 15px; line-height: 1.3em;}
.stories-list li .details-wrap .title {font-size: 22px; font-weight: 700; line-height: 1.3em; color: #333; margin-bottom: 18px;}
.stories-list li .details {position: relative;}
.stories-list li .details .text {font-size: 18px; line-height: 1.72em; height:calc(1.72em * 1 * 6); color: #333; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; position:relative;}
.stories-list li .details .btn-more {display: none; position: absolute; bottom: 0; right: -50px; font-size: 15px; font-weight: 500; color: #939393; padding-left: 0; background: #fff; border: 0;}
.stories-list li .year {position: absolute; top: 0; right: 70px; width: 88px; height: 50px; background: #f04d22; font-size: 18px; font-weight: 600; line-height: 45px; color: #fff; text-align: center; clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 84%, 0 100%); padding-bottom: 5px;}

.stories .pg_wrap .pg .pg_page,
.stories .pg_wrap .pg .pg_current {margin:0 20px; width:60px; height:60px; line-height:60px; border: 1px solid #989898; background-color:transparent; color:#999; text-align:center; font-size:0; transition:all 0.6s;}
.stories .pg_page,
.stories .pg_current {display: none;}
.stories .pg_page.pg_prev {display: block;}
.stories .pg_page.pg_next {display: block;}
.stories .pg_wrap .pg .pg_page.pg_prev {background-image:url('../img/layout/icon_page_prev.png');}
.stories .pg_wrap .pg .pg_page.pg_next {background-image:url('../img/layout/icon_page_next.png');}

.stories-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 1200px; width: 90vw; z-index: 600;}
.stories-popup .inner {position: relative; display: flex; gap: 50px; width: 100%; padding: 65px 130px 60px 110px; border: 1px solid #909090; border-radius: 20px; background: #fff; overflow: hidden;}
.stories-popup .img-box {position: relative; max-width: 125px; width: 100%; margin-top: 10px;}
.stories-popup .img-box:before {z-index: 5; position: absolute; top: -46px; left: -32px; content: ''; width: 80px; height: 80px; background: url('../img/sub/s105_list_deco01.png') no-repeat center center;}
.stories-popup .img-box:after {z-index: 5; position: absolute; top: 165px; left: 50%; transform: translateX(-50%); content: ''; width: 56px; height: 72px; background: url('../img/sub/s105_list_deco02.png') no-repeat center top;}
.stories-popup .img-box .pic {position:relative; height:0; padding-bottom:133.87%; border-radius: 62px; overflow:hidden; transition:all 0.6s;}
.stories-popup .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.stories-popup .text-box {width: 1%; flex: 1 1 auto;}
.stories-popup .text-box .name-wrap {display: flex; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid #e3e4e5;}
.stories-popup .text-box .university {font-size: 32px; font-weight: 700; line-height: 1.3em; color: #333; margin-right: 20px;}
.stories-popup .text-box .name {display: flex; align-items: flex-end; flex-wrap: wrap; font-weight: 700; color: #f04d22; padding-bottom: 5px;}
.stories-popup .text-box .student {position: relative; font-size: 20px; line-height: 1.3em; padding-right: 16px; margin-right: 12px;}
.stories-popup .text-box .student:after {position: absolute; top: 3px; right: 0; content: ''; width: 2px; height: 16px; background: #f04d22;}
.stories-popup .text-box .school {font-size: 15px; line-height: 1.3em;}
.stories-popup .details-wrap .scroll-wrapper {max-height: calc(100vh - 530px); overflow: auto; }
.stories-popup .details-wrap .scroll-wrapper::-webkit-scrollbar {width: 6px; height: 6px;}
.stories-popup .details-wrap .scroll-wrapper::-webkit-scrollbar-thumb {background: #f04d22; border-radius: 6px; cursor: pointer;}
.stories-popup .details-wrap .scroll-wrapper::-webkit-scrollbar-track {background: #f3f2f2; border-radius: 6px;}
.stories-popup .details-wrap .title {font-size: 22px; font-weight: 700; line-height: 1.3em; color: #333; margin-bottom: 18px;}
.stories-popup .details {position: relative;}
.stories-popup .details .text {font-size: 18px; line-height: 1.72em; color: #333;}
.stories-popup .year {position: absolute; top: 0; right: 70px; width: 88px; height: 50px; background: #f04d22; font-size: 18px; font-weight: 600; line-height: 45px; color: #fff; text-align: center; clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 84%, 0 100%); padding-bottom: 5px;}
.stories-popup .btn-close {position:absolute; top:15px; right:20px; width:36px; height:36px; z-index:12; border: 0; background: transparent; transition:all 0.6s;}
.stories-popup .btn-close:before,
.stories-popup .btn-close:after {content:''; width:36px; height:2px; background:#000; position:absolute; left:0; transition:all 0.6s;}
.stories-popup .btn-close:before {top:50%; transform:rotate(45deg); margin-top: -1px;}
.stories-popup .btn-close:after {bottom:50%; transform:rotate(-45deg); margin-bottom: -1px;}
.stories-popup-overlay {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 500;}

/* s106 */
.location .tab-nav ul {display: flex; margin: 0 -18px 40px;}
.location .tab-nav ul li {position: relative; padding: 0 18px;}
.location .tab-nav ul li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 18px; background: #333;}
.location .tab-nav ul li:last-child:after {display: none;}
.location .tab-nav a {font-size: 26px; line-height: 1.3em; color: #000; transition: all 0.3s;}
.location .tab-nav ul li.active a {font-weight: 600; color: #f04d22;}
.location .map-box {margin-bottom: 64px;}
.location .root_daum_roughmap {width:100% !important; height:638px !important;}
.location .root_daum_roughmap .wrap_map {height:638px !important;}
.location .root_daum_roughmap .border1,
.location .root_daum_roughmap .border2 {border: none ;}
.location .root_daum_roughmap .border3, 
.location .root_daum_roughmap .border4 {background-color: transparent;}
.location .wrap_controllers,
.location .root_daum_roughmap .cont {display: none;}
.location .info-box {display: flex;}
.location .info-box .logo {max-width: 342px; width: 100%;}
.location .info-box .logo img {height: 28px;}
.location .info-box .info {width: 1%; flex: 1 1 auto;}
.location .info-box .info ul {display: flex; flex-wrap: wrap;}
.location .info-box .info ul li {position: relative; font-size: 18px; font-weight: 600; line-height: 2.2em; color: #333; padding-left: 14px; margin-right: 40px;}
.location .info-box .info ul li:nth-child(1) {width: 100%;}
.location .info-box .info ul li:before {position: absolute; top: 18px; left: 0; content: ''; width: 4px; height: 4px; background: #333; border-radius: 50%;}
.location .info-box .info ul li .line {margin: 0 10px;}
.location .info-box .info ul li a {display: inline-block; font-size: 24px; font-weight: 900;}
.location .info-box .info ul li small {font-size: 16px; font-weight: 500; color: #f04d22; margin-left: 5px;}

/* s201 */
.teacher-wrap {display: flex; align-items: flex-start; gap: 36px;}
.teacher .tab-thumb {position: relative; max-width: 570px; width: 100%;}
.teacher .tab-thumb .pic {position: relative; width: 100%; padding-bottom: 91.24%; overflow: hidden;}
.teacher .tab-thumb .pic img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.teacher .tab-thumb .text-box {position: absolute; top: 40px; right: 50px; width: 210px;}
.teacher .tab-thumb .text-box .title {padding-right: 18px;}
.teacher .tab-thumb .text-box .teacher-subject {position: relative; font-size: 16px; font-weight: 500; line-height: 1.3em; color: #000; padding-bottom: 11px; margin-bottom: 16px; border-bottom: 1px solid #000;}
.teacher .tab-thumb .text-box .teacher-subject:after {position: absolute; bottom: -2px; left: 0; content: ''; width: 45px; height: 3px; background: #000;}
.teacher .tab-thumb .text-box .teacher-name {font-size: 24px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 37px;}
.teacher .tab-thumb .text-box .teacher-name span {font-size: 18px; font-weight: 500;}
.teacher .tab-thumb .text-box .desc li {position: relative; font-size: 16px; line-height: 1.62em; color: #777; padding-left: 10px;}
.teacher .tab-thumb .text-box .desc li:before {position: absolute; top: 10px; left: 0; content: ''; width: 3px; height: 3px; background: #777;}

.teacher .tab-menu-wrap {width: 1%; flex: 1 1 auto; display: flex; flex-wrap: wrap; margin: -15px -18px;}
.teacher .tab-menu {width: 33.3333%; padding: 15px 18px; box-sizing: border-box;}
.teacher .tab-menu a {position: relative; overflow: hidden; border: 1px solid transparent; transition: all 0.5s;}
.teacher .tab-menu.active a {border: 1px solid #000;}
.teacher .tab-menu a:hover {border: 1px solid #000;}
.teacher .tab-menu .pic {position:relative; height:0; padding-bottom:91.76%; overflow:hidden; transition:all 0.6s;}
.teacher .tab-menu .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.5s;}
.teacher .tab-menu a:hover .pic img {transform: translateY(-50%) scale(1.06);}
.teacher .tab-menu .name-box {position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; background: rgba(43,43,43,0.7); padding: 10px 0;}
.teacher .tab-menu .name-box p {position: relative; font-size: 18px; line-height: 1.3em; color: #fff; padding: 0 11px;}
.teacher .tab-menu .name-box .teacher-subject:after {position: absolute; top: 3px; right: 0; content: ''; width: 1px; height: 16px; background: #fff;}

/* s301 */
.lecture .wrap {display: flex; gap:	133px;}
.lecture .board-tab-menu {max-width: 160px; width: 100%; text-align: center; margin-top: 68px;}
.lecture .calendar {width: 1%; flex: 1 1 auto;}
.calendar .calendar-wrap .calendar-title {display: flex; margin-bottom: 40px; align-items: center; justify-content: center;}
.calendar .calendar-wrap .calendar-title a {display:flex; justify-content:center; align-items:center; width: 38px; height: 38px; border: 1px solid #ddd; border-radius: 50%; text-align: center;}
.calendar .calendar-wrap .calendar-title h4 {font-size: 20px; font-weight: 600; color: #000; padding: 0 52px;}
.calendar .calendar-wrap .calendar-title h4 span {display: inline-block; font-size: 24px;}
.calendar .calendar-wrap table {width: 100%; table-layout: fixed;}
.calendar .calendar-wrap tr th {background: #333; font-size: 14px; font-weight: 500; color: #fff; line-height: 37px;}
.calendar .calendar-wrap tr td {height: 110px; border: 1px solid #333; background: #fff; vertical-align: top; font-size: 14px; font-weight: 500; color: #333; padding: 7px 20px;}
.calendar .calendar-wrap tr td .date-sun,
.calendar .calendar-wrap tr td .holiday {color: #f04d22;}
.calendar .calendar-wrap tr td .day {display: none; margin-left: 6px;}
.calendar .calendar-wrap tr td ul {padding-top: 3px;}
.calendar .calendar-wrap tr td ul li {font-size: 14px; font-weight: 500; line-height: 1.57em; color: #f04d22; overflow: hidden;}

/* s401 */
.reservation .text-box {margin-bottom: 50px;}
.reservation .text-box ul li {position: relative; font-size: 18px; line-height: 1.72em; color: #555; padding-left: 13px;}
.reservation .text-box ul li:before {position: absolute; top: 10px; left: 0; content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f04d22;}
.reservation .wrap {display: flex; gap: 90px;}
.reservation .left-box {max-width: 555px; width: 100%;}
.reservation .text-box {margin-bottom: 57px;}
.reservation .text-box .title {position: relative; padding-bottom: 29px; margin-bottom: 30px;}
.reservation .text-box .title:after {position: absolute; bottom: 0; left: 0; content: ''; width: 216px; height: 3px; background: #f04d22;}
.reservation .text-box .title h3 {position: relative; font-size: 20px; font-weight: 700; line-height: 1.5em; color: #333; padding-left: 48px;}
.reservation .text-box .title h3:before {position: absolute; top: 0; left: 0; content: ''; width: 29px; height: 30px; background: url('../img/sub/s104_title_deco.png') no-repeat center center;}
.reservation .text-box ul li {position: relative; font-size: 16px; line-height: 1.75em; color: #555; padding-left: 13px;}
.reservation .text-box ul li:before {position: absolute; top: 10px; left: 0; content: ''; width: 6px; height: 6px; border-radius: 50%; background: #333;}
.reservation .text-box ul li .font-orange {color: #f04d22;}

.reservation .calendar {width: 1%; flex: 1 1 auto;}
.reservation .calendar .calendar-wrap tr td {height: 90px; border: 1px solid #333; background: #fff; font-size: 14px; font-weight: 500; color: #333; padding: 0;}
.reservation .calendar .calendar-wrap tr td .date-sun {color: #f04d22;}
.reservation .calendar .calendar-wrap tr td p {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; cursor: pointer; transition: all 0.5s;}
.reservation .calendar .calendar-wrap tr td p:hover {background: #f04d22; color: #fff;}
.reservation .calendar .calendar-wrap tr .date-unactive {color: #bdbdbd; pointer-events: none;}
.reservation .calendar .calendar-wrap tr .date-full {background: #000; color: #fff; pointer-events: none;}

.reservation-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 483px; width: 90vw; z-index: 600;}
.reservation-popup .inner {position: relative; padding: 46px 40px 45px; border-radius: 20px; background: #fff; max-height: 90vh; overflow-y: auto;}
.reservation-popup .inner::-webkit-scrollbar {width: 6px; height: 6px;}
.reservation-popup .inner::-webkit-scrollbar-thumb {background: #ddd; border-radius: 6px; cursor: pointer;}
.reservation-popup .inner::-webkit-scrollbar-track {background: transparent; border-radius: 6px; margin: 10px;}

.reservation-popup .popup-title h2 {font-size: 30px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 32px;}
.reservation-popup .popup-cont .notice {font-size: 16px; line-height: 1.72em; color: #555; margin-bottom: 10px;}
.reservation-popup .popup-info {padding: 27px 40px; border-radius: 10px; background: #9c7d5a; margin-bottom: 25px;}
.reservation-popup .popup-info dl {display: flex;}
.reservation-popup .popup-info dl:not(:last-child) {margin-bottom: 9px;}
.reservation-popup .popup-info dt {position: relative; max-width: 98px; width: 100%; padding-left: 13px; font-size: 18px; line-height: 1.3em; color: #fff;}
.reservation-popup .popup-info dt:before {position: absolute; top: 9px; left: 0; content: ''; width: 5px; height: 5px; background: #fff; border-radius: 50%;}
.reservation-popup .popup-info dd {font-size: 16px; font-weight: 300; line-height: 1.4em; color: #fff;}
.reservation-popup .popup-form .form-items {margin-bottom: 18px;}
.reservation-popup .popup-form .form-item:not(:last-child) {margin-bottom: 12px;}
.reservation-popup .popup-form .form-label {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;}
.reservation-popup .popup-form .form-input {width: 100%; font-size: 16px; line-height: 1.2em; color: #000; padding: 11px 20px; border: 1px solid #ddd; border-radius: 5px;}
.reservation-popup .popup-form .form-input::placeholder {color: #999;}
.reservation-popup .popup-form .form-select {width: 100%; font-size: 16px; line-height: 1.2em; color: #000; padding: 11px 20px; border: 1px solid #ddd; border-radius: 5px; background: url('../img/sub/btn_form_select.png') no-repeat 94% 50%; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.reservation-popup .popup-form .form-select option {font-size: 16px; line-height: 1.2em; color: #999;}
.reservation-popup .popup-form .form-textarea {width: 100%; min-height: 175px; font-size: 16px; line-height: 1.2em; color: #000; padding: 11px 20px; border: 1px solid #ddd; border-radius: 5px; resize: none;}
.reservation-popup .popup-form .form-textarea::placeholder {color: #999;}
.reservation-popup .popup-form .form-input:focus,
.reservation-popup .popup-form .form-select:focus,
.reservation-popup .popup-form .form-textarea:focus {outline: none;}
.reservation-popup .popup-form .form-select:-ms-expand {display:none;}
.reservation-popup .popup-form .popup-btn p {font-size: 20px; font-weight: 500; line-height: 1.3em; color: #000; text-align: center; margin-bottom: 18px;}
.reservation-popup .popup-form .btn-wrap {display: flex; justify-content: center;}
.reservation-popup .popup-form .btn-wrap button {display: inline-block; font-size: 18px; font-weight: 500; line-height: 43px; text-align: center; color: #fff; border-radius: 22px; border: none; }
.reservation-popup .popup-form .btn-yes {width: 90px; background: #9c7d5a; margin-right: 10px;}
.reservation-popup .popup-form .btn-no {width: 110px; background: #9e9e9e;}
.reservation-popup .btn-close {position:absolute; top:46px; right:40px; width:36px; height:36px; z-index:12; border: 0; background: transparent; transition:all 0.6s;}
.reservation-popup .btn-close:before,
.reservation-popup .btn-close:after {content:''; width:36px; height:2px; background:#000; position:absolute; left:0; transition:all 0.6s;}
.reservation-popup .btn-close:before {top:50%; transform:rotate(45deg); margin-top: -1px;}
.reservation-popup .btn-close:after {bottom:50%; transform:rotate(-45deg); margin-bottom: -1px;}
.reservation-popup-overlay {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 500;}