/* 뷰포트 1920 이상 */
@media screen and (min-width:1920px) {
    header .gnb li {margin-right:84px}
}

/* 뷰포트 1300 이하 */
@media screen and (max-width:1700px) {

    /*rnb 반응형 */
    .con-wrap.reserve.rnb-page .left-con-wrap {width:calc(100% - 32px); padding-left:0; margin:0 auto; float:none}
    .reserve.rnb-page .con-box:first-child {margin-top:126px !important}
    /* .reserve .tab-area .tab-type01 {bottom:-167px} */
     .rnb-page .main-tit, .rnb-page .main-tit span {font-size:22px !important; font-weight:700;}
    .rnb-page .main-tit { margin-bottom:20px; margin-left:16px}
    .rnb-page .main-tit:after {left:-346px}
    .rnb-page .tit-wrap {flex-direction: column; align-items:flex-start}
    .rnb-page .tit-wrap .main-tit{margin-bottom:10px}
    .rnb-page .tit-wrap .tit-ps{width:75%; margin-bottom:20px}
    .rnb-area {position:absolute; width:100%; left:50%; right:auto; top:90px; transform:translateX(-50%)}
    .rnb-area .rnb {justify-content: center; flex-direction: row;}
    .rnb-area .rnb li {flex-basis:103px; flex-shrink:0; margin-bottom:0; position:relative; text-align:center; display:flex; align-items: center; justify-content: center; line-height:18px; font-size:12px;}
    .rnb-area .rnb li span {position:absolute; bottom:-40px; left:50%; transform:translateX(-50%)}
    .rnb-area .rnb li span::before {width:80px; height:1px; left:31px; bottom:14px; border-bottom:dashed 1px #c9ced3}
    .rnb-area .rnb li.now span::before {border-bottom:dashed 1px #0066b3}
    .rnb-area .rnb li.prev span::before {border-bottom:solid 1px #c9ced3}
    .rnb-area .rnb li .d-mb {display:block !important}
    
    .reserve-box .select-list>li {width:23%;}
    .reserve-box .select-list>li:last-child {width:50%}

    /* 캘린더 반응형 */
    .calendar-wrap {width:100%; height:auto; max-height:calc(100% - 40px); padding-bottom:20px; top:50%; max-width:390px; flex-direction: column; z-index:111; position:fixed; right:auto; left:50%; transform:translateX(-50%) translateY(-50%)}
    .calendar-wrap .calendar {width:100%; height:auto; padding:16px 0; border:0; border-bottom:solid 1px #c9ced3; padding-top:12px}
    .calendar-wrap .reserve-info-wrap {width:100%; border:0}
    .calendar .calendar-header {max-width:308px; margin:0 auto; padding-bottom:15px}
    .calendar .calendar-table table {margin:0 auto;}
    .calendar .calendar-table thead th, .calendar .calendar-table tbody td {padding:0px 23px 20px 0;}
    .reserve-info-wrap .reserve-date-box {padding:35px 16px 16px}
    .reserve-info-wrap .reserve-date-box::before {top:69%}
    .reserve-info-wrap .reserve-date-box .reserve-date li > p {font-size:15px; font-weight:500; margin-bottom:2px} 
    .reserve-info-wrap .reserve-date-box .reserve-date li > span {font-size:18px; font-weight:700}
    .reserve-info-wrap .term-box {height:48px}
    .reserve-info-wrap .price-info-box {margin-top:16px}
    .reserve-info-wrap .price-box {margin-bottom:20px}
    .reserve-info-wrap .btn-type01 {margin-top:0 !important}
    .calendar-wrap .x-btn.d-mb {display:block !important; width:20px; height:20px; background-size:100% 100%; background:url(/img/common/icon_exit20x20.png); position:absolute; right:16px; top:16px;}
    .calendar-mobile-bg {width:100%; height:100%; z-index:100; position:fixed; top:0; left:0; background:rgba(0,0,0,0.6)}
    
    
}

/* 뷰포트 1024 이하 */
@media screen and (max-width:1024px) {
    header {min-height:60px; position:fixed; top:0}
    header .gnb {display:none; background:#fff; width:100vw; height:100%; min-height:100vh; transform:translateX(0); left:auto; top:60px; right:-16px; overflow:auto; padding-bottom:150px}
    header .gnb > li {width:100%; height:auto; display:flex; flex-direction: column;}
    header .gnb > li > a {width:100%; display:inline-block; background:#fff; line-height:1; padding:24px 16px; font-weight:500 !important; outline:0;}
    header .gnb > li > a::before {content:""; width:24px; height:24px; background:url(/img/common/arr_title_down.png) no-repeat center; position:absolute; right:13px; top:21px;}
    header .gnb > li.active > a::before {transform:rotate(180deg); transition:0.3s}
    header .gnb li.active>a, header .gnb li>a:hover, header .gnb li>a:focus, header .gnb li .depth-02 li a:hover {color:#222; }
    header .gnb li .depth-02 li a {font-weight:400 !important; outline:0}
    header .gnb > li:first-child > a {padding-left:16px; padding-top:24px;}
    header .gnb li.active .depth-02 {padding:0; display:block !important;}
    header .gnb li .depth-02 {display:none; height:auto; max-width:100% !important; width:100vw; position:relative; top:0; left:0; transform:translateX(0); box-shadow:none !important; border-radius: 0 !important;}
    header .gnb li .depth-02 li {background:gray; margin:0; padding:20px 0 0 0; padding-left:36px; text-align:left; background:#f5f7f8;}
    header .gnb li .depth-02 li:last-child {padding-bottom:20px; border-bottom:solid 1px #c9ced3}
    header .ham-btn.x-btn {width:20px; height:20px; background:url(/img/common/icon_exit20x20.png); display:block;}

    footer .copyright-area {width:50%}
    footer .copyright-area p{display:none;visibility:hidden}
	footer .copyright-area p a{display:none}
    
    
    
    .tab-area .tab-type01 li a {font-size:16px}
    
    .input-checkbox {}
    .input-checkbox ul {width:100%; flex-wrap:wrap}
    .input-checkbox ul li {margin-bottom:10px; margin-right:10px}

    .guide .facility-info.con-box.bg-type {margin:50px 0 0 0}
    .guide .flex-box .left ul li span.strong span.strong, .guide .flex-box .left ul li span.gray,
    .guide .flex-box .left ul li span.strong span.strong, .guide .flex-box .left ul li span.blue {white-space: normal;}

    .facility-info .tab-area { margin:0}
    .facility-info .info-box {position:relative; top:-30px; right:auto; left:50%; transform:translateX(-50%); padding:23px 20px 25px}
    .facility-info .info-box .sub-tit {font-size:20px}
    .facility-info .info-box li {margin-bottom:20px}
    .facility-info .info-box li strong {margin-left:24px}
    .info-slide2 .swiper-pagination {bottom:37px}

    .reserve-box .select-list {flex-wrap:wrap}
    .reserve-box .select-list>li {width:48%; margin-right:4%}
    .reserve-box .select-list>li:nth-child(2) {margin-right:0}
    .reserve-box .select-list>li:last-child {width:100%; margin-top:20px;}
    .select-box-type-calendar {width:83%}
    
    
    .date-notice-box{display:block;width:100%;height:auto;padding:7px;text-align:center}
	.date-notice-box strong {display:block;font-size:0.9rem}
	.date-notice-box span {display:block;font-size:1rem}
}

/* 뷰포트 768 이하 */
@media screen and (max-width:768px) {

    /* 카테고리별 타이틀 배경 (수련원 안내 / 이용안내 / 수련원 예약 / 고객서비스)*/
    .seorak .title-area.guide {background: url(/img/sub/title-bg/bg_seorak_m.png) no-repeat center} 
    .suanbo .title-area.guide {background: url(/img/sub/title-bg/bg_suanbo_m.png) no-repeat center} 
    .byeonsan .title-area.guide {background: url(/img/sub/title-bg/bg_byeonsan_m.png) no-repeat center} 
    .jeju .title-area.guide {background: url(/img/sub/title-bg/bg_jeju_m.png) no-repeat center} 
    .hongcheon .title-area.guide {background: url(/img/sub/title-bg/bg_hongcheon_m.png) no-repeat center} 
    .yeosu .title-area.guide {background: url(/img/sub/title-bg/bg_yeosu_m.png) no-repeat center} 
    .howtouse .title-area {background:url(/img/sub/title-bg/bg_howtouse_m.png) no-repeat center} 
    .title-area.reserve{background:url(/img/sub/title-bg/bg_reserve_m.png) no-repeat center}
    .title-area.reserve.lottery{background:url(/img/sub/title-bg/bg_lottery_m.png) no-repeat center}
    .title-area.service.faq{background:url(/img/sub/title-bg/bg_faq_m.png) no-repeat center}
    .title-area.service.notice{background:url(/img/sub/title-bg/bg_notice_m.png) no-repeat center}
    .title-area.service.event{background:url(/img/sub/title-bg/bg_event_m.png) no-repeat center}

    .wrap {margin-top:60px}
    .con-wrap {padding-bottom:40px !important}
    .input-checkbox input[type="checkbox"] + label::before {width:18px; height:18px; padding:0; left:0px; top:54%; background-size:cover}
    .input-checkbox label {padding-left:30px}
    .checkbox-wrap.check-all .checkbox input {left:0;}
    
    .reserve .rnb-area {top:70px}
    .main-tit {font-size:22px !important; font-weight:700; margin-bottom:20px; margin-left:16px; line-height:30px}
    .main-tit span{font-size:22px !important; font-weight:700;}
    .main-tit:after {left:-346px}
    th {font-size:14px !important}
    td, td .link {font-size:13px !important}

    /* 탭 반응형 */
    
    /* 공통 탭 (적용 페이지 : 수련원 예약) */
    .reserve .tab-area {margin-bottom:20px; position:relative}
    .reserve .tab-area .mb-tab-type01 {display:inline-block; width:100%; height:44px; line-height:44px; border-radius:5px; padding-left:16px; background:#fff url(/img/common/arr_down.png) no-repeat right 8px top 50%; background-size:16px 16px;  border:solid 1px rgb(169,169,169); font-size:16px; font-weight:400;}
    .reserve .tab-area .mb-tab-type01.active { background:#fff url(/img/common/arr_up.png) no-repeat right 8px top 50%; background-size:16px 16px;}
    .reserve .tab-area .tab-type01 {display:none; top:43px; z-index:10; position:absolute; flex-direction:column; padding:12px; border-radius:5px; box-shadow:0 3px 6px rgba(0,0,0,0.16); background:#fff;  border:solid 1px rgb(169,169,169);}
    .reserve .tab-area .tab-type01.active {display:flex;}
    .reserve .tab-area .tab-type01 li {width:100%; border:0 !important; line-height:1; text-align:left; margin-bottom:26px}
    .reserve .tab-area .tab-type01 li a{font-size:16px; font-weight:300; color:#222}
    .reserve .tab-area .tab-type01 li.active a{font-size:16px; font-weight:300; color:#222}
    .reserve .tab-area .tab-type01 li:last-child{margin-bottom:0}
    /* 고객서비스 - 자주묻는질문 */
    .tab02-area {position:relative}
    .tab02-area .mb-tab-type02 {display:inline-block; width:100%; max-width:200px; height:44px; margin:20px 0; line-height:44px; border-radius:5px; padding-left:16px;  background:#fff url(/img/common/arr_down.png) no-repeat right 8px top 50%; background-size:16px 16px;  border:solid 1px rgb(169,169,169); font-size:16px; font-weight:700; color:#0066b3}
    .tab02-area .mb-tab-type02.active { background:#fff url(/img/common/arr_up.png) no-repeat right 8px top 50%; background-size:16px 16px;}
    .tab02-area .tab-type02 {display:none; max-width:200px; z-index:10; position:absolute; bottom:-293px; flex-direction:column; padding:16px 0; border-radius:5px; box-shadow:0 3px 6px rgba(0,0,0,0.16); background:#fff;  border:solid 1px rgb(169,169,169);}
    .tab02-area .tab-type02.active {display:flex;}
    .tab02-area .tab-type02 li {width:100%; max-width:200px; border:0 !important; line-height:1; padding:0 16px; text-align:left; margin-bottom:26px}
    .tab02-area .tab-type02 li a{font-size:16px; font-weight:300}
    .tab02-area .tab-type02 li.active a{font-size:16px; font-weight:300; color:#222}
    .tab02-area .tab-type02 li:last-child{margin-bottom:0}
    /* 수련원 안내 - 객실 정보 탭 */
    .tab-type03 {max-width:368px; margin-top:20px; margin-bottom:20px;}
    .tab-type03 li{margin-right:10px; min-height:64px !important; line-height:24px; padding:19px 1%; display:flex; align-items: center; justify-content: center;}
    .tab-type03 li a{font-size:16px !important}
    .tab-type03 li a .d-mb {display:block !important}
    .tab-type03 li.active a::before {width:calc(100% - 10px);}

    /* 고객서비스 */
    .search-wrap {padding:0; position:relative}
    .search-wrap::before {content:"";width:120%; height:100%; background:#f5f7f8; position:absolute; left:50%; transform:translateX(-50%); top:0; z-index:-2}
    .search-wrap .search-area {flex-wrap:wrap}
    .search-wrap .search-area .select-box-wrap {width:28%;}
    .search-wrap .search-area .select-box-wrap .select-box {width:100%}
    .search-wrap .search-area .select-box-wrap .select-type01 {width:100%}
    .search-wrap .search-area .search-botton {width:100%; margin-top:16px}
    .search-wrap .search-area .input-text {width:70%; margin-right:0}
    .search-result {border:0; margin:0; padding:0; font-size:16px; font-weight:500}
    .search-result strong{font-size:16px}
    .qa-list-type01 li .q span, .notice-table table .sub-tit, .text-type-star {font-size:16px}
    .qa-list-type01 li.active .a {padding-left:20px !important; padding-right: 20px !important;}
    .notice-wrap::before {content:"";width:120%; height:100%; background:#f5f7f8; position:absolute; left:50%; transform:translateX(-50%); top:0; z-index:-2}
    .notice-list li a {font-size:15px}
    .notice-table table thead tr th {width:auto; display:flex; font-size:16px; border-right:0; align-items: center;}
    .notice-table table thead tr th strong {font-size:16px; white-space:nowrap}
    .notice-table .regi-day {padding-left:12px;}
    .event-list li {padding:20px 0}
    .event-list li .text-box {width:100%; flex-direction: column; padding:0}
    .event-list li a {flex-direction: column;}
    .event-list li a .img-area {flex-basis: auto; margin:0}
    .event-list li .text-box .title {margin-bottom:20px; line-height:28px; width:260px; text-align:center; word-break:keep-all}

    .reserve-info-table {flex-direction: column;}
    .reserve-info-table .table-wrap:first-child {margin-right:0}
    .reserve-info-table .table-wrap {max-width:100% !important}
    .reserve-info-table .table-wrap:last-child .table-type03 table {border-top:0}
    .reserve-info-table .table-wrap .table-type03 table th {width: 25% !important;padding: 20px 5px; font-size:16px}
    .table-type03.reserve-info table th {font-size:15px}
    .table-type03 table td, .table-type03 table td a,.table-type03 table td strong  {font-size:15px !important; padding-right:5px; word-break:keep-all}
    
    .title-area {height:234px; margin-bottom:34px;}
    .title-area::before {height:34px; bottom:-34px;}
    .visual-tit {font-size:32px; max-width:352px; padding:25px 0;}
    .jeju .visual-tit {font-size:25px}
    .sub-tit, p.sub-tit, .sub-tit span, p.sub-tit span {font-size:18px}

    footer .family-menu-area {margin-bottom:15px}
    footer .footer-inner {flex-direction: column;}
    footer .family-menu-area>a {width:100%; font-size:14px; font-weight:400;}
    footer .copyright-area {width:100%;padding-right:0}
    footer .copyright-area p{display:none}
    footer .copyright-area .adress,footer .copyright-area .num,footer .copyright-area .ceo, footer .copyright-area a {width:100%; font-size:12px; font-weight:300; line-height:20px;}
    footer .copyright-area .num,footer .copyright-area .ceo {width:auto}
    footer .copyright {margin:2px 0 5px 0;font-size:12px;font-weight:400}
    footer .family-menu li a {font-size:14px; font-weight:300;}
    .table-type01 thead th, .table-type02 thead th, .table-type03 thead th {font-size:15px}
    .table-type01 tbody td, .table-type02 tbody td, .table-type03 tbody td, .table-type01 tbody td a, .table-type02 tbody td a, .table-type03 tbody td a {font-size:13px}

    .reserve .input-list-wrap li {display:flex; flex-wrap:wrap}
    .reserve .input-list-wrap .input-list > li strong {width:100%; margin-bottom:10px; text-align:left}
    .reserve .insur-wrap .btn-type03,.reserve .insur-wrap .btn-type02 {width:100%; max-width:100%; margin:10px 0 0 0}
    .reserve .input-list-wrap li .input-text {width:100%}
    .reserve .input-list-wrap .input-list > li .input-text input {max-width:100%}
    .reserve .input-list-wrap .input-list > li .flex-box {width:100%; flex-direction: column;}
    .reserve .input-list-wrap .input-list > li .flex-box > span {order:-1; margin-top:10px}
    .reserve .member-wrap .btn-type02, .reserve .member-wrap .btn-type03 {max-width:100%; margin:10px 0 0 0}
    .input-phone-box .select-box {width: 30%; margin-right: 5px; padding: 0 8px;}
    .input-phone-box {width:100%}
    .input-phone-box input {max-width: 30%; margin-right: 0; padding: 0 8px;}
    .table-type02 thead th .price {font-size:16px}
    .tou-box .input-checkbox label {font-size:13px; margin-left:10px}
    .tou-box .checkbox-wrap {flex-direction:column; align-items: flex-end;}
    .tou-box .checkbox-wrap .input-checkbox ul {flex-direction:row}
    .tou-box .checkbox-wrap .input-checkbox ul li{margin-right:25px}
    .tou-box .checkbox-wrap .input-checkbox ul li:last-child{margin-right:0px}
    .tou-box .checkbox-wrap span {font-size:13px; margin-right:0}

    .popup-print {overflow:auto; height:calc(100% - 40px); top:20px; transform:translateX(-50%)}
    .popup-print .popup-footer {align-items:baseline; padding: 30px 0 0 0; flex-direction: column;}
    .popup-print .popup-footer .btn-type01 {margin:0 auto; margin-top:20px}

    .main-tit .tit-ps {font-size:14px; font-weight:400; line-height:24px; top:0;}
    .sub-tit .tit-ps {width:100%; font-size:14px; font-weight:400; line-height:24px; top:0 !important; left:0 !important;}

    .guide .tit-wrap.sub {flex-direction:column; align-items: baseline;}
    .guide .tit-wrap.sub .sub-tit {order:2}
    .guide .tit-wrap.sub .tit-ps {width:100%; order:1; margin: -10px 0 20px; font-size:14px}
    .guide .sub-tit {width:100%; font-size:20px; padding-left:0; margin-bottom:0}
    .guide .sub-tit::before {width:24px; position:relative; top:5px;}
    .sub-tit::before {top:1px}
    .map-wrap {margin-top:10px; height:726px;}
    .map-wrap .main-tit {margin-bottom:15px}
    .map-wrap .map {min-height:420px}
    .map-wrap .map-inner .map-info-box {top:300px; left:50%; transform:translateX(-50%)}
    .map-wrap .map-inner .map-info-box .map-info-header {padding:19px 30px}
    .map-wrap .map-inner .map-info-box .map-info-header a {font-size:16px}
    .map-wrap .map-inner .map-info-box .map-info-body strong {font-size:16px}
    .map-wrap .map-inner .map-info-box .map-info-body .phone-number, .map-wrap .map-inner .map-info-box .map-info-body p {font-size:14px}
    .map-wrap .map-inner .map-info-box .map-info-footer a {font-size:18px}

    .guide .con-box .flex-box {display:flex; flex-direction: column; margin-top:20px;}
    .guide .con-box .flex-box ul {width:100%;}
    .guide .con-box .flex-box .left {width:100%; margin-top:10px; padding-left:0}
    .guide .con-box .flex-box .left ul li {display:flex; font-size:14px; line-height:24px; width:100%; max-width:100%; min-height:auto; margin-right:0; margin-bottom:20px}
    .guide .con-box .flex-box .left ul li strong {width:100px; margin-bottom:0; margin-left:3.2%; font-size:16px; flex-shrink:0}
    .guide .con-box .flex-box .left ul li span, .guide .con-box .flex-box .left ul li span a {font-size:14px}
    .guide .con-box .flex-box .right {width:100%; padding:18px 3.2% 18px}
    .guide .con-box .flex-box .right strong {font-size:16px}
    .guide .con-box .flex-box .right span {font-size:14px; width:40px}
    .guide .con-box .flex-box .right li {margin-bottom:10px; font-size:14px}
    .guide .reserve-box {margin-bottom:50px}

    .slide-wrap {margin-top:0; width:100vw; left:50%; transform:translateX(-50%)}
    .swiper-pagination-bullet {width:10px; height:10px; margin:0 7px !important}
    .swiper-button-next {right:20px; background-size:9px}
    .swiper-button-prev {left:20px; background-size:9px}
    .guide .con-box.bg-type {padding-bottom:80px}
    .guide .con-box.bg-type::before {height:140px; bottom:40px}
    .guide .con-box.bg-type .video-wrap .main-btn {background:url(/img/common/m_btn_play.png) no-repeat center}
    .info-slide {margin:20px 0 22px}
    
    .swiper-button-next, .swiper-button-prev {width:26px; height:26px}
    .tit-ps.pc {display:none}
    .mb-tab-type04 {display:inline-block; padding-left:46px; white-space:nowrap}
    .room-info-wrap .tab-type03 {justify-content: flex-start !important;}
    .tab.swiper-button-next, .tab.swiper-button-prev {display:block; opacity:0.5}
    .tab.swiper-button-disabled {display:none}
    .tab-type04 {display:none; background:#fff; border-radius:5px; box-shadow: 0px 3px 10px rgba(0,0,0,0.16); position:absolute; top:49px; z-index:102}
    .tab-type04.active {display:flex !important;}
    .tab-type04 li {width:50%; height:70px; padding-right:20px; display:flex; align-items: center; border-radius:0; border:0; border-bottom:solid 1px #c9ced3;}
    .tab-type04 li.active {background:#fff;}
    .tab-type04 li.active a{color:#0066b3}
    .tab-type04 li.active svg path,.tab-type04 li.active svg rect {fill:#0066b3}
    .tab-type04 li.bb0 {border-bottom:0 !important}
    .tab-type04 li:nth-child(2n) { border-right:solid 1px #c9ced3; }
    .tab-type04 li:last-child {border-bottom:0; border-radius:0 0 0 5px}
    .tab-type04 > li:last-child {width:100%; height:auto; margin:0}
    .tab-type04 li a {font-size:14px; height:100%; padding:0 0 0 50px; display:flex; align-items:center; break-word:keep-all}
    .tab-type04 .hall ul {display:flex; width:100%; flex-wrap:wrap}
    .tab-type04 .hall ul li {width:50%; border-radius:0 !important; border:0; border-bottom:solid 1px #c9ced3}
    .tab-type04 .hall li:nth-child(2n) {border:0; border-bottom:solid 1px #c9ced3; border-right:solid 1px #c9ced3}
    .tab-type04 li.mb-title, .tab-type04 .hall li.mb-title {display:flex;}
    .tab-type04 .hall li.active {background:#fff}
    .tab-slide {padding-left:24px; margin:0}
    .guide .facility-info.con-box.bg-type {padding-bottom:44px;}
    .guide .facility-info.con-box.bg-type::before {height:50%}
    .con-wrap.np-type {padding-bottom:0 !important}
    .reserve-info-wrap {border:0;}
    .facility-info .slide-wrap {margin:0}

    /* 이용안내 */
    .howtouse .kori-box {padding: 26px 26px 40px; max-width:390px; margin:0 auto}
    .howtouse .kori-list li:nth-child(2) {width:127px; padding:0 10px; margin:0 10px}
    .howtouse .kori-list .img {width:70px; height:70px}
    .howtouse .kori-list span {font-size:16px; bottom:-20px;}
    .howtouse .sub-tit {margin-bottom:20px}
    .howtouse .ul-type-star {margin-top:15px}
    .howtouse .ul-type-star li,.howtouse .ul-type-star li span, .howtouse .ul-type-star li a, .howtouse .ul-type-minus li {font-size:13px !important; line-height:20px}
    .howtouse .con-box {margin-bottom:50px}
    .howtouse .date-box {height:auto; padding:20px 0; flex-direction: column; text-align: center;}
    .howtouse .date-box .enter {display:none}
    .howtouse .date-box strong, .howtouse .date-box span {font-size:18px}
    .howtouse .diagram-list {flex-direction: column; margin-top:35px; align-items: center;}
    .howtouse .diagram-list li {margin:0 0 35px 0 !important; min-height:63px}
       .howtouse .diagram-list li strong {top:56%}
    .howtouse .diagram-list.start li:last-child {margin-bottom:40px !important}
    .howtouse .diagram-list.next li:last-child {margin-bottom:0px !important}
    .howtouse .diagram-list li::before {content:""; display:inline-block; width:1px; height:40px; background:#0066b3; position:absolute;top:auto; bottom:-40px; transform:translateX(-50%) translateY(0); left:50%;}
    .howtouse .diagram-list li::after {display:none !important}
    .howtouse .diagram-list.start li:last-child::before {display:inline-block}
    .howtouse .diagram-list.next {margin-top:0 !important}
    .howtouse .ul-type-minus li {font-size:12px; line-height:20px}
    .howtouse .mt25 {width:100%; text-align:left;}
    .sub-tit {padding-left:26px}
    .howtouse .date-box.type02 {padding:20px 0; max-width:390px; margin:0 auto}
    .howtouse .date-box.type02 ul {flex-direction: column; justify-content: center;}
    .howtouse .date-box.type02 ul li {width:100%; padding:20px;}
    .howtouse .date-box.type02 ul li:first-child {padding-top:0}
    .howtouse .date-box.type02 ul li:last-child {padding-bottom:0}
    .howtouse .date-box.type02 ul li:nth-child(2)::before {width:25px; height:1px; top:0; left:50%; transform:translateX(-50%)}
    .howtouse .date-box.type02 ul li:nth-child(2)::after {width:25px; height:1px; top:auto; bottom:0; left:50%; transform:translateX(-50%)}
    .howtouse .date-box.type02 ul li strong {font-size:16px; margin-bottom:0; line-height:30px;}
    .howtouse .date-box.type02 ul li span {font-size:18px;}
    .howtouse .online-box {max-width:390px; margin:0 auto; padding:20px 0 30px; flex-direction: column;}
    .howtouse .online-box .left, .howtouse .online-box .right {width:100%; padding:0}
    .howtouse .online-box .left {max-width:200px; margin:0 auto; padding-bottom:30px;}
    .howtouse .online-box .left::before {display:none}
    .howtouse .online-box .left ul {margin-top:25px}
    .howtouse .online-box .left ul li::before {margin-bottom:5px}
    .howtouse .online-box .right {margin-top:30px; padding:0 24px}
    .howtouse .online-box .table {max-width:306px;}
    .howtouse .online-box .table .thead div:first-child, .howtouse .online-box .table .tbody .tr > div:first-child {max-width:114px}
    .howtouse .online-box .table .thead div:last-child, .howtouse .online-box .table .tbody .tr > div:last-child {max-width:192px}
    .howtouse .online-box .table .thead {height:auto;}
    .howtouse .online-box .table .thead div {font-size:14px; line-height:24px}
    .howtouse .online-box .table .tbody .tr div, .howtouse .online-box .table .tfooter {font-size:14px}
    .howtouse .kori-list li:nth-child(1) .img {background:url(/img/main/kori01_m.png) no-repeat center}
    .howtouse .kori-list li:nth-child(2) .img {background:url(/img/main/kori03_m.png) no-repeat center}
    .howtouse .kori-list li:nth-child(3) .img {background:url(/img/main/kori02_m.png) no-repeat center}
    .howtouse .gray-box {flex-direction: column; align-items: center; padding:0 26px 26px}
    .howtouse .gray-box .online, .howtouse .gray-box .offline {width:100%; max-width:306px; padding-top:25px}
    .howtouse .gray-box .online ul,.howtouse .gray-box .offline ul {padding:0; margin-top:25px}
    .howtouse .gray-box .offline > span {margin:0; display:inline-block; width:100%; text-align:center}
    .howtouse .gray-box ul li span {margin-top:6px}
    .howtouse .gray-box .offline ul li:last-child span {white-space: normal; width:120px; position:relative; top:0;}
    .howtouse .phone-box {height:auto; padding:30px 0}
    .howtouse .phone-list {flex-wrap:wrap}
    .howtouse .phone-list li {width:50%; margin-bottom:30px}
    .howtouse .phone-list li:last-child,.howtouse .phone-list li:nth-child(5) {margin:0}
    .howtouse .phone-list li::before {display:none}
    .howtouse .phone-list strong {font-size:15px}
	.kori-box + .ul-type-star li a {font-size:12px;}
	
    .banner-wrap img.d-pc {display:none !important;}
    .banner-wrap img.d-mb {display:block !important;}
    .video-js .vjs-big-play-button {background:url(/img/common/m_btn_play.png) no-repeat center !important}

     /* 예약박스 반응형*/
    .reserve-box {padding-top:20px; padding-bottom:25px}
    .reserve-box .text-type-star {text-align:left}
    .reserve-box .text-type-star > span{display:block}
    .reserve-box .select-list>li:last-child {width:100%; margin:0 !important; min-width:auto;}
    .reserve-box .select-list {flex-direction: column;}
    .reserve-box .select-list>li {width:100%; margin-bottom:15px}
    .reserve-box .select-list>li .flex-box {width:100%; flex-direction:column}
    .reserve-box .select-list>li .flex-box .select-box-type-calendar {width:100%; max-width:100%;}
    .reserve-box .select-list>li .flex-box .btn-type01 {max-width:100%; height:60px; line-height:60px; margin-top:28px; font-size:18px; font-weight:500}
    .reserve-box .input-list-wrap {margin-top:50px}
    .reserve-box .text-type-dot {width:100%; min-height:90px; line-height:24px; text-align:center; padding:7px 11px; display:flex; flex-direction: column; margin-top:20px}
    .reserve-box {padding-top:20px; padding-bottom:25px}
    .rnb-page .reserve-box.type02 .text-type-star {text-align:left}
    .rnb-page .reserve-box.type02 .text-type-star > span{display:block}
    .rnb-page .reserve-box.type02 .select-list>li:last-child {width:100%; margin:0 !important}
    .rnb-page .reserve-box.type02 .select-list {flex-direction: column;}
    .rnb-page .reserve-box.type02 .select-list>li {width:100% !important; margin-bottom:15px}
    .rnb-page .reserve-box.type02 .select-list>li .flex-box {width:100%; flex-direction:column}
    .rnb-page .reserve-box.type02 .select-list>li .flex-box .select-box-type-calendar {width:100%; max-width:100%}
    .rnb-page .reserve-box.type02 .select-list>li .flex-box .btn-type01 {max-width:100%; height:60px; line-height:60px; margin-top:28px; font-size:18px; font-weight:500}
    .rnb-page .reserve-box.type02 .input-list-wrap {margin-top:50px}
    .rnb-page .reserve-box.type02 .text-type-dot {width:100%; min-height:90px; line-height:24px; text-align:center; padding:7px 11px; display:flex; flex-direction: column; margin-top:20px}
    .tab-type04 > li:nth-last-child(2) {margin-right:0}

	.guide .tit-wrap {flex-direction:column; align-items:flex-start}
	.guide .tit-wrap .tit-ps br {display:none}
}
/* 뷰포트 450 이하 */
@media screen and (max-width:450px) {

    .d-pc {display:none !important}
    .d-mb {display:block !important}
	
	/*공통탭 (적용 페이지:이용안내, 고객서비스)*/
	.tab-area {margin-bottom:20px; position:relative}
    .tab-area .mb-tab-type01 {display:inline-block; width:100%; height:44px; line-height:44px; border-radius:5px; padding-left:16px; background:#fff url(/img/common/arr_down.png) no-repeat right 8px top 50%; background-size:16px 16px;  border:solid 1px rgb(169,169,169); font-size:16px; font-weight:400;}
    .tab-area .mb-tab-type01.active { background:#fff url(/img/common/arr_up.png) no-repeat right 8px top 50%; background-size:16px 16px;}
    .tab-area .tab-type01 {display:none; top:43px; z-index:10; position:absolute; flex-direction:column; padding:12px; border-radius:5px; box-shadow:0 3px 6px rgba(0,0,0,0.16); background:#fff;  border:solid 1px rgb(169,169,169);}
    .tab-area .tab-type01.active {display:flex;}
    .tab-area .tab-type01 li {width:100%; border:0 !important; line-height:1; text-align:left; margin-bottom:26px}
    .tab-area .tab-type01 li a{font-size:16px; font-weight:300; color:#222}
    .tab-area .tab-type01 li.active a{font-size:16px; font-weight:300; color:#222}
    .tab-area .tab-type01 li:last-child{margin-bottom:0}
	
    .search-result span, .search-result, .search-result strong span{font-size:16px;}
    .qa-list-type01 li .q span {font-size:15px}
    .notice-list li .date {font-size:13px}
    .notice-list li a {overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 60vw;white-space: nowrap;}
    .top-btn {width:70px; font-size:14px}
    .top-btn-wrap.type02 {z-index:5}
    .top-btn-wrap.type02 .top-btn {border-radius:5px 0 0 5px; padding-top:31px; background:#363636 url("/img/common/arr_topbtn_m.png") top 3px center no-repeat}
    .rnb-area .rnb li {flex-basis:82px;}

    header .header-btn {display:none}
    .popup-header .popup-tit {font-size:24px}
    .popup-wrap table th {font-size:11px !important; padding:10px 0 !important}
    .popup-wrap table td {font-size:11px !important;}
    .popup-cancel .popup-body {padding:30px 32px 0; background:url(/img/common/icon_info.png) no-repeat top 20px left 32px}
    .popup-cancel .popup-footer {max-width:100%; padding:30px 32px}
    .popup-cancel .popup-footer .btn-wrap {width:100%; flex-direction: column;}
    .popup-cancel .popup-footer .btn-wrap a.btn-type01{max-width:100%;}
    .popup-cancel .popup-footer .btn-wrap a.btn-type01:first-child{margin-right:0; margin-bottom:10px}
    .popup-cancel .popup-body ul li {width:100%; font-size:16px; line-height:26px}
    .popup-cancel-agree {padding:30px 32px}
    .popup-cancel-agree .popup-body .ul-type01 li {font-size:16px}
    .popup-cancel-agree .popup-footer {width:100%; padding: 30px 0 0 0}
    .popup-cancel-agree .popup-footer .btn-type01 {width:100%; max-width:100%;}
	.popup-print .btn-type01 {display:none}
	.popup-print .popup-footer {padding:30px 0 0 0}
	
    .reserve-info-wrap .reserve-date-box::before {background-size:contain; width:30px}
    .ul-type-star li, .ul-type-star li a, .ul-type-star li span {font-size:13px !important; color:#7c7d7e}
    .ul-type-star .d-block {display:block !important}
    .btn-type01 {font-size:16px !important}
    .tab-type04 li {padding-right:0px}
    .tab-type04 li a {padding-right:10px}
    .howtouse .kori-box {min-height:184px}
    .howtouse .kori-list span {bottom:-42px}
    .howtouse .phone-list strong.jeju {letter-spacing: -2.2px;}
    .reserve-complete .btn-wrap {width:100%; flex-direction:column;}
	.reserve-complete .btn-wrap .btn-type01:first-child{margin-right:0; margin-bottom:10px;}
	
	/* 내 증권번호 찾기 */
	.my-stock-number .popup-header {padding:18px 20px 10px 12px; position:relative;}
    .my-stock-number .popup-body .popup-body-inner {padding:0 12px !important}
    .my-stock-number .popup-body .popup-body-inner > p {font-size:12px; line-height:18px; padding-top:14px;}
    .my-stock-number .popup-body .check-box-wrap > p {font-size:12px; line-height:18px; padding:12px 0 10px;}
    .my-stock-number .popup-body .wire-service-wrap ul li {height:50px;}
    .my-stock-number .popup-body .wire-service-wrap ul li a {display:inline-block; width:100%; height:100%;}
    .my-stock-number .popup-body .wire-service-wrap ul li img {width:50px; height:50px;}
    .my-stock-number .popup-body .wire-service-wrap ul li:nth-child(n+4) img {width:66px}
    .my-stock-number .popup-body .check-box-wrap li {margin-bottom:10px;}
    .my-stock-number .popup-body .check-box-wrap li:last-child {margin-bottom:14px;}
    .my-stock-number .popup-body .input-checkbox input[type="checkbox"] + label::before {width:20px; height:20px; padding:0; background-size:cover}
    .my-stock-number .popup-body .check-box-wrap li label {padding-left:27px; font-size:10px; line-height:23px;}
    .my-stock-number .popup-body .check-box-wrap li button {width:64px; height:18px; border-radius:2px; font-size:10px; line-height:16px;}
    .my-stock-number .popup-body .check-box-wrap .check-all {line-height:28px;}
    .my-stock-number .popup-body .check-box-wrap .check-all label {font-size:10px;}
    .my-stock-number .popup-footer {padding:16px 20px !important;}
    .my-stock-number .popup-footer .btn-wrap .btn-type01 {width:100%; max-width:122px; min-width:auto; height:32px; line-height:30px; font-size:11px !important; font-weight:400;}
    
    .my-stock-number.detail h5 {padding:16px 0 10px;}

    .my-stock-number.next .popup-body .title {font-size:11px; line-height:17px; margin-top:10px; margin-bottom:7px;}
    .my-stock-number.next .popup-body input {font-size:11px; height:32px; padding:0 0 0 7px}
    .my-stock-number.next .popup-body .input-list > li {padding-bottom:12px;}
    .my-stock-number.next .popup-body .input-phone-box .select-box {width:50px; height:32px; font-size:11px; padding:0 0 0 7px;}
    .my-stock-number.next .popup-body .input-phone-box input {max-width:120px}
    .my-stock-number.next .popup-body .input-phone-wrap .btn-type01, .my-stock-number.next .popup-body li .certi-input-wrap > a {max-width:54px; line-height:30px; height:32px; font-size:11px !important; padding:0; text-align:center}
    .my-stock-number.next .popup-body li .certi-input-wrap + p {font-size:11px; padding:6px 0 0 0}
    .my-stock-number.next .popup-body li .certi-input-wrap .timer {font-size:11px; right:115px;}

    .my-stock-number.result .popup-body {padding:0 12px;}
    .my-stock-number.result .popup-body > p {display:inline-block; margin:14px 0; font-size:12px; font-weight:500; line-height:20px; letter-spacing:-0.05em}
    .my-stock-number.result .popup-body > p span {font-size:12px; line-height:20px;}
    .my-stock-number.result .popup-body .stock-num-list li {min-height:72px;}
    .my-stock-number.result .popup-body .stock-num-list li .title, .my-stock-number.result .popup-body .stock-num-list li .stock-num , .my-stock-number.result .popup-body .stock-num-list li .stock-num a {font-size:10px;}

    /* 503 에러페이지 */
	.page503 h5 {font-size:24px} 
    .page503 p {font-size:12px}
    .page503 img {width:60px}
}
@media screen and (max-width:380px) {
    .select-box-type-calendar > a .arr {width:26px; background-size:100%; margin:0 4px 0 7px}
    .calendar .calendar-table {width:90%; margin:0 auto}
    .reserve-info-wrap .term-box .text-type-alert {font-size:14px}
    .guide .flex-box .left ul li span.gray, .guide .flex-box .left ul li span.blue {white-space:normal}
	.guide .flex-box .left ul li span.blue br {display:none}
	.table-type03.reserve-info table th {font-size:13px}
    .table-type03 table td, .table-type03 table td a, .table-type03 table td strong {font-size:11px !important; padding-right:5px; word-break:keep-all}
	.banner-wrap img.d-mb {transform:translateX(-50%) scale(0.9)}
}
@media screen and (max-width:340px) {

	.mb-tab-type04 {font-size:14px}
	.input-checkbox {align-items:flex-end; flex-direction:column;}
	.main-wrap .reserve-area .info-wrap .info-box .list-02 li span, .tab-type04 li a  {font-size:13px}
	.reserve .tou-box  .checkbox-wrap {padding-right:10px;}
	.reserve .tou-box .input-checkbox  {flex-direction:row;} 
	.reserve .tou-box .checkbox input {left:-25px; padding:0}
	.reserve .tou-box .checkbox label {margin:0;}
	.reserve .tou-box .checkbox:last-child {margin-left:40px;}
	.banner-wrap img.d-mb {transform:translateX(-50%) scale(0.8)}
}
/* 테이블 반응형 */
@media screen and (max-width:697px) {
    .table-icon-wrap {opacity:1}
    .no-scroll .table-icon-wrap  {opacity:0}
    .table-type01 {overflow:auto}
    .table-type01 th, .table-type01 td, .table-type01 td a {padding:4px 2px; font-size:12px !important; line-height:24px;}
    .table-type01 td .red,.table-type01 td .small {font-size:12px !important}
}
/* 엣지 */
@supports (-ms-ime-align:auto) {
    .map-wrap .map-inner .map-info-box .map-info-body {border-bottom:solid 1px #fff}
    .map-wrap .map-inner .map-info-box div:nth-child(2).map-info-body {border-top: solid 1px #fff}
}
/* 익스 */
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .con-wrap.reserve.rnb-page .tab-area {left:-1px}
    .map-wrap .map-inner .map-info-box .map-info-body {border-bottom:solid 1px #fff}
    .calendar .calendar-header > a {flex:1}
    .main-wrap .reserve-area {margin-top:26px}
    .guide .con-box.bg-type .video-wrap .main-btn {display:none}
    .map-wrap .map-inner .map-info-box div:nth-child(2).map-info-body {border-top: solid 1px #fff}
    .map-wrap .map-inner div.map-point-box {border-bottom:solid 1px #0066b3}
    :focus {outline:0px}
     a:focus,.main.swiper-button-next:focus, .main.swiper-button-prev:focus,select:focus,input:focus {outline:solid 2px #ffb81c}
}
@media print {
	.btn-type01 {display:none}
}