@charset "utf-8";


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



/* sec01 */
#sec01 {padding: 0 0 120px;}
#sec01 .slide_bx .con_bx {overflow: hidden; position: relative;}
#sec01 .slide_bx .con_bx .img_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
#sec01 .slide_bx .con_bx .img_bx > div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#sec01 .slide_bx .con_bx .txt_bx {position: absolute; width: 100%; height: calc(100% - 180px); left: 0; top: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec01 .slide_bx .con_bx .txt_bx .txt_w {text-align: center; width: 100%; padding: 0 20px;}
#sec01 .slide_bx .con_bx .txt_bx .txt_w .txt1 {font-size: 24px; color: #ffffff; font-weight: 700; line-height: 34px; word-break: keep-all; margin-bottom: 25px;}
#sec01 .slide_bx .con_bx .txt_bx .txt_w .txt2 {font-size: 60px; color: #ffffff; line-height: 70px; font-weight: 700; word-break: keep-all;}
#sec01 .slide_bx .con_bx .txt_bx .txt_w .txt3 {font-size: 18px; line-height: 28px; color: rgba(255,255,255,.7); word-break: keep-all; margin-top: 26px;}

#sec01 .btn_bx {max-width: 1200px; width: calc(100% - 40px); margin: -180px auto 0; position: relative; z-index: 1; display: flex; flex-flow: wrap;}
#sec01 .btn_bx .con_w {overflow: hidden; width: calc(33.333% - 20px); margin-right: 30px; box-sizing: border-box; position: relative; min-height: 480px; box-sizing: border-box; padding: 44px 40px 40px; box-shadow: 0 20px 20px rgba(0,0,0,0.1);}
#sec01 .btn_bx .con_w:nth-child(3n) {margin-right: 0;}
#sec01 .btn_bx .con_w .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#sec01 .btn_bx .con_w .txt_bx {position: relative; z-index: 1;}
#sec01 .btn_bx .con_w .txt_bx .txt1 {font-size: 26px; color: #111111; line-height: 36px; font-weight: 700; word-break: keep-all;}
#sec01 .btn_bx .con_w .txt_bx .txt2 {margin-top: 4px;}
#sec01 .btn_bx .con_w .txt_bx .txt2 li {font-size: 18px; color: #666666; line-height: 26px; word-break: keep-all; position: relative; padding-left: 11px;}
#sec01 .btn_bx .con_w .txt_bx .txt2 li::before {content: ''; width: 3px; height: 3px; background-color: #666666; position: absolute; left: 0; top: 11px; border-radius: 50%;}
#sec01 .btn_bx .con_w .btn {position: absolute; bottom: 40px; right: 40px; border-radius: 50%;}
#sec01 .btn_bx .con_w .btn span {display: block; width: 50px; height: 50px; background-color: #174a97; border-radius: 50%; font-size: 0; position: relative;}
#sec01 .btn_bx .con_w .btn span::before {content: ''; width: 15px; height: 14px; background: url(../images/icon/more1.png) no-repeat center; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}



/* sec02 */
#sec02 {padding: 0 0 120px}
#sec02 .con_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; display: flex; flex-flow: wrap; box-shadow: 0 10px 20px rgba(0,0,0,0.2);}
/*#sec02 .con_bx .l_bx {width: 50%; box-sizing: border-box; display:flex; justify-content:left; align-items:center; table-layout:fixed;}
#sec02 .con_bx .l_bx .txt_bx {width: 100%; padding-right: 30px;}
#sec02 .con_bx .l_bx .txt_bx .txt1 {font-size: 60px; color: #174a97; line-height: 70px; font-weight: 700; word-break: keep-all;}
#sec02 .con_bx .l_bx .txt_bx .txt2 {font-size: 30px; line-height: 40px; color: #111111; font-weight: 700; word-break: keep-all; margin-top: 39px;}
#sec02 .con_bx .l_bx .txt_bx .txt3 {font-size: 18px; line-height: 28px; color: #444444; word-break: keep-all; margin-top: 28px; max-width: 450px;}*/
#sec02 .con_bx .l_bx {width: 50%; box-sizing: border-box; background: url(../images/main/sec02_bg.jpg) no-repeat center; background-size: cover; padding: 30px;}
#sec02 .con_bx .l_bx .ttl {position: relative; margin-bottom: 30px;}
#sec02 .con_bx .l_bx .ttl strong {display: inline-block; line-height: 50px; font-size: 36px; color: #ffffff; font-weight: 700;}
#sec02 .con_bx .l_bx .ttl a {position: absolute; top: 0; right: 0; width: 50px; height: 50px; border-radius: 50%; background: url(../images/icon/more1.png) no-repeat center rgba(255,255,255,.2); font-size: 0;}
#sec02 .con_bx .l_bx .list_bx {background-color: #fff; position: relative; height: calc(100% - 80px); padding: 33px 30px; box-sizing: border-box;}
#sec02 .con_bx .l_bx .list_bx ul li {margin-bottom: 24px;}
#sec02 .con_bx .l_bx .list_bx ul li:last-child {margin-bottom: 0;}
#sec02 .con_bx .l_bx .list_bx ul li a {overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; font-size: 20px; color: #222222; font-weight: 700; letter-spacing: -0.05em; display: block;}
#sec02 .con_bx .l_bx .list_bx .no_data {height: 216px; font-size: 20px; color: #666; word-break: keep-all; letter-spacing: -0.05em; text-align: center; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec02 .con_bx .r_bx {width: 50%; box-sizing: border-box; overflow: hidden; position: relative;}
#sec02 .con_bx .r_bx .img_bx {overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.2); position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#sec02 .con_bx .r_bx .img_bx img {width: 100%;}
#sec02 .con_bx .r_bx .img_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}



/* sec03 */
#sec03 {background: url(../images/main/sec03_bg.jpg) no-repeat center; background-size: cover; padding: 80px 0;}
#sec03 .con_bx {max-width: 1230px; width: calc(100% - 10px); margin: 0 auto; box-sizing: border-box;}
#sec03 .con_bx .ttl_bx {position: relative; padding: 0 135px 0 15px; min-height: 50px; margin-bottom: 30px;}
#sec03 .con_bx .ttl_bx .ttl {display: block; font-size: 36px; color: #ffffff; font-weight: 700; line-height: 50px; word-break: keep-all;}
#sec03 .con_bx .ttl_bx .arrow_bx {position: absolute; right: 15px; top: 0; font-size: 0;}
#sec03 .con_bx .ttl_bx .arrow_bx > div {display: inline-block; width: 50px; height: 50px; border-radius: 50%; position: relative; background-color: rgba(255,255,255,.2); cursor: pointer;}
#sec03 .con_bx .ttl_bx .arrow_bx > div::before {content: ''; width: 18px; height: 18px; background: url(../images/icon/arrow6.png) no-repeat center; position: absolute; left: 50%; top: 50%; margin-top: -8px; margin-left: -9px;}
#sec03 .con_bx .ttl_bx .arrow_bx > #arrow_next3 {margin-left: 10px;}
#sec03 .con_bx .ttl_bx .arrow_bx > #arrow_next3::before {transform: rotate(180deg);}
#sec03 .con_bx .slide_bx {font-size: 0;}
#sec03 .con_bx .slide_bx .slick-slide {padding: 0 15px;}
#sec03 .con_bx .slide_bx .txt_bx {display: block; background-color: #ffffff; padding: 34px 30px 32px;}
#sec03 .con_bx .slide_bx .txt_bx .subject {font-size: 20px; color: #222222; line-height: 30px; font-weight: 700; word-break: keep-all; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box;}
#sec03 .con_bx .slide_bx .txt_bx .info {margin-top: 23px;}
#sec03 .con_bx .slide_bx .txt_bx .info p {display: inline-block; font-size: 16px; color: #aaaaaa; word-break: keep-all; margin-right: 20px; position: relative;}
#sec03 .con_bx .slide_bx .txt_bx .info p:last-child {margin-right: 0;}
#sec03 .con_bx .slide_bx .txt_bx .info p::before {content: ''; width: 1px; height: 10px; background-color: #ddd; position: absolute; right: -10px; top: 50%; margin-top: -5px;}
#sec03 .con_bx .slide_bx .txt_bx .info p:last-child::before {display: none;}



/* PC */
@media all and (min-width:1025px){
    #sec01 .btn_bx .con_w .bg {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
    #sec01 .btn_bx .con_w.on .bg {transform: scale(1.1);}
    #sec01 .btn_bx .con_w .btn::before {content: ''; width: calc(100%); height: calc(100%); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background-color: rgba(23,74,151,.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec01 .btn_bx .con_w .btn:hover::before {width: calc(100% + 40px); height: calc(100% + 40px);}
    #sec01 .btn_bx .con_w .btn::after {content: ''; width: calc(100%); height: calc(100%); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background-color: rgba(23,74,151,.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec01 .btn_bx .con_w .btn:hover::after {width: calc(100% + 20px); height: calc(100% + 20px);}
    #sec01 .btn_bx .con_w .btn span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec01 .btn_bx .con_w .btn:hover span::before {transform: translate(-50%, -50%)rotate(180deg); -webkit-transform: translate(-50%, -50%)rotate(90deg)}
	
	
	
	/* sec02 */
	#sec02 .con_bx .l_bx .ttl a {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
	#sec02 .con_bx .l_bx .ttl a:hover {transform: rotate(90deg);}
	#sec02 .con_bx .l_bx .list_bx ul li a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#sec02 .con_bx .l_bx .list_bx ul li a:hover {color: #174a97; text-decoration: underline;}



    /* sec03 */
    #sec03 .con_bx .ttl_bx .arrow_bx > div {-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
    #sec03 .con_bx .ttl_bx .arrow_bx > div:hover {background-color: rgba(255,255,255,.5);}
    #sec03 .con_bx .slide_bx .txt_bx .subject {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #sec03 .con_bx .slide_bx .txt_bx:hover .subject {text-decoration: underline; text-underline-offset : 4px; color: #174a97;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	#main #container {padding-top: 70px;}
    
    
    
    /* sec01 */
    #sec01 {padding-bottom: 60px;}
    #sec01 .slide_bx .con_bx .txt_bx {height: calc(100% - 100px);}
    #sec01 .slide_bx .con_bx .txt_bx .txt_w .txt1 {font-size: 15px; line-height: 23px; margin-bottom: 13px;}
    #sec01 .slide_bx .con_bx .txt_bx .txt_w .txt2 {font-size: 28px; line-height: 38px;}
    #sec01 .slide_bx .con_bx .txt_bx .txt_w .txt3 {font-size: 12px; line-height: 17px; margin-top: 13px;}
    
    #sec01 .btn_bx {margin-top: -100px;}
    #sec01 .btn_bx .con_w {padding: 20px 20px; min-height: 280px; box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
    #sec01 .btn_bx .con_w .txt_bx .txt1 {font-size: 15px; line-height: 23px;}
    #sec01 .btn_bx .con_w .txt_bx .txt2 li {font-size: 12px; line-height: 19px; padding-left: 7px;}
    #sec01 .btn_bx .con_w .txt_bx .txt2 li::before {width: 2px; height: 2px; top: 8px;}
    #sec01 .btn_bx .con_w .btn {right: 20px; bottom: 20px;}
    #sec01 .btn_bx .con_w .btn span {width: 40px; height: 40px;}
    #sec01 .btn_bx .con_w .btn span::before {background-size: 13px auto;}



    /* sec02 */
    #sec02 {padding-bottom: 60px;}
    #sec02 .con_bx .l_bx .txt_bx .txt1 {font-size: 28px; line-height: 33px;}
    #sec02 .con_bx .l_bx .txt_bx .txt2 {margin-top: 15px; font-size: 15px; line-height: 23px;}
    #sec02 .con_bx .l_bx .txt_bx .txt3 {margin-top: 10px; font-size: 12px; line-height: 19px; max-width: 300px;}
	#sec02 .con_bx .l_bx {padding: 20px;}
	#sec02 .con_bx .l_bx .ttl {margin-bottom: 20px;}
	#sec02 .con_bx .l_bx .ttl strong {font-size: 20px; line-height: 40px;}
	#sec02 .con_bx .l_bx .ttl a {width: 40px; height: 40px; background-size: 15px auto;}
	#sec02 .con_bx .l_bx .list_bx {height: calc(100% - 60px); padding: 25px 20px;}
	#sec02 .con_bx .l_bx .list_bx ul li {margin-bottom: 10px;}
	#sec02 .con_bx .l_bx .list_bx ul li a {font-size: 12px;}
	#sec02 .con_bx .l_bx .list_bx .no_data {height: 110px; font-size: 12px;}
    #sec02 .con_bx .r_bx .img_bx {box-shadow: 0 5px 10px rgba(0,0,0,0.2);}



    /* sec03 */
    #sec03 {padding: 60px 0;}
    #sec03 .con_bx .ttl_bx {min-height: 35px; padding: 0 120px 0 15px; margin-bottom: 15px;}
    #sec03 .con_bx .ttl_bx .ttl {font-size: 28px; line-height: 35px;}
    #sec03 .con_bx .ttl_bx .arrow_bx > div {width: 35px; height: 35px;}
    #sec03 .con_bx .ttl_bx .arrow_bx > div::before {background-size: 12px auto;}
    #sec03 .con_bx .ttl_bx .arrow_bx > #arrow_next3 {margin-left: 5px;}
    #sec03 .con_bx .slide_bx .txt_bx {padding: 25px 20px 22px;}
    #sec03 .con_bx .slide_bx .txt_bx .subject {font-size: 15px; line-height: 23px;}
    #sec03 .con_bx .slide_bx .txt_bx .info {margin-top: 12px;}
    #sec03 .con_bx .slide_bx .txt_bx .info p {font-size: 12px; margin-right: 15px;}
    #sec03 .con_bx .slide_bx .txt_bx .info p::before {right: -8px; height: 8px; margin-top: -4px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* sec01 */
    #sec01 .btn_bx .con_w:nth-child(n) {width: 100%; margin-right: 0; margin-top: 20px; min-height: 140px;}
    #sec01 .btn_bx .con_w:first-child {margin-top: 0;}



    /* sec02 */
    #sec02 .con_bx .l_bx {width: 100%;}
    #sec02 .con_bx .l_bx .txt_bx {padding-right: 0; text-align: center;}
    #sec02 .con_bx .l_bx .txt_bx .txt3 {margin: 10px auto 0;}
    /*#sec02 .con_bx .r_bx {width: 100%; margin-top: 20px;}*/
    #sec02 .con_bx .r_bx {width: 100%; padding-bottom: 71%;}
}