@charset "utf-8";

/*
 * Main CSS Document
 * IEETU Web Standardization Team
 * 2017-06-13
 */

/* common */

#container:after{content:''; display:block; clear:both;}
#container img {max-width:100%;}

a .img {background:#aaa;}
a .img img {transition: 0.3s;}
a:hover .img img {transform: scale(1.1);filter: brightness(120%);}

.group_top {position:relative; padding:40px 0; display:flex; justify-content:space-between; margin-bottom:30px;}
.group_top:before {content:''; display:block; width:100vw; position:absolute; left:50%; top:0; bottom:0; transform: translateX(-50%); background:#f5f7fc; z-index:-1;}
.group_top .left {width:700px; position:relative;}
.group_top .left .nav {position:absolute; left:35px; bottom:150px; z-index:11; }
.group_top .left .nav .ctrl_area {display:flex;}
.group_top .left .nav .ctrl_area .dots ul {display:flex;}
.group_top .left .nav .ctrl_area .dots ul li {margin-right:8px;}
.group_top .left .nav .ctrl_area .dots ul li button {display:block; width:14px; height:14px; border-radius:14px; background:#fff; opacity:.5; overflow:hidden; text-indent:-999px;}
.group_top .left .nav .ctrl_area .dots ul li.slick-active button {background:#e41313; opacity:1;}
.group_top .left .nav .ctrl_area > button {display:block; width:9px; height:14px; overflow:hidden; text-indent:-999px; background:url(../images/main/prevnext.png) no-repeat; display:none; opacity:.5;}
.group_top .left .nav .ctrl_area > button.play {background-position:-9px top;}
.group_top .left .nav .ctrl_area > button.active {display:block;}
.group_top .left .item a {display:block; overflow:hidden; height:380px; position:relative;}
.group_top .left .item a:before {content:''; display:block; position:absolute; z-index:2; left:0; right:0; bottom:0; height:150px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%);}
.group_top .left .item a .img {display:block;}
.group_top .left .item a .img img {width:100%; min-height:380px;}
.group_top .left .item a .txt_box {position:absolute; left:35px; right:35px; bottom:35px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.5); z-index:3;}
.group_top .left .item a .txt_box .tit {font-size:28px; display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom:10px; }
.group_top .left .item a .txt_box .txt { font-size:17px; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;  height:2.8em; line-height:1.4; overflow:hidden; text-overflow:ellipsis;}

.group_top .left .slick-current a .img img {animation:m_visual 2s ease-in-out;}
@keyframes m_visual{
	0%{opacity:1; transform: scale(1.5); filter: blur(10px);-webkit-filter: blur(10px); }
 	100%{opacity:1; transform: scale(1);  filter: blur(0px);-webkit-filter: blur(0px); }
}
.group_top .left .slick-current a .txt_box .tit {animation:m_txt1 1.5s ease-in-out;  z-index:3;}
@keyframes m_txt1{
	0%{opacity:0; transform: translateY(-10px); }
 	100%{opacity:1; transform: translateY(0px); }
}
.group_top .left .slick-current a .txt_box .txt  {animation:m_txt2 1.5s ease-in-out; z-index:2;}
@keyframes m_txt2{
	0%{opacity:0;    transform: translateY(10px);}
 	100%{opacity:1;  transform: translateY(0px);}
}

.group_top .right {width:350px;}
.group_top .right li {margin-bottom:20px;}
.group_top .right li:last-child {margin-bottom:0;}
.group_top .right li a {display:block; display:flex; flex-wrap:wrap; justify-content: space-between; transition: 0.3s;}
.group_top .right li a .img { display:block; overflow:hidden; width:130px; height:80px; position:relative;}
.group_top .right li a .img img {min-height:80px;}
.group_top .right li a .img:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid transparent; transition: 0.3s; z-index:2;}
.group_top .right li a:hover .img:before { border:1px solid #333;}
.group_top .right li a .txt {display:flex; align-items: center;  width:calc(100% - 150px); }
.group_top .right li a .txt em { font-size:17px; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;  height:2.8em; line-height:1.4; overflow:hidden; text-overflow:ellipsis;}
.group_top .right li a:hover {color:#345fbb; text-decoration: underline;}


.group_wrap { display:flex; justify-content: space-between;}
.group_wrap .group_left {width:700px;}
#container .group_wrap .group_left .banner {margin-bottom:30px;}
.news_lst ul { display:flex; justify-content: space-between; margin-bottom:25px;}
.news_lst ul li {width:calc(50% - 15px);}
.news_lst ul li a {display:block; transition: 0.3s;}
.news_lst ul li a .img {display:block; overflow:hidden; height:185px; position:relative;}
.news_lst ul li a .img:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid transparent; transition: 0.3s; z-index:2;}
.news_lst ul li a:hover .img:before {border:1px solid #333; opacity:1;}
.news_lst ul li a .img img {width:100%; min-height:185px;}
.news_lst ul li a .tit {font-size:17px; display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; margin:15px 0 8px; font-weight:600;}
.news_lst ul li a:hover .tit {color:#345fbb; text-decoration:underline;}
.news_lst ul li a .txt {font-size:16px; color:#666; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;  height:2.8em; line-height:1.4; overflow:hidden; text-overflow:ellipsis;}
.category_news {padding-top:30px; border-top:1px solid #666; display:flex; justify-content:space-between; flex-wrap:wrap;}
.category_news .box {width:calc(50% - 15px); position:relative; margin-bottom:20px;}
.category_news .box h3 {border:1px solid #ccc; height:48px; line-height:48px; padding-left:20px; font-size:17px; font-weight:bold; margin-bottom:18px; border-bottom:2px solid #34bbb2;}
.category_news .box li {padding-left:10px; font-size:16px; margin:8px 5px 8px 12px; position:relative; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.category_news .box li:before {content:''; display:block; width:5px; height:1px; background:#34bbb2; position:absolute; left:0; top:11px;}
.category_news .box li a {transition: 0.3s;}
.category_news .box li a:hover {color:#345fbb; text-decoration:underline;}
.category_news .box .more_btn {display:block; width:49px; height:49px; position:absolute; right:0; top:0; overflow:hidden; text-indent:-999px; border-left:1px solid #ddd;}
.category_news .box .more_btn:before {content:''; display:block; width:17px; height:1px; background:#333; position:absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);}
.category_news .box .more_btn:after {content:''; display:block; width:1px; height:17px; background:#333; position:absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);}
.category_news .box:nth-child(2) h3 {border-bottom-color:#4d72c1;}
.category_news .box:nth-child(2) li:before {background:#4d72c1;}
.category_news .box:nth-child(3) h3 {border-bottom-color:#bb5f34;}
.category_news .box:nth-child(3) li:before {background:#bb5f34;}
.category_news .box:nth-child(4) h3 {border-bottom-color:#3492bb;}
.category_news .box:nth-child(4) li:before {background:#3492bb;}
.category_news .box:nth-child(5) h3 {border-bottom-color:#605ec9;}
.category_news .box:nth-child(5) li:before {background:#605ec9;}
.category_news .box:nth-child(6) h3 {border-bottom-color:#c758a5;}
.category_news .box:nth-child(6) li:before {background:#c758a5;}
.category_news .box:nth-child(7) h3 {border-bottom-color:#bb8734;}
.category_news .box:nth-child(7) li:before {background:#bb8734;}
.category_news .box:nth-child(8) h3 {border-bottom-color:#86c14d;}
.category_news .box:nth-child(8) li:before {background:#86c14d;}
.category_news .box:nth-child(9) h3 {border-bottom-color:#a95ecc;}
.category_news .box:nth-child(9) li:before {background:#a95ecc;}

.group_wrap .group_right {width:350px;}
.group_wrap .group_right .box {position:relative; margin-bottom:20px;}
.group_wrap .group_right .box h3 {position:relative; z-index:2; height:54px; border:1px solid #888; font-size:18px; padding-left:15px; line-height:52px; box-shadow:0 4px 0 rgba(0,0,0,0.1); z-index:2;}
.group_wrap .group_right .con {border:1px solid #d2d2d2; background:#fafafa; padding:20px; margin-top:-1px;}
.group_wrap .group_right .con .item .img {height:200px; display:block; overflow:hidden; margin-bottom:10px;}
.group_wrap .group_right .con .item .img img {min-height:200px;}
.group_wrap .group_right .con .item .txt_box {font-size:16px; text-align:center; display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; margin:0 5px 15px;}
.group_wrap .group_right .con .nav .dots ul { display:flex; justify-content: center;}
.group_wrap .group_right .con .nav .dots ul li button { display:block; overflow:hidden; text-indent:-999px; width:14px; height:14px; border-radius:50px; background:#d2d2d2; margin:0 4px;}
.group_wrap .group_right .con .nav .dots ul li.slick-active button {background:#345fbb;}
.group_wrap .group_right .more_btn {position:absolute; right:15px; top:17px; padding-right:19px; background:url(../images/main/more_btn.png) no-repeat right 2px; z-index:3;}

.group_wrap .group_right .movie_news .con .item {height:200px; margin-bottom:15px;}

.group_wrap .group_right .view_preson ol {display:flex; flex-wrap:wrap;}
.group_wrap .group_right .view_preson ol li {counter-increment:list-number; width:33.333%; position:relative; text-align:center; margin-bottom:10px;}
.group_wrap .group_right .view_preson ol li a {display:block; position:relative;}
.group_wrap .group_right .view_preson ol li .img {display:block; width:70px; height:70px; border-radius:70px; overflow:hidden; margin:0 auto 6px;}
.group_wrap .group_right .view_preson ol li .img img {min-height:70px; width:auto !important; max-width:inherit !important; position:relative; left:50%; transform: translateX(-50%);}
.group_wrap .group_right .view_preson ol li:before {content:counter(list-number); display:block; width:23px; height:24px; text-align:center; line-height:24px; border-radius:24px; color:#fff; font-size:13px; background:#777; position:absolute; left:50%; margin-left:-35px; top:0; z-index:2; padding-right:1px;}
.group_wrap .group_right .view_preson ol li:nth-child(-n + 3):before {background:#004098;}
.group_wrap .group_right .view_preson p {text-align:center; word-break: keep-all; font-size:14px; color:#777;} 


.group_wrap .group_right .lst li { display:block; padding-left:12px; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:10px; font-size:16px;}
.group_wrap .group_right .lst li a {transition: 0.3s;}
.group_wrap .group_right .lst li a:hover {color:#345fbb; text-decoration:underline;}
.group_wrap .group_right .lst li:last-child {margin-bottom:4px;}
.group_wrap .group_right .lst li:before {content:''; display:block; width:6px; height:1px; background:#888; position:absolute; left:0; top:10px;}
.group_wrap .group_right .lst li:hover:before {background:#345fbb;}


.group_wrap .group_right a.qna{display:block; position:relative; letter-spacing:-1px;}
.group_wrap .group_right a.qna img,
.group_wrap .group_right a.qna > span{display:inline-block;}
.group_wrap .group_right a.qna img{width:100px; height:65px;}
.group_wrap .group_right a.qna > span{width:calc(100% - 120px); padding-left:10px; color:#333; font-weight:600;}
.group_wrap .group_right a.qna p{padding:10px 0 15px; border-bottom:1px solid #e1e1e1;}
.group_wrap .group_right .result{}
.group_wrap .group_right .result h4{text-align:center; font-weight:600; color:#333; margin-top:12px;}
.group_wrap .group_right .result ul{margin-top:15px;}
.group_wrap .group_right .result ul:after{content:''; display:block; clear:both;}
.group_wrap .group_right .result ul > li{padding:10px 10px; margin-bottom:6px; border:3px solid #4d72c1; background:#fff; box-sizing:border-box; text-align:center; font-weight:600; color:#333; letter-spacing:-1px; display:flex; justify-content: space-between;}
/* .group_wrap .group_right .result ul > li:nth-of-type(2){float:right; border-color:#ff0000; color:#ff0000;} */
.group_wrap .group_right .result ul > li > span{color:#333; font-weight:400; margin-left:3px;}
.group_wrap .group_right .result ul > li > span strong {color:#e41313; margin-right:4px;}
.group_wrap .group_right .result > a{display:block; width:180px; height:46px; line-height:46px; margin:12px auto 5px; background:#333; color:#fff; text-align:center; font-size:16px; border-radius:60px;}
.group_wrap .group_right .recent_news .tabs {display:flex; flex-wrap:wrap; box-shadow:0 4px 0 rgba(0,0,0,0.1); position:relative; z-index:2;}
.group_wrap .group_right .recent_news .tabs li {width:50%; }
.group_wrap .group_right .recent_news .tabs li a { display:flex; height:56px; border:1px solid #888;box-sizing: border-box; justify-content:center; align-items: center; font-size:16px; position:relative; line-height:1.2; padding:0 10px; text-align:center; word-break: keep-all;}
.group_wrap .group_right .recent_news .tabs li a.sel {background:#2e5fc8; color:#fff; border:1px solid #2e5fc8; text-decoration: underline;}
.group_wrap .group_right .recent_news .tabs li a.sel:before {content:''; display:block; width:10px; height:10px; background:#2e5fc8; position:absolute; left:50%; margin-left:-5px; bottom:-5px; transform:rotate(45deg);}
.group_wrap .group_right .recent_news ol li {counter-increment:list-number;position:relative;  padding-left:29px;}
.group_wrap .group_right .recent_news ol li:before {content:counter(list-number); display:block; width:22px; height:22px; text-align:center; line-height:22px; border-radius:2px; color:#fff; font-size:13px; background:#777; position:absolute; left:0; top:0; z-index:2;}
.group_wrap .group_right .recent_news ol li:nth-child(-n + 3):before {background:#e41313;}



@media all and (max-width:1079px){
	.group_top:before {display:none;}
	.group_top {background:#f5f7fc; padding:20px 10px; margin-bottom:20px;}
	.group_top .left , .group_wrap .group_left {width:60%;}
	.group_top .right , .group_wrap .group_right {width:calc(40% - 20px);}
	.group_top .right li a .txt {width:calc(100% - 140px);}
	.group_wrap {margin:0 10px;}
	.news_lst ul li , .category_news .box {width:calc(50% - 8px);}
	
}

@media all and (max-width:768px){
	.group_top {display:block;}
	.group_top .left {width:100%; margin-bottom:20px;}
	.group_top .right {width:100%;}
	.group_top .left .item a {height:auto;}
	.group_top .left .item a .img img {min-height:inherit;}
	.group_wrap {display:block;}
	.group_wrap .group_left { width:100%;}
	.group_wrap .group_right {width:100%;}
	.group_wrap .group_right .con .item .img {height:auto;}
	.group_wrap .group_right .con .item .img img {min-height:inherit;}
	.group_wrap .group_right .movie_news .con .item {height:280px;}
	.group_wrap .group_right .view_preson ol li {width:25%;}
	#container .group_wrap .group_left .banner {margin-bottom:20px;}
}

/* 예외 */
@media all and (max-width:640px){
	.group_top .left .nav {left:20px; bottom:122px;}
	.group_top .left .item a .txt_box {left:20px; bottom:25px;}
	.group_top .left .item a .txt_box .tit {font-size:22px;}
	.group_top .left .item a .txt_box .txt {font-size:15px;}
	.news_lst ul li a .img {height:150px;}
	.news_lst ul li a .img img {min-height:150px;}
	.news_lst ul li a .tit {font-size:16px; margin:10px 0 6px;}
	.news_lst ul li a .txt {font-size:15px;}
	.category_news .box h3 {margin-bottom:12px;}
	.category_news .box li {font-size:15px;}
	.group_wrap .group_right .view_preson ol li {width:33.3333%;}
}

@media all and (max-width:480px){
	.group_top .right li a .img {width:110px; height:60px;}
	.group_top .right li a .txt {width:calc(100% - 120px);}
	.group_top .right li a .txt em {font-size:15px;}
	.news_lst ul , .category_news {display:block; margin-bottom:0;}
	.news_lst ul li , .category_news .box  {width:100%; margin-bottom:20px;}
	.news_lst ul li a .img {height:auto;}
	.news_lst ul li a .img img {min-height:inherit;}
	.group_wrap .group_right .movie_news .con .item {height:200px;}
}

/* 예외 */
@media all and (max-width:400px){
	.figure_news .list li{width:32%;}
	.figure_news .list li:nth-child(4n+1){clear:inherit;}
	.figure_news .list li:nth-child(3n+2){margin:0 2%;}

	.visibility_news .list li{width:100%;}
}

/* 예외 */
@media all and (max-width:320px){
	.top_news.type03 .img > img{width:118px; height:78px;}
	.top_news.type03 .link > div > p,
	.top_news.type03 .sub{margin-left:128px;}
	.top_news.type03 .link > div > p{height:60px;}

	a.news img{width:95px; height:63px;}
	a.news p{margin-left:105px; height:60px;}
	a.news h2{font-size:20px;}
	a.news h3{font-size:17px;}

	#container > div[class^="group_"] .news{height:120px;}
}