/*visual*/
.visual{/*overflow: hidden;*/ height: 810px; background: #000; position: relative;}
.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
/*자식의 높이는 부모하태 받지않나요?*/
.visual .swiper-wrapper { height: 100%; }
.visual .swiper-slide { overflow: hidden; height: 100%; }


/*swiper pagination*/
.visual .slide-pagination{
    height:3px; font-size: 0;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
}

.visual .swiper-pagination-bullet {opacity:1;}

.visual .slide-pagination.swiper-pagination-bullets { z-index: 2; position:absolute;}

.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin-right:6px; width: 80px; height: 100%; background:rgba(255,255,255,.4);
    -webkit-transition: all ease .2s; transition: all ease .2s; border-radius:0px; position: relative;
}

.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet::before {

    content:""; display:block; position: absolute; top:0; left:0; width:0px; height:100%; transition:all 0.6s ease; z-index:20; background-color:#fff;

}

.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active::before {animation:line-color 6s;}

@keyframes line-color {

    0%{width:0;}
    100%{width:100%;}

}

.slide-nav-container {max-width:1230px; width:100%; padding:0px 20px; margin:auto; position:absolute; left: 0; right:0; bottom:100px;}

.slide-nav {width:270px; height:3px; position: relative;}

.play-state {

    width:8px; height:10px; display: block; position:absolute; right:0px; bottom:-3px;
    background:url("/child/img/icon/slide_stop.png") no-repeat center; z-index: 10; transition:all 0.3s ease;

}


.play-state[aria-pressed="true"] {

    background:url("/child/img/icon/slide_start.png") no-repeat center;

}



/*background*/
.visual .background{
    height: 810px;
    -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
    -webkit-transform: scale(1.1); transform: scale(1.1);
}


.visual .background--1 { background: url('/child/img/visual/v1.jpg') no-repeat center / cover; }
.visual .background--2 { background: url('/child/img/visual/v2.jpg') no-repeat center / cover; }
.visual .background--3 { background: url('/child/img/visual/v3.jpg') no-repeat center / cover; }
.visual .background--4 { background: url('/child/img/visual/v4.jpg') no-repeat center / cover; }
.visual .background--5 { background: url('/child/img/visual/v5.jpg') no-repeat center / cover; }


.visual .swiper-container-initialized { opacity: 1; }
.visual .swiper-container-initialized .background { -webkit-transform: none; transform: none; }

.visual .swiper-container-initialized .prev,
.visual .swiper-container-initialized .next,
.visual .swiper-container-initialized .slide-pagination{
    -webkit-transform: none; transform: none;
    opacity: 1;
}



.visual .context {

    max-width: 1240px; padding: 0px 20px;
    position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; color: #fff;


}

.visual .context p {font-size:2rem; color:#c9c9c9; margin-bottom:20px; line-height:1;}
.visual .context h1 {font-size:5.4rem; line-height:1.4; font-weight:400;}
.visual .context h1 span {font-weight:700;}

.visual .swiper-slide-active .context p {opacity:0; position: relative; right:-30px; animation: contxt 1s ease .2s ; animation-fill-mode: forwards;}
.visual .swiper-slide-active .context h1 { position: relative; right:-60px; opacity: 0; animation: contit 1s ease .6s; animation-fill-mode: forwards;}

.slide-controller {max-width:1200px; width:100%; margin:auto;}


.scroll-btn {position: absolute; bottom:-30px;  width:60px; height:60px; background-color:#008de6; z-index:20; left:50%; transform: translateX(-50%);}
.scroll-btn span {background:url('/child/img/icon/scroll_btn.png') no-repeat center; width:15px; height:16px; display: block; position: absolute; top:0; animation: scroll-down 1s; animation-iteration-count: infinite; left:50%; transform: translateX(-50%);}

.scroll-btn span:nth-of-type(1){

    top: 18px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;

}

.scroll-btn span:nth-of-type(2){

    top: 24px;
     -webkit-animation-delay: .3s;
     animation-delay: .3s;

}

@keyframes scroll-down {

    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}

}


@keyframes contxt {

    from{opacity:0; right:-30px;}
    to {opacity: 1; right:0px;}

}


@keyframes contit {

    from{opacity:0; right:-60px;}
    to {opacity: 1; right:0px;}
}
@media(max-width:1200px){

    .visual { height: 680px; }
    .visual .context p {font-size:1.8rem;}
    .visual .context h1 {font-size:4.6rem;}

}


@media(max-width:1024px){
    .visual { height: 520px; }



}
@media(max-width:768px){
    .visual { height: 460px; }
    .slide-nav {height:4px; width:160px;}
    /* .visual .slide-pagination.swiper-pagination-bullets { bottom: 20px; } */
    .visual .slide-pagination { height:4px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet {width:40px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width:40px; }


    .visual .context h1 {font-size:3.6rem;}

    .scroll-btn {width:50px; height:50px; bottom:-25px;}
    .scroll-btn span:nth-of-type(1) {top:14px;}
    .scroll-btn span:nth-of-type(2) {top:20px;}



}
@media(max-width:500px){
    /* .visual { height: 0px; } */
    .visual .context p {font-size:1.6rem; margin-bottom:15px;}
    .visual .context h1 {font-size:2.7rem;}

    .scroll-btn {width:40px; height:40px; bottom:-20px;}
    .scroll-btn span:nth-of-type(1) {top:10px;}
    .scroll-btn span:nth-of-type(2) {top:16px;}
}


/*common*/
.section {padding:180px 0px;}

.title-box {display:flex; justify-content:space-between; align-items:center; margin-bottom:80px;}
.tit {font-size:4.4rem; color:#222; line-height:1.3; font-weight:700;}
.sub {font-size:1.8rem; color:#666; display: flex;}
.sub::before {content:''; width:30px; height:2px; background-color:#008de6; display:block; padding-right:20px; margin-top:15px; margin-right:20px;}

.more-btn {width:176px; height:46px;margin: 40px auto 0px; color:#fff;}
.more-btn a {display: flex; align-items:center; width:100%; height:100%; justify-content:space-between; font-size:1.6rem; font-weight:700; padding:0px 20px;  background-color:#363636; transition:background-color .6s ease;}
.more-btn a::after {content:""; width:9px; height:13px; display:block; background:url('/child/img/icon/next_on_arrow.png') no-repeat center;}

/*intro*/
.intro-content ul {display: flex; margin-left:-20px;}
.intro-content li {display: flex; flex:1 1 ; font-size: 2.6rem; color:#111; font-weight:500; padding:0 20px; position: relative; cursor: pointer; letter-spacing:-0.06em; justify-content: space-between;}
.intro-content li:last-child {margin-right:0px;}
/* .intro-content a::before {content:""; display: block; width:0; height:1px; background-color:#111; position: absolute; bottom: 0; left:0; transition:all .4s ease;}
.intro-content a::after {content:""; display: block; width:100%; height:1px; background-color:#d7d7d7;} */
.intro-content a {display: flex; align-items: center; justify-content: space-between; flex-wrap:wrap; width:100%;}
.intro-content .icon-img {flex:1 100%;}
.intro-content .icon-txt {padding:20px 0px; display: flex; align-items:center; flex:1 100%; justify-content:space-between;}
.intro-content .icon-txt::after {content: ""; display: block; background:url('/child/img/icon/intro_more.png') no-repeat center; width:18px; height:18px; opacity:.15; transition:all .3s ease;}
.hover-line {width:100%; height:1px; background-color:#d7d7d7; position: relative;}
.hover-line::before {content:""; display: block; width:0; height:1px; background-color:#111; position: absolute; bottom: 0; left:0; transition:all .4s ease;}

.icon-img img {display: block;}

@media (min-width:1201px) {

    /* .intro-content a:hover::before {width:100%;} */
    .intro-content li:hover .icon-txt::after {transform: rotate(90deg);}
    .intro-content a:hover .hover-line::before {width:100%;}

    .more-btn:hover a {background-color:#008de6;}

}
@media (max-width:1200px){

    .section {padding:160px 0px;}

    .title-box {margin-bottom:60px;}
    .tit {font-size:3.8rem;}
    .sub {font-size:1.6rem;}
    .intro-content ul {margin-left:-10px;}
    .intro-content li {font-size:1.8rem; padding:0px 10px;}
    /* .intro-content a {padding:15px 0px;} */


}
@media (max-width:1024px){

    .title-box {flex-wrap: wrap;}
    .tit {font-size:3rem ;width:100%;}

    .sub {padding-top:20px;}
    .sub::before {width:22px; margin-right:10px; margin-top:13px;}


}
@media (max-width:768px){

    .section {padding:110px 0px;}

    .title-box {margin-bottom:40px;}

    .intro-content ul {flex-wrap: wrap;}
    .intro-content li {flex:1 calc(50% - 40px); padding-bottom:60px; font-size:1.6rem;}
    .intro-content li:nth-child(3),.intro-content li:nth-child(4) {padding-bottom:0px;}




}
@media (max-width:500px){

    .tit {font-size:2.4rem;}
    .sub {font-size:1.4rem;}
    .intro-content li {flex:1 100%;}
    .intro-content li:nth-child(3) {padding-bottom:60px;}
    .intro-content li:nth-child(4) {padding-bottom:0px;}
    .sub::before {display:none;}

}


/*news*/
.section--news {background:url('/child/img/main/news_bg.png') no-repeat center; background-color: #f6f6f6; background-size:cover;}
.section--news img {display:block; width:100%;}

.news-contents {width:100%; height:100%; position: relative;}
.news-contents .swiper-slide {border:1px solid #d7d7d7; box-sizing:border-box;}
.news-link {position: relative; width: 100%; height:100%; display:block;}
.news-link .hover {position: absolute; top:0; left:0; right:0; bottom:0; z-index: 10; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color:rgba(0,111,182,.7); transition:all 0.6s ease; opacity:0;}
.news-link .hover::before{content:''; background:url('/child/img/icon/news_more.png') no-repeat center; width:18px; height:18px;}
.news-link .hover p {font-size:2rem; color:#fff; font-weight:500; margin-top:10px;}

.news-txt {background-color:#fff; padding:20px;}
.news-txt h5 {font-size:2rem; font-weight:500; color:#111; margin-bottom:10px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-txt span {font-size:1.4rem; font-weight:300; color:#999; }

.swiper-controller {position: absolute; top:0px; bottom:0px; right:0px; left:0px; width:100%; height:100%; display: none;}
.swiper-controller .next, .swiper-controller .prev {width:45px; height:45px; background-color:#fff; border:2px solid #d7d7d7; position: absolute; top:50%; transform: translateY(-50%); display: flex; align-items: center; justify-content:center; transition:all 0.3s ease;}
.swiper-controller .prev {left: -70px;} .swiper-controller .next {right: -70px;}

.swiper-controller .prev::before {content:''; background:url('/child/img/icon/prev_arrow.png') no-repeat center; width:9px; height:13px; display: block;}
.swiper-controller .next::before {content:''; background:url('/child/img/icon/next_arrow.png') no-repeat center; width:9px; height:13px; display: block;}

.paging-controller {position: relative; width:100%; text-align: center; margin-top: 20px; display: none;}
.paging-controller .swiper-pagination {width:100%;}
.paging-controller .swiper-pagination span {margin:0px 6px; width:12px; height:12px;}
.paging-controller .swiper-pagination .swiper-pagination-bullet swiper-pagination-bullet-active {background-color:#007aff;}

@media (min-width:1201px){

    .news-link:hover .hover { opacity:1;}
    .swiper-controller .next:hover , .swiper-controller .prev:hover {border-color:#111; background-color:#111;}

}

@media (max-width:1200px){

    .swiper-controller {display: none;}
    .paging-controller {display: block;}

    .more-btn {margin:80px auto 0px;}


}

@media (max-width:1024px){

    .news-txt h5 {font-size:1.8rem;}


}

@media (max-width:768px){

    .news-txt h5 {font-size:1.6rem;}

}


/*contact*/
.section--contact {position: relative; padding-bottom:380px;}
.section--contact .container {z-index:2; position: relative;}
.contact-box {display:flex; justify-content: space-between;}
.contact-box .contact {max-width: 690px; background-color: #006fb6; padding: 40px; display: block; width:100%;}
.contact-box .formmail-table {border-top:0px; background-color:transparent;}
.contact-box .formmail-table .row {border-bottom:0px;}
.contact-box .formmail-table .td {padding:0px; padding-bottom:10px; height: auto;}
.contact-box .formmail-table .row:last-child .td {padding-bottom:0px;}
.contact-box .email-box-wrap > div, .tel-box-wrap > div {flex:1 1;}
.contact-box .email-box:last-child {padding-left:0px;}
.contact-box .tel-box, .contact-box .email-box {padding-right:10px;}
.contact-box .tel-box:last-child, .contact-box .email-box:last-child {padding-right:0px;}
.contact-box .tel-box-wrap span {padding:0 8px; color:#fff;} .contact-box .email-box ~ span {color:#fff;}
.contact-box .formmail-table .td input[type="text"], .contact-box .formmail-table .td select {max-width: inherit; width:100%; background-color: transparent !important; color:#fff; border:1px solid rgba(255,255,255,.6) !important; }
.contact-box .formmail-table .td select {background:url('/child/img/icon/select_arrow.png') no-repeat 95% 50%;}
.contact-box .formmail-table .td select option {color:#111 !important;}
.contact-box .formmail-table .td input[type="text"]:focus, .contact-box .formmail-table .td select:focus {outline:none;}
.contact-box input:not([readonly="readonly"]):not(:disabled):focus {border:1px solid #fff !important;}
.contact-box input::placeholder{color:rgba(255,255,255,.5);}
.contact-box input:-ms-input-placeholder{color:rgba(255,255,255,.8);}
.contact-box input::-ms-input-placeholder{color:rgba(255,255,255,.8);}


.contact-box .formmail-buttons {justify-content: flex-start;}
.contact-box .button-point {background-color: transparent; border:1px solid #fff;}
.contact-box .formmail-buttons .button {justify-content: space-between; font-size:1.6rem; padding:0px 20px; font-weight:700; width:160px;}
.contact-box .button-point::after {
    content: ""; width: 9px; height: 13px;
    display: block; background: url('/child/img/icon/more_arrow.png') no-repeat center; transition:background-image .4s ease;
}

.contact-tit {color:#fff; font-size:2.6rem; font-weight:500; margin-bottom:25px;}

.addinform {max-width:490px; width:100%; padding:40px; background:url('/child/img/main/addinform_bg.jpg') no-repeat center; background-size: cover;}

.addinform li {padding-bottom:20px;}
.addinform li > span {color:#fff; font-size:1.6rem; display: flex; line-height:1.75; align-items: center;}
.addinform li:first-child > span {align-items: flex-start;}
/* .addinform li i {margin-right:10px;} */
.addinform li img {display: block;}
.addinform li em {font-style: normal; margin:0px 10px;}
.addinform li .add-icon {width:20px; height:20px; margin-top:4px;}
.addinform li .tel-icon {width:20px; height:20px;}
.addinform li .fax-icon {width:20px; height:20px;}
.addinform li .mail-icon {width:20px; height:20px;}

.map {position: absolute; left:0; right:0; bottom:0; overflow: hidden;}
.main-map {width:100%; height:480px; display: block;}

@media (max-width: 768px){
  .main-map{display: none;}
  .section--contact{padding-bottom: 110px;}
}

@media (min-width:1201px){

    .contact-box .button-point:hover {background-color:#fff; color:#111;}
    .contact-box .button-point:hover::after {background: url('/child/img/icon/more_on_arrow.png') no-repeat center;}

}
@media (max-width:1200px){


}

@media (max-width:1024px){


}

@media (max-width:768px){

    .contact-box {flex-wrap: wrap;}
    .contact-box .contact {width:100%; max-width: inherit; padding:50px 30px;}
    .addinform {width:100%; max-width: inherit; padding:50px 30px;}

    .contact-tit {font-size:2.2rem;}

    .addinform li > span {font-size:1.4rem;}

    .contact-box .formmail-buttons .button {width:130px;}

}