@charset "utf-8";

/* 공통 */
#main #container {overflow-x: hidden; padding-top: 190px;}
#main .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
#main .ttl01 {text-align: center; margin-bottom: 53px;}
#main .ttl01 strong {display: block; font-size: 40px; color: #111111; font-weight: 700; word-break: keep-all;}
#main .btn01 {display: inline-block; max-width: 240px; width: 100%; text-align: center; background-color: #111111; font-size: 18px; color: #ffffff; font-weight: 500;}
#main .btn01 span {display: inline-block; line-height: 60px; position: relative; padding-right: 20px;}
#main .btn01 span::before {content: ''; width: 14px; height: 14px; background: url(../images/icon/more1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -7px;}



/* sec01 */
#sec01 {position: relative; overflow: hidden;}
#sec01 .slide_bx {font-size: 0;}
#sec01 .slide_bx .con_bx {position: relative; overflow: hidden;}
#sec01 .slide_bx .img_bx {height: 420px; 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 .con_bx.on .img_bx div {-webkit-transition: all 5s; -moz-transition: all 5s; transition: all 5s; transform: scale(1);}
#sec01 .slide_bx .txt_bx {position: absolute; max-width: 1200px; width: calc(100% - 40px); height: 100%; top: 0; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); display:flex; justify-content:left; align-items:center; table-layout:fixed;}
#sec01 .slide_bx .txt_bx .txt_w {width: calc(100% - 180px); box-sizing: border-box;}
#sec01 .slide_bx .txt_bx .txt_w .txt1 {font-size: 60px; color: #ffffff; font-weight: 700; line-height: 70px; word-break: keep-all;}
#sec01 .slide_bx .txt_bx .txt_w .txt2 {font-size: 30px; color: #ffffff; font-weight: 500; line-height: 45px; word-break: keep-all; margin-top: 10px; transition-delay: 0.3s;}
#sec01 .slide_bx .txt_bx .txt_w div {-webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; transform: translate(0, 50px); opacity: 0;}
#sec01 .slide_bx .con_bx.on .txt_bx .txt_w div {opacity: 1; transform: translate(0, 0);}
#sec01 .slide_bx .slick-dots {position: absolute; z-index: 1; max-width: 1200px; width: calc(100% - 40px); box-sizing: border-box; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
#sec01 .slide_bx .slick-dots li {border: 1px solid #dddddd; border-bottom: none; width: 180px; box-sizing: border-box; margin: 0 0 0 auto; position: relative;}
#sec01 .slide_bx .slick-dots li:last-child {border-bottom: 1px solid #dddddd;}
#sec01 .slide_bx .slick-dots li button {background-color: #fff; width: 100%; height: 59px; display: block; border-color: transparent; outline: none; font-size: 15px; color: #111111; font-weight: 500; line-height: 22px; padding: 0 10px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
#sec01 .slide_bx .slick-dots li.slick-active button {color: #ee3424;}
#sec01 .slide_bx .slick-dots li button::before {content: ''; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #ee3424; position: absolute; left: -1px; top: -1px; box-sizing: border-box; z-index: 1; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
#sec01 .slide_bx .slick-dots li.slick-active button::before {opacity: 1;}

#sec01 .t_slide_bx {position: absolute; max-width: 1200px; width: calc(100% - 40px); top: 50%; left: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); z-index: 1;}
#sec01 .t_slide_bx > ul {position: absolute; width: calc(100% - 180px); left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);}
#sec01 .t_slide_bx .txt_bx .txt_w {box-sizing: border-box; padding: 50px 0;}
#sec01 .t_slide_bx .txt_bx .txt_w .txt1 {font-size: 60px; color: #ffffff; font-weight: 700; line-height: 70px; word-break: keep-all;}
#sec01 .t_slide_bx .txt_bx .txt_w .txt2 {font-size: 30px; color: #ffffff; font-weight: 500; line-height: 45px; word-break: keep-all; margin-top: 10px; transition-delay: 0.3s;}
#sec01 .t_slide_bx .txt_bx .txt_w div {-webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; transform: translate(0, 50px); opacity: 0;}
#sec01 .t_slide_bx .con_bx.on .txt_bx .txt_w div {opacity: 1; transform: translate(0, 0);}



/* sec02 */
#sec02 {padding: 93px 0 100px;}
#sec02 #board .list01 {border-top: none;}
#sec02 #board .list01 ul {padding: 0;}
#sec02 .btn_bx {text-align: center; padding-top: 39px;}



/* sec03 */
#sec03 {background-color: #f6f6f6; padding: 93px 0 100px;}
#sec03 .ttl01 {padding: 0 20px;}
#sec03 .list_bx .slick-slide {padding: 0 20px; width: 270px;}
#sec03 .list_bx ul li a {display: block; height: 100%; position: relative; box-sizing: border-box; border: 1px solid #eeeeee; background-color: #ffffff; padding-bottom: 24px;}
#sec03 .list_bx .img_bx {position: relative; overflow: hidden; padding-bottom: 74.42%;}
#sec03 .list_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 .list_bx .txt_bx {text-align: center; margin-top: 24px; padding: 0 14px;}
#sec03 .list_bx .txt_bx .txt1 {font-size: 18px; color: #111111; line-height: 25px; font-weight: 700; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box;}
#sec03 .list_bx .txt_bx .txt2 {font-size: 0; margin-top: 16px;}
#sec03 .list_bx .txt_bx .txt2 p {display: inline-block; margin: 0 3px 6px; font-size: 12px; color: #666666; background-color: #eeeeee; padding: 8px 20px; border-radius: 100px;}
#sec03 .btn_bx {padding: 39px 20px 0; text-align: center;}



/* sec04 */
#sec04 {padding: 100px 0;}
#sec04 .con_bx {display: flex; flex-flow: wrap; min-height: 280px; box-sizing: border-box;}
#sec04 .con_bx .l_bx {width: calc(50% - 20px); margin-right: 40px; box-sizing: border-box; border: 1px solid #eee; padding: 15px 30px; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec04 .con_bx .l_bx .list_bx {width: 100%;}
#sec04 .con_bx .l_bx .list_bx .ttl {margin-bottom: 34px;}
#sec04 .con_bx .l_bx .list_bx .ttl strong {display: inline-block; font-size: 26px; color: #111111; font-weight: 700;}
#sec04 .con_bx .l_bx .list_bx .ttl a {float: right; display: inline-block; font-size: 16px; color: #aaaaaa; font-weight: 500; padding-right: 18px; position: relative; line-height: 31px;}
#sec04 .con_bx .l_bx .list_bx .ttl a::before {content: ''; width: 14px; height: 14px; background: url(../images/icon/more2.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -7px;}
#sec04 .con_bx .l_bx .list_bx .list_w li {margin-bottom: 17px;}
#sec04 .con_bx .l_bx .list_bx .list_w li:last-child {margin-bottom: 0;}
#sec04 .con_bx .l_bx .list_bx .list_w li a {display: block; position: relative; padding-right: 130px;}
#sec04 .con_bx .l_bx .list_bx .list_w li a .subject {font-size: 18px; color: #111111; letter-spacing: -0.03em; font-weight: 500; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
#sec04 .con_bx .l_bx .list_bx .list_w li a .date {position: absolute; right: 0; top: 0; font-size: 14px; color: #666666; letter-spacing: -0.03em; line-height: 21px;}
#sec04 .con_bx .l_bx .list_bx .no_data {font-size: 18px; text-align: center; padding: 70px 0; color: #bbb;}
#sec04 .con_bx .r_bx {width: calc(50% - 20px); box-sizing: border-box; border: 1px solid #dddddd; position: relative; overflow: hidden;}
#sec04 .con_bx .r_bx .img_w {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}


/* PC */
@media all and (min-width:1025px){
    /* 공통 */
    #main .btn01 span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #main .btn01:hover span::before {transform: rotate(90deg);}
    
    
    
    /* sec01 */
    #sec01 .slide_bx .slick-dots li button:hover {color: #ee3424;}
    
    
    
    /* sec03 */
    #sec03 .list_bx ul li a {-webkit-transition: border 0.3s; -moz-transition: border 0.3s; transition: border 0.3s;}
    #sec03 .list_bx ul li a:hover {border-color: #ee3424;}
    #sec03 .list_bx .img_bx div {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
    #sec03 .list_bx ul li a:hover .img_bx div {transform: scale(1.1);}



    /* sec04 */
    #sec04 .con_bx .l_bx .list_bx .ttl a::before {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
    #sec04 .con_bx .l_bx .list_bx .ttl a:hover::before {transform: rotate(90deg);}
    #sec04 .con_bx .l_bx .list_bx .list_w li a .subject {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #sec04 .con_bx .l_bx .list_bx .list_w li a:hover .subject {color: #ee3424;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
    /* 공통 */
    #main #container {padding-top: 121px;}
    #main .ttl01 {margin-bottom: 26px;}
    #main .ttl01 strong {font-size: 25px;}
    #main .btn01 {font-size: 13px; max-width: 150px;}
    #main .btn01 span {line-height: 45px; padding-right: 14px;}
    #main .btn01 span::before {width: 9px; background-size: 9px auto;}
    
    
    
    /* sec01 */
    #sec01 .slide_bx .img_bx {height: 300px;}
    #sec01 .slide_bx .txt_bx .txt_w {width: calc(100% - 150px);}
    #sec01 .slide_bx .txt_bx .txt_w .txt1 {font-size: 30px; line-height: 35px;}
    #sec01 .slide_bx .txt_bx .txt_w .txt2 {margin-top: 5px; font-size: 15px; line-height: 25px;}
    #sec01 .slide_bx .txt_bx .txt_w div {transform: translate(0, 30px)}
    #sec01 .slide_bx .slick-dots li {width: 150px;}
    #sec01 .slide_bx .slick-dots li button {font-size: 13px; height: 40px; line-height: 18px;}
    
    #sec01 .t_slide_bx > ul {width: calc(100% - 150px);}
    #sec01 .t_slide_bx .txt_bx .txt_w {padding: 30px 0;}
    #sec01 .t_slide_bx .txt_bx .txt_w .txt1 {font-size: 30px; line-height: 35px;}
    #sec01 .t_slide_bx .txt_bx .txt_w .txt2 {margin-top: 5px; font-size: 15px; line-height: 25px;}
    #sec01 .t_slide_bx .txt_bx .txt_w div {transform: translate(0, 30px)}



    /* sec02 */
    #sec02 {padding: 46px 0 50px;}
    #sec02 .btn_bx {padding-top: 30px;}



    /* sec03 */
    #sec03 {padding: 46px 0 50px;}
    #sec03 .list_bx .slick-slide {width: 155px; padding: 0 5px;}
    #sec03 .list_bx .txt_bx {padding: 0 7px; margin-top: 12px;}
    #sec03 .list_bx .txt_bx .txt1 {font-size: 13px; line-height: 18px;}
    #sec03 .list_bx .txt_bx .txt2 {margin-top: 6px;}
    #sec03 .list_bx .txt_bx .txt2 p {padding: 4px 10px; font-size: 10px; line-height: 13px; margin: 0 2px 5px;}
    #sec03 .btn_bx {padding: 30px 20px 0; text-align: center;}



    /* sec04 */
    #sec04 {padding: 50px 0;}
    #sec04 .con_bx {min-height: 180px;}
    #sec04 .con_bx .l_bx {padding: 15px; width: calc(50% - 5px); margin-right: 10px;}
    #sec04 .con_bx .l_bx .list_bx .ttl {margin-bottom: 15px;}
    #sec04 .con_bx .l_bx .list_bx .ttl strong {font-size: 20px;}
    #sec04 .con_bx .l_bx .list_bx .ttl a {font-size: 12px; padding-right: 11px; line-height: 24px;}
    #sec04 .con_bx .l_bx .list_bx .ttl a::before {width: 7px; background-size: 7px auto;}
    #sec04 .con_bx .l_bx .list_bx .list_w li {margin-bottom: 14px;}
    #sec04 .con_bx .l_bx .list_bx .list_w li a {padding-right: 100px;}
    #sec04 .con_bx .l_bx .list_bx .list_w li a .subject {font-size: 13px;}
    #sec04 .con_bx .l_bx .list_bx .list_w li a .date {font-size: 13px; line-height: 15px;}
    #sec04 .con_bx .l_bx .list_bx .no_data {font-size: 12px; padding: 40px 0;}
    #sec04 .con_bx .r_bx {width: calc(50% - 5px);}
}

/* 모바일 */
@media all and (max-width:768px){
    /* sec01 */
    #sec01 .slide_bx .img_bx {height: 210px;}
    #sec01 .slide_bx .txt_bx .txt_w {width: 100%;}
    #sec01 .slide_bx .slick-dots {transform: none; -webkit-transform: none; left: 0; width: 100%; text-align: center; top: auto; bottom: 23px;}
    #sec01 .slide_bx .slick-dots li {width: auto; display: inline-block; margin-right: 10px; border: none!important;}
    #sec01 .slide_bx .slick-dots li:last-child {margin-right: 0;}
    #sec01 .slide_bx .slick-dots li button {font-size: 0; width: 6px; height: 6px; border: 3px solid transparent; background-color: rgba(255,255,255,.6); border-radius: 50%; box-sizing: border-box; padding: 0;}
    #sec01 .slide_bx .slick-dots li.slick-active button {background-color: transparent;}
    #sec01 .slide_bx .slick-dots li button::before {width: 12px; height: 12px; box-sizing: border-box; border: 3px solid #fff; position: absolute; left: -3px; top: -3px; border-radius: 50%;}
    
    #sec01 .t_slide_bx > ul {width: 100%;}



    /* sec04 */
    #sec04 .con_bx {min-height: auto;}
    #sec04 .con_bx .l_bx {width: 100%; margin-right: 0; margin-bottom: 10px; min-height: 180px;}
    #sec04 .con_bx .r_bx {width: 100%; padding-bottom: 48%;}
}