@charset "UTF-8";

body{font-family: 'Pretendard', sans-serif;}

/* 헤더, 푸터, 공통 */
.inner{display:flex;align-items:center;max-width:1280px;width:100%;height:100%;padding:0 2rem;margin:0 auto;}
.wrap{position:relative;display:flex;flex-direction:column;min-height:100vh}
.header{position:fixed;top:0;width:100%;height:60px;background:transparent;z-index:100}
.header .inner{justify-content:space-between;}
.header .logo{position:relative;width:80px;height:23px;display:inline-block;vertical-align:middle;margin-left:60px;z-index:10}
.header .logo:before{position:absolute;content:'';top:0;left:0;width:80px;height:23px;background:url(../imgs/logos/logo_wayutil.png)0 0 no-repeat;background-size:100%}
.header nav{min-width:50%;}
.header .nav_ul{display:flex;justify-content:space-evenly;margin-top:30px}
.header .nav_ul li{margin-left:2rem}
.header .nav_ul li>a{position:relative;color:#fff;font-size:16px;font-weight:bold;padding-bottom:4px;}
.header .nav_ul li.active>a:after, .header .nav_ul li>a:hover:after{position:absolute;content:'';bottom:0;left:0;right:0;border-bottom:2px solid #fff}
.header .toggle{position:relative;z-index:10;width:25px;height:25px;background:transparent;}
.header .toggle .icon{position:relative;display:block;font-size:0;transition:background-color 0.3s linear, transform 0.3s linear;}
.header .toggle .icon:before, .header .toggle .icon:after{position:absolute;content:'';top:-10px;left:3px;width:20px;height:2px;transform: translateY(8px) rotate(45deg);background-color:#303438;transition:background-color 0.3s linear, transform 0.3s linear;}
.header .toggle .icon:after{transform: translateY(8px) rotate(-45deg);}
.header .hide_nav .toggle .icon{width:20px;height:2px;background-color:#fff;margin:7px 2px;font-size:0}
.header .hide_nav .toggle .icon:before, .header .hide_nav .toggle .icon:after{left:0;width:20px;height:2px;transform:rotate(0);background-color:#fff;}
.header .hide_nav .toggle .icon:after{top:-7px;}
.header .hide_nav .toggle .icon:before{top:7px;}
.header .hide_nav .logo{margin-left:0;}
.header .hide_nav .logo:before{background-image:url(../imgs/logos/logo_wayutil_w.png);}
.header .hide_nav .nav_ul{margin-top:0}

.header.active{background:#fff;box-shadow:0px 1px 4px rgba(48, 52, 56, 0.1);}
.header.active .logo:before{background-image:url(../imgs/logos/logo_wayutil.png)}
.header.active .nav_ul li>a{color:#303438}
.header.active .nav_ul li.active>a:after, .header.active .nav_ul li>a:hover:after{border-color:#303438}
.main{position:relative;height:100%;background:#fff}
.main .section{position:relative;font-size:1.5rem;line-height:1.5;padding:13vh 0;overflow:hidden}
.main .section.has_bg{background:#f4f7f9}
.main .section .inner{flex-direction:column;text-align:center}
.main .section .txtbox{position:relative;width:100%}
.main .section h3{font-size:3rem;color:#303438;line-height:1.8;margin-bottom:20px}
.main .section .desc{font-size:1.5rem;color:#303438;}
.main .section .txtbox .side_txt{display:inline-block;vertical-align:text-bottom;font-weight:normal;font-size:1.2rem;margin-left:20px}

.footer{min-height:60px;font-size:14px;color:#636b73;padding:2rem 0;margin-top:auto;background:#e8ebef}
.footer .inner{display:block;}
.footer .img_logo{margin-right:10px}
.footer .info{display:flex;justify-content:space-between;margin-top:10px}
.footer .info ul{font-size:0;padding:0 10px}
.footer .info li{position:relative;font-size:14px;line-height:1.8;padding-right:10px}
.footer .info li:last-child{padding-right:0}
.footer .info li>a+a{position:relative;margin-left:21px}
.footer .info li>a+a:before{position:absolute;content:'';top:1px;left:-10px;width:1px;height:14px;background:#636b73}
.footer .info li>a, .footer .info li button{color:#636b73}
.footer .info li>a:hover, .footer .info li button:hover{font-weight:bold;text-decoration:underline}

/* 메인 섹션 */
.main section.intro{max-height:1200px;height:100vh;padding-bottom:10vh;background-color:#002481;background-image:url(../imgs/main_bg.gif);background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
.main section.intro:after{position:absolute;content:'';top:0;left:0;right:0;bottom:0;background-color:rgba(48, 127, 219, 0.7)}
.main section.intro .inner{flex-direction:row;text-align:left}
.main .intro .intro_msg{color:#fff;line-height:1.5;margin:0 0 3rem;z-index:1}
.main .intro .intro_msg h2{font-size:3.5rem;}
.main .intro .intro_msg p{font-size:1.8rem;margin-top:2rem}
.main .intro .intro_msg p>em{font-weight:bold;color:#20297d}
.main .link_btn>a{display:inline-block;height:60px;font-size:1.6rem;font-weight:bold;color:#303438;line-height:60px;border-radius:33px;border:1px solid #303438;padding:0 24px;}
.main .link_btn>a:hover, .main .link_btn>a:active{color:#fff;background:#303438;}
.main .link_btn.blue>a{color:#fff;border:0;background:#5eb0e8}
.main .link_btn.blue>a:hover{background:#6bc3ff}
.main .link_btn.blue>a:active, .main .link_btn.blue>a:focus{background:#3199df}
.main .solutions{display:flex;flex-wrap:wrap;justify-content:center;margin:40px -10px -10px}
.main .solutions li{position:relative;width:calc(33.33% - 20px);min-width:300px;height:360px;margin:10px;box-shadow:0px 0px 10px rgba(48, 52, 56, 0.1);overflow:hidden}
.main .solutions li>a{display:inline-block;vertical-align:top;width:100%;height:100%;font-size:1rem;text-align:center;padding:38px 10px 120px;background:#f2f9ff;overflow:hidden}
.main .solutions li>a .over_img{position:absolute;top:0;left:0;right:0;bottom:120px;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(0,0,0,.1);opacity:0}
.main .solutions li>a:hover .over_img{opacity:1}
.main .solutions li>a .over_img>img{transform:translateY(220px)}
.main .solutions li>a:hover .over_img>img{transform:translateY(0);transition:transform 1s}
.main .solutions li .label{position:absolute;bottom:0;left:0;right:0;height:120px;display:flex;flex-direction:column;justify-content:center;font-size:1rem;color:#303438;padding:10px;background:#fff;z-index:1}
.main .solutions li .label strong{display:block;font-size:1.5rem;}
.main .solutions li.osr>a{padding-top:60px}
.main .dsta_box{width:100%;margin:140px 0 0;}
.main .dsta_list{display:flex;justify-content:space-between;;flex-wrap:wrap;text-align:left;padding-top:60px;margin:0 -10px}
.main .dsta_list>li{width:calc(33.3% - 20px);max-width:320px;height:280px;color:#fff;font-size:1rem;padding:2.5vw;margin:2vw 10px;background:linear-gradient(90deg, #54daf3 0%, #5bbffc 100%);box-shadow:0px 10px 20px rgba(72, 69, 119, 0.3);}
.main .dsta_list>li:hover{transform:scale(1.1);transition:transform 1s}
.main .dsta_list>li:nth-child(2){margin-top:-80px;margin-bottom:80px;background:linear-gradient(90deg, #5bbeec 0%, #63a1e4 100%);}
.main .dsta_list>li:nth-child(3){margin-top:-160px;margin-bottom:160px;background:linear-gradient(90deg, #62a2e4 0%, #6C7edb 100%);}
.main .dsta_list>li:nth-child(4){background:linear-gradient(-90deg, #62a2e4 0%, #6C7edb 100%);}
.main .dsta_list>li:nth-child(5){margin-top:-80px;background:linear-gradient(-90deg, #5bbeec 0%, #63a1e4 100%);}
.main .dsta_list>li:nth-child(6){margin-top:-160px;background:linear-gradient(-90deg, #54daf3 0%, #5bbfec 100%);}
.main .dsta_list>li strong{display:block;font-size:1.5rem;margin-bottom:12px}
.main .dsta_box .link_btn{text-align:right;margin-top:-70px}
.main .together{display:flex;width:100%;justify-content:center}
.main .together li{max-width:50%;margin:20px}
.main .history{position:relative;margin-top:40px}
.main .history ul{text-align:left;padding-left:65px;margin-left:60px;border-left:1px solid #bbbec4}
.main .history li{position:relative;font-size:1.2rem;color:#303438;padding:4px 0;margin:20px 0}
.main .history li .label{position:absolute;top:11px;left:-140px;color:#b8bec4;font-weight:bold}
.main .history li:before{position:absolute;content:'';top:18px;left:-72px;width:13px;height:13px;border-radius:50%;background:#b8bec4}
.main .history li.now:before{width:7px;height:7px;background:#fff;border:3px solid #5eb0e8}
.main .history li.now .label{color:#5eb0e8}
.main .history li>strong{color:#b8bec4;font-weight:bold}
.main .history li p+strong{display:block;margin-top:10px}
.main .location{width:100%;max-width:1120px}
.main .location .detail{display:flex;justify-content:space-between;margin:20px -10px -10px}
.main .location .detail li{width:calc(33.3% - 20px);font-size:1rem;color:#303438;text-align:left;margin:20px 10px}
.main .location .detail li .label{display:inline-block;vertical-align:top;height:27px;color:#fff;font-weight:bold;font-size:14px;line-height:27px;border-radius:16px;padding:0 10px;background:#be4049}
.main .location .detail li .label.n3{background:#ef8f4c;border-radius:50%;}
.main .location .detail li .label.n4{background:#52b2e5;border-radius:50%;}
.main .location .detail li .label+.label{margin-left:8px}
.main .location .detail li p{margin-top:8px}

/* 서브 */
.main.sub section.intro{max-height:540px;background:linear-gradient(180deg, #6b7fdb 0%, rgba(83, 218, 243, 0.7) 80%, #fff 100%);overflow:hidden}
.main.sub section.intro:after{position:absolute;content:'';top:50%;left:0;bottom:0;right:0;margin-top:-35%;background:url(../imgs/deco.png)0 0 no-repeat;background-size:100%}
.main.sub section.intro .intro_msg{margin:0}
.main.sub section.intro .intro_msg p{font-size:1.5rem}
.main.sub section.padd_0{padding-top:0;margin-top:-60px}

/* 솔루션 */
.main.sub .link_btn>a{height:48px;font-size:1.2rem;line-height:48px;border-radius:24px;}
.main.sub .sol_dsta{display:flex;width:100%;text-align:left;box-shadow:0px 10px 20px rgba(72, 69, 119, 0.2);}
.main.sub .sol_dsta h3, .main.sub .sol_list li h3{font-size:3rem;line-height:1.2;color:#303438}
.main.sub .sol_dsta h3>em{font-size:1.5rem;font-weight:bold;display:block}
.main.sub .sol_dsta .part_l{position:relative;flex:1 1 418px;padding:60px 5vw;background:#fff;z-index:1}
.main.sub .sol_dsta .part_l p{font-size:1.2rem;color:#636b73;margin-bottom:40px}
.main.sub .sol_dsta .part_r{display:flex;justify-content:space-between;font-size:1.5rem;background:#112f7c;padding:60px 5vw;}
.main.sub .sol_dsta .part_r>div{width:50%;padding:15px}
.main.sub .sol_dsta .part_r .part_tit{position:relative;display:inline-block;vertical-align:top;color:#54daf3;padding-bottom:4px;margin-bottom:8px}
.main.sub .sol_dsta .part_r .part_tit:after{position:absolute;content:'';bottom:0;left:0;right:0;height:2px;background:#54daf3}
.main.sub .sol_dsta .part_r li{font-weight:bold;color:#fff;margin-top:16px}
.main.sub .sol_list{width:100%;text-align:left;}
.main.sub .sol_list li{display:flex;width:100%;font-size:1.2rem;color:#636b73;margin-top:100px}
.main.sub .sol_list li .sol_txt{display:flex;flex-direction:column;justify-content:center;min-width:50%;padding:30px 7vw 0 0;}
.main.sub .sol_list li .sol_txt>strong{display:block;font-size:1.5rem;font-weight:normal;color:#303438;margin-bottom:8px}
.main.sub .sol_list li .sol_txt .link_btn{margin-top:40px}
.main.sub .sol_list li .sol_img{display:flex;min-width:50%;align-items:center;justify-content:center;padding:40px;background:#e4f2ff;}

/* PR센터 */
.main.sub .pr_center{text-align:left}
.main.sub .pr_center li{display:flex;width:100%;min-height:240px;font-size:1rem}
.main.sub .pr_center li .txtbox{width:calc(100% - 420px);margin-right:60px;margin-bottom:20px}
.main.sub .pr_center li .imgbox{max-width:360px;}
.main.sub .pr_center li .tit{font-size:1.5rem;}
.main.sub .pr_center li .subtit{display:block;padding-bottom:8px}
.main.sub .pr_center li+li{border-top:1px solid #bbbec4;padding-top:60px;margin-top:60px;}
.main.sub .pr_center .link_btn{margin-top:26px}

/* QNA */
.main.sub .qna_form{position:relative;display:flex;width:100%;text-align:left;box-shadow:0px 10px 20px rgba(72, 69, 119, 0.2);}
.main.sub .qna_form .form_box{width:62%;padding:60px 5vw;background:#fff}
.main.sub .qna_form .form_box dl>div{float:left;width:calc(50% - 1vw);margin-bottom:24px}
.main.sub .qna_form .form_box dl>div+div{margin-left:2vw}
.main.sub .qna_form .form_box dt{font-size:14px;color:#303438;font-weight:bold;margin-bottom:6px}
.main.sub .qna_form .form_box label{vertical-align:middle;font-size:14px}
.main.sub .qna_form .form_btn{text-align:right;margin-top:30px}
.main.sub .qna_form .form_btn button{display:inline-block;height:48px;color:#fff;font-size:1.3rem;font-weight:bold;border-radius:24px;padding:0 24px;background:#5eb0e8}
.main.sub .qna_form .form_btn button:hover{background:#6bc3ff}
.main.sub .qna_form .form_btn button:active,.main.sub .qna_form .form_btn button:focus{background:#3199df}
.main.sub .qna_form .info_box{width:38%;color:#fff;font-size:1.8rem;line-height:1.3;padding:60px 5vw;background:#112f7c}
.main.sub .qna_form .info_box>strong{display:block;margin-bottom:30px}
.main.sub .qna_form .info_box dt{font-size:1.2rem;color:#54daf3;font-weight:bold;margin-top:20px}
.main.sub .qna_form .info_box dd{font-size:1.2rem;padding-top:4px}

/* Media Query */
@media screen and (min-width:1200px){
	/* 1200px ~ */
    .main .dsta_list>li{padding:30px 40px}
    .main.sub .qna_form .form_box, .main.sub .qna_form .info_box{padding:50px 80px}
    .main.sub .sol_dsta .part_l, .main.sub .sol_dsta .part_r{padding:60px}

}
@media screen and (min-width:767px){
	/* 767px ~ */
    .main .inner.aln_start{align-items:flex-start;text-align:left;justify-content:center}
}

@media screen and (max-width:767px){
    /* ~ 767px */
    .footer .info{flex-wrap:wrap}
    .main .section{padding:8vh 0}
    .main .section .inner{padding:0 1.5rem}
    .main .intro .intro_msg h2{font-size:2.8rem}
    .main .intro .intro_msg p{font-size:1.5rem}
    .main .section h3{font-size:2.1rem}
    .main .section .desc{font-size:1.2rem}
    .main .section .txtbox .side_txt{display:block;margin-left:0}
    .main .link_btn>a{height:48px;font-size:1.2rem;line-height:48px;padding:0 20px}
    .main .dsta_box{margin-top:60px}
    .main .dsta_list{justify-content:center;padding:0}
    .main .dsta_list>li{width:calc(50% - 20px);max-width:260px;height:260px;font-size:0.9rem;padding:20px 24px;margin:10px !important}
    .main .dsta_list>li strong{font-size:1.3rem;margin-bottom:8px}
    .main .dsta_box .link_btn{text-align:center;margin-top:40px}
    .main .solutions li{width:320px;min-width:initial}
    .main .together li{margin:12px}
    .main .history ul{padding-left:40px}
    .main .history li:before{left:-47px}
    .main .history li .label{top:13px;left:-100px}
    .main .location .detail{flex-wrap:wrap}
    .main .location .detail li{width:calc(50% - 20px);font-size:14px}

    .main.sub section.intro{max-height:460px}
    .main.sub .sol_dsta{display:block;box-shadow:none}
    .main.sub .sol_dsta h3, .main.sub .sol_list li h3{font-size:2.3rem}
    .main.sub .sol_dsta .part_l{padding:40px;box-shadow:0px 10px 20px rgba(72, 69, 119, 0.2);}
    .main.sub .sol_dsta .part_l p{font-size:1rem;margin-bottom:0;margin-right:160px}
    .main.sub .sol_dsta .part_l .link_btn{position:absolute;bottom:40px;right:40px}
    .main.sub .sol_dsta .part_r{padding:75px 50px 25px;margin:-50px -1.5rem 0}
    .main.sub .sol_dsta .part_r li{font-size:1.2rem;margin-top:10px}
    .main.sub .sol_list li{justify-content:center;flex-wrap:wrap-reverse;font-size:1rem}
    .main.sub .sol_list li .sol_txt{max-width:420px;align-items:center;text-align:center;padding-right:0;}
    .main.sub .pr_center li{flex-wrap:wrap-reverse;justify-content:center;}
    .main.sub .pr_center li .txtbox{width:100%;margin:20px 0 0}
    .main.sub .qna_form{display:block;box-shadow:none}
    .main.sub .qna_form .form_box{width:auto;box-shadow:0px 10px 20px rgb(72 69 119 / 20%)}
    .main.sub .qna_form .info_box{width:auto;padding-left:1.5rem;padding-right:1.5rem;margin:60px -1.5rem 0;}
}
@media screen and (min-width:480px){
    /* 480px ~ */
    .header .toggle{display:none}
}
@media screen and (max-width:480px){
    /* ~ 480px */
    .header .hide_nav nav{display:none}
    .header nav{position:fixed;top:0;right:0;bottom:0;left:0;min-width:auto;padding-top:60px;padding-left:60px;background:#fff}
    .header nav:before{position:absolute;content:'';top:0;left:0;bottom:0;width:60px;background:rgba(0,0,0,.5)}
    .header .nav_ul{flex-direction:column;}
    .header .nav_ul li{margin-top:20px}
    .header .nav_ul li>a{font-size:1.5rem;color:#303438}
    .header .nav_ul li.active>a:after, .header .nav_ul li>a:hover:after{border-color:#303438}
    .footer{text-align:center}
    .footer .info{display:block;}
    .main .intro .intro_msg h2{font-size:2.4rem}
    .main .intro .intro_msg p{font-size:1.5rem}
    .main .section h3{font-size:1.8rem;}
    .main .section .desc{font-size:1rem}
    .main .section .txtbox .side_txt{font-size:14px}
    .main .dsta_box{margin-top:30px}
    .main .dsta_list{flex-wrap:wrap;justify-content:center}
    .main .dsta_list>li{width:240px}
    .main .solutions li .label{font-size:14px}
    .main .solutions li .label strong{font-size:1.3rem}
    .main .together{flex-wrap:wrap}
    .main .history li{font-size:1rem}
    .main .location .detail li{width:calc(100% - 20px)}

    .main.sub section.intro:after{left:-5%;margin-top:-45%;background-size:130%}
    .main.sub .intro .intro_msg h2{font-size:2rem;}
    .main.sub .intro .intro_msg p{font-size:1.2rem;margin-top:1rem}
    .main.sub section.sub_con{padding-top:0;margin-top:-20px}
    .main.sub .sol_dsta h3, .main.sub .sol_list li h3{font-size:1.8rem}
    .main.sub .sol_dsta h3>em{font-size:1.2rem}
    .main.sub .sol_dsta .part_l p{margin-right:0;margin-bottom:20px}
    .main.sub .sol_dsta .part_l .link_btn{position:static;}
    .main.sub .sol_dsta .part_r{display:block;font-size:1.3rem}
    .main.sub .sol_list li .sol_txt>strong{font-size:1.2rem}
    .main.sub .qna_form .form_box dl>div{float:none;width:100%;}
    .main.sub .qna_form .form_box dl>div+div{margin-left:0}
    .main.sub .qna_form .info_box dt, .main.sub .qna_form .info_box dd{font-size:1rem}
}

.main.term_policy{background:linear-gradient(180deg, #6b7fdb 0%, #fff 5%)}
.main.term_policy h2{font-size:20px;margin-bottom:10px}
.main.term_policy .inner{display:block;color:#222;font-size:14px;line-height:2;text-align:left;padding:120px 2rem 2rem}