@charset "utf-8";

/**
 * @File Name : lib2.cruise.css
 * @Description : 유람선예약
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2025.04.22 | 김효진 | 최초 등록
 * </pre>
 * @author 디자인팀 김효진
 * @since 2025.04.22
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */


[lang|='ko'], [lang|='ko']>* {font-family:'S-CoreDream', sans-serif;}

/* 모달팝업 공통 */
html.modal1 #head {z-index:0}
[id*=modal1].modal1 {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9999;display:none;}
[id*=modal1].modal1.on {display:block;}
[id*=modal1].modal1 .wrap1 {position:relative;background:#fff;margin:auto;}

/* 유람선 예약 */
.lib2booking1 {max-width:1500px;margin:auto;}
.lib2booking1 .calendar1 .hg1 {background:#eb4050;text-align:center;color:#fff;border-radius:20px 20px 0 0;padding:26px 0}
.lib2booking1 .calendar1 .hg1 .h1 {display:inline-block;vertical-align:top;font-size:24px;font-weight:700;line-height:1.1;margin:0 7px;}
.lib2booking1 .calendar1 .hg1 .b1 {position:relative;display:inline-block;vertical-align:top;width:30px;height:30px;margin-top:-2px;}
.lib2booking1 .calendar1 .hg1 .b1:before {position:absolute;top:50%;left:50%;content:"";display:block;width:15px;height:15px;border:3px solid #fff;box-sizing:border-box;transform:rotate(45deg);margin:-7.5px;}
.lib2booking1 .calendar1 .hg1 .b1.prev:before {border-top:0;border-right:0}
.lib2booking1 .calendar1 .hg1 .b1.next:before {border-bottom:0;border-left:0}
.lib2booking1 .calendar1 .wrap1 {border:1px solid #e0e0e0;border-top:0;border-radius:0 0 20px 20px;padding:30px 0 0}
.lib2booking1 .calendar1 .wrap1 table {width:calc(100% - 80px);border:0;font-size:18px;font-weight:500;margin:0 40px 50px}
.lib2booking1 .calendar1 .wrap1 table th, .lib2booking1 .calendar1 .wrap1 table td {border:0;height:60px;text-align:center;box-sizing:border-box;color:#000;font-weight:500;padding:0}
.lib2booking1 .calendar1 .wrap1 table td a {position:relative;display:block;width:60px;height:100%;color:#000;line-height:60px;margin:auto;}
.lib2booking1 .calendar1 .wrap1 table td a[aria-disabled=false] {color:#b7b7b7;cursor:no-drop}
.lib2booking1 .calendar1 .wrap1 table td a .num {display:block;color:inherit;height:100%;line-height:inherit}
.lib2booking1 .calendar1 .wrap1 table td a[data-status] .num:after {position:absolute;bottom:9px;left:50%;margin-left:-3px;content:"";display:block;}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=비수기] .num:after {width:7px;height:7px;background:#20bf62;}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=성수기] .num:after {border-width:8px 4.5px;border-color:transparent transparent #0471e9 transparent;border-style:solid;margin-left:-3px}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=예매마감] .num:after {bottom:9px;width:10px;height:4px;background:#b7b7b7;border-radius:9999px;}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=주말공휴일] .num:after {width:7px;height:7px;background:#eb4050;border-radius:100%;}
.lib2booking1 .calendar1 .wrap1 table td.today a:after {position:absolute;top:50%;left:50%;content:"";display:block;width:60px;height:60px;border:2px dashed #eb4050;border-radius:100%;box-sizing:border-box;margin:-25px -30px;}
.lib2booking1 .calendar1 .wrap1 table td a.on {color:#fff;}
.lib2booking1 .calendar1 .wrap1 table td a.on:after {position:absolute;top:50%;left:50%;content:"";display:block;width:60px;height:60px;background:#eb4050;border-radius:100%;box-sizing:border-box;margin:-25px -30px;z-index:-1}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=비수기].on .num:after {width:7px;height:7px;background:#fff;}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=성수기].on .num:after {border-width:8px 4.5px;border-color:transparent transparent #fff transparent;border-style:solid;margin-left:-3px}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=예매마감].on .num:after {bottom:9px;width:10px;height:4px;background:#fff;border-radius:9999px;}
.lib2booking1 .calendar1 .wrap1 table td a[data-status=주말공휴일].on .num:after {width:7px;height:7px;background:#fff;border-radius:100%;}
.lib2booking1 .calendar1 .wrap1 table th:first-child {color:#eb4050}
.lib2booking1 .calendar1 .wrap1 table td:first-child {color:#eb4050}
.lib2booking1 .calendar1 .wrap1 .legend {border-top:1px solid #e0e0e0;text-align:center;padding:23px 0 20px}
.lib2booking1 .calendar1 .wrap1 .legend, .lib2booking1 .calendar1 .wrap1 .legend dd {margin:0;}
.lib2booking1 .calendar1 .wrap1 .legend dd ul {list-style:none;margin:0;padding:0}
.lib2booking1 .calendar1 .wrap1 .legend dd li {position:relative;display:inline-block;vertical-align:top;font-size:15px;color:#000;font-weight:400;margin:0 16px;padding-left:17px}
.lib2booking1 .calendar1 .wrap1 .legend dd li:before {position:absolute;top:50%;left:0;content:"";display:block;}
.lib2booking1 .calendar1 .wrap1 .legend dd li.n1:before {width:7px;height:7px;background:#006a5a;margin-top:-3px;}
.lib2booking1 .calendar1 .wrap1 .legend dd li.n2:before {width:7px;height:7px;background:#eb4050;margin-top:-3px;border-radius:100%}
.lib2booking1 .calendar1 .wrap1 .legend dd li.n3:before {border-width:8px 4.5px;border-color:transparent transparent #0471e9 transparent;border-style:solid;margin-top:-12px;}
.lib2booking1 .calendar1 .wrap1 .legend dd li.n4:before {width:10px;height:4px;background:#b7b7b7;margin-top:-2px;border-radius:9999px}
/* .lib2booking1 [class*=booking1step] {display:none} */
.lib2booking1 [class*=booking1step] .h1 {font-size:28px;color:#000;font-weight:700;line-height:1.1;margin:60px 0 30px 10px;}
.lib2booking1 .booking1step2 .lst {margin:0;padding:0;list-style:none;}
.lib2booking1 .booking1step2 .lst:after {content:"";display:block;clear:both;}
.lib2booking1 .booking1step2 .lst li {position:relative;float:left;width:calc(50% - 10px);margin-left:20px;margin-bottom:20px;border:1px solid #e0e0e0;border-radius:20px;padding:25px 30px;box-sizing:border-box;}
.lib2booking1 .booking1step2 .lst li:nth-child(odd) {margin-left:0}
.lib2booking1 .booking1step2 .lst li .time {display:inline-block;vertical-align:top;font-size:22px;font-weight:800;line-height:1.1;color:#000}
.lib2booking1 .booking1step2 .lst li .type {display:inline-block;vertical-align:top;font-size:14px;font-weight:400;width:85px;height:30px;line-height:30px;background:#ecf0f5;border-radius:9999px;color:#000;text-align:center;margin:-2px 0 0 5px;}
.lib2booking1 .booking1step2 .lst li .course {display:block;font-weight:400;color:#000;line-height:1.1;margin-top:15px;}
.lib2booking1 .booking1step2 .lst li .seat {position:absolute;top:50%;right:30px;padding-right:34px;margin-top:-12px;}
.lib2booking1 .booking1step2 .lst li .seat input[type=radio] {position:absolute;top:0;right:0;-webkit-appearance:none;appearance:none;width:24px;height:24px;background:url(/share/img/lib2/cruise_sprite.png) no-repeat 0 -48px / 100px auto;margin:0}
.lib2booking1 .booking1step2 .lst li .seat label {display:block;color:#000;font-weight:400;line-height:24px}
.lib2booking1 .booking1step2 .lst li .seat input[type=radio]:checked {background-position:-26px -48px;}
/* 색상 */
.lib2booking1 .booking1step2 .lst li[data-category=매물도] .time {color:#211b8f}
.lib2booking1 .booking1step2 .lst li[data-category=특별할인] .time {color:#e83f7f}
/* 예매종료 */
.lib2booking1 .booking1step2 .lst li[aria-disabled=false] {opacity:.4}
@media screen and (max-width:1259px){
	.lib2booking1 [class*=booking1step] .h1 {font-size:26px;margin-top:40px;margin-bottom:20px;}
	.lib2booking1 .booking1step2 .lst li {margin-left:15px;margin-bottom:15px;width:calc(50% - 7.5px);padding:20px 25px;}
	.lib2booking1 .booking1step2 .lst li .seat {right:20px;margin-top:-20px;}
}
@media screen and (max-width:999px){
	.lib2booking1 [class*=booking1step] .h1 {font-size:24px;}
	.lib2booking1 .booking1step2 .lst li {float:none;width:100%;margin-left:0;margin-bottom:10px;}
	.lib2booking1 .booking1step2 .lst li .seat {top:20px;margin-top:0}
}
@media screen and (max-width:899px){
	.lib2booking1 .calendar1 .hg1 {padding:20px 0 18px}
	.lib2booking1 .calendar1 .hg1 .h1 {font-size:22px;}
	.lib2booking1 .calendar1 .wrap1 {padding-top:20px;}
	.lib2booking1 .calendar1 .wrap1 table {margin:0 20px 30px;width:calc(100% - 40px);font-size:17px;}
	.lib2booking1 .calendar1 .wrap1 .legend {padding:20px 0 17px}
	.lib2booking1 .booking1step2 .lst li .course {margin-top:12px;}
}
@media screen and (max-width:699px){
	.lib2booking1 .calendar1 .hg1 {padding-bottom:15px}
	.lib2booking1 .calendar1 .hg1 .h1 {font-size:20px;font-weight:600;line-height:26px}
	.lib2booking1 .calendar1 .wrap1 {padding-top:10px;}
	.lib2booking1 .calendar1 .wrap1 table {font-size:16px;margin:0 10px 20px;width:calc(100% - 20px)}
	.lib2booking1 .calendar1 .wrap1 table th, .lib2booking1 .calendar1 .wrap1 table td {height:54px;}
	.lib2booking1 .calendar1 .wrap1 table td a {width:54px;line-height:54px;}
	.lib2booking1 .calendar1 .wrap1 table td.today a:after, .lib2booking1 .calendar1 .wrap1 table td a.on:after {width:54px;height:54px;margin:-23px -27px}
	.lib2booking1 .calendar1 .wrap1 .legend {padding:15px 0 12px}
	.lib2booking1 .calendar1 .wrap1 .legend dd li {margin:0 12px;}	
	.lib2booking1 [class*=booking1step] .h1 {font-size:22px;}
	.lib2booking1 .booking1step2 .lst li .type {margin-top:-4px}
}
@media screen and (max-width:599px){
	.lib2booking1 .calendar1 .wrap1 table {font-size:15px;margin:0 0 15px;width:100%;}
	.lib2booking1 .calendar1 .wrap1 table th, .lib2booking1 .calendar1 .wrap1 table td {height:48px;}
	.lib2booking1 .calendar1 .wrap1 table td a {width:48px;line-height:48px;}
	.lib2booking1 .calendar1 .wrap1 table td.today a:after, .lib2booking1 .calendar1 .wrap1 table td a.on:after {width:48px;height:48px;margin:-20px -24px}
	.lib2booking1 .calendar1 .wrap1 table td a[data-status] .num:after {bottom:4px}
	.lib2booking1 .calendar1 .wrap1 .legend dd li {margin:0 10px;}		
	.lib2booking1 .booking1step2 .lst li {font-size:15px;}
	.lib2booking1 .booking1step2 .lst li .seat {padding-right:30px;}
}
@media screen and (max-width:449px){
	.lib2booking1 .calendar1 .wrap1 .legend dd li {font-size:14px;margin:0 5px;padding-left:14px}
}
@media screen and (max-width:399px){
	.lib2booking1 .calendar1 .hg1 .h1 {font-size:18px;}
	.lib2booking1 .calendar1 .wrap1 table {font-size:14px;margin:0 0 10px}
	.lib2booking1 .calendar1 .wrap1 table th, .lib2booking1 .calendar1 .wrap1 table td {height:42px;}
	.lib2booking1 .calendar1 .wrap1 table td a {width:42px;line-height:42px;}
	.lib2booking1 .calendar1 .wrap1 table td.today a:after, .lib2booking1 .calendar1 .wrap1 table td a.on:after {width:42px;height:42px;margin:-18px -21px}
	.lib2booking1 .calendar1 .wrap1 .legend dd li {font-size:13px;margin:0 3px}
	.lib2booking1 .booking1step2 .lst li {padding:15px;font-size:14px;}
	.lib2booking1 .booking1step2 .lst li .time {font-size:21px}
	.lib2booking1 .booking1step2 .lst li .seat {top:15px;right:10px;padding-right:27px}	
}

/* 예약확인 모달창 */
#modal1cruise .wrap1 {max-width:660px;border-radius:20px;box-sizing:border-box;margin-top:15vh;padding:60px 60px 65px;text-align:center;}
#modal1cruise .wrap1 .hg1 {font-size:24px;line-height:30px;font-weight:600;color:#000;}
#modal1cruise .wrap1 .hg1 .h1 {display:block;line-height:1.1;margin-bottom:14px;}
#modal1cruise .wrap1 .hg1 .t1 {margin:0;word-break:keep-all}
#modal1cruise .wrap1 .tg1 .t2 {line-height:24px;color:#000;font-weight:400;margin:30px 0 40px}
#modal1cruise .wrap1 .tg1 .t2 span {display:block;}
#modal1cruise .wrap1 .b1.close {display:block;width:120px;height:56px;line-height:56px;color:#fff;font-weight:600;text-align:center;background:#eb4050;border-radius:9999px;margin:auto;}
@media screen and (max-width:1259px){
	#modal1cruise .wrap1 {margin-top:0}
}
@media screen and (max-width:699px){
	#modal1cruise .wrap1 {padding:45px 30px;}
	#modal1cruise .wrap1 .hg1 {font-size:22px}
	#modal1cruise .wrap1 .tg1 .t2 {margin:15px 0;font-size:15px;line-height:22px;}
	#modal1cruise .wrap1 .b1.close {line-height:54px;height:54px;}
}
@media screen and (max-width:599px){
	#modal1cruise .wrap1 {padding:40px 20px 30px;}
	#modal1cruise .wrap1 .hg1 {font-size:20px;line-height:26px;}
	#modal1cruise .wrap1 .b1.close {width:110px;height:50px;line-height:50px;font-size:15px;}
}
@media screen and (max-width:499px){
	#modal1cruise .wrap1 .tg1 .t2 {word-break:keep-all}
	#modal1cruise .wrap1 .tg1 .t2 span {display:inline}
}
@media screen and (max-width:399px){
	#modal1cruise .wrap1 {padding:30px 15px 20px}
	#modal1cruise .wrap1 .hg1 {font-size:18px;line-height:22px;}
	#modal1cruise .wrap1 .hg1 .h1 {margin-bottom:10px}
	#modal1cruise .wrap1 .tg1 .t2 {font-size:14px;line-height:20px;}
	#modal1cruise .wrap1 .b1.close {width:100px;height:40px;line-height:40px;font-size:15px;}
}

/* 인원선택 */
.lib2booking1 .booking1step3 .hg1 {margin:30px 0 20px 10px;}
.lib2booking1 .booking1step3 .hg1 .h1 {margin:0}
.lib2booking1 .booking1step3 .hg1 .t1 {margin:10px 0 0;color:#000;font-weight:400;}
.lib2booking1 .booking1step3 .lst {margin:0;padding:0;list-style:none;}
.lib2booking1 .booking1step3 .lst:after {content:"";display:block;clear:both;}
.lib2booking1 .booking1step3 .lst li {position:relative;float:left;width:calc(50% - 10px);margin-left:20px;margin-bottom:20px;border:1px solid #e0e0e0;border-radius:20px;padding:28px 20px 22px;box-sizing:border-box;}
.lib2booking1 .booking1step3 .lst li:nth-child(odd) {margin-left:0}
.lib2booking1 .booking1step3 .lst li .h2 {display:inline-block;vertical-align:top;font-size:18px;font-weight:700;color:#000;line-height:1.1;margin-right:300px}
.lib2booking1 .booking1step3 .lst li .h2 em.em1 {font-size:83.33%;color:#eb4050;font-weight:400;margin-left:8px;}
.lib2booking1 .booking1step3 .lst li .price {position:absolute;top:28px;right:160px;font-size:18px;color:#000;font-weight:700;line-height:1.1;text-align:right;}
.lib2booking1 .booking1step3 .lst li .price del {display:inline-block;vertical-align:middle;font-size:88.888%;color:#b7b7b7;font-weight:500;margin:-3px 0 0 15px}
.lib2booking1 .booking1step3 .lst li .btn {position:absolute;top:50%;right:20px;background:#f5f7fa;border-radius:25px;padding:16px 20px;height:50px;box-sizing:border-box;margin-top:-25px;}
.lib2booking1 .booking1step3 .lst li .btn .b1 {display:inline-block;vertical-align:top;width:20px;height:20px;background:url(/share/img/lib2/cruise_sprite.png) no-repeat;background-size:100px auto;border:0;margin:0;padding:0;}
.lib2booking1 .booking1step3 .lst li .btn .b1.minus {background-position:-66px -26px}
.lib2booking1 .booking1step3 .lst li .btn .b1.plus {background-position:-66px -48px}
.lib2booking1 .booking1step3 .lst li .btn .num {display:inline-block;vertical-align:top;line-height:20px;width:36px;text-align:center;font-weight:700;color:#000;}
.lib2booking1 .booking1step3 .infomenu1.btns {text-align:center;padding-top:45px;padding-bottom:50px}
.lib2booking1 .booking1step3 .btns .button {width:150px;height:50px;line-height:50px;color:#fff;font-weight:500;padding:0;border:0}
.lib2booking1 .booking1step3 .btns .button.submit {background-color:#22274c}
@media screen and (max-width:1359px){
	.lib2booking1 .booking1step3 .lst li .h2 em.em1 {display:block;margin:5px 0 0}
	.lib2booking1 .booking1step3 .lst li .price {top:37px;}
	.lib2booking1 .booking1step3 .lst li .price del {margin-left:10px}
}
@media screen and (max-width:1259px){
	.lib2booking1 .booking1step3 .lst li {margin-left:15px;margin-bottom:15px;width:calc(50% - 7.5px);padding:24px 17px 18px}
	.lib2booking1 .booking1step3 .lst li .h2 {margin-right:260px}
	.lib2booking1 .booking1step3 .lst li .price {top:32px;right:150px}
	.lib2booking1 .booking1step3 .lst li .btn {right:15px}
}
@media screen and (max-width:1099px){
	.lib2booking1 .booking1step3 .lst li {float:none;width:100%;margin-left:0;margin-bottom:10px;}	
}
@media screen and (max-width:999px){
	.lib2booking1 .booking1step3 .hg1 .t1 {font-size:15px;margin:6px 0 0}
	.lib2booking1 .booking1step3 .infomenu1.btns {padding-top:35px;padding-bottom:35px}
}
@media screen and (max-width:599px){
	.lib2booking1 .booking1step3 .hg1 {margin-bottom:15px}
	.lib2booking1 .booking1step3 .hg1 .t1 {font-size:14px;}
	.lib2booking1 .booking1step3 .lst li .h2, .lib2booking1 .booking1step3 .lst li .price {font-size:17px;}
	.lib2booking1 .booking1step3 .lst li .h2 {margin-right:0}
	.lib2booking1 .booking1step3 .lst li .h2 em.em1 {display:inline-block;margin:0 0 0 5px}
	.lib2booking1 .booking1step3 .lst li .price {position:relative;top:auto;right:auto;display:block;text-align:left;}
	.lib2booking1 .booking1step3 .lst li .price del {margin-left:5px}
	.lib2booking1 .booking1step3 .lst li .btn {height:45px;margin-top:-22.5px;padding:12px}
	.lib2booking1 .booking1step3 .infomenu1.btns {padding-top:25px;padding-bottom:25px}
	.lib2booking1 .booking1step3 .btns .button.submit {margin:0;width:120px;height:45px;line-height:45px;font-size:15px;}
}
@media screen and (max-width:499px){
	.lib2booking1 .booking1step3 .lst li .h2 em.em1 {display:block;margin:5px 0}
}
@media screen and (max-width:399px){
	.lib2booking1 .booking1step3 .lst li {padding:20px 15px 18px;text-align:center;}
	.lib2booking1 .booking1step3 .lst li .h2, .lib2booking1 .booking1step3 .lst li .price {font-size:16px;}
	.lib2booking1 .booking1step3 .lst li .price {margin-top:5px;text-align:center}
	.lib2booking1 .booking1step3 .lst li .btn {position:relative;top:auto;right:auto;display:block;width:150px;height:40px;margin:10px auto 0;padding:10px;box-sizing:border-box;}
	.lib2booking1 .booking1step3 .lst li .btn .num {font-size:15px;}
	.lib2booking1 .booking1step3 .btns .button.submit {width:110px;font-size:14px;}
}


/* 페이지이동 안내문구 모달창 */
#msg1modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9999;display:none}
#msg1modal .wrap1 {position:relative;max-width:860px;height:610px;background:#fff;border-radius:30px;margin:10vh auto 0;text-align:center;padding:80px 40px 70px;box-sizing:border-box;}
#msg1modal .wrap1 .hg1:before {content:"";display:block;background-repeat:no-repeat;background-position:0 0;background-size:cover;margin:auto;}
#msg1modal .wrap1 .hg1 .t1 {font-size:30px;color:#000;font-weight:800;margin:20px 0}
#msg1modal .wrap1 .hg1 .t1 span {color:#eb4050}
#msg1modal .wrap1 .btns .b1 {display:inline-block;vertical-align:top;padding:0 30px;font-weight:600;color:#fff;line-height:56px;border-radius:9999px;margin:0 5px}
#msg1modal .wrap1 .btns .b1.count {background:#eb4050;}
#msg1modal .wrap1 .btns .b1.count em {color:#fff}
#msg1modal .wrap1 .btns .b1.count button {display:none;width:28px;height:28px;text-indent:-9999px;background:url(/share/img/lib2/cruise_sprite.png) no-repeat;background-size:100px auto;border:1px solid #fff;border-radius:5px;margin:-4px 0 0 5px;box-sizing:border-box}
#msg1modal .wrap1 .btns .b1.count button.stop {background-position:-1px -75px}
#msg1modal .wrap1 .btns .b1.count button.play {background-position:-31px -75px}
#msg1modal .wrap1 .btns .b1.count button.on {display:inline-block;}
#msg1modal .wrap1 .btns .b1.move {background:#000;}
#msg1modal .wrap1 .info1box {background:#f5f7fa;border-radius:30px;padding:25px 30px;margin-top:30px;}
#msg1modal .wrap1 .info1box ul {margin:0;color:#000;font-weight:400;text-align:left;padding:0;list-style:none;}
#msg1modal .wrap1 .info1box ul li {position:relative;padding:0 0 0 16px;margin:.333em 0}
#msg1modal .wrap1 .info1box ul li:before {position:absolute;content:"";display:block;top:11px;left:0;width:5px;height:5px;background:#333;border-radius:50%}
#msg1modal .wrap1 .sinfo1 {position:relative;font-weight:600;color:#000;padding-left:29px;text-align:left;margin-left:30px}
#msg1modal .wrap1 .sinfo1:before {position:absolute;top:3px;left:0;content:"";display:block;width:22px;height:22px;background:url(/share/img/lib2/cruise_sprite.png) no-repeat 0 0 / 100px auto;}
#msg1modal .wrap1 .b1.close {position:absolute;top:30px;right:30px;width:29px;height:29px;background:url(/share/img/lib2/cruise_sprite.png) no-repeat -24px 0 / 100px auto;text-indent:-9999px;}
/* 페이지이동 안내문구 모달창 로고 */
#msg1modal.jsd .wrap1 .hg1:before {width:241px;height:62px;background-image:url(/share/img/lib2/logo_jsd@2x.png);margin-bottom:30px;}
@media screen and (max-width:899px){
	#msg1modal .wrap1 {margin-left:16px;margin-right:16px;max-width:calc(100% - 32px);padding:60px 30px 50px;}
}
@media screen and (max-width:768px){
	#msg1modal.jsd .wrap1 .hg1:before {width:193px;height:50px;margin-bottom:20px;}
	#msg1modal .wrap1 .hg1 .t1 {font-size:26px;}
	#msg1modal .wrap1 .btns .b1 {padding:0 20px;}
	#msg1modal .wrap1 .info1box {font-size:15px}
	#msg1modal .wrap1 .sinfo1 {margin-left:25px;}
}
@media screen and (max-width:649px){
	#msg1modal .wrap1 {padding:50px 25px 30px;height:auto;margin-top:20px;}
	#msg1modal.jsd .wrap1 .hg1:before {width:169px;height:43px;margin-bottom:15px;}
	#msg1modal .wrap1 .hg1 .t1 {font-size:24px;margin:15px 0}
	#msg1modal .wrap1 .btns .b1 {font-size:15px;line-height:52px;margin:0 3px;}
	#msg1modal .wrap1 .info1box {margin-top:20px;padding:20px 25px;font-size:14px;}
	#msg1modal .wrap1 .info1box ul li {padding-left:13px}
	#msg1modal .wrap1 .info1box ul li:before {top:9px}
	#msg1modal .wrap1 .sinfo1 {margin:10px 0 10px 20px;font-size:15px;line-height:20px;}
	#msg1modal .wrap1 .sinfo1:before {top:-1px}
}
@media screen and (max-width:499px){
	#msg1modal .wrap1 {padding:35px 20px 15px;}
	#msg1modal.jsd .wrap1 .hg1:before {width:121px;height:31px;margin-bottom:0}
	#msg1modal .wrap1 .hg1 .t1 {font-size:22px;line-height:30px;margin:10px 0 15px;word-break:keep-all}
	#msg1modal .wrap1 .btns .b1 {line-height:44px;margin:0 1px;font-size:14px;}
	#msg1modal .wrap1 .info1box {padding:15px 20px;border-radius:24px;}
	#msg1modal .wrap1 .sinfo1 {font-size:14px;margin-left:0}
}
@media screen and (max-width:399px){
	#msg1modal .wrap1 {margin-left:0;margin-right:0;max-width:100%;}
	#msg1modal .wrap1 .hg1 .t1 {font-size:20px;line-height:26px;}
	#msg1modal .wrap1 .btns .b1 {padding:0 15px;letter-spacing:-.075em;line-height:40px;margin:2px 1px}
	#msg1modal .wrap1 .info1box ul li {line-height:20px;}
	#msg1modal .wrap1 .info1box ul li:before {top:7px}
	#msg1modal .wrap1 .sinfo1 {letter-spacing:-.075em;}
	#msg1modal .wrap1 .btns .b1.count button {width:22px;height:22px;background-size:80px auto;}
	#msg1modal .wrap1 .btns .b1.count button.stop {background-position:-1px -60px}
	#msg1modal .wrap1 .btns .b1.count button.play {background-position:-25px -61px}
}
@media screen and (max-width:329px){
	#msg1modal .wrap1 {margin-top:10px;padding-top:30px;padding-bottom:10px}
	#msg1modal .wrap1 .hg1 .t1 {font-size:18px;margin-bottom:10px;}
}