@import url("font/font.css");
*{margin: 0; padding: 0; border: 0; box-sizing: border-box;}
a, select, input, body{font-family: 'Noto Sans KR';}
a{color: inherit; text-decoration: none;}
a *{cursor: pointer;}
a, button{cursor: pointer;}
.wrap{max-width: 1525px; margin: 0 auto;}
.mobile{display: none;}
.contain{max-width: 1246px; height: 100%; margin:0 auto;}

.cover{position:fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.6); z-index: 80; display: none;}

.head{position: relative; z-index: 100; background: #fff;}
header{width: 100%; border-top: #00959c solid 5px; height: 90px; border-bottom: #e4e4e4 solid 1px; position: relative; z-index: 100;}
    header .wrap{display: flex; justify-content: space-between;}
    header .wrap > div{height: 84px;}
    header .logo{width: 22%; display: flex; align-items: center;}
        header .logo img{height: 58px;}
    header nav{width: 63%;}
        header nav .main_menu{width:100%; line-height: 84px; display: flex; justify-content: space-between;}
            header nav .main_menu > div{width: 20%; text-align: center; font-size: 21px; font-weight: 300; color: #222222; letter-spacing: -0.025rem;}
            header nav .main_menu a:hover{color: #01a6a9;}
    header .right{line-height: 84px; text-align: right; width: 15%; display: flex; justify-content: flex-end;}
        header .right img{vertical-align: middle;}
        header .right span{margin-left: 15px;}
        header .right .lang{display: flex; position: relative;}
        header .right .lang:hover .select{display: block;}
        header .right .select{width: 95px; height: 120px; background: #f8f8f8; line-height: 40px; text-align: center; border: #dbdbdb solid 1px; position: absolute; top: 20px; left: 0; display: none;}

#menu_up:checked ~ .head .total{height: 350px;}
#menu_up:checked ~ .cover{display: block;}
.head:hover .total{height: 350px;}
.head:hover ~ .cover{display: block;}
.total{width: 100%; background: #fff; position: absolute; top: 90px; left: 0; height: 0; overflow: hidden; z-index: 99; transition: all .4s; }
    .total .menu{width: 63%; display: flex; margin-left: 22%;}
        .total .menu  > div{width: 20%; text-align: center; border:#e4e4e4 solid 1px; border-bottom: none; border-top: none; line-height: 40px; font-size: 16px; color: #555555; padding: 15px 0;}
        .total .menu  > div:hover{background:#f9f9f9}
        .total .menu a{display:inline-block; position: relative; font-weight: 300;}
        .total .menu a:hover{color: #01a6a9;}
        .total .menu a:hover::after{content: ''; height: 1px; display: block; background: #01a6a9; position: absolute; width: 100%; bottom: 5px;}

.bx-wrapper{border: none !important;}
.bx-has-pager{width: 1525px; margin: 0 auto; position: absolute; top: 137px; left:calc((100vw - 1525px) / 2); display: flex; justify-content: flex-end;}
.bx-wrapper .bx-pager{width: 20px; height: 64px;}
.bx-wrapper .bx-pager.bx-default-pager a{border: #fff solid 3px; width: 15px; height: 15px; background: none !important; margin: 0; background: none; margin-bottom: 10px; border-radius: 100%;}
.bx-wrapper .bx-pager.bx-default-pager a.active{border: #01a6a9 solid 3px;}
.visual{width: 100%;}
    .visual > div{width: 100%;}
    .visual img{width: 100%;}
    .visual .visual_cover{position:absolute; background:rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 0;}
    .visual .mouse{position:absolute; z-index: 2; bottom:69px; left: 50%; transform:translateX(-50%); display: flex; flex-direction: column; align-items: center;}
        .visual .mouse .line{width: 2px; height: 38px; background: #fff; margin-bottom: 9px;}
        .visual .mouse img{margin-bottom: 9px; width: 26px;}
        .visual .mouse .mouse_text{font-size: 15px; color: #fff; }
    .visual .txt{position: absolute; top: 137px; left: 0; width: 100%; color: #fff; text-align: center; z-index: 1;}
        .visual .txt .txt0{font-size: 25px; margin-bottom: 30px; opacity: 0; transform: scale(1.3); filter:blur(10px); transition: all 0.7s 0.5s;}
        .visual div[aria-hidden=false] .txt .txt0{opacity: 1; transform: scale(1); filter: blur(0);}
        .visual div[aria-hidden=false] .txt .txt1{letter-spacing: 0em; opacity: 1;}
        .visual .txt .txt1{font-size: 65px; font-weight: 700; line-height: 80px; letter-spacing: 0.4em; transition: all 1.2s 1s; opacity: 0;}
        .visual div[aria-hidden=false] .txt .txt2{letter-spacing: 0em; opacity: 1;}
        .visual .txt .txt2{font-size: 65px; line-height: 80px; letter-spacing: 0.4em; transition: all 1.2s 1.6s; opacity: 0;}
        .visual div[aria-hidden=false] .txt .txt3{opacity: 1; transform: scale(1); filter: blur(0);}
        .visual .txt .txt3{font-size: 23px; font-weight: 300; margin-top: 20px; transform: scale(1.3); filter:blur(10px); transition: all 1s 2.4s; opacity: 0;}

.bx-wrapper{margin-bottom: 0 !important;}

.quick{padding-top: 53px; padding-bottom: 108px;}
    .quick .contain{display: flex; justify-content: space-between;}
        .quick .contain > div{text-align: center; border-left: #e3e3e3 solid 1px;}
        .quick .row2{display: flex; justify-content: center; width: 36.6%; padding-top: 25px; border: #e3e3e3 solid 1px;}
        .quick .row2 .name{font-size: 24px; line-height: 27px; margin-bottom: 15px; font-weight: 500; letter-spacing: -0.020em; color: #1e1e1e;}
        .quick .row2 .info{margin-left: 83px; text-align: left;}
        .quick .row2 .info .desc{font-size: 16px; line-height: 24px; color: #777; font-weight: 300; letter-spacing: -0.020em;}
        .quick .row2 .info .num{font-size: 30px; line-height: 50px; font-weight: 700; margin: 3px 0;}
        .quick .row2 .info .time{font-size: 18px; font-weight: 300; color: #929292; margin-left: 8px;}
        .quick .row2 img{width:56px; height: 49px;}
        .quick .row1:nth-child(2){border-left: none;}
        .quick .row1{width:21.3%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
        .quick .row1:nth-child(2) img{width: 60px; height: 47px;}
        .quick .row1:nth-child(3) img{width: 56px; margin-top: -5px; height: 56px;}
        .quick .row1:nth-child(4) img{width: 60px; margin-bottom: 10px; height: 46px;}
        .quick .row1 .name{font-size: 20px; font-weight: 500;}
        .quick .row1 .desc{font-size: 16px; font-weight: 300;}
        .quick .row1 button{width: 106px; height: 42px; border: #01a6a9 solid 1px; background: none; color: #01a6a9; margin-top: 10px; font-size: 16px; font-weight: 300;}

#main_con .title::before{width: 20px; height: 3px; background: #00acaf; content: ''; display: block; margin: 0 auto;}
#main_con .title{font-size: 36px; font-weight: 700; text-align: center; padding-bottom: 28px;}
#main_con .pro_info .info{width: 100%; background: #ededed; position: relative;}
    #main_con .pro_info .info .wrap{display: flex; justify-content: space-between;}
    #main_con .pro_info .button{position: absolute; top: 50%; left: 0; width: 100%;}
    #main_con .pro_info .item{display: flex; padding-bottom: 60px; padding-top: 100px; display: none;}
    #main_con .pro_info .item:nth-child(1){display: flex;}
    #main_con .pro_info .item > div{width: 50%;}
    #main_con .pro_info .item .img{display: flex; justify-content: center; align-items: center; text-align: left; width: 70%; overflow: hidden;}
        #main_con .pro_info .item .img img{height: 480px; max-width: 80%;}
    #main_con .pro_info .item .name{font-size: 32px; font-weight: 700;}
    #main_con .pro_info .item .sub_name{font-size: 22px; color: #01a6a9; font-weight: 300;}
    #main_con .pro_info .item .info{font-size: 18px; line-height: 40px; margin-top: 20px; color: #4c4c4c; font-weight: 300;}
    #main_con .pro_info .item button{width: 215px; height: 75px; background: #fff; border: #000 solid 3px; border-radius: 45px; margin-top: 40px; font-size: 19px; font-weight: 300; letter-spacing: -0.15em; color: #3e3e3e;}
    #main_con .pro_info .info .wrap button{width: 63px; height: 63px; background: #cbcbcb; border: #a7a7a7 solid 1px; }

.notice_con{margin-top: 60px; display: flex; justify-content: space-between;}
    .notice_con > div{width: 28.4%; margin-bottom: 98px;}
        .notice_con > div .top{line-height: 21px; height: 21px; display: flex; align-items: center; margin-bottom: 42px;}
            .notice_con > div .top p{color: #01a6a9; font-size: 16px; margin-right: 9px; font-weight: 400;}
            .notice_con > div .top img{height: 21px; margin-right: 8px;}
            .notice_con > div .top .line{background:#2e2e2e; width:47%; height: 1px;}
        .notice_con > div .con{width: 100%;}
            .notice_con > div .con .txt{font-size: 18px; color: #222222; line-height: 32px; letter-spacing: -0.015em; font-weight: 300; height: 62.5px; overflow: hidden;}
            .notice_con > div .con .date{font-size: 16px; color: #929292; letter-spacing: -0.020em; margin-top: 34px; font-weight: 300;}

.ask{width: 100%; background: #f2f7f7; padding-top: 116px; padding-bottom: 86px;}
    .ask .con2{display: flex;}
    .ask .contain .txt{width: 22.7%; }
    .ask .contain input{font-size: 36px; padding-left: 10px;}
        .ask .contain .txt .name{font-size: 18px; color: #0dacaf; font-weight: 500;}
        .ask .contain .txt .sub_title{font-size: 36px; font-weight: 700; line-height: 44px; margin-top: 10px;}
        .ask .contain .txt img{margin-top: 31px; margin-bottom: 15px; width: 39px; height: 53px;}
        .ask .contain .txt .txt{font-size: 18px; line-height: 28px; font-weight: 300; color: #3f3f3f; width: 100%;}
    .ask .contain .ask_form{width: 77.3%; padding-top: 34px;}
        .ask .contain .ask_form .line{display: flex; margin-bottom: 39px;}
        .ask .contain .ask_form .label{width: 14.6%; color: #2a2a2a; font-size: 18px; font-weight: 500; line-height: 48px;}
            .ask .contain .ask_form .label span{color: #00aaad;}
        .ask .contain .ask_form .input{width: 85.4%; display: flex; justify-content: space-between; line-height: 48px;}
            .ask .contain .ask_form .input.email input{width: 35%;}
            .ask .contain .ask_form .input.email select{width: 25%; font-size: 16px; color: #929292;}
            .ask .contain .ask_form .input select{width: 100%; height: 48px; border: #bbbbbb solid 1px; color: #929292; font-size: 16px; text-align-last: center;}
            .ask .contain .ask_form .input input{width: 100%; height: 48px; border: #bbbbbb solid 1px; color: #929292; font-size: 16px;}
            .ask .contain .ask_form .input textarea{width: 100%; height: 48px; border: #bbbbbb solid 1px; color: #929292; font-size: 16px;height: 323px;}
        .ask .contain .ask_form .chk{padding-left: 10.6%; font-size: 16px; color: #585858; font-weight: 300; line-height: 21px; margin-bottom: 15px;}
            .ask .contain .ask_form .chk input{width: 21px; height: 21px; border: #c6c6c6 solid 1px; margin-right: 10px;}
        .ask .contain .ask_form .line2{padding-left: 10.6%; font-size: 14px; color: #9b9b9b; line-height: 20px; font-weight: 300;}

    .ask .bottom_line{width: 100%; height: 1px; background: #626262; margin-bottom: 62px; margin-top: 36px;}
    .ask .con3{text-align: center;}
    .ask .send_btn{width: 147px; height: 62px; background: #0dacaf; color: #fff; font-size: 20px; font-weight: 300;}

.main_logo_banner{width: 100%; padding-top: 53px; padding-bottom: 26px;}
    .main_logo_banner .logo_box{display: flex; flex-wrap: wrap; justify-content: space-between;}
        .main_logo_banner .logo{width: 16.1%; border: #e2e2e2 solid 1px; height: 59px; background: #fff; display: flex; justify-content: center; align-items: center;}
            .main_logo_banner .logo img{height: 20px;}
    .main_logo_banner .spot{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 36px;}
        .main_logo_banner .spot > div{width: 10px; height: 10px; background: #dedede; border-radius: 100%; margin: 0 6px; cursor: pointer;}
        .main_logo_banner .spot > .active{background:#808080}
            

.footer{width: 100%; background: #313131; padding: 65px 0;}
    .footer .contain{display: flex;}
    .footer .logo{width: 15.2%;}
        .footer .logo img{width: 43%;}
    .footer .con{font-size: 16px; letter-spacing: -0.025em;}
    .footer .menu{color: #d2d2d2; line-height: 16px; margin-bottom: 20px;}
    .footer .copy{color:#898989; line-height: 30px;}
    .footer .tel{display: flex; margin-left: auto; flex-direction: column;}
        .footer .tel .name{font-size: 16px; color: #c6c6c6; font-weight: 300;}
        .footer .tel .num{font-size: 26px; font-weight: 800; color: #ffffff;}