@charset "utf-8";



/* sec01 */
#sec01 {position: relative; overflow: hidden; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec01 .bg_bx {position: absolute; width: 100%; height: calc(100% - 100px); bottom: 0; left: 0; background: url(../images/main/sec1_01.jpg) no-repeat center; background-size: cover; transform: scale(1.2);}
#sec01.aos-animate .bg_bx {-webkit-transition: transform 5s; -moz-transition: transform 5s; transition: transform 5s; transform: scale(1);}
#sec01 .txt_bx {width: 100%; text-align: center; max-width: 586px; position: relative; z-index: 1;}
#sec01 .txt_bx .txt1 {text-align: left;}
#sec01 .txt_bx .txt1 span {display: inline-block; font-size: 50px; color: #ffffff; font-weight: 500; letter-spacing: -0.02em; word-break: keep-all;}
#sec01 .txt_bx .txt2 {text-align: right; margin-top: -1px;}
#sec01 .txt_bx .txt2 span {display: inline-block; font-size: 80px; color: #ffffff; font-weight: 700; letter-spacing: -0.02em; word-break: keep-all;}
#sec01 .scroll_bx {width: 70px; height: 70px; border-radius: 50%; position: absolute; bottom: 60px; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); background: rgba(0,0,0,.6); z-index: 1;}
#sec01 .scroll_bx .icon {width: 20px; height: 34px; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 17px; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
#sec01 .scroll_bx .icon::before {content: ''; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -3px; top: 6px; animation: updown 1.8s ease infinite;}
@-webkit-keyframes updown {
	0% {
		transform: translate(0, 0);
	}
	60% {
		transform: translate(0, 14px);
	}
	100% {
		transform: translate(0, 0);
	}
}



/* sec02 */
#sec02 {padding: 160px 0 160px;}
#sec02 .inner_bx {max-width: 1400px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
#sec02 .con_bx {position: relative; overflow: hidden; padding: 115px 20px 147px;}
#sec02 .con_bx .bg_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/sec2_bg.jpg) no-repeat center; background-size: cover; transform: scale(1.2);}
#sec02 .con_bx.aos-animate .bg_bx {-webkit-transition: transform 5s; -moz-transition: transform 5s; transition: transform 5s; transform: scale(1);}
#sec02 .con_bx .top_txt {position: relative; z-index: 1; text-align: center;}
#sec02 .con_bx .top_txt p {font-size: 20px; color: rgba(255,255,255,.6); font-weight: 600;}
#sec02 .con_bx .top_txt strong {display: block; font-size: 54px; color: #ffffff; font-weight: 700; word-break: keep-all; margin-top: 18px;}
#sec02 .con_bx .link_bx {position: relative; z-index: 1; display: flex; flex-flow: wrap; max-width: 1020px; margin: 72px auto 0;}
#sec02 .con_bx .link_bx li {width: calc(33.333% - 20px); margin-right: 30px; box-sizing: border-box; margin-top: 30px;}
#sec02 .con_bx .link_bx li:nth-child(3n) {margin-right: 0;}
#sec02 .con_bx .link_bx li:nth-child(-n+3) {margin-top: 0;}
#sec02 .con_bx .link_bx li a {padding: 0 45px; border: 1px solid #fff; height: 80px; display:flex; justify-content:center; align-items:center; table-layout:fixed; font-size: 24px; color: #ffffff; font-weight: 600; overflow: hidden; position: relative;}
#sec02 .con_bx .link_bx li a span {display: block; text-align: left; width: 100%; padding-right: 40px; position: relative; line-height: 31px; z-index: 1;}
#sec02 .con_bx .link_bx li a span::before {content: ''; width: 31px; height: 31px; position: absolute; right: 0; top: 50%; margin-top: -15.5px;}
#sec02 .con_bx .link_bx li.icon1 a span::before {background: url(../images/main/sec2_icon1.png) no-repeat center;}
#sec02 .con_bx .link_bx li.icon2 a span::before {background: url(../images/main/sec2_icon2.png) no-repeat center;}
#sec02 .con_bx .link_bx li.icon3 a span::before {background: url(../images/main/sec2_icon3.png) no-repeat center;}



/* sec03 */
#sec03 {padding: 0 0 160px;}
#sec03 .inner_bx {max-width: 1400px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
#sec03 .top_txt p {font-size: 20px; color: #aaaaaa; font-weight: 600; word-break: keep-all;}
#sec03 .top_txt strong {display: block; margin-top: 7px;}
#sec03 .top_txt strong span {display: inline-block; position: relative; font-size: 60px; color: #111111; font-weight: 700; word-break: keep-all; padding-right: 9px;}
#sec03 .top_txt strong span::before {content: ''; width: 12px; height: 12px; background-color: #003b83; border-radius: 50%; position: absolute; right: 0; top: 1px;}
#sec03 .con_bx {display: flex; flex-flow: wrap; margin-top: 47px;}
#sec03 .con_bx .con_w {width: calc(50% - 20px); margin-right: 40px; margin-top: 40px; position: relative; box-sizing: border-box; padding-bottom: /*24.286%*/340px;}
#sec03 .con_bx .con_w:nth-child(2n) {margin-right: 0;}
#sec03 .con_bx .con_w:nth-child(-n+2) {margin-top: 0;}
#sec03 .con_bx .bg_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
#sec03 .con_bx .bg_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#sec03 .con_bx .txt_bx {position: absolute; width: 100%; box-sizing: border-box; padding: 0 30px; left: 0; bottom: 42px; z-index: 2;}
#sec03 .con_bx .txt_bx strong {font-size: 30px; color: #ffffff; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all;}
#sec03 .con_bx .txt_bx .btn {margin-top: 34px;}
#sec03 .con_bx .txt_bx .btn span {display: inline-block; position: relative; font-size: 18px; color: #ffffff; padding-right: 29px;}
#sec03 .con_bx .txt_bx .btn span::before {content: ''; width: 16px; height: 12px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -6px;}


/* PC */
@media all and (min-width:1025px){
	/* sec02 */
    #sec02 .con_bx .link_bx li a {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec02 .con_bx .link_bx li a:hover {color: #003b83; background-color: #fff;}
    /*#sec02 .con_bx .link_bx li a::before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background-color: #fff; transform: translate(0, -100%);}
    #sec02 .con_bx .link_bx li a:hover::before {transform: translate(0, 0);}*/
    #sec02 .con_bx .link_bx li a span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec02 .con_bx .link_bx li a:hover span::before {transform: translate(7px, 0);}
    #sec02 .con_bx .link_bx li.icon1 a:hover span::before {background: url(../images/main/sec2_icon1_on.png) no-repeat center;}
    #sec02 .con_bx .link_bx li.icon2 a:hover span::before {background: url(../images/main/sec2_icon2_on.png) no-repeat center;}
    #sec02 .con_bx .link_bx li.icon3 a:hover span::before {background: url(../images/main/sec2_icon3_on.png) no-repeat center;}
    
    
    
    /* sec03 */
    #sec03 .con_bx .con_w::before {content: ''; width: 100%; height: 100%; background-color: rgba(25,65,126); position: absolute; top: 0; left: 0; z-index: 1; box-shadow: 0 10px 20px rgba(25,65,126,0.6); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0;}
    #sec03 .con_bx .con_w:hover::before {opacity: 0.8;}
    #sec03 .con_bx .con_w .bg_bx div {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec03 .con_bx .con_w:hover .bg_bx div {transform: scale(1.1);}
    #sec03 .con_bx .con_w .txt_bx .btn span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sec03 .con_bx .con_w:hover .txt_bx .btn span::before {transform: translate(7px, 0);}
}

@media all and (max-width:1090px){
    /* sec02 */
    #sec02 .con_bx .link_bx li a {padding: 0 25px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* sec01 */
    #sec01 .bg_bx {height: calc(100% - 70px);}
    #sec01 .txt_bx {max-width: 293px;}
    #sec01 .txt_bx .txt1 span {font-size: 25px;}
    #sec01 .txt_bx .txt2 span {font-size: 40px;}
    #sec01 .scroll_bx {width: 52px; height: 52px; bottom: 21px;}
    #sec01 .scroll_bx .icon {width: 16px; height: 25px;}
    #sec01 .scroll_bx .icon::before {width: 4px; height: 4px; margin-left: -2px;}
    @-webkit-keyframes updown {
        0% {
            transform: translate(0, 0);
        }
        60% {
            transform: translate(0, 8px);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    
    
    /* sec02 */
    #sec02 {padding: 50px 0;}
    #sec02 .con_bx {padding: 37px 20px 50px;}
    #sec02 .con_bx .top_txt p {font-size: 15px;}
    #sec02 .con_bx .top_txt strong {margin: 8px auto 0; font-size: 27px; line-height: 32px;}
    #sec02 .con_bx .link_bx {margin-top: 26px; max-width: 520px;}
    #sec02 .con_bx .link_bx li {width: calc(33.333% - 3.333px); margin-right: 5px; margin-top: 5px;}
    #sec02 .con_bx .link_bx li a {height: 40px; padding: 0 22px;}
    #sec02 .con_bx .link_bx li a span {font-size: 12px; padding-right: 20px;}
    #sec02 .con_bx .link_bx li a span::before {width: 16px; background-size: 16px auto!important;}
    
    
    
    /* sec03 */
    #sec03 {padding: 0 0 50px;}
    #sec03 .top_txt p {font-size: 15px;}
    #sec03 .top_txt strong {margin-top: 2px;}
    #sec03 .top_txt strong span {font-size: 30px; padding-right: 4px;}
    #sec03 .top_txt strong span::before {width: 6px; height: 6px; top: 2px;}
    #sec03 .con_bx {margin-top: 23px;}
    #sec03 .con_bx .con_w {width: calc(50% - 10px); margin-right: 20px; margin-top: 20px; padding-bottom: 160px;}
    #sec03 .con_bx .txt_bx {padding: 0 20px; bottom: 22px;}
    #sec03 .con_bx .txt_bx strong {font-size: 20px;}
    #sec03 .con_bx .txt_bx .btn {margin-top: 5px;}
    #sec03 .con_bx .txt_bx .btn span {font-size: 12px; padding-right: 20px;}
    #sec03 .con_bx .txt_bx .btn span::before {width: 12px; background-size: 12px auto;}
}

/* 모바일 */
@media all and (max-width:768px){
    /* sec02 */
    #sec02 .con_bx .bg_bx {background: url(../images/main/sec2_bg_m.jpg) no-repeat center; background-size: cover;}
    #sec02 .con_bx .link_bx {max-width: 160px;}
    #sec02 .con_bx .link_bx li:nth-child(n) {width: 100%; margin-right: 0; margin-top: 5px;}
    #sec02 .con_bx .link_bx li:first-child {margin-top: 0;}
    #sec02 .con_bx .top_txt strong {max-width: 200px;}
    
    
    
    /* sec03 */
    #sec03 .con_bx .con_w:nth-child(n) {width: 100%; margin-right: 0; margin-top: 20px;}
    #sec03 .con_bx .con_w:first-child {margin-top: 0;}
}