@charset "utf-8";



/* ======================================================
   sub 공통
=========================================================*/
.cont-top {width: 100%; height: 150px; font-size: 26px; font-weight: 700; line-height: 150px; color:#fff; text-align: center; }
.cont-top span{font-size: 26px; font-weight:400; color:#257fc3; }
.cont-top#cont-top01 {background: url("../images/sub/subtop01.png") no-repeat center center; backgoudn-size: auto 100%; }
.cont-top#cont-top02 {background: url("../images/sub/subtop02.png") no-repeat center center; backgoudn-size: auto 100%; }
.cont-top#cont-top03 {background: url("../images/sub/subtop03.png") no-repeat center center; backgoudn-size: auto 100%; }
.cont-top#cont-top04 {background: url("../images/sub/subtop04.png") no-repeat center center; backgoudn-size: auto 100%; }
.cont-top#cont-top05 {background: url("../images/sub/subtop05.png") no-repeat center center; backgoudn-size: auto 100%; }
.cont-top#cont-top06 {background: url("../images/sub/subtop06.png") no-repeat center center; backgoudn-size: auto 100%; }
.ssec-cont {padding: 40px 0; border-bottom: 1px solid #ccc;}
.ssec-cont:last-child {border-bottom: none;}
.ssec-cont .subtit {font-size: 30px; line-height: 100%; margin-bottom: 25px; color: #000;}
.ssec-cont .txt p {color: #000; font-size: 16px; line-height: 150%; word-break: keep-all; letter-spacing: -0.03em;}

.btn-t02 {border: 1px solid #19aae0; background: #fff; color: #19aae0;}
.btn-t03 {border: 1px solid #19aae0; background: #19aae0; color: #fff;}


@media only screen and (max-width:999px) {
	.ssec-cont .subtit {font-size: 24px; margin-bottom: 20px;}
	.ssec-cont .txt p {font-size: 18px;}
}
@media only screen and (max-width:768px) {
	.ssec-cont .subtit {font-size: 21px;}
	.ssec-cont .txt p {font-size: 15px;}
}



/* ======================================================
   sub01
=========================================================*/
.sub01-wrap {}
.sub01-wrap .div-cont {}

/* sub0101 */
.sub0101 {padding: 70px 0 0;}
.sub0101 ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.sub0101 li {width: 300px; margin-bottom: 90px;}
.sub0101 li:hover .img img {width: 110%; height: 110%;}
.sub0101 li .img {width: 100%; height: 0; padding-top: 75%; overflow: hidden; border: 1px solid #e8e8e8; box-sizing: border-box; position: relative;}
.sub0101 li .img img {width: 100%; height: 100%; object-fit: cover; transition: 0.4s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.sub0101 li .txt {margin-top: 15px;}
.sub0101 li .txt .tit {margin-bottom: 10px; font-size: 18px; color: #1572b9; line-height: 100%; letter-spacing: -0.03em;}
.sub0101 li .txt .desc {font-size: 14px; color: #666666; word-break: break-all; letter-spacing: -0.03em; display: inline-block; width: 100%; height: 65px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orident: vertical;}
.sub0101 li .btn {display: flex; justify-content: space-between; margin-top: 15px;}
.sub0101 li .btn .btn-t02 {display: inline-block; height: 40px; width: 140px; border-radius: 100px; line-height: 40px; text-align: center;}
.sub0101 li .btn .btn-t03 {display: inline-block; height: 40px; width: 140px; border-radius: 100px;}
.sub0101 li .btn .btn-t02 .arrow {display: inline-block; width: 8px; height: 8px; border-right: 1px solid #19aae0; border-bottom: 1px solid #19aae0; transform: rotate(-45deg); margin-left: 15px;}
.sub0101 li .btn .btn-t03 .arrow {display: inline-block; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); margin-left: 15px;}

/* sub0102 */
.sub0102 {}

/* sub0103 */
.sub0103 {}

/* sub0104 */
.sub0104 {}


@media only screen and (max-width:999px) {
	.sub01-wrap .div-cont {padding: 40px 20px;}
	.sub0101 li {width: 33%;}
	.sub0101 li:hover .img img {width: 100%; height: 100%;}
	.sub0101 li .btn .btn-t02 {width: 45%; height: 35px; line-height: 35px;}
	.sub0101 li .btn .btn-t03 {width: 45%; height: 35px; line-height: 35px;}
}
@media only screen and (max-width:768px) {
	.sub0101 li {width: 48%;}
}
@media only screen and (max-width:425px) {
	.sub0101 {}
	.sub0101 li {width: 100%;}
	.sub0101 li:last-child {margin-bottom: 0;}
}




/* ======================================================
   sub02
=========================================================*/
.sub02 .reservation { margin-top: 20px;
    width: 100%;
    border:none;
    border-collapse: collapse;
  }
.sub02 .reservation  th, td { text-align: center;
    border:none; padding: 12px 0;
  }

.sub02 .reservation th {  background: #d4e0f3; color: #1D2236;
  }
.sub02 .reservation td {  background: #fff; color: #333; border-bottom: 1px solid #ddd;
  }

.btnCancel { padding: 2px 6px; background: #fff; color: #1F54A6; border: 1px solid #1F54A6; border-radius: 5px;word-break:keep-all; }
.btnCancel:hover {background: #1F54A6; color: #fff; border: 1px solid #1F54A6; border-radius: 5px; }


/* ======================================================
   login
=========================================================*/
.login p {text-align: center; font-size: 1.2em; color: #000; padding: 10px 0 30px 0;}

.login ul { width:420px; max-width: 96%;  text-align: center; margin: 0 auto; border: 1px solid #ddd; padding: 35px 0 15px 0; border-radius: 6px; box-sizing: border-box;}
.login li {width: auto; margin: 0 auto; margin-bottom: 10px;}
.login li label {width: 70px; margin-bottom: 15px; display: inline-block; font-size: 1.2em; color: #111; text-align: left; }
.login li input {width: 230px; margin-bottom: 15px; display: inline-block; background: #e9f0fd; border: 1px solid  #d7e3fa; padding: 5px 10px; border-radius: 3px; font-size: 1.2em; color: #2f57a1;}


.BtnLogin { display: inline-block; background:#1771b5; border-radius: 3px; color:#fff; padding: 12px 20px; width:285px;text-align: center; font-size: 1.2em;}
.BtnLogin:hover { background: #003f6e;}

.BtnJoin {width:420px; max-width: 96%;   border-top: 1px solid #dfdfdf; padding:30px 0; margin: 0 auto; display: flex;}
.BtnJoin a {width:33.333%; padding: 8px 0; border-radius: 3px; }

.BtnJoin a:nth-child(1) {width:40%;text-align: center;color:#1771b5;border:1px solid #1771b5; background: #fff;  }
.BtnJoin a:nth-child(1):hover {background: #9dc7e7; color: #fff;}
.BtnJoin a:nth-child(2) {width:30%;text-align: right;color: #000; }
.BtnJoin a:nth-child(3) {width:30%;text-align: right;color: #000; padding-right: 5px; }