@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
**************************************************/
/*비주얼*/
.cont_main {letter-spacing:-0.12em;}
.mainvisual {position:relative; margin-bottom:50px;}
.mainvisual .item {position:relative; height:455px;}
.mainvisual .item a {display:block;   }
.mainvisual .item img{position:absolute; left:50%; top:0; height:100%; max-width:inherit; transform: translateX(-50%);}
.mainvisual .item .b_m {display:none;}
.mainvisual .nav {position:absolute; left:50%; margin-left:-620px; bottom:100px; z-index:50;}
.mainvisual .nav button {display:block; float:left; margin-right:12px; background:url(../images/main/prevnext.png) no-repeat left 13px; width:36px; height:28px; overflow:hidden; color:transparent; }
.mainvisual .nav button.next {background-position:-36px 13px; }
.mainvisual .nav button.play {background-position:-100px top; width:28px; height:28px; display:none; margin-right:0;}
.mainvisual .nav button.pause {background-position:-72px top; width:28px; height:28px; display:none; margin-right:0;}
.mainvisual .nav button.active {display:block;}
.mainvisual .nav span {float:left; font-size:21px; letter-spacing:6px; margin-right:7px;}

/*퀵*/
.m_cont {max-width:1260px; margin:0 auto; overflow:hidden;}
.main01 {float:right; width:calc(100% - 334px); margin-bottom:46px; }
.main01 .m_quick {overflow:hidden; margin:0 -0.6% 36px;}
.main01 .m_quick li {float:left; width:23.8%; margin:0 0.6%;}
.main01 .m_quick li a {display:block; height:235px; border-radius:10px; background:#45aabc; position:relative; text-align:center; overflow:hidden; transition:0.6s cubic-bezier(0.65, 0.05, 0.36, 1);}
.main01 .m_quick li.n2 a {background:#20b186;}
.main01 .m_quick li.n3 a {background:#ffd266;}
.main01 .m_quick li.n4 a {background:#ea8b8e;}
.main01 .m_quick li a:before {content:''; display:block; position:absolute; left:0; right:0;  bottom:0; background:#008ac4; height:0; border-radius:100% 100% 0 0; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);}
.main01 .m_quick li.n2 a:before {background:#0a9939;}
.main01 .m_quick li.n3 a:before {background:#ffbc00;}
.main01 .m_quick li.n4 a:before {background:#e95a61;}
.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:142px; background:url(../images/main/quick01.png) no-repeat center bottom; position:absolute; left:0; bottom:0; right:0; transition: 0.5s;}
.main01 .m_quick li.n2 a:after {background-image:url(../images/main/quick02.png);}
.main01 .m_quick li.n3 a:after {background-image:url(../images/main/quick03.png);}
.main01 .m_quick li.n4 a:after {background-image:url(../images/main/quick04.png);}
.main01 .m_quick li a span {display:inline-block; position:relative; z-index:2; padding-top:32px; font-size:25px; color:#fff; letter-spacing:-0.12em; font-weight:600; transition: 0.3s;}
.main01 .m_quick li a span:after {content:''; display:inline-block; width:22px; height:22px; background:url(../images/main/quick_bullet_w.png) no-repeat; position:relative; top:2px; margin-left:8px; z-index:2;}
.main01 .m_quick li a:hover { background:#fff;}
.main01 .m_quick li a:hover span {padding-top:39px;}
.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.n3 span {color:#333;}
.main01 .m_quick li.n3 a span:after {background-image:url(../images/main/quick_bullet.png);}

/*공지사항*/
.main01 .m_notice {position:relative; height:87px; border-bottom:1px solid #dcdcdc;padding:10px 220px 0 186px; }
.main01 .m_notice h3 {position:absolute; left:20px; top:29px; font-size:20px; color:#323a3a;}
.main01 .m_notice .more_btn {position:absolute; left:104px; top:28px; display:block; width:29px; height:29px; 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; font-size: 17px;}
.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 span {position:absolute; right:0; top:0; color:#777;}
.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:16.6666%;}

.main01 .m_info ul li a {display:block;text-align:center; transition: 0.3s;  position:relative; font-size: 18px;}
.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:36px; }
.main02 .m_tel h3 {font-size:22px; height:41px;}
.main02 .m_tel .box {border:1px solid #d5d5d5; height:194px; border-radius:10px; padding:18px 25px; position:relative;}
.main02 .m_tel .box:before {content:''; display:block; height:1px; background:#d5d5d5; position:absolute; left:25px; right:25px; top:50%;}
.main02 .m_tel .box strong {display:block; font-size:18px; 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_location { border:1px solid #d5d5d5; border-radius:10px; height:190px; padding:20px 25px; position:relative; }
.main02 .m_location:before {content:''; display:block; width:31px; height:43px; background:url(../images/main/loc_bg.png) no-repeat; position:absolute; right:29px; top:50px;}
.main02 .m_location h3 { font-size:22px; padding-bottom:10px;}
.main02 .m_location p {font-size:18px; line-height:1.3; margin-bottom:22px;}
.main02 .m_location a {display:block; line-height:45px; background:#ededed; border-radius:5px; text-align:center; overflow:hidden; position:relative; transition: 0.3s;}
.main02 .m_location a span {position:relative; z-index:3; transition: 0.3s;}
.main02 .m_location a:after {content:''; display:inline-block; width:19px; height:6px; background:url(../images/main/loc_cursor.png) no-repeat; margin-left:6px; position:relative; z-index:2; top:-4px;}
.main02 .m_location a:before { content:''; display:block; width:0px; height:45px; background:#1198d8; position:absolute; left:0; top:0; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); border-radius:0 100% 100% 0;}
.main02 .m_location a:hover {color:#fff; font-weight:bold; }
.main02 .m_location a:hover span {margin-right:12px;}
.main02 .m_location a:hover:after {background:url(../images/common/side_cursor.png) no-repeat;}
.main02 .m_location a:hover:before {width:100%; border-radius:5px;}


/* ~ 1259px */
@media screen and (max-width:1259px){
	.mainvisual {margin-bottom:65px;}
	.mainvisual .item {height:360px;}
	.mainvisual .nav {left:50%; margin-left:-90px; bottom:-40px; }
	.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); padding-left:16px;}
	.main01 { width:auto; float:none; margin-bottom:25px;}
	.main01 .m_quick {margin-bottom:15px;}
	.main02 {overflow:hidden; width:auto; float:none;}
	.main02 .m_tel {float:left; width:calc(50% - 10px);}
	.main02 .m_location {float:right; width:calc(50% - 10px); margin-top:41px; height:194px;}
}

/* ~ 767px */
@media screen and (max-width:767px){
	
	.mainvisual .item {height:auto;}
	.mainvisual .item .b_m {display:block;}
	.mainvisual .item .b_m img {transform: translate(0); position:inherit; left:inherit; top:inherit; width:100%;}
	.mainvisual .item .b_p {display:none;}
	
	
	.main01 {margin-bottom:10px;}
	.main01 .m_quick {margin-bottom:15px;}
	.main01 .m_quick li {float:none; width:auto; margin-bottom:10px;}	
	.main01 .m_quick li a {height:90px; text-align:left; }
	.main01 .m_quick li a span {font-size:20px; margin-left:22px;}
	.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 {position:inherit; left:inherit; top:inherit; padding-bottom:15px;}	
	.main01 .m_notice .more_btn {top:0; left:86px;}
	.main01 .m_notice .nav {top:-2px;}
	
	.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:33.33333%; 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;}
}

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

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

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

}