@charset "utf-8";




/* ======================================================
   .msec-visual
=========================================================*/
.msec-visual{position: relative; background: #e3eff8; height: 540px;}
.msec-visual:before {content: ""; display: block; background: #e3eff8; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -50vw;}
.visual-slide{position:relative; height: 500px; top: 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);}
.visual-slide .item {position:relative; display: flex; justify-content: space-between; align-items: center;  border-radius: 20px; overflow: hidden;}
.visual-slide .item:after {content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0;}
.visual-slide .item .txt {width: 310px; height: 500px; background: #248dc4; padding: 60px 0 60px 50px; box-sizing: border-box;}
.visual-slide .item .txt .btxt {color: #fff; font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.03em;}
.visual-slide .item .txt .more {display: inline-block; padding: 3px 30px 3px 20px; box-sizing: border-box; border: 1px solid #fff; border-radius: 30px; margin-top: 60px; color: #fff; position: relative; font-size: 16px; z-index: 1;}
.visual-slide .item .txt .more:after {content: ""; width: 8px; height: 8px; display: block; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); position: absolute; right: 12px; top: 50%; margin-top: -4px;}
.visual-slide .item .img {width: 690px; height:500px;}

.visual-slide .item .img.vis01{background:url("../images/main/mvisual01.png") no-repeat center center ;background-size:cover;}
.visual-slide .item .img.vis02{background:url("../images/main/mvisual02.png") no-repeat center center ;background-size:cover;}
.visual-slide .item .img.vis03{background:url("../images/main/mvisual03.png") no-repeat center center ;background-size:cover;}

.visual-slide .owl-dots {position: absolute; bottom: 70px; left: 50px;}
.visual-slide .owl-dots .owl-dot {width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); margin-right: 20px;}
.visual-slide .owl-dots .owl-dot.active {background: #fff;}

@media only screen and (max-width:999px) {
	.msec-visual{height: calc(50vw + 40px);}
	.visual-slide {height: 50vw;}
	.visual-slide .item .txt {padding: 6vw 0 6vw 5vw; width: 31vw; height: 50vw;}
	.visual-slide .item .txt .btxt {font-size: 2vw; line-height: 3vw;}
	.visual-slide .item .txt .more {padding: 0.3vw 3vw 0.3vw 2vw; font-size: 1.6vw; margin-top: 6vw;}
	.visual-slide .item .img {width: 69vw; height: 50vw;}
	.visual-slide .owl-dots {bottom: 7vw; left: 5vw;}
}

@media only screen and (max-width:680px) {
	.msec-visual{height: calc(75vh + 40px);}
	.visual-slide {height: 75vh;}
	.visual-slide .item {flex-direction: column-reverse;}
	.visual-slide .item .txt {padding: 5vw 0 6vw 5vw; width: 100%; height: 25vh;}
	.visual-slide .item .txt .btxt {font-size: 14px; line-height: 130%;}
	.visual-slide .item .txt .more {padding: 3px 30px 3px 20px; font-size: 14px; margin-top: 3vw;}
	.visual-slide .item .img {width: 100%; height: 50vh;}
	.visual-slide .owl-dots {bottom: 7vw; left: auto; right: 0;}
	.visual-slide .owl-dots .owl-dot {margin-right: 15px;}
	
}



/* ======================================================
   .msec 공통
=========================================================*/
.msec-cont section {padding: 50px 0; box-sizing: border-box; position: relative;}
.msec-title {margin-bottom: 30px; text-align: center; position: relative;}
.msec-title .tit {font-size: 24px; border-right: 3px solid #257fc3; border-left: 3px solid #257fc3; padding: 0 20px; box-sizing: border-box; display: inline-block; line-height: 100%; color: #000; letter-spacing: -0.03em;}
.msec-title a {position: absolute; right: 0; bottom: 0; color: #000; font-size: 14px; letter-spacing: -0.03em;}
.msec-cont section .cont {border: 1px solid #dfdfdf; padding: 40px 30px; box-sizing: border-box; border-radius: 20px; box-shadow: 0 3px 3px rgba(132 132 132 / 15%); background: #fff;}
.msec-cont section .cont .subtit {}

@media only screen and (max-width:768px) {
	.msec-title {padding-bottom: 25px;}
	.msec-title .tit {font-size: 21px;}
	.msec01 .cont li .txt .tit {font-size: 16px;}
	.msec01 .cont li .txt .desc {font-size: 13px;}
}
@media only screen and (max-width:425px) {
	.msec-cont section .cont {padding: 20px 15px;}
}



/* ======================================================
   .msec01
=========================================================*/
.msec01 {}
.msec01 .cont ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.msec01 .cont li {width: 300px; margin-bottom: 50px;}
.msec01 .cont li:hover .img img {width: 110%; height: 110%;}
.msec01 .cont li .img {width: 100%; height: 0; padding-top: 75%; overflow: hidden; border: 1px solid #e8e8e8; box-sizing: border-box; position: relative;}
.msec01 .cont li .img img {width: 100%; height: 100%; object-fit: cover; transition: 0.4s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.msec01 .cont li .txt {margin-top: 15px;}
.msec01 .cont li .txt .tit {margin-bottom: 10px; font-size: 18px; color: #1572b9; line-height: 100%; letter-spacing: -0.03em;}
.msec01 .cont 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;}

@media only screen and (max-width:999px) {
	.msec01 .cont li {width: 33%;}
	.msec01 .cont li:hover .img img {width: 100%; height: 100%;}
}
@media only screen and (max-width:768px) {
	.msec01 .cont li {width: 48%;}
}
@media only screen and (max-width:425px) {
	.msec01 .cont li {width: 100%;}
	.msec01 .cont li:last-child {margin-bottom: 0;}
}


/* ======================================================
   .msec02
=========================================================*/
.msec02 {background: #ebecfc;}
.msec02:before {content:""; display: block; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -50vw; background: #ebecfc; z-index: -1;}

.msec02.bgwhite {background: #fff;}
.msec02.bgwhite:before {background: #fff;}


.msec02 .cont {padding: 0 !important; display: flex;}
.msec02 .sel-wrap {padding: 25px; text-align: center; border-right: 1px solid #dfdfdf; width: 33%; box-sizing: border-box;}
.msec02 .sel-wrap:last-child {border-right: none;}
.msec02 .sel-wrap .subtit {font-size: 18px; line-height: 130%; color: #000; margin-bottom: 10px;}
.msec02 .sel-wrap .selectbox {margin-top: 55px; border: 1px solid #c9c9c9; box-sizing: border-box; width: 100%; height: 50px; position: relative;}
.msec02 .sel-wrap .selectbox select {position: absolute; left: 0; top: 0; width: 100%; height: 100%; outline: none; opacity: 0;}
.msec02 .sel-wrap .selectbox select option {font-size: 18px;}
.msec02 .sel-wrap .selectbox label {line-height: 50px; font-size: 18px; color: #000; padding: 0 40px 0 20px; width: 100%; height: 100%; display: block; box-sizing: border-box; text-align: left; background: url("../images/main/sel_bg.png") no-repeat 240px center; }

.msec02 .calendar-wrap {}
.msec02 .calendar-wrap .calendar-top {margin-bottom: 10px;}
.msec02 .calendar-wrap .calendar-top .prev {display: inline-block; width: 12px; height: 12px; border-left: 2px solid #c9c9c9; border-bottom: 2px solid #c9c9c9; transform: rotate(45deg); cursor: pointer;}
.msec02 .calendar-wrap .calendar-top .next {display: inline-block; width: 12px; height: 12px; border-right: 2px solid #c9c9c9; border-top: 2px solid #c9c9c9; transform: rotate(45deg); cursor: pointer;}
.msec02 .calendar-wrap .calendar-top .date {background: #f5f5f5; border: 1px solid #c9c9c9; box-sizing: border-box; padding: 4px 20px; border-radius: 20px; font-size: 14px; color: #000; display: inline-block; margin: 0 20px;}
.msec02 .calendar-wrap .calendar-top .date .cblue {color: #0086eb;}
.msec02 .calendar-wrap .calendar {width: 300px; margin: auto;}
.msec02 .calendar-wrap .calendar thead {}
.msec02 .calendar-wrap .calendar tbody {}
.msec02 .calendar-wrap .calendar th {}
.msec02 .calendar-wrap .calendar td {font-size: 12px; height: 40px; font-weight: 500;border: none; padding: 0;}
.msec02 .calendar-wrap .calendar td:first-child span {color: #cc0000;}
.msec02 .calendar-wrap .calendar td:last-child span {color: #0000CC;}
.msec02 .calendar-wrap .calendar td span {color: #000; display: inline-block; width: 100%; height: 100%; line-height: 40px; border: 1px solid transparent; box-sizing: border-box; cursor: pointer;}
.msec02 .calendar-wrap .calendar td span.deact {color: #cacaca; cursor: auto;}
.msec02 .calendar-wrap .calendar td span.sel {border: 1px solid #637dff; background: #bdc0f3; box-sizing: border-box; color: #fff; width: 80%; height: 80%; line-height: 30px; cursor: pointer;}

.msec02 .time-wrap {}
.msec02 .time-wrap .legend {}
.msec02 .time-wrap .legend div {margin-right: 5px;}
.msec02 .time-wrap .legend span {margin-right: 20px; color: #000; font-size: 14px; }
.msec02 .time-wrap .legend span:last-child {margin-right: 0px;}
.msec02 .time-wrap .legend span img { margin-right: 5px;}
.msec02 .time-wrap ul {display: flex; flex-wrap: wrap; margin-top: 20px;}
.msec02 .time-wrap li {width: 50%; text-align: center; margin-bottom: 10px;}
.msec02 .time-wrap li div {width:calc(100% - 20px); height:100%; line-height:100%; box-sizing: border-box; }
.msec02 .time-wrap .deact {border: 1px solid #d4d4d4; background: #f1f1f1; color: #a0a0a0; font-size: 14px; padding: 5px 6px; display: inline-block;}
.msec02 .time-wrap .act {border: 1px solid #637dff; background: #ffffff; color: #000; font-size: 14px; padding: 5px 6px; display: inline-block;}
.msec02 .time-wrap .select {border: 1px solid #7e77db; background: #7e77db; color: #fff; font-size: 14px; padding: 5px 6px; display: inline-block;}

.BtnReser-Active {width:calc(100% - 20px); margin: 0 auto; display: block; background: #5148c1; color:#fff; padding: 10px 10px; border-radius: 1px; margin-top: 10px;}
.BtnReser-disable {width:calc(100% - 20px); margin: 0 auto; display: block; background: #ddd; color:#fff; padding: 10px 10px; border-radius: 1px; margin-top: 10px;}


@media only screen and (max-width:860px) {
	.msec02 .sel-wrap .selectbox {width: 270px; margin: 55px auto 0;}
	.msec02 .cont {flex-direction: column;}
	.msec02 .sel-wrap {width: 100%; border-right: none; border-bottom: 1px solid #dfdfdf;}
	.msec02 .sel-wrap:last-child {border-bottom: none;}
	.msec02 .time-wrap li {width: 20%;}
}
@media only screen and (max-width:680px) {
	.msec02 .time-wrap li {width: 33%;}
	
	.BtnReser-Active {width:calc(100% - 7%);margin:0 0 0 3%;}
	.BtnReser-disable {width:calc(100% - 7%);margin:0 0 0 3%;}

}
@media only screen and (max-width:425px) {
	.msec02 .sel-wrap { padding: 25px 15px;}
	.msec02 .time-wrap li {width: 49%;}
	.msec02 .time-wrap ul { margin-left: 2%;}
	
	.BtnReser-Active {width:calc(100% - 11%);margin:0 0 0 5.5%;}
	.BtnReser-disable {width:calc(100% - 11%);margin:0 0 0 5.5%;}

	
	
}