@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2020.07.07 | 김효진 | 최초 등록
 * 2020.07.07 | 김효진 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 디자인팀 김효진
 * @since 2020.07.07
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */

/* all.css overwrite */
#body {font-size:13px;letter-spacing:-.05em}
@media all and (min-width:768px){
	#body {font-size:14px}
}
@media all and (min-width:1200px){
	#body {font-size:15px}
}
@media all and (min-width:1400px){
	#body {font-size:16px}
}
@media all and (max-width:1259px){
	#body .container {margin-left:15px;margin-right:15px}
}

#wrap {background:url(../../img/main/main_bg.jpg) no-repeat 50% 0;background-size:cover}
#wrap .container {width:auto;max-width:1600px;margin:auto 15px;}
#wrap [id*="mainbody"]>.container .owl-carousel {display:block;}

@media all and (min-width:1630px){
	#wrap .container {margin:auto;}
}

/* 공통 */
#mainbody1 .h1 {line-height:1;font-weight:500;}
[id*="menu"] .h1 {font-size:2em;color:#fff;margin-bottom:16px}
[id*="menu"] .t1 {font-size:1.125em;color:#fff;line-height:1.556em;max-width:80%;word-break:keep-all}
[id*="menu"] .t1 .sec {display:inline;}
[id*="menu"] .datalist {overflow:hidden;}
[id*="menu"] .datalist li a {position:relative;color:#fff;display:block;padding:20px 0 7px;border-bottom:1px solid #fff;}
[id*="menu"] .datalist li a:after {position:absolute;top:26px;right:6px;content:"";display:block;width:8px;height:8px;border:2px solid #fff;box-sizing:border-box;border-top:0;border-left:0;transform:rotate(-45deg);transition:right .35s ease}
[id*="menu"] .datalist li a:hover:after, [id*="menu"] .datalist li a:focus:after {right:10px}
@media all and (min-width:768px){
	[id*="menu"] .h1 {font-size:2.5em;margin-bottom:26px}
	[id*="menu"] .t1 {max-width:none;margin-bottom:20px}
	[id*="menu"] .t1 .sec {display:block;}
}

#mainbody1 {display:flex;flex-wrap:wrap-reverse;margin:35px 0 25px;overflow:hidden}
#mainbody1>div {box-sizing:border-box;width:100%}
#menu1 {height:100%;background:#019aff url(../../img/main/menu1_bg.png) no-repeat right 85%;padding:30px 25px;transition:background-color .35s ease;background-size:192px auto;margin-bottom:20px;order:5}
#menu1:hover, #menu1:focus {background-color:#018AE5;}
#menu1 .datalist {width:60%;overflow:hidden}
#menu1 .t1 .sec {display:inline}
@media all and (min-width:500px){
	#menu1 .datalist li {float:left;width:48%;margin-left:4%;}
	#menu1 .datalist li:nth-child(odd) {margin-left:0}
}
@media all and (min-width:768px){
	#mainbody1 {display:block;margin-top:57px;margin-bottom:53px}
	#mainbody1>div {width:auto;}
	#menu1 {padding:45px 30px}
}
@media all and (min-width:1260px){
	#mainbody1 {height:750px}
	#mainbody1 #menu1 {float:left;width:32.5%;padding:65px 40px;background-size:auto;margin-bottom:0;margin-right:20px;}
	#menu1 .t1 {margin-bottom:60px}
	#menu1 .t1 .sec {display:block;}
	#menu1 .datalist {width:45%;}
	#menu1 .datalist li {float:none;width:100%;margin:0}
}
@media all and (min-width:1630px){
	#menu1 {width:520px}
}
#menu2 {background:#2bc9a5 url(../../img/main/menu2_bg.png) no-repeat right bottom;padding:30px 25px;transition:background-color .35s ease;margin-bottom:20px;background-size:145px auto;order:4}
#menu2:hover, #menu2:focus {background-color:#24a789}
#menu2 .datalist {width:60%}
@media all and (min-width:500px){
	#menu2 .datalist li {float:left;width:calc(50% - 10px);margin-left:20px;}
	#menu2 .datalist li:nth-child(odd) {margin-left:0}
}
@media all and (min-width:768px){
	#mainbody1 #menu2 {float:left;width:50%;height:330px;margin-bottom:0;padding:35px 40px;background-size:auto;}
	#menu2 .datalist {width:100%;}
}
@media all and (min-width:1260px){
	#mainbody1 #menu2 {width:32.5%;height:calc(50% - 10px);padding:45px 50px}
}
@media all and (min-width:1630px){
	#mainbody1 #menu2 {width:520px}
}

#menu3 {background:#ef6266 url(../../img/main/menu3_bg.png) no-repeat right 80%;padding:30px 25px;margin-bottom:20px;background-size:133px auto;order:3}
#menu3 .datalist {width:60%}
@media all and (min-width:500px){
	#menu3 .datalist li {float:left;width:calc(50% - 10px);margin-left:20px}
	#menu3 .datalist li:nth-child(odd) {margin-left:0}
}
@media all and (min-width:768px){
	#mainbody1 #menu3 {float:left;width:50%;height:330px;padding:40px;background-size:auto;margin-top:20px;}
	#menu3 .datalist {width:48%}
	#menu3 .datalist li {float:none;width:100%;margin-left:0}
}
@media all and (min-width:1260px){
	#mainbody1 #menu3 {width:32.5%;height:365px;padding:50px}
}
@media all and (min-width:1630px){
	#mainbody1 #menu3 {width:520px}
}

#mainbody1 .bbs1 {position:relative;padding:30px 15px;background:#fff;}
#notice1 .h1, #dataroom1 .h1 {font-size:1.625em;font-weight:600;margin-bottom:8px;color:#3a3a4a}
#mainbody1 .bbs1 .b1.more {position:absolute;top:27px;right:28px;width:24px;height:24px;transition:all .3s ease}
#mainbody1 .bbs1 .b1.more:before, .bbs1 .b1.more:after {position:absolute;top:calc(50% - 9px);left:calc(50% - 1px);content:"";display:block;width:2px;height:18px;background:#3a3a4a;}
#mainbody1 .bbs1 .b1.more:after {transform:rotate(-90deg)}
#mainbody1 .bbs1 .b1.more:hover, .bbs1 .b1.more:focus {transform:rotate(90deg);}
#mainbody1 .bbs1 .datalist li {border-bottom:1px solid #e1e3e6;transition:all .35s ease}
#mainbody1 .bbs1 .datalist li:last-child {border-bottom:0}
#mainbody1 .bbs1 .datalist li.no-data {text-align:center;padding-top:3vh}
#mainbody1 .bbs1 .datalist li:hover, .bbs1 .datalist li:focus {border-color:#bbb;}
#mainbody1 .bbs1 .datalist li a {display:block;}
#notice1 {order:2}
#notice1 .datalist li {padding:16px 0}
#notice1 .datalist li a {position:relative;padding-left:64px}
#notice1 .datalist li a .date {position:absolute;top:1px;left:0;width:46px;height:100%;text-align:center;letter-spacing:-.05em;}
#notice1 .datalist li a .date em {display:block;line-height:1}
#notice1 .datalist li a .date .day {color:#e4001a;font-size:1.625em;font-weight:600;padding-bottom:6px}
#notice1 .datalist li a .date .ym {font-size:.813em;color:#6e7174;}
#notice1 .datalist li a  p, #dataroom1 .datalist li a {white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#notice1 .datalist li a .t1 {font-size:1.125em;color:#3a3a4a;font-weight:500;margin-bottom:3px;transition:all .35s ease}
#notice1 .datalist li a .t2 {font-size:.938em;color:#6e7174;}
#notice1 .datalist li a:hover .t1, #notice1 .datalist li a:focus .t1 {color:#222;text-decoration:underline;}
#dataroom1 {margin-top:20px;order:0}
#dataroom1 .datalist li {padding:14px 0}
#dataroom1 .datalist li a {position:relative;color:#6e7174;transition:all .35s ease}
#dataroom1 .datalist li a:after {position:absolute;top:calc(50% - 5px);right:5px;content:"";display:block;width:10px;height:10px;border:2px solid #777;box-sizing:border-box;transform:rotate(45deg);border-left:0;border-bottom:0;transform-origin:0 0;opacity:0;transition:all .35s ease}
#dataroom1 .datalist li a:hover, #dataroom1 .datalist li a:focus {color:#222;}
#dataroom1 .datalist li a:hover:after, #dataroom1 .datalist li a:focus:after {opacity:1;right:0;}
@media all and (min-width:768px){
	#mainbody1 .bbs1 {float:right;width:48%;height:330px;padding:35px 25px}
	#notice1 .h1, #dataroom1 .h1 {margin-bottom:20px}
	#mainbody1 .bbs1 .b1.more {top:46px;right:32px}
	#mainbody1 .bbs1 .datalist li.no-data {padding-top:10vh}
}
@media all and (min-width:1260px){
	#mainbody1 .bbs1 {width:32.5%;height:calc(50% - 10px);padding:45px 35px}
}
@media all and (min-width:1630px){
	#mainbody1 .bbs1 {width:520px;}
}