@charset "UTF-8";
/* Main */
.main-slide .swiper-slide { height:700px; }
.main-slide .swiper-slide .message { width:1400px; position:relative; z-index:5; top:50%; transform:translateY(-75%);  }
.main-slide .swiper-slide .message .in {color:#fff; display:block; position:absolute; left:0; right:0; -webkit-transition:all 800ms ease; transition:all 800ms ease; }
.main-slide .swiper-slide .message .in.subtitle { display:block; position:absolute; left:0; right:0; bottom:60% !important; -webkit-transition:all 800ms ease; transition:all 800ms ease; }
.main-slide .swiper-slide .message dt { position:relative; text-align:center; font-size:89px; font-weight:400; line-height:1.14; height:208px; margin-bottom:-24px; overflow:hidden; box-sizing:content-box; }
.main-slide .swiper-slide .message dt .in.subtitle { bottom:500%; font-size:30px; color:#fff; font-size:19px; line-height:24px;  font-weight:500;}
.main-slide .swiper-slide .message dt .in {color:#fff; bottom:-100%; font-size:70px; font-weight:900;}
.main-slide .swiper-slide .message dd { position:relative; height:224px; margin:24px 0 0 0; padding-left:19px; font-size:20px; line-height:1.5; text-align:center; }
.main-slide .swiper-slide .message dd .text-wrap { position:relative; display:block; height:3em; overflow:hidden; font-size:20px; color:#fff; margin-top:50px;}
.main-slide .swiper-slide .message dd .in { top:-100%; }
.main-slide .swiper-button-prev, .main-slide .swiper-button-next { background:transparent; border-radius:100%; overflow:hidden; top:37%;}
.main-slide .swiper-button-prev { left:50%; margin-left:-685px; background:url(../images/main/btn_prev.png) no-repeat; width:63px; height:63px;}
.main-slide .swiper-button-next { right:50%; margin-right:-685px; background:url(../images/main/btn_next.png) no-repeat; width:63px; height:63px;}
.main-slide .img { position:absolute; left:0; right:0; top:0; bottom:0; height:700px; overflow:hidden; }
.main-slide .img .in { position:absolute; top:0; bottom:0; right:0; width:100%; background-repeat:no-repeat; background-position:center center; }
.main-slide .swiper-slide-active { z-index:3; }
.main-slide .swiper-slide-active .img { -webkit-animation:aniswiper 600ms both; animation:aniswiper 600ms both; }
.main-slide .swiper-slide-active .btn-more { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-slide .swiper-slide-active .message dt .in { bottom:24px; -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-slide .swiper-slide-active .message dd .in { top:0; -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-slide.direction-prev .img .in { left:0; right:auto; }
.main-slide.direction-prev .swiper-slide-next { z-index:2; opacity:1 !important; }
.main-slide.direction-prev .swiper-slide-next .message dt .in { bottom:24px; -webkit-transition-duration:0ms; transition-duration:0ms; }
.main-slide.direction-prev .swiper-slide-next .message dd .in { top:0; -webkit-transition-duration:0ms; transition-duration:0ms; }
.main-slide.direction-prev .swiper-slide-active .img { -webkit-animation:aniswiper-prev 600ms both; animation:aniswiper-prev 600ms both; }


.main-visual {position:relative; clear:both; height:700px; background:url(../images/main/visual02.jpg) no-repeat center; text-align:center; color:#fff;}
.main-visual .tt1 {padding-top:200px;  font-size:19px; font-weight:500;  line-height:24px;}
.main-visual .tt2 {  font-size:70px; font-weight:900; line-height:1.14; }
.main-visual .tt3 { font-size:20px; line-height:24px;  font-weight:400;}

.main-business { width:1400px; margin:0 auto; height:560px; padding:150px 0 50px 0; display:flex; }
.main-business>div { width:50%; height:100%; }
.main-business .left { position:relative; float:left; width:560px; }
.main-business .left .wrap { position:absolute; top:50%; left:20%; transform:translate(-15%,-50%); z-index:1; }
.main-business .left .wrap h3 { font-size:20px; color:#555; font-weight:900; letter-spacing:-0.3px; margin-bottom:30px; }
.main-business .horizon { width:522px; height:4px; margin:70px 0 70px 0; background-color:#034ea2; }
/*.main-business .horizon { width:568px; height:4px; margin:70px 0 70px 0; background-color:#034ea2; }*/
.main-business .left .wrap h1 { font-family:"Noto Sans KR"; font-size:60px; font-weight:900; color:#034ea2;}
.main-business .left .wrap p { width:600px; font-size:19px; color:#444;  font-weight:100; line-height:50px; letter-spacing:-0.05em; }
/*.main-business .left .wrap p { width:600px; font-size:19px; color:#444;  font-weight:100; line-height:70px; letter-spacing:-0.05em; }*/
.main-business .btn-more { display:inline-block; margin-top:60px; font-family:"Noto Sans KR"; font-size:33px; font-weight:700; color:#136DE8; cursor:pointer; }
.main-business .right {float:right; width:810px; margin-left:30px;background-image: url("../images/main/img01.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center; }


.main-business2 { width:1400px; margin:0 auto; height:560px; padding:200px 0; display:flex; }
.main-business2>div { width:50%; height:100%; }
.main-business2 .left { position:relative; float:right; width:560px; text-align:right !important;}
.main-business2 .left .wrap { position:absolute; top:50%; right:-20%; transform:translate(-15%,-50%); z-index:1; }
.main-business2 .left .wrap h3 { font-size:20px; color:#555; font-weight:900; letter-spacing:-0.3px; margin-bottom:30px; }
.main-business2 .horizon { width:520px; height:4px; margin:70px 0 70px 240px; background-color:#034ea2; }
/*.main-business2 .horizon { width:556px; height:4px; margin:70px 0 70px 202px; background-color:#034ea2; }*/
.main-business2 .left .wrap h1 { font-family:"Noto Sans KR"; font-size:60px; font-weight:900; color:#034ea2;}
.main-business2 .left .wrap p {margin-left:200px; width:560px; font-size:19px; color:#444;  font-weight:100; line-height:50px; letter-spacing:-0.07em; }
/*.main-business2 .left .wrap p {margin-left:200px; width:560px; font-size:19px; color:#444;  font-weight:100; line-height:40px; letter-spacing:-0.07em; }*/
.main-business2 .btn-more { display:inline-block; margin-top:60px; font-family:"Noto Sans KR"; font-size:33px; font-weight:700; color:#136DE8; cursor:pointer; }
.main-business2 .right {float:right; width:810px; background-image: url("../images/main/img02.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center; }




.main-content { width:1400px; height:500px; margin:70px auto; margin-bottom:200px; display:flex; }
.main-content>div { width:700px; height:500px; position: relative; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s all; }
.main-content>div:hover { background-color:rgba(0,0,0,0.5); }
.main-content>div>img { width:100%; height:100%; position: absolute; top:0; left:0; z-index:-1; }
.main-content .wrap { text-align:center; }
.main-content .wrap>h3 { font-size:40px; font-weight:900; color:#fff; letter-spacing:-0.2px; line-height:50px;}
.main-content .wrap>h5 { font-size:30px; font-weight:500; color:#e4e4e4; letter-spacing:-0.2px; line-height:40px;}
.main-content .wrap>.hide-icon { display:none; }
.main-content .wrap>.hide-icon>i { font-size:40px; color:#fff; margin:10px 0; }


.support { position:relative; clear:both; margin-top:0px; /*margin-top:150px; */ text-align:center;}
.support h1 { font-family:"Noto Sans KR"; font-size:55px; line-height:60px; font-weight:700; color:#000;}
.support p {text-align:center; font-size:16px; color:#555; font-weight:400; line-height:1.6; text-align:center; letter-spacing:-0.3px; margin-top:20px;}


.main-foot { width:100%; height:750px;  background-image:url("../images/main/bg1.jpg"); background-size:cover; background-repeat:no-repeat; background-position:top center; display:flex; justify-content:center; align-items:center; }
.main-foot .wrap { color:#fff; text-align:center; }
.main-foot .wrap>h1 { font-family:"Noto Sans KR"; font-size:55px; line-height:60px; font-weight:700; color:#fff;}
.main-foot .wrap>h2 { font-family:"Noto Sans KR"; font-size:40px; line-height:40px; font-weight:700; color:#fff; margin-top:30px;}
.main-foot .wrap>h2 span { font-family:"Noto Sans KR"; font-size:40px; line-height:40px; font-weight:700; color:#034ea2;}
.main-foot .wrap>p { width:1400px; margin:30px 0; font-size:16px; color:#fff; font-weight:400; line-height:1.6; text-align:center; letter-spacing:-0.3px; }
.main-foot .wrap>.btn-more { display:inline-block; font-family:"Noto Sans KR"; font-size:33px; font-weight:700; cursor:pointer; margin-top:18px; }
.main-foot .wrap>.btn-more ul li {float:left; margin:0 50px; }
.main-foot .wrap>.btn-more ul li p {color:#fff; font-size:20px; font-weight:500; margin-top:20px; text-shadow: 1px 1px 4px #b0b0b0, 0 0 4px #000;}








/****************************** Animation ******************************/
.title { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.title-sub { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 100ms; transition:all 600ms ease 100ms; }
.btn-more, .main-business .horizon { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:opacity 600ms ease 200ms, -webkit-transform 600ms ease 200ms; transition:opacity 600ms ease 200ms, transform 600ms ease 200ms; }

.title.ani-visible, .title-sub.ani-visible, .btn-more.ani-visible, .main-business .horizon.ani-visible { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }

.rnd .list { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.rnd.ani-visible .list { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }
.main-content>div { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.main-content.ani-visible>div { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }

@keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@-webkit-keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}
@-webkit-keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}