@charset "utf-8";

/*
font-family: "Open Sans", sans-serif;
*/



/* 공통 */
#main section .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
#main section .btn01 {display: inline-block; max-width: 160px; width: 100%; box-sizing: border-box; padding: 0 20px; border-radius: 25px; background-color: rgba(255,255,255,0.2); font-size: 17px; color: #ffffff; letter-spacing: -0.05em;}
#main section .btn01 span {height: 50px; display:flex; justify-content:left; align-items:center; table-layout:fixed; position: relative;}
#main section .btn01 span::before {content: ''; width: 8px; height: 12px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -6px;}



/* sec01 */
#sec01 {position: relative; overflow: hidden; margin-top: 100px;}
#sec01 .slide_bx .img_bx {height: 640px; overflow: hidden; position: relative;}
#sec01 .slide_bx .img_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(1.2);}
#sec01 .slide_bx .img_bx.aos-animate div {-webkit-transition: transform 5s; -moz-transition: transform 5s; transition: transform 5s; transform: scale(1);}
#sec01 .txt_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec01 .txt_bx .txt_w {width: 100%; text-align: center; padding: 0 20px;}
#sec01 .txt_bx .txt_w .txt1 {font-size: 30px; color: #ffffff; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all; line-height: 40px;}
#sec01 .txt_bx .txt_w .txt2 {font-family: "Open Sans", sans-serif; font-size: 50px; color: #ffffff; font-weight: 700; line-height: 60px; word-break: keep-all; margin-top: 5px;}
#sec01 .txt_bx .txt_w .txt3 {font-size: 20px; color: #ffffff; line-height: 30px; letter-spacing: -0.05em; word-break: keep-all; margin-top: 23px;}



/* sec02 */
#sec02 {padding: 80px 0;}
#sec02 .inner_bx > div {margin-bottom: 20px;}
#sec02 .inner_bx > div:last-child {margin-bottom: 0;}
#sec02 .con1 {display: flex; flex-flow: wrap;}
#sec02 .con1 .con_w {width: calc(50% - 10px); margin-right: 20px; border: 1px solid #dddddd; border-radius: 20px; overflow: hidden; box-sizing: border-box; padding: 36px 40px 35px;}
#sec02 .con1 .con_w:nth-child(2n) {margin-right: 0;}
#sec02 .con1 .con_w .c_ttl {position: relative; box-sizing: border-box; min-height: 30px; margin-bottom: 29px;}
#sec02 .con1 .con_w .c_ttl::before {content: ''; width: 100%; height: 1px; background-color: #eeeeee; position: absolute; left: 0; top: 50%;}
#sec02 .con1 .con_w .c_ttl strong {display: inline-block; font-size: 24px; line-height: 30px; color: #111111; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all; background-color: #fff; padding-right: 35px; position: relative; z-index: 1;}
#sec02 .con1 .con_w .c_ttl .more {display: inline-block; float: right; height: 30px; width: 25px; background-color: #fff; font-size: 0; position: relative;}
#sec02 .con1 .con_w .c_ttl .more::before {content: ''; width: 15px; height: 15px; background: url(../images/icon/more1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -7.5px;}
#sec02 .con1 .con_w .list_bx li {margin-bottom: 11px;}
#sec02 .con1 .con_w .list_bx li:last-child {margin-bottom: 0;}
#sec02 .con1 .con_w .list_bx li a {display: block; position: relative;}
#sec02 .con1 .con_w .list_bx li a .subject {-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box; width: calc(100% - 120px); box-sizing: border-box;}
#sec02 .con1 .con_w .list_bx li a .subject span {font-size: 17px; line-height: 28px; color: #333333; font-weight: 600; letter-spacing: -0.05em; word-break: keep-all;}
#sec02 .con1 .con_w .list_bx li a .date {position: absolute; right: 0; top: 0; font-family: "Open Sans", sans-serif; font-size: 17px; color: #aaaaaa; line-height: 28px;}
#sec02 .con1 .con_w .no_data {position: relative; height: calc(100% - 59px); display:flex; justify-content:center; align-items:center; table-layout:fixed; font-size: 17px; color: #aaaaaa; letter-spacing: -0.05em; word-break: keep-all;}

#sec02 .con2 {display: flex; flex-flow: wrap;}
#sec02 .con2 .l_bx {width: /*calc(72.5% - 10px)*/calc(100% - 340px); margin-right: 20px; box-sizing: border-box; border-radius: 20px; background-image: linear-gradient(0deg, #123872, #0b0e4c); padding: 36px 40px 40px; position: relative;}
#sec02 .con2 .l_bx::before {content: ''; width: 229px; height: 198px; background: url(../images/main/sec2_con2_icon1.png) no-repeat; position: absolute; right: 75px; bottom: 40px;}
#sec02 .con2 .r_bx {width: /*calc(27.5% - 10px)*/320px; box-sizing: border-box; border-radius: 20px; background-image: linear-gradient(0deg, #13b2c8, #1498c9); padding: 36px 40px 34px;}
#sec02 .con2 .txt1 {font-size: 24px; color: #ffffff; letter-spacing: -0.05em; font-weight: 700; word-break: keep-all; line-height: 30px;}
#sec02 .con2 .txt2 {font-size: 17px; color: #ffffff; line-height: 30px; letter-spacing: -0.05em; word-break: keep-all;}
#sec02 .con2 .l_bx .txt2 {margin-top: 40px; width: calc(100% - 280px);}
#sec02 .con2 .r_bx .txt2 {margin-top: 4px;}
#sec02 .con2 .txt3 {font-family: "Open Sans", sans-serif; font-size: 28px; color: #ffffff; font-weight: 700; line-height: 40px;}
#sec02 .con2 .r_bx .txt3 {margin-top: 15px;}
#sec02 .con2 .l_bx .btn {margin-top: 23px;}
#sec02 .con2 .r_bx .logo {display: block; max-width: 100%; margin-top: 50px;}



/* sec03 */
#sec03 {border-top: 1px solid #ddd; padding: 40px 0;}
#sec03 .slide_bx {padding: 0 50px; position: relative; font-size: 0;}
#sec03 .slide_bx .slick-slide {padding: 0 10px;}
#sec03 .slide_bx .slick-arrow {position: absolute; z-index: 1; font-size: 0; padding: 0; margin: 0; top: 50%; margin-top: -17px; width: 20px; height: 34px; background: url(../images/icon/arrow2.png) no-repeat center;}
#sec03 .slide_bx .slick-prev {left: -50px;}
#sec03 .slide_bx .slick-next {right: -50px; transform: rotate(180deg);}
#sec03 .slide_bx .img_bx {padding-bottom: 50%; display: block; overflow: hidden; position: relative;}
#sec03 .slide_bx .img_bx img {max-height: 100%; max-width: 100%; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}


/* PC */
@media all and (min-width:1025px){
    /* 공통 */
    #main section .btn01 {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #main section .btn01:hover {box-shadow: 0 0px 20px rgba(255,255,255,0.2);}
    #main section .btn01 span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #main section .btn01:hover span::before {transform: translate(7px, 0);}
    
    
    
    /* sec02 */
    #sec02 .con1 .con_w .c_ttl .more::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec02 .con1 .con_w .c_ttl .more:hover::before {background: url(../images/icon/more2.png) no-repeat center; transform: rotate(90deg);}
    #sec02 .con1 .con_w .list_bx li a .subject span {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #sec02 .con1 .con_w .list_bx li a:hover .subject span {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset : 4px; color: #1fa6c9;}
    
    
    
    /* sec03 */
    #sec03 .slide_bx .slick-arrow {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec03 .slide_bx .slick-arrow:hover {background: url(../images/icon/arrow3.png) no-repeat center;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
    /* 공통 */
    #main section .btn01 {max-width: 110px; font-size: 12px; padding: 0 15px;}
    #main section .btn01 span {height: 35px;}
    #main section .btn01 span::before {width: 6px; background-size: 6px auto;}
    
    
    
	/* sec01 */
    #sec01 {margin-top: 70px;}
    #sec01 .slide_bx .img_bx {height: 490px;}
    #sec01 .txt_bx .txt_w .txt1 {font-size: 15px; line-height: 20px;}
    #sec01 .txt_bx .txt_w .txt2 {margin-top: 2px; font-size: 32px; line-height: 32px;}
    #sec01 .txt_bx .txt_w .txt3 {margin-top: 23px; font-size: 15px; line-height: 20px;}


    
    /* sec02 */
    #sec02 {padding: 30px 0;}
    #sec02 .inner_bx > div {margin-bottom: 10px;}
    #sec02 .con1 .con_w {border-radius: 10px; width: calc(50% - 5px); margin-right: 10px; padding: 13px 20px 14px;}
    #sec02 .con1 .con_w .c_ttl {margin-bottom: 5px;}
    #sec02 .con1 .con_w .c_ttl strong {font-size: 16px; line-height: 30px; padding-right: 10px;}
    #sec02 .con1 .con_w .c_ttl .more {width: 13px;}
    #sec02 .con1 .con_w .c_ttl .more::before {width: 8px; height: 8px; background-size: 8px 8px!important; margin-top: -4px;}
    #sec02 .con1 .con_w .list_bx li {margin-bottom: 5px;}
    #sec02 .con1 .con_w .list_bx li a .subject {width: calc(100% - 80px);}
    #sec02 .con1 .con_w .list_bx li a .subject span {font-size: 11px; line-height: 20px;}
    #sec02 .con1 .con_w .list_bx li a .date {font-size: 11px; line-height: 20px;}
    #sec02 .con1 .con_w .no_data {height: calc(100% - 35px); font-size: 11px;}
    
    #sec02 .con2 .l_bx {border-radius: 10px; padding: 17px 20px 20px; width: calc(100% - 220px); margin-right: 10px;}
    #sec02 .con2 .l_bx::before {width: 115px;height: 99px; background-size: 115px 99px; right: 20px; bottom: 30px;}
    #sec02 .con2 .r_bx {border-radius: 10px; padding: 17px 20px 18px; width: 210px;}
    #sec02 .con2 .txt1 {font-size: 16px; line-height: 21px;}
    #sec02 .con2 .txt2 {font-size: 12px; line-height: 17px;}
    #sec02 .con2 .l_bx .txt2 {margin-top: 23px; width: calc(100% - 120px);}
    #sec02 .con2 .r_bx .txt2 {margin-top: 3px;}
    #sec02 .con2 .txt3 {font-size: 20px; line-height: 25px;}
    #sec02 .con2 .r_bx .txt3 {margin-top: 14px;}
    #sec02 .con2 .l_bx .btn {margin-top: 11px;}
    #sec02 .con2 .r_bx .logo {margin-top: 27px; max-width: 76px; width: 100%;}


    
    /* sec03 */
    #sec03 {padding: 20px 0;}
    #sec03 .slide_bx {padding: 0 30px;}
    #sec03 .slide_bx .slick-slide {padding: 0 5px;}
    #sec03 .slide_bx .slick-arrow {background-size: 15px auto; background-position: left center; width: 15px;}
    #sec03 .slide_bx .slick-prev {left: -30px;}
    #sec03 .slide_bx .slick-next {right: -30px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* sec02 */
    #sec02 .con1 .con_w:nth-child(n) {width: 100%; margin-right: 0; margin-bottom: 10px;}
    #sec02 .con1 .con_w:last-child {margin-bottom: 0;}
    #sec02 .con1 .con_w .no_data {height: 95px;}
    
    #sec02 .con2 > div {margin-bottom: 10px;}
    #sec02 .con2 > div:last-child {margin-bottom: 0;}
    #sec02 .con2 .l_bx {width: 100%; margin-right: 0;}
    #sec02 .con2 .l_bx::before {bottom: 20px;}
    #sec02 .con2 .l_bx .txt2 {width: calc(100% - 90px);}
    #sec02 .con2 .l_bx .txt2 span {display: inline-block;}
    #sec02 .con2 .r_bx {width: 100%;}


    
    /* sec03 */
    #sec03 .slide_bx {padding: 0; width: calc(100% + 10px); left: -5px;}
    #sec03 .slide_bx .slick-arrow {display: none!important;}
}