@charset "utf-8";



#main #container {padding-top: 80px;}



/* sec1 */
#sec1 {position: relative;}
#sec1 .slide_bx {font-size: 0; position: relative;}
#sec1 .con {height: 780px; position: relative; overflow: hidden;}
#sec1 .txt_bx {z-index: 1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed; box-sizing: border-box;}
#sec1 .txt_bx .txt_w {width: 100%; max-width: 1200px; width: calc(100% - 40px);}
#sec1 .con_bx1 .img_bx {width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
#sec1 .con_bx1 .img_bx div {width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.2); -webkit-transition: transform 5s; -moz-transition: transform 5s; transition: transform 5s;}
#sec1 .con_bx1 .img_bx.on div {transform: scale(1);}
#sec1 .con_bx1 .txt_bx {padding-bottom: 88px;}
#sec1 .con_bx1 .txt_bx .txt_w {text-align: center;}
#sec1 .con_bx1 .txt_bx .txt_w div {-webkit-transition: transform 0.6s, opacity 0.6s; -moz-transition: transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; transform: translate(0, 50px); opacity: 0;}
#sec1 .con_bx1 .txt_bx.on .txt_w div {transform: translate(0, 0); opacity: 1;}
#sec1 .con_bx1 .txt_bx .txt_w .txt1 {font-size: 56px; color: #ffffff; font-weight: 800; letter-spacing: -0.025em; word-break: keep-all;}
#sec1 .con_bx1 .txt_bx .txt_w .txt2 {font-size: 48px; color: rgba(255,255,255,.7); font-weight: 600; word-break: keep-all; margin-top: 6px; transition-delay: 0.2s;}
#sec1 .con_bx1 .txt_bx .txt_w .txt3 {font-size: 20px; color: #ffffff; line-height: 32px; letter-spacing: -0.025em; word-break: keep-all; margin-top: 30px; transition-delay: 0.4s;}
#sec1 .con_bx2 {background: url(../images/main/sec1_bg.jpg) no-repeat center; background-size: cover;}
#sec1 .con_bx2 .bg_txt {width: 100%; left: 0; bottom: 38px; position: absolute; height: 264px;}
#sec1 .con_bx2 .bg_txt span {font-size: 360px; color: #999999; font-weight: 700; opacity: 0.08; display: inline-block; line-height: 264px; position: absolute; top: 0; left: 0; animation: leftMove 20s linear infinite;}
@-webkit-keyframes leftMove {
	0% {
		left: 100%;
	}
	100% {
		left: -936px;
	}
}
#sec1 .con_bx2 .img_bx {max-width: 1579px; width: calc(100% - 40px); height: 100%; left: 50%; top: 0; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); position: absolute; z-index: 1;}
#sec1 .con_bx2 .img_bx div {position: absolute; right: 0; top: 0; width: 54.465%;}
#sec1 .con_bx2 .img_bx div::before {content: ''; width: 100%; padding-bottom: 100%; bottom: 0; left: 0; background-color: #00579b; border-radius: 50%; position: absolute;}
#sec1 .con_bx2 .img_bx div img {width: 100%; position: relative; z-index: 1; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; opacity: 0; transform: translate(0, 50px);}
#sec1 .con_bx2 .img_bx.on div img {opacity: 1; transform: translate(0, 0);}
#sec1 .con_bx2 .txt_bx {height: 595px;}
#sec1 .con_bx2 .txt_bx .txt_w div {-webkit-transition: transform 0.6s, opacity 0.6s; -moz-transition: transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; transform: translate(50px, 0); opacity: 0;}
#sec1 .con_bx2 .txt_bx.on .txt_w div {transform: translate(0, 0); opacity: 1;}
#sec1 .con_bx2 .txt_bx .txt_w .txt1 {font-size: 56px; color: #00579b; font-weight: 800; letter-spacing: -0.025em; word-break: keep-all;}
#sec1 .con_bx2 .txt_bx .txt_w .txt2 {font-size: 68px; color: #222222; font-weight: 700; word-break: keep-all; margin-top: 16px; transition-delay: 0.2s;}
#sec1 .con_bx2 .txt_bx .txt_w .txt2.type2 {font-size: 36px; line-height: 48px;  margin-top: 22px;}
#sec1 .con_bx2 .txt_bx .txt_w .txt3 {font-size: 18px; color: #666666; letter-spacing: -0.025em; word-break: keep-all; line-height: 30px; margin-top: 25px; transition-delay: 0.4s;}
#sec1 .con_bx2 .txt_bx .txt_w .btn {transition-delay: 0.5s; margin-top: 30px;}
#sec1 .con_bx2 .txt_bx .txt_w .btn a {display: inline-block; font-size: 18px; color: #fff; background-color: #00579b; line-height: 60px; width: 200px; text-align: center;}
#sec1 .slick-dots {display: none!important;}

#sec1 .tab_bx {position: absolute; z-index: 2; width: 100%; bottom: 0; left: 0; background: rgba(0,0,0,.6); border-top: 1px solid rgba(255,255,255,.2);}
#sec1 .tab_bx ul {max-width: 1439px; width: 100%; margin: 0 auto; display: table; table-layout: fixed; border-left: 1px solid rgba(255,255,255,.2); box-sizing: border-box;}
#sec1 .tab_bx ul li {display: table-cell; vertical-align: middle; text-align: center; height: 88px; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,.2); cursor: pointer; position: relative;}
#sec1 .tab_bx ul li::before {content: ''; width: calc(100% + 2px); height: 0; bottom: 0; left: -1px; position: absolute; background: url(../images/main/sec1_tab_bg.jpg) no-repeat center bottom; background-size: cover; opacity: 0; -webkit-transition: opacity 0.3s, height 0.3s; -moz-transition: opacity 0.3s, height 0.3s; transition: opacity 0.3s, height 0.3s;}
#sec1 .tab_bx ul li.on::before {opacity: 1; height: calc(100% + 13px);}
#sec1 .tab_bx ul li span {font-size: 20px; color: #ffffff; line-height: 28px; letter-spacing: -0.025em; word-break: keep-all; position: relative; z-index: 1; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; display: block; width: 100%; position: absolute; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);}
#sec1 .tab_bx ul li .ko {opacity: 1;}
#sec1 .tab_bx ul li .en {opacity: 0;}
#sec1 .tab_bx ul li.on .ko {opacity: 0;}
#sec1 .tab_bx ul li.on .en {opacity: 1;}
#sec1 .tab_bx ul li .new em {display: inline-block; position: relative; font-style: normal;}
#sec1 .tab_bx ul li .new em::before {content: 'NEW'; padding: 0 10px; line-height: 24px; background-color: #cc0000; text-align: center; font-size: 14px; color: #ffffff; display: inline-block; position: relative; top: -2px; animation: twinkle 1.5s linear infinite; margin-right: 8px;}
@-webkit-keyframes twinkle {
	0% {
		background-color: rgba(204,0,0,.2);
		/*background-color: #830000;*/
	}
	30% {
		background-color: #cc0000;
	}
	80% {
		background-color: #cc0000;
	}
	100% {
		background-color: rgba(204,0,0,.2);
		/*background-color: #830000;*/
	}
}



/* sec2 */
#sec2 {padding: 136px 0 140px;}
#sec2 .con_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; display: flex; flex-flow: wrap;}
#sec2 .con_bx .l_bx {width: calc(100% - 460px); box-sizing: border-box; margin-right: 60px;}
#sec2 .con_bx .l_bx .ttl_bx {min-height: 29px; margin-bottom: 21px;}
#sec2 .con_bx .l_bx .ttl_bx strong {display: inline-block; font-size: 24px; color: #222222; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all;}
#sec2 .con_bx .l_bx .ttl_bx a {float: right; display: inline-block; line-height: 29px; font-size: 14px; color: #888888; letter-spacing: -0.025em; padding-right: 20px; position: relative;}
#sec2 .con_bx .l_bx .ttl_bx a::before {content: ''; width: 9px; height: 9px; background: url(../images/icon/more.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -5px; }
#sec2 .con_bx .l_bx .list_bx {border-top: 1px solid #222222;}
#sec2 .con_bx .l_bx .list_bx ul li {border-bottom: 1px solid #dddddd;}
#sec2 .con_bx .l_bx .list_bx ul li a {display: flex; flex-flow: wrap; position: relative; height: 80px; box-sizing: border-box; padding-right: 100px;}
#sec2 .con_bx .l_bx .list_bx ul li a::before {content: ''; width: 19px; height: 14px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 30px; top: 50%; margin-top: -7px;}
#sec2 .con_bx .l_bx .list_bx .date {text-align: center; width: 91px; box-sizing: border-box; display:flex; justify-content:center; align-items:center; table-layout:fixed; position: relative;}
#sec2 .con_bx .l_bx .list_bx .date::before {content: ''; width: 1px; height: 20px; background-color: #999999; position: absolute; right: 0; top: 50%; margin-top: -10px;}
#sec2 .con_bx .l_bx .list_bx .date span {display: block; width: 100%; font-size: 14px; color: #999999; font-weight: 300; word-break: keep-all;}
#sec2 .con_bx .l_bx .list_bx .date span strong {display: block; font-size: 32px; font-weight: 800; line-height: 28px; margin-bottom: 5px;}
#sec2 .con_bx .l_bx .list_bx .sb {width: calc(100% - 91px); box-sizing: border-box; padding-left: 19px; font-size: 16px; color: #666666; letter-spacing: -0.025em; display:flex; justify-content:left; align-items:center; table-layout:fixed;}
#sec2 .con_bx .l_bx .list_bx .sb span {word-break: break-all; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box;}
#sec2 .con_bx .l_bx .list_bx .no_data {height: 324px; display:flex; justify-content:center; align-items:center; table-layout:fixed; text-align: center; font-size: 16px; color: #d7d7d7; letter-spacing: -0.025em; word-break: keep-all; box-sizing: border-box; border-bottom: 1px solid #ddd;}
#sec2 .con_bx .r_bx {width: 400px; box-sizing: border-box; display:flex; flex-flow: wrap; height: 375px;}
#sec2 .con_bx .r_bx .con_w > div {width: 100%;}
#sec2 .con_bx .r_bx .con_w:last-child {display:flex; justify-content:center; align-items:end; table-layout:fixed;}
#sec2 .con_bx .r_bx .con_w strong {display: block; font-size: 20px; color: #222222; font-weight: 500; word-break: keep-all; margin-bottom: 11px;}
#sec2 .con_bx .r_bx .con_w a {display: block; width: 100%; overflow: hidden;}
#sec2 .con_bx .r_bx .con_w a img {width: 100%;}


/* PC */
@media all and (min-width:1025px){
	/* sec1 */
	#sec1 .tab_bx ul li:hover::before {opacity: 1; height: calc(100% + 13px);}
	#sec1 .tab_bx ul li:hover .ko {opacity: 0;}
	#sec1 .tab_bx ul li:hover .en {opacity: 1;}
	
	
	
	/* sec2 */
	#sec2 .con_bx .l_bx .ttl_bx a::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#sec2 .con_bx .l_bx .ttl_bx a:hover::before {transform: rotate(180deg);}
	#sec2 .con_bx .l_bx .list_bx ul li a::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#sec2 .con_bx .l_bx .list_bx ul li a:hover::before {transform: translate(10px, 0);}
	#sec2 .con_bx .l_bx .list_bx ul li a:hover .sb span {text-decoration: underline;}
	#sec2 .con_bx .r_bx .con_w a img {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
	#sec2 .con_bx .r_bx .con_w a:hover img {transform: scale(1.1);}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	#main #container {padding-top: 60px;}


	/* sec1 */
	#sec1 .con {height: 480px;}
	#sec1 .con_bx1 .txt_bx {padding-bottom: 50px;}
	#sec1 .con_bx1 .txt_bx .txt_w .txt1 {font-size: 30px;}
	#sec1 .con_bx1 .txt_bx .txt_w .txt2 {margin-top: 8px; font-size: 25px;}
	#sec1 .con_bx1 .txt_bx .txt_w .txt3 {margin-top: 17px; font-size: 14px; line-height: 19px;}
	#sec1 .con_bx2 .txt_bx {height: 355px;}
	#sec1 .con_bx2 .txt_bx .txt_w .txt1 {font-size: 15px;}
	#sec1 .con_bx2 .txt_bx .txt_w .txt2 {margin-top: 6px; font-size: 30px; line-height: 35px;}
	#sec1 .con_bx2 .txt_bx .txt_w .txt2.type2 {margin-top: 6px; font-size: 30px; line-height: 35px;}
	#sec1 .con_bx2 .txt_bx .txt_w .txt3 {margin-top: 11px; font-size: 13px; line-height: 18px;}
	#sec1 .con_bx2 .txt_bx .txt_w .btn {margin-top: 12px;}
	#sec1 .con_bx2 .txt_bx .txt_w .btn a {font-size: 11px; line-height: 35px; width: 120px;}
	#sec1 .con_bx2 .bg_txt {height: 134px;}
	#sec1 .con_bx2 .bg_txt span {font-size: 180px; line-height: 134px; animation: leftMove 15s linear infinite;}
	@-webkit-keyframes leftMove {
		0% {
			left: 100%;
		}
		100% {
			left: -468px;
		}
	}
	
	#sec1 .tab_bx ul li {height: 50px;}
	#sec1 .tab_bx ul li.on::before {height: calc(100% + 8px);}
	#sec1 .tab_bx ul li span {font-size: 13px; line-height: 18px;}
	#sec1 .tab_bx ul li span.en {font-size: 10px; line-height: 14px;}
	#sec1 .tab_bx ul li .new em::before {padding: 0 5px; line-height: 12px; font-size: 7px; margin-right: 6px; top: -1px;}
	
	
	
	/* sec2 */
	#sec2 {padding: 57px 0 60px;}
	#sec2 .con_bx .l_bx {width: calc(100% - 382px);}
	#sec2 .con_bx .l_bx .ttl_bx {min-height: 24px; margin-bottom: 12px;}
	#sec2 .con_bx .l_bx .ttl_bx strong {font-size: 20px;}
	#sec2 .con_bx .l_bx .ttl_bx a {font-size: 12px; padding-right: 15px; line-height: 24px;}
	#sec2 .con_bx .l_bx .list_bx ul li a {height: 65px; padding-right: 60px;}
	#sec2 .con_bx .l_bx .list_bx ul li a::before {width: 13px; background-size: 13px auto; right: 20px;}
	#sec2 .con_bx .l_bx .list_bx .date {width: 61px;}
	#sec2 .con_bx .l_bx .list_bx .date::before {height: 25px; margin-top: -13px;}
	#sec2 .con_bx .l_bx .list_bx .date span {font-size: 11px;}
	#sec2 .con_bx .l_bx .list_bx .date span strong {font-size: 20px; line-height: 18px; margin-bottom: 1px;}
	#sec2 .con_bx .l_bx .list_bx .sb {width: calc(100% - 61px); font-size: 13px; line-height: 18px;}
	#sec2 .con_bx .l_bx .list_bx .no_data {height: 264px; font-size: 13px;}
	
	#sec2 .con_bx .r_bx {width: 322px; height: 301px;}
	#sec2 .con_bx .r_bx .con_w strong {font-size: 15px; margin-bottom: 10px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* sec1 */
	#sec1 .con {height: 580px;}
	#sec1 .con_bx1 .txt_bx {padding-bottom: 100px;}
	#sec1 .con_bx2 .bg_txt {display: none;}
	#sec1 .con_bx2 .img_bx {position: relative; width: 100%; top: auto; left: auto; transform: none; -webkit-transform: none; height: 260px; text-align: center;}
	#sec1 .con_bx2 .img_bx div {position: relative; right: auto; top: auto; width: 100%;}
	#sec1 .con_bx2 .img_bx div::before {transform: scale(1.2); bottom: 5%;}
	#sec1 .con_bx2 .img_bx div img {max-width: 300px; width: 100%; margin: 0 auto;}
	#sec1 .con_bx2 .txt_bx {position: relative; display: flex; height: auto; width: 100%; text-align: center; padding-top: 8%;}
	#sec1 .con_bx2 .txt_bx .txt_w div {transform: translate(0, 50px);}
	
	#sec1 .tab_bx ul {display: flex; flex-flow: wrap;}
	#sec1 .tab_bx ul li {width: calc(33.333%); border-bottom: 1px solid rgba(255,255,255,.2);}
	#sec1 .tab_bx ul li.on::before {height: calc(100% + 1px);}
	
	
	
	/* sec2 */
	#sec2 .con_bx .l_bx {width: 100%; margin-right: 0;}
	#sec2 .con_bx .l_bx .list_bx ul li a {height: 60px;}
	#sec2 .con_bx .l_bx .list_bx .no_data {height: 150px;}
	
	#sec2 .con_bx .r_bx {width: 100%; display: flex; flex-flow: wrap; height: auto; margin-top: 37px;}
	#sec2 .con_bx .r_bx .con_w:nth-child(n) {width: calc(50% - 5px); margin-right: 10px; display: block;}
	#sec2 .con_bx .r_bx .con_w:nth-child(2n) {margin-right: 0;}
}