@charset "UTF-8";
.clearfix::after{ content: ''; clear: both; display: block; }
.pc_cut { display: block; vertical-align: baseline; }
.m_cut{ display: inline; vertical-align: baseline; }
.pc_view { display: block ;  }
.m_view { display: none ;   }

/* HEADER */
.header_wrap {
    width:100%; position: fixed; top:0; left:0; z-index: 20;
}
.header_wrap.data {position: absolute }
    .header{ 
        width:100%; 
        background: #fff;
        transition-duration: 0.5s;
        box-sizing: border-box;
    }
    .header.main{ background: #2b313d; }
.header.sub.on { box-shadow: 0px 5px 12px rgba(0,0,0,0.03); }
.header.data{ 
    width:90%; 
    margin: 0 auto; 
    background: none; 
    padding: 40px 0;
    
}

/* GNB */
.gnb_wrap { 
    width:1285px; 
    margin: 0 auto;
    height:90px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content:space-between; 
    position: relative;
    z-index: 2;
}
    .gnb_logo { width:180px; }
/*        .gnb_logo img { width:100%; }*/
    .gnb {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }
        .gnb > li { position:relative; text-align:center; }
            .gnb > li > a {
                font-size: 16px;
                font-weight: 500;
                color:#2b313d ;
                width:116px;
                height:40px;
                letter-spacing: -0.5px;
                display: flex;
                align-content: center;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                margin: 0 5px;
            }
            .gnb.main > li > a { color:#fff ; }
            .gnb > li.data > a { color:#17a9ca; }
            .gnb > li:hover > a { border:2px solid #000000; }
            .gnb > li.on > a { border:2px solid #000000; }
            .gnb.main > li:hover > a { border:2px solid #fff; }
            .gnb > li.data:hover > a { border:2px solid #17a9ca !important; }
        	    .depth2  { 
                    position:absolute; 
                    top:53px; 
                    left:0;
                    width:100%;
                    display:none;
                    padding: 24px 0;
                    opacity: 0;
                    background:#fff;
                }
                .depth2.on  { display: inline; }
                .depth2.fade{ opacity: 1; transition-duration: 0.3s; }
                    .depth2> li  { width:100%; }
                    .depth2> li:not(:last-child){ margin-bottom: 19px; }
                        .depth2 > li > a {  
                            font-size:14px; 
                            color:#333333; 
                            font-weight:400;
                            text-align:center;
                            position: relative;
                            transition-duration: 0.5s;
                            letter-spacing: -0.6px;
                        }
                        .depth2 > li > a::after { 
                            content: '';
                            width:0%;
                            height:1px;
                            background:#ff6f68 ;
                            position: absolute;
                            left:50%;
                            bottom:0;
                            transition-duration: 0.5s;
                        }
                        .depth2 > li:hover > a{ color:#ff6f68; font-weight:600 }
                        .depth2 > li:hover > a::after { width:100%; left:0; }
            .btn_ham{
                width:40px;
                height:40px;
                position: relative;
                border:2px solid #000000;
                color:#000000;
                box-sizing: border-box;
                text-align: center;
                font-size:10px;
                align-content: center;
                align-items: center;
                justify-content: center;
            }
            .btn_ham.pc_view{display: flex;}
            .btn_ham.main{
                border:2px solid #fff; color:#fff;
            }
.btn_top{
    position: fixed;
    right:calc(50% - 650px);
    bottom:70px;
    z-index: 8;
    border:2px solid #000;
    box-sizing: border-box;
    width:44px;
    height:44px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    background:#fff;
    color:#000;
    font-size:12px;
    
}
.btn_top::after{ 
    content: '';
    width:10px;
    height:20px;
    background:url('/images/icon/top_icon.png')center no-repeat;
    background-size:auto;
    position: absolute;
    top:-12px;
    left:calc(50% - 5px);
    transition-duration: 0.5s;
}
.btn_top:hover::after{ top:-20px; }   

/*NAV*/
.nav_wrap{ 
    width:100%;
    height:100vh;
    position: fixed;
    top:0px; 
    left:0;
    display: none;
    opacity: 0;
    transition-duration: 0.5s;
    z-index: 21;
    align-content: center;
    align-items: center;
    justify-content: center;
} 
.nav_wrap.on{ display: flex; }
.nav_wrap.fade{ opacity: 1; }
    .nav_gnb{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:60px;
    }
        .nav_gnb > li{  }
/*        .nav_gnb > li:not(:last-child){ margin-bottom: 80px; }*/
            .nav_gnb > li > a{
                font-size: 60px;
                font-weight:600 ;
                color:#fff ;
                position: relative; 
                z-index: 2; 
            }
            .nav_gnb > li.data > a{ color:#17a9ca }
                .nav_gnb > li a span{ 
                    width:0%;
                    height: 14px;
                    position: absolute;
                    bottom: 10px;
                    left:-5%;
                    z-index: -1;
                    transition-duration: 0.5s;
                    background:linear-gradient(to right,#17a9ca 10%,#8400ff 90%);
                }
                .nav_gnb > li.data  a > span{ 
                    background:linear-gradient(to right,#005edf 40%,#8400ff 95%); !important; 
                }
                .nav_gnb > li:hover a span{ width:110%;}
.nav_head{
    width:1285px;
    height:90px;
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
}
    .close_nav {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        border: 2px solid #fff;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        font-size: 10px;
        align-content: center;
        align-items: center;
        justify-content: center;
    }
        .close_nav span{
           width:20px;
           height:2px;
           background:#fff;
           position: absolute;
           top:50%;
           left: 50%;
        }
        .close_nav span:first-child{ transform:translate(-50%,-50%) rotate(45deg);}
        .close_nav span:last-child{ transform:translate(-50%,-50%) rotate(-45deg);}
 
/* 헤더 배경 */
.header_bg{
    width:100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: 20;
    background:rgba(43,49,61,0.96);
    transform: translateY(-100%);
    transition-duration: 0.5s;
}
.header_bg.on {  transform: translateY(0); }
                


/* FOOTER */
.footer_wrap{ width:100%; background:#f0f0f0; }
    .footer{
        width:1285px;
        margin: 0 auto;
        padding: 35px 0;
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: space-between;
    }
        .footer_logo{  }
        .footer_infor{
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            justify-content: space-between;
            width:860px;
        }
            .footer_infor li{
                font-size: 16px;
                font-weight: 400;
                color:#000000 ;
                line-height: 1.5;
                word-break: keep-all;
            }
                 .footer_infor li a{
                    font-size: 16px;
                    font-weight: 400;
                    color:#000000 ;
                    line-height: 1.5;
                    word-break: keep-all;
                     vertical-align: baseline
                }



/* Input */

.find_btn{ 
    position: absolute;
    display: inline-block;
    width:19px;
    height: 19px;
    top:50%;
    right:20px;
    transform: translateY(-50%);
}
    .find_btn img{ width:100%; }
.input_type{
    border:none;
    height:48px;
    border-radius: 4px;
    font-size:16px;
    color:#a4a4a4;
    text-indent: 15px;
    background:#edf1f5;
    outline: none;
}
.input_type00{ 
    width:100%; 
}


/* Select */


/* Check */
.chk_wrap { margin: 10px 0; }
.chk_type{ display: none; }
    .chk_type + label { 
        font-size: 14px;
        font-weight: 400;
        color:#000000 ;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
    }
        .chk_type + label span {
            width:20px;
            height:20px;
            border-radius: 2px;
            background:#edf1f5;
            margin-right: 5px;
            position: relative;
        }
        .chk_type:checked + label span{ background:#fff; }
        .chk_type:checked + label span::before {
            content: '';
            width:20px;
            height:20px;
            display: block;
            border-radius: 2px;
            background:#17a9ca url('/images/icon/chk_icon.png')center no-repeat; ;
            position: absolute;
            left:50%;
            top:50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            z-index: 2;
        }

/*Textarea*/
.textarea_type{
    resize: none;
    width:100%;
    height:200px;
    border-radius: 4px;
    font-size:16px;
    color:#a4a4a4;
    padding: 15px;
    box-sizing: border-box;
    background:#edf1f5;
    border:none;
    outline: none;
}

/* Button */
.btn_type{ 
    height: 40px;
    border-radius: 20px;
    font-size:14px;
    font-weight: 600;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.btn_type01{ width:100%; margin: 20px auto 10px; }
.btn_type02{ width:160px; margin: 30px auto 10px; }
.btn_type03{ width:80px}
.write_btn{ position: absolute; right:0; }

.box_btn{
    font-size:12px;    
    color:#fff;
    border:2px solid #ffffff;
    box-sizing: border-box;
    display:flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 35px auto 110px;
    width:150px;
    height:36px;
    position: relative;
    z-index: 2;
}
.box_btn.blue{ 
    border:2px solid #17a9ca;
    color:#17a9ca;
    margin: 30px 0 0 0; 
}
    .box_btn::after{
        content: '';
        width:20px;
        height:10px;
        background:url('/images/icon/box_btn_arrow.png')center no-repeat;
        background-size: cover;
        position: absolute;
        right:-10px;
        top:10px;
        transition-duration: 0.5s;
    }
    .box_btn.blue::after{
        background:url('/images/icon/box_btn_blue_arrow.png')center no-repeat;
        background-size: cover;
    }

    .box_btn::before{
        content: '';
        background:#17a9ca;
        position: absolute;
        left:0;
        top:0;
        width:0;
        height:101%;
        transition-duration: 0.5s;
        z-index: -1;
    }
    .box_btn:hover{ border:2px solid #17a9ca; }
    .box_btn.blue:hover{ color:#fff; }
    .box_btn:hover::before{ width:101%; }
    .box_btn:hover::after{ right:-25px }


/**개인정보처리방침**/
.infor_modal_wrap{ 
    width:100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    background: rgba(0,0,0,0.4);
    z-index: 30;
    display: none;
}
.infor_modal_wrap.on{ display: block; }
    .infor_modal{ 
        width:1285px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        display: flex;
        align-content: center;
        align-items: center;
        justify-items: flex-end;
        flex-wrap:wrap;
    }
        .close_infor_modal_wrap{ 
            width:100%;
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
            .close_infor_modal{
                width:30px;
                height:30px;
                position: relative;
                display: block;
            }
                .close_infor_modal span{ 
                    width:100%; 
                    height:2px;
                    background: #fff;
                    position: absolute;
                    left:50%;
                    top:50%;
                }
                .close_infor_modal span:first-child{
                    transform: translate(-50%,-50%) rotate(45deg);
                }
                .close_infor_modal span:last-child{
                    transform: translate(-50%,-50%) rotate(-45deg);
                }
        .infor_modal_cnt{
            width:100%;
            height:500px;
            border-radius: 20px;
            background: #fff;
            padding: 30px;
            box-sizing: border-box;
        }
            .infor_modal_txt{ 
                width:100%;
                height:100%;
                overflow-y: scroll;
                line-height: 1.8;
            }
                .infor_modal_txt h1{ text-align: center; font-size:20px; font-weight: 600; margin: 20px auto 40px; }