@import url("/resource/css/basic.css");

/*-------------------------------------------------
Author :KLIC
Create date :2022. 07. 13. YJ,Kim
-------------------------------------------------*/

/**** layout ****/
#wrap{ max-width:1240px; margin:0 auto; }
#header{ display:flex; height:3.5rem; align-items:center; justify-content:space-between; padding:0 .75rem; border-radius:0 0 0 1rem; background:#fff;}
#header h1.logo{ max-width:calc(100% - 5.5rem); }
#header h1.logo img{ max-width:100%; height:auto;}
#header a.mainMore{ font-size:13px; line-height:1.75rem; padding:0 .5rem; border-radius:1rem; border:1px solid transparent;}
#container{ position:relative; padding:1rem .75rem 3rem;}
#container:before{ content:""; position:fixed; left:0; bottom:0; width:100%; height:5vh; z-index:1;
	background:rgb(255,255,255);
	background:-moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background:-webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.contents{ position:relative; z-index:0;}
.contents section{ display:none; }
.contents section.active{ display:block; }

/**** contents ****/
/* tab */
#tabs ul{ display:flex; justify-content:space-between; margin-bottom:1rem;}
#tabs li{ width:32%;}
#tabs li a{ display:block; line-height:2rem; text-align:center; border-radius:1.5rem; border:1px solid #c7c7e0; background:#fff;}
#tabs li.on a{ color:#fff; font-weight:600;}

/* 소식 */
.newsArea .tySelect{ margin-bottom:.25rem; text-align:right;}
.newsArea .tySelect a{ display:inline-block; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; font-size:1rem; border-radius:.3rem; color:#fff; background-color:#bfbfe1; background-position:center; background-repeat:no-repeat; vertical-align:top;}
.newsArea .tySelect a.view{ background-image:url('/resource/images/schl/intro/ico_newsView.png');}
.newsArea .lst{ padding:0 1rem 1rem; margin-bottom:1rem; border-radius:.5rem; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1);} 
.newsArea .lst .info{ display:flex; justify-content:space-between; font-size:.75rem; padding:.65rem 0; margin-bottom:.75rem; border-bottom:1px solid #c7c7df;}
.newsArea .lst .info em{ font-weight:700; letter-spacing:0;}
.newsArea .lst .info span{ color:#666; font-size:13px;}
.newsArea .lst dl{ position:relative; word-break:keep-all;}
.newsArea .lst dt{ line-height:1.2rem; max-height:2.4rem; font-weight:600; color:#000; overflow:hidden;}
.newsArea .lst dd p{ line-height:1.2rem; max-height:2.4rem; margin-top:.25rem; font-size:.75rem; color:#555; overflow:hidden;}
.newsArea .lst dd .img{ display:block; max-height:10rem; border-radius:.5rem; margin-top:.75rem; overflow:hidden; background:rgba(0,0,0,0.1); text-align:center; }
.newsArea .lst dd .img img{ max-width:100%; height:auto;}
/** 목록형 **/
.newsArea .listTy .lst.pt dl{ min-height:4.25rem; padding-left:5.5rem;}
.newsArea .listTy .lst.pt .img{ position:absolute; left:0; top:0; width:5rem; height:100%; margin-top:0;}

/* 식단 */
.mealArea .util{ display:flex; align-items:center; justify-content:space-between;}
.mealArea .util > p{ position:relative;}
.mealArea .util .date{ flex:3; margin:0 .5rem; line-height:2rem; font-weight:700; border-radius:1rem; text-align:center; background:#fff;}
.mealArea .util .date > a{ position:absolute; top:.25rem; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; font-size:.65rem; color:#fff; border-radius:50%; background:#6c6c8a;}
.mealArea .util .date > a.prev{ left:-.5rem;}
.mealArea .util .date > a.next{ right:-.5rem;}
.mealArea .util .date > a i{ font-weight:600;}
.mealArea .util .time{ flex:2; padding-left:.5rem;}
.mealArea .util .time > *{ width:calc(50% - .15rem); height:2rem; line-height:2rem; border-radius:.5rem; text-align:center; border:1px solid transparent;  float:left;}
.mealArea .util .time select{ border-color:#c7c7df;}
.mealArea .util .time button{ color:#fff; line-height:1rem; padding:0; margin-left:.3rem;}
.mealArea dl{ margin-top:1rem;}
.mealArea dt{ display:inline-block; min-width:7rem; text-align:center; padding:.45rem 1rem; color:#fff; border-radius:1rem 1rem 1rem 0;}
.mealArea dd{ margin-top:-1rem; padding:1.5rem 1.25rem .75rem; background:#fff; border-radius:1rem; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.mealArea dd.img{ text-align:center;}
.mealArea dd img{ max-width:100%; height:auto;}
.mealArea .btns{ text-align:right; margin-top:1rem;}
.mealArea .btns a{color:#fff; padding:.4rem .75rem; border-radius:.5rem; background:#6c6c8a;}
.mealArea .btns a:hover,
.mealArea .btns a:focus{ background:#3b3b57;}

/* 오시는길 */
.mapArea .inner{ border-radius:1rem; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1); overflow:hidden;}
.mapArea .inner .map{ position:relative; width:100%; height:498px; background:#f1f1f1; z-index:0;}
.mapArea .inner .map img {position:absolute; left:50%; top:0; margin-left:-420px; height:498px;}
.mapArea .inner dl{ position:relative; padding:1rem 1rem 1rem; word-break:keep-all;}
.mapArea .inner dt{ position:absolute; right:0; top:-1rem; font-weight:600; text-align:center; padding:.45rem 1rem; color:#fff; border-radius:1rem 0 0 1rem; z-index:1;}
.mapArea .inner li{ position:relative; padding-left:2.5rem; line-height:1.4rem; font-size:.75rem; min-height: 1.4rem;}
.mapArea .inner li span{ position:absolute; left:0; top:0; width:2rem; font-weight:600; color:#000;}
.mapArea .inner li a.call{ display:inline-block; width:1.25rem; height:1.25rem; line-height:1.25rem; text-align:center; border-radius:50%; margin-left:2px; vertical-align:middle;}

/* no data */
p.no_data{ padding:1rem 0; max-height:100% !important}

/* 색상타입 : 보라1 : colTy01 */
body.colTy01{background:#eff0ff;}
body.colTy01 #header a.mainMore,
body.colTy01 .newsArea .lst .info em,
body.colTy01 .mapArea .inner li a.call,
body.colTy01 .mealArea .util .time select{ color:#4c4cca;}
body.colTy01 #tabs li.on a,
body.colTy01 .mapArea .inner dt,
body.colTy01 .mealArea .util .time button,
body.colTy01 .newsArea .tySelect a.active{ background-color:#4c4cca;}
body.colTy01 #header a.mainMore,
body.colTy01 #tabs li.on a,
body.colTy01 .mealArea .util .time button{ border-color:#4c4cca;}
body.colTy01 .mealArea .util .date{ color:#2f2f80;}
body.colTy01 .mealArea dt{ background:#2f2f80;}
body.colTy01 .mapArea .inner li a.call{ background:#f1f1ff; }

/* 색상타입 : 보라2 : colTy02 */
body.colTy02{background:#faefff;}
body.colTy02 #header a.mainMore,
body.colTy02 .newsArea .lst .info em,
body.colTy02 .mapArea .inner li a.call,
body.colTy02 .mealArea .util .time select{ color:#9e4cca;}
body.colTy02 #tabs li.on a,
body.colTy02 .mapArea .inner dt,
body.colTy02 .mealArea .util .time button,
body.colTy02 .newsArea .tySelect a.active{ background-color:#9e4cca;}
body.colTy02 #header a.mainMore,
body.colTy02 #tabs li.on a,
body.colTy02 .mealArea .util .time button{ border-color:#9e4cca;}
body.colTy02 .mealArea .util .date{ color:#642088;}
body.colTy02 .mealArea dt{ background:#642088;}
body.colTy02 .mapArea .inner li a.call{ background:#faefff; }

/* 색상타입 : 주황 : colTy03 */
body.colTy03{background:#fff7ec;}
body.colTy03 #header a.mainMore,
body.colTy03 .newsArea .lst .info em,
body.colTy03 .mapArea .inner li a.call{ color:#f08300;}
body.colTy03 #tabs li.on a,
body.colTy03 .mapArea .inner dt,
body.colTy03 .mealArea .util .time button,
body.colTy03 .newsArea .tySelect a.active{ background-color:#f08300;}
body.colTy03 #header a.mainMore,
body.colTy03 #tabs li.on a,
body.colTy03 .mealArea .util .time button{ border-color:#f08300;}
body.colTy03 .mealArea .util .date,
body.colTy03 .mealArea .util .time select{ color:#b46200;}
body.colTy03 .mealArea dt{ background:#b46200;}
body.colTy03 .mapArea .inner li a.call{ background:#fff7ed; }

/* 색상타입 : 초록 : colTy04 */
body.colTy04{background:#f1ffef;}
body.colTy04 #header a.mainMore,
body.colTy04 .newsArea .lst .info em,
body.colTy04 .mapArea .inner li a.call,
body.colTy04 .mealArea .util .time select{ color:#45b035;}
body.colTy04 #tabs li.on a,
body.colTy04 .mapArea .inner dt,
body.colTy04 .mealArea .util .time button,
body.colTy04 .newsArea .tySelect a.active{ background-color:#45b035;}
body.colTy04 #header a.mainMore,
body.colTy04 #tabs li.on a,
body.colTy04 .mealArea .util .time button{ border-color:#45b035;}
body.colTy04 .mealArea .util .date{ color:#1f7a11;}
body.colTy04 .mealArea dt{ background:#1f7a11;}
body.colTy04 .mapArea .inner li a.call{ background:#f2fff0; }

/* 색상타입 : 청록 : colTy05 */
body.colTy05{background:#f2fff0;}
body.colTy05 #header a.mainMore,
body.colTy05 .newsArea .lst .info em,
body.colTy05 .mapArea .inner li a.call{ color:#22bca5;}
body.colTy05 #tabs li.on a,
body.colTy05 .mapArea .inner dt,
body.colTy05 .mealArea .util .time button,
body.colTy05 .newsArea .tySelect a.active{ background-color:#22bca5;}
body.colTy05 #header a.mainMore,
body.colTy05 #tabs li.on a,
body.colTy05 .mealArea .util .time button{ border-color:#22bca5;}
body.colTy05 .mealArea .util .date,
body.colTy05 .mealArea .util .time select{ color:#0e8572;}
body.colTy05 .mealArea dt{ background:#0e8572;}
body.colTy05 .mapArea .inner li a.call{ background:#ecfffd; }

@media screen and (max-width:480px){
	/* 오시는길 */
	.mapArea .inner .map{height:398px;}
	.mapArea .inner .map img {width:670px; height:398px; margin-left:-335px;}
}


@media screen and (max-width:340px){

	/* 식단 */
	.mealArea .util{ flex-wrap:wrap;}
	.mealArea .util .date,
	.mealArea .util .time{ flex:auto; width:100%;} 
	.mealArea .util .time{ margin-top:.5rem; padding:0;}
	.mealArea .util .time select{ width:calc(100% - 5rem);}
	.mealArea .util .time button{ width:4.7rem;}
}

@media screen and (max-width:320px){

	/* 오시는길 */
	.mapArea .inner li{ padding-left:0;}
	.mapArea .inner li span{ position:relative; left:auto; top:auto; display:block;}
	.mapArea .inner li + li{ margin-top:.4rem;}
}