@charset "utf-8";

/**************************************************
	Main CSS Document
	IEETU Web Standardization Team
	2020-08-24
**************************************************/

/**************************************************
	Common
**************************************************/
.slickwrap .slider .item{vertical-align:top;}
.slickwrap .slider a{display:block;}
#container{margin:0;}
#container > .inr{max-width:none; margin:0; padding:0;}
.cont_main .area_prog_srch .area_keyword .keywordzone:after,
.cont_main .area_prog_srch .area_srch .btn_srch:before,
.cont_main .area_prog_srch .area_srch .btn_srch_dtl:before,
.cont_main .area_prog_srch .area_srch .btn_srch_dtl:after,
.cont_main .area_prog_srch .ly_detail .area_btn .btn_srch2:before,
.cont_main .popupzone .nav .area_ctrl button,
.cont_main .popupzone .nav .area_ctrl button:after,
.cont_main .area_news .more span,
.cont_main .area_event .eventzone .nav .area_ctrl button:after,
.cont_main .area_glance .area_step .btn_lst:after,
.cont_main .area_glance .area_step .slt_dong .lst_dong li a:before,
.cont_main .area_glance .area_institute .title_wrap .nav button:after,
.cont_main .area_glance .area_institute .lst li .more,
.cont_main .banzone .nav button:after{display:inline-block; overflow:hidden; background:url(../images/main/sp_main.png) repeat 0 0; color:transparent !important; white-space:nowrap;}


/**************************************************
	Main
**************************************************/


/*공지사항*/
.pan_main {width:55%;}

.main_middle { max-width:1260px; float:left;}
.main_middle .m_notice { padding-top:49px; position:relative;}
.main_middle .m_notice h3 {position:absolute; left:0; top:0;}
.main_middle .m_notice h3.n2 {left:125px;}
.main_middle .m_notice h3 a {display:block; position:relative; font-size:23px; font-weight:normal; color:#888;}
.main_middle .m_notice h3 a.sel {color:#13675a; font-weight:bold; display:inline; }
.main_middle .m_notice h3 a.sel:after {content:''; display:none;  height:6px; background:#fff614; margin:-9px -3px 0;}
.main_middle .m_notice .panelWrap { position:relative; padding-top:23px;}
.main_middle .m_notice .panelWrap:before {content:''; display:block; width:100%; height:3px; background:#323778; background:linear-gradient(90deg, rgba(19,103,90,1) 30%, rgba(26,200,173,1) 100%); position:absolute; left:0; top:0;}
.main_middle .m_notice .panelWrap li {position:relative; height:28px; line-height:28px; margin-bottom:12px; padding:0 130px 0 12px;}
.main_middle .m_notice .panelWrap li:before {content:''; display:block; width:3px; height:3px; border-radius:3px; background:#ff6b6b; position:absolute; left:0; top:13px;}
.main_middle .m_notice .panelWrap li a {display:block;  overflow:hidden; color:#222; white-space: nowrap; text-overflow: ellipsis;}
.main_middle .m_notice .panelWrap li a:hover:after { content:''; display:block; height:4px; background:#fff; background: linear-gradient(90deg, rgba(255,246,20,1) 30%, rgba(255,255,255,1) 70%); margin-top:-9px; transition: 0.3s;}
.main_middle .m_notice .panelWrap li a .type {color:#004bb8; padding-right:7px;}
.main_middle .m_notice .panelWrap li .btn {position:absolute; right:0; top:0; font-size:14px; display:block; width:108px; height:28px; line-height:28px; color:#fff; background:#888; border-radius:50px; text-align:center;}
.main_middle .m_notice .panelWrap li .btn.red { background:#ee2e2e; animation:reveal-bg6 2s linear infinite;}
.main_middle .m_notice .panelWrap li .btn.blue { background:#004bb8;}
.main_middle .m_notice .panelWrap li .btn.black { background:#313131;}
@keyframes reveal-bg6{
	0%{ filter:brightness(1);-webkit-filter:brightness(1);}
	50% {filter:brightness(1.3);-webkit-filter:brightness(1.3);}
	100% {filter:brightness(1);-webkit-filter:brightness(1);}
}
.main_middle .m_notice .panelWrap li .date {position:absolute; right:0; top:0;}
.main_middle .m_notice .panelWrap li.gray:before {background:#aaa;}
.main_middle .m_notice .panelWrap li.gray a {color:#888;}
.main_middle .m_notice .panelWrap li.gray a .type {color:#888;}
//.main_middle .m_notice .panelWrap .more_btn {width:27px; height:27px; top:-15%; left:95%; color:transparent; overflow:hidden; transition: 0.3s;}
.main_middle .m_notice .panelWrap .more_btn:before {content:''; display:block; width:1px; height:11px; background:#555; position:absolute; left: 12px; top:7px; transition: 0.3s;}
.main_middle .m_notice .panelWrap .more_btn:after {content:''; display:block; width:11px; height:1px; background:#555; position:absolute; left: 7px; top:12px; transition: 0.3s;}
.main_middle .m_notice .panelWrap .more_btn:hover { border:1px solid #888; box-shadow:0 0 3px rgba(0,0,0,0.2);}
.main_middle .m_notice .panelWrap .more_btn:hover:before  { transform: rotate(180deg);  background:#333;}
.main_middle .m_notice .panelWrap .more_btn:hover:after { transform: rotate(-180deg); background:#333;}

/*비주얼*/
.cont_main {letter-spacing:-0.12em;}
.mainvisual {position:relative; margin-bottom:50px;}
.mainvisual .item1 {height:455px; background:url(../images/main/visual01.png) no-repeat center center/cover; text-indent:-999px;}
.mainvisual .item2 {height:455px; background:url(../images/main/visual02.png) no-repeat center center/cover; text-indent:-999px;}
.mainvisual .nav {position:absolute; left:45%; margin-left:-620px; bottom:100px; z-index:50; min-width:258px;}
.mainvisual .nav button {display:block; float:left; margin-right:12px;  width:36px; height:28px; overflow:hidden; color:transparent; }
.mainvisual .nav button.prev {width:30px; height:30px; background:url(../images/main/prev.png) no-repeat; }
.mainvisual .nav button.next {width:30px; height:30px; background:url(../images/main/next.png) no-repeat; }
.mainvisual .nav button.play {background-position:-100px top; width:42px; height:42px; display:none; margin-right:0; }
.mainvisual .nav button.pause {background-position:-72px top; width:42px; height:42px; display:none; margin-right:0; }
.mainvisual .nav button.active {display:block;}
.mainvisual .nav button.play { background:url(../images/main/play.png) no-repeat; margin-left:10px; margin-top:3px;}
.mainvisual .nav button.pause { background:url(../images/main/stop.png) no-repeat; margin-left:10px; margin-top:3px;}
.mainvisual .nav span {float:left; font-size:21px; letter-spacing:6px; margin-right:7px;}

/*퀵*/
.m_quick {margin-right:5%; width:40%;}
.m_quick .m_1 { margin : 0 5px;}
.m_cont {max-width:1260px; margin:0 auto;}
.main01 {float:right; width:calc(100% - 334px); margin-bottom:46px; }
.main01 .m_quick {overflow:hidden; margin:0 2% 36px 2%; float:left;}
.main01 .m_quick li {float:left; width:45%; margin:1% 1%;}
.main01 .m_quick li a {display:block; height:150px; border-radius:10px; background:#f6590c; position:relative; text-align:center; overflow:hidden; transition:0.6s cubic-bezier(0.65, 0.05, 0.36, 1);}
.main01 .m_quick li.n0 a {background:red;} /*모니터링단*/
.main01 .m_quick li.n2 a {background:#1ac8ad;}
.main01 .m_quick li.n3 a {background:#1ac8ad;}
.main01 .m_quick li.n4 a {background:#fac91d;}
.main01 .m_quick li a:before {content:''; display:block; position:absolute; left:0; right:0;  bottom:0; background:#ef351c; height:0; border-radius:100% 100% 0 0; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);}
.main01 .m_quick li.n0 a:before {background:#be0202;} /*모니터링단*/
.main01 .m_quick li.n2 a:before {background:#13675a;}
.main01 .m_quick li.n3 a:before {background:#13675a;}
.main01 .m_quick li.n4 a:before {background:#76c815;}
.main01 .m_quick li a:hover:before , .main01 .m_quick li a:focus:before {height:100%; border-radius:0px;}
/**/
.main01 .m_quick li a:after {content:''; display:block; height:120px; width:120px; background-size: cover; position:absolute; left:11%; bottom:5%; right:0; transition: 0.5s; }
.main01 .m_quick li.n1 a:after {background-image:url(../images/main/quick01.png) ; background-repeat:no-repeat; }
.main01 .m_quick li.n2 a:after {background-image:url(../images/main/quick02.png) ; background-repeat:no-repeat; }
.main01 .m_quick li.n3 a:after {background-image:url(../images/main/quick03.png) ; background-repeat:no-repeat;}
.main01 .m_quick li.n4 a:after {background-image:url(../images/main/quick04.png) ; background-repeat:no-repeat;}
.main01 .m_quick li a span {display:inline-block; position:relative; z-index:2; padding-top:15px; padding-left:15px; font-size:25px; color:#fff; letter-spacing: -0.09em; font-weight:800; transition: 0.3s;}
.main01 .m_quick li a span:after {content:''; padding-bottom: 10px; display:inline-block; width:25px; height:25px; /*background:url(../images/main/quick_bullet_w.png)*/ no-repeat; position:relative; top:2px; /*margin-left:-5px;*/ z-index:2;}
.main01 .m_quick li a:hover { background:#fff;}
.main01 .m_quick li a:hover:after , .main01 .m_quick li a:focus:after {transform: rotateY(180deg) translateY(7px) scale(0.9);}
.main01 .m_quick li a span {font-size:1.85rem;}
/*.main01 .m_quick li.n3 a span:after {background-image:url(../images/main/quick_bullet.png);}*/

/*공지사항*/
//.main01 .m_notice {position:relative; border-bottom:1px solid #dcdcdc;padding:10px 220px 0 186px; float:left; }
.main01 .m_notice h3 {position:absolute; left:10px; top:9px; font-size:20px; color:#323a3a;}
.main01 .m_notice .more_btn {top:-35px; left:95%; position:absolute; display:block; width:25px; height:25px; background:url(../images/main/more_btn.png) no-repeat; text-indent:-999px; overflow:hidden;}
.m_notice .tab02 .more_btn {top:-35px; left:95%; position:absolute; display:block; width:25px; height:25px; background:url(../images/main/more_btn.png) no-repeat; text-indent:-999px; overflow:hidden;}
.main01 .m_notice .nav {position:absolute; right:0; top:27px;}
.main01 .m_notice .nav button {float:left; display:block; width:32px; height:32px; background:url(../images/main/prevnext2.png) no-repeat; color:transparent; overflow:hidden; margin-left:4px;}
.main01 .m_notice .nav button.next {background-position:-32px top;}
.main01 .m_notice .nav button.play {background-position:-96px top; display:none;}
.main01 .m_notice .nav button.pause {background-position:-64px top; display:none;}
.main01 .m_notice .nav button.active {display:block;}
.main01 .m_notice .item {margin:4px 0;}
.main01 .m_notice .item a {display:block; position:relative; padding:0 80px 0 8px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.3s;}
.main01 .m_notice .item a:before {content:''; display:block; width:2px; height:2px; background:#888; border-radius:1px; position:absolute; left:0; top:9px;}
.main01 .m_notice .item a .date {position:absolute; right:0; top:0; color:#777;}
.main01 .m_notice .item a .new {position:left; top:0; color:#777; margin-right : 10px; }
.main01 .m_notice .item a:hover {color:#ff6a51; text-decoration:underline;}

/*정신건강정보*/
.main01 .m_info {position:relative; padding:27px 0 0 150px;}
.main01 .m_info h3 {font-size:20px; position:absolute; left:20px; top:32px; }
.main01 .m_info ul {overflow:hidden;}
.main01 .m_info ul li {float:left; width:22.66666%;}
.main01 .m_info ul li a {display:block;text-align:center; transition: 0.3s;  position:relative;}
.main01 .m_info ul li a:before {content:''; display:block; width:53px; height:47px; background:url(../images/main/ico01.png) no-repeat; margin:0 auto 8px; transition: 0.4s; position:relative; z-index:2;}
.main01 .m_info ul li a:after {content:''; display:block; width:0; height:0; border-radius:60px; background:#ffecd1; position:absolute; left:50%; top:25px; margin-left:0px; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);}
.main01 .m_info ul li a:hover:after , .main01 .m_info ul li a:focus:after {width:50px; height:50px; top:0px; margin-left:-25px; }
.main01 .m_info ul li.n2 a:before {background-image:url(../images/main/ico02.png);}
.main01 .m_info ul li.n3 a:before {background-image:url(../images/main/ico03.png);}
.main01 .m_info ul li.n4 a:before {background-image:url(../images/main/ico04.png);}
.main01 .m_info ul li.n5 a:before {background-image:url(../images/main/ico05.png);}
.main01 .m_info ul li.n6 a:before {background-image:url(../images/main/ico06.png);}
.main01 .m_info ul li a:hover {color:#ff6a51; text-decoration: underline; font-weight:bold;}
.main01 .m_info ul li a:hover:before ,.main01 .m_info ul li a:focus:before {transform: rotateY(180deg);}
.main01 .m_info .more_btn {position:absolute; left:10px; top:68px;  width:133px; height:35px; border-radius:50px; border:1px solid #d2d2d2; line-height:33px; text-align:center;}
.main01 .m_info .more_btn:after {content:'>'; display:inline-block; margin-left:6px; font-family:'dotum'; font-size:12px; position:relative; top:-1px;}


/*t상담안내*/
.main02 {float:left; width:290px;}
.main02 .m_tel { margin-bottom:35px; margin-top:3px; }
.main02 .m_tel h3 {font-size:22px; height:41px;}
.main02 .m_tel .box {border:1px solid #d5d5d5; height:350px; border-radius:10px; padding:15px 25px; position:relative;}
.main02 .m_tel .box:before {content:''; display:block; height:0px; background:#d5d5d5; position:absolute; left:25px; right:25px; top:73%;}
.main02 .m_tel .box strong {/*display:block;*/ font-size:16px; padding-bottom:6px;}
.main02 .m_tel .box span {height:33px; display:block; line-height:33px; position:relative; padding-left:42px; font-size:28px; color:#008aca; font-weight:bold; margin-bottom:34px;}
.main02 .m_tel .box span:before {content:''; display:block; width:33px; height:33px; background:url(../images/content/question_finish_img03.png) no-repeat; position:absolute; left:0; top:2px;}
.main02 .m_tel .box div:last-child span {color:#f4373d;}
.main02 .m_tel .box div:last-child span:before {background-image:url(../images/content/question_finish_img02.png);}
.main02 .m_tel .box a {display:block; line-height:45px; background:#bec1d6; border-radius:5px; text-align:center;}
.main02 .m_tel a:after {content:''; display:inline-block; width:20px; height:20px; background:url(../images/main/loc_cursor.png) no-repeat; margin-left:6px; position:relative; top:4px;}

/*찾아오시는길*/
.main02 .m_location { border:1px solid #d5d5d5; border-radius:10px; height:180px; padding:15px 25px; position:relative; }
/*.main02 .m_location:before {content:''; display:block; width:18px; height:25px; background:url(../images/main/loc_bg.png) no-repeat; position:absolute; right:40px; top:51px;}*/
.main02 .m_location h3 { font-size:22px; padding-bottom:10px;}
.main02 .m_location p {font-size:14px; line-height:1.3; margin-bottom:22px;}
.main02 .m_location a {display:block; line-height:45px; background:#1ac8ad; border-radius: 5px; text-align:center;}
/*.main02 .m_location a:after {content:''; display:inline-block; width:20px; height:20px; background:url(../images/main/loc_cursor.png) no-repeat; margin-left:6px; position:relative; top:4px;}*/




/* ~ 1259px */
@media screen and (max-width:1259px){
	.m_quick .m_1 { margin : 10px 5px; width: 40%;}
	.mainvisual {margin-bottom:65px;}
	.mainvisual .item {height:360px;}
	.mainvisual .nav {left:50%; margin-left:-90px; bottom:-55px; }
	.m_cont {padding:0 16px;}
	.main01 {width:calc(100% - 314px);}
//	.main01 .m_notice {padding:10px 130px 0 156px;}

}

/* ~ 1023px */
@media screen and (max-width:1023px){
	/**************************************************
		Common
	**************************************************/
	.mainvisual { margin-bottom:57px;}
	.mainvisual .item {height:240px;}
	.mainvisual .nav {transform:scale(0.8); }
	.main01 { width:auto; float:none; margin-bottom:25px;}
	.main01 .m_quick {margin-bottom:15px;}
	.main02 { width:100%; float:left;}
	.main02 .m_tel {float:left; width:calc(50% - 10px);}
	.main02 .m_location {float:right; width:calc(50% - 10px); margin-top:41px; height:194px;}
	.m_quick .m_1 { margin : 10px 5px; width: 30%;}
}
.monitor-M{display:none;}
/* ~ 767px */
@media screen and (max-width:767px){
	//.tab02 {left: 15px;}
	.pan_main {width:100%;}
	.mainvisual .item1 {height:210px;}
	.mainvisual .item2 {height:210px;}
    .m_quick { width: 100%;}
	.m_quick .m_1 { margin : 10px 10px; width: 45%;}
	.main01 {margin-bottom:10px;}
	.main01 .m_quick {margin-bottom:15px; max-height: none;}
	.main01 .m_quick li {float:none; width:auto; margin-bottom:10px; }
	.main01 .m_quick li a {height:100px; text-align:unset; }
	.monitor-M{display:block;}
	.monitor-PC{display:none;}
	.main01 .m_quick li a span {font-size:25px; padding-top :25px;}
	.main01 .m_quick li a:after { background-size:auto 94%; width:50%; background-position:right bottom; left:inherit; right:12px;}

	.main01 .m_notice {padding:0; height:auto; padding-bottom:18px;}
	.main01 .m_notice h3 { width:30%; display : inline; position:unset; left:inherit; top:inherit; padding-bottom:15px;}
	//.main01 .m_notice .more_btn {top:0; left:86px;}
	.main01 .m_notice .nav {top:-2px;}
	.main01 .m_notice {float:none;}

	.main01 .m_info {padding:30px 0 0; margin-bottom:0;}
	.main01 .m_info h3 {position:inherit; left:inherit; top:inherit; padding-bottom:25px;}
	.main01 .m_info .more_btn {left:inherit; right:0; top:26px;}
	.main01 .m_info ul li {width:25%; margin-bottom:20px;}

	.main02 .m_tel {width:auto; float:none; margin-bottom:15px;}
	.main02 .m_tel h3 {display:none;}
	.main02 .m_location {float:none; width:auto; margin-top:0; margin-bottom:40px;}
	.main_middle .m_notice h3 a.sel:after {margin : 0 0; width:90px;}
	.main_middle .m_notice h3 a {width:100px; display:inline; }
	.main_middle .m_notice h3 a.a2 { left : 10px; }
}

/* ~ 639px */
@media screen and (max-width:639px){
	.mainvisual .item1 {height:180px;}
	.mainvisual .item2 {height:180px;}
    	.main01 .m_info ul li {width:24.66666%;}
    .m_quick .m_1 { margin : 10px 120px; width: 55%;}

}

/* ~ 514px */
@media screen and (max-width:514px){

	.m_quick .m_1 { margin : 10px 80px; width: 70%;}
	.mainvisual .item1 {height:150px;}
	.mainvisual .item2 {height:150px;}
    	.main01 .m_info ul li {width:24.66666%;}


}
/* ~ 414px */
@media screen and (max-width:414px){
	.main01 .m_info ul li {width:22.66666%;}
	.mainvisual .item1 {height:120px;}
	.mainvisual .item2 {height:120px;}


}