@charset "utf-8"; 

/* reset */
html{height:100%; font-size:10px/*rem font-size reset*/; scroll-behavior:smooth}
body{overflow-wrap:break-word; word-wrap:break-word; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%}
html, body, iframe,
header, nav, section, article, aside, footer, canvas, 
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, ol, li, div, p, a, span, blockquote, pre, 
address, em, b, i, sub, sup, abbr, 
img, figure, figcaption, audio, video, 
table, caption, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend, label, input, select, textarea, button,
::before, ::after{margin:0; padding:0; box-sizing:border-box}

header, nav, section, article, aside, footer{display:block}
h1, h2, h3, h4, h5, h6{font-size:inherit; font-weight:400}
img{display:block; max-width:100%; border:0}
ol, ul, li{list-style:none}
table{border-collapse:collapse; border-spacing:0}
a{color:inherit; text-decoration:none}
button{background:none; border:0; outline:0}
hr{display:none}
sup, sub{position:relative; font-size:0.75em; line-height:0; vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
:focus{outline:0}

table, input, select, textarea, button{font-size:inherit; font-family:inherit}


/* common*/
body{background:#f7f7f7; font-size:1.6rem; line-height:1.5em; font-family:'Pretendard','맑은고딕',"돋움",sans-serif; color:#222; overflow-x:hidden}
#wrap{position:relative}
.hide{position:absolute; left:-99999px; width:0; height:0; font-size:0}
.fb{font-weight:700}

/* header*****/
.header_wrap{position:relative; z-index:99999; width:100%; background:#fff; border-bottom:2px solid #d2d2d2}
.header_wrap::before{display:block; content:""; position:absolute; top:91px; z-index:80000; width:100%; height:0; background:url(../images/common/sub_nav_bg.gif) repeat-y 50%; background-size:100% auto}
.header_wrap.sub_nav_on::before{height:369px; transition:height 0.5s}

.header_wrap .header_inner{display:flex; justify-content:space-between; align-items:center; max-width:1460px; min-width:1240px; width:96%; height:90px; margin:0 auto; padding:0 20px}
.header_wrap .header_inner a{display:block}
.header_wrap .header_logo a img{height:41px}
    /* navi**/
.header_wrap .nav_wrap{position:relative}
.header_wrap .nav_wrap .nav_list{display:flex}
.header_wrap .nav_wrap .nav_list li{position:relative}
.header_wrap .nav_wrap .nav_list li a{position:relative; width:190px; font-size:2.4rem; line-height:90px; letter-spacing:-0.1em; text-align:center}
.header_wrap .nav_wrap .nav_list li:hover > a{font-weight:700; transition:font-weight 0.3s}
.header_wrap .nav_wrap .nav_list > li > a::before{display:block; content:""; position:absolute; left:50%; bottom:-2px; width:0; height:3px; background:#1a4899}
.header_wrap .nav_wrap .nav_list > li:hover > a::before{left:0; width:100%; transition:left 0.3s, width 0.3s}

.header_wrap .nav_wrap .nav_list li.nav_on > a{font-weight:700}
.header_wrap .nav_wrap .nav_list > li.nav_on > a::before{ left:0; width:100%}

.header_wrap .nav_wrap .nav_list li .sub_list_inner{display:block; position:absolute; top:91px; z-index:90000; width:100%; height:0; background:#fff; border-right:1px solid #e0e0e0; opacity:0; visibility:hidden}
.header_wrap.sub_nav_on .nav_wrap .nav_list li .sub_list_inner{height:370px; padding:10px; transition:height 0.5s, opacity 0.1s; opacity:1; visibility:visible}

.header_wrap .nav_wrap .nav_list li > .sub_list_inner::before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#e0ecfa; opacity:0}
.header_wrap .nav_wrap .nav_list li:hover > .sub_list_inner::before{opacity:1; transition:opacity 0.5s}

.header_wrap .nav_wrap .nav_list li .sub_list_inner ul li a{position:relative; width:100%; padding:6px 0 6px 15px; font-size:1.6rem; line-height:18px; color:#000; text-align:left}
.header_wrap .nav_wrap .nav_list li .sub_list_inner ul li a::before{display:block; content:""; position:absolute; top:12px; left:3px; width:3px; height:3px; background:#787878}
.header_wrap .nav_wrap .nav_list li .sub_list_inner ul li a::after{display:block; content:""; position:absolute; top:9px; left:5px; width:0; height:0; background:#4f5fda; transform:rotate(-135deg)}
.header_wrap .nav_wrap .nav_list li .sub_list_inner > ul > li:hover > a::before{top:13px; left:4px;width:2px; height:6px; background:#4f5fda; transform:rotate(-135deg); transition:width 0.3s, height 0.3s}
.header_wrap .nav_wrap .nav_list li .sub_list_inner > ul > li:hover > a::after{display:block; content:""; position:absolute; top:11px; left:2px; width:6px; height:2px; background:#4f5fda; transform:rotate(-135deg); transition:width 0.3s, height 0.3s}

.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth{padding:5px; background:rgba(0,0,0,0.04)}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li a{width:auto; padding:4px 0 4px 13px; color:#525151}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li:hover a{font-weight:400}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li a::before{top:11px; left:5px; width:0; height:0; background:#4f5fda; transform:rotate(-135deg)}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li a::after{display:block; content:""; position:absolute; top:9px; left:3px; width:0; height:0; background:#4f5fda; transform:rotate(-135deg)}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li:hover a::before{width:2px; height:6px; transition:width 0.3s, height 0.3s}
.header_wrap .nav_wrap .nav_list li .sub_list_inner .sub_2depth li:hover a::after{width:6px; height:2px; transition:width 0.3s, height 0.3s}

.header_wrap .nav_wrap .sub_tit_wrap{position:absolute; top:91px; left:-40%; z-index:91000; width:40%; height:370px; opacity:0; visibility:hidden}
.header_wrap.sub_nav_on .nav_wrap .sub_tit_wrap{opacity:1; visibility:visible; transition:opacity 0.3s}
.header_wrap .nav_wrap .sub_tit_wrap .tit_name{margin:70px 0 40px; font-size:3.3rem; line-height:40px; font-weight:500; color:#fff; letter-spacing:-0.03em; text-align:center}
.header_wrap .nav_wrap .sub_tit_wrap .tit_name span{display:inline-block; vertical-align:top}
.header_wrap .nav_wrap .sub_tit_wrap .tit_name span{vertical-align:top}
.header_wrap .nav_wrap .sub_tit_wrap .tit_name i{font-size:3.8rem}
.header_wrap .nav_wrap .sub_tit_wrap .tit_img img{margin:0 auto}

.header_wrap .side_logo{display:flex; align-items:center}
.header_wrap .side_logo a:first-child{margin-right:15px}

.sub_nav_bg{display:none; content:""; position:fixed; top:0; left:0; z-index:50000; width:100vw; height:100vh; background:rgba(0,0,0,0.7)}
.sub_nav_bg.sub_nav_on{display:block}


/* footer*****/
.footer_wrap{position:relative; width:100%; padding:40px 0; border-top:1px solid #c4c4c4}
.footer_wrap .footer_inner{display:flex; justify-content:space-between; align-items:center; max-width:1360px; min-width:1240px; width:96%; margin:0 auto; padding:0 20px}
.footer_wrap .footer_info{letter-spacing:-0.04em}
.footer_wrap .footer_info .footer_add{font-weight:500; color:#6c6c6c}
.footer_wrap .footer_info .footer_copy{font-size:1.4rem; font-weight:300; color:#7c7c7c}
.footer_wrap .footer_btn_wrap{display:flex}
.footer_wrap .footer_btn_wrap a{display:inline-block; position:relative; margin-left:-1px; padding:0 30px 0 20px; border:1px solid #d2d2d2; line-height:38px; color:#454545}
.footer_wrap .footer_btn_wrap a:first-child{border-radius:20px 0 0 20px}
.footer_wrap .footer_btn_wrap a:last-child{border-radius:0 20px 20px 0}
.footer_wrap .footer_btn_wrap a i{display:block; position:absolute; top:0; right:13px; font-size:1.7rem; line-height:38px; color:#6154e2}
.footer_wrap .footer_btn_wrap a:hover{background:#fff; transition:background-color 0.3s}
.footer_wrap .footer_btn_wrap a:hover i{right:10px; transition:right 0.3s}

@media all and (min-width:1700px)  {
    html{font-size:10.5px}
    .header_wrap .header_inner{max-width:1800px; width:90%}
    .footer_wrap .footer_inner{max-width:1640px; width:86%}
    .header_wrap .nav_wrap .nav_list li a{width:210px}
}

/** popup*/
.layer_popup_wrap{position:fixed; top:0; left:0; z-index:999000; width:100vw; height:100vh; background:rgba(0,0,0,0.6)}
.layer_popup_wrap .popup_box{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}
.layer_popup_wrap .popup_box.main_popup{max-width:500px; width:90%}
.layer_popup_wrap .popup_box .popup_close_wrap > div{display:flex}
.layer_popup_wrap .popup_box .popup_close_wrap{display:flex; justify-content:space-between; padding:10px; background:#eaeaea; line-height:20px}
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']{position:relative; width:20px; height:20px; line-height:20px; appearance:none; cursor:pointer}
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']::before{display:block; content:""; position:absolute; top:2px; left:0; width:16px; height:16px; background:#fff}/*배경*/
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']::after{display:block; content:""; position:absolute; top:0px; left:3px; width:10px; height:16px; border:solid #cdcdcd; border-width:0 3px 3px 0; transform:rotate(45deg)}/*체크*/
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']:checked::before{background:#fff}
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']:checked::after{border-color:#086db5}
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']:disabled::before{background:#dadada; border-color:#cfcfcf}
.layer_popup_wrap .popup_box .popup_close_wrap label{display:inline-block; font-size:1.5rem; line-height:20px; vertical-align:top; cursor:pointer}
.layer_popup_wrap .popup_box .popup_close_wrap label:hover{color:var(--point_deep); transition:color 0.3s}
.layer_popup_wrap .popup_box .popup_close_wrap input[type='checkbox']:checked + label{font-weight:700; color:#086db5}
.layer_popup_wrap .popup_box .popup_close_wrap .btn_popup_close{display:block; font-size:1.5rem; line-height:20px}
.layer_popup_wrap .popup_box .popup_close_wrap .btn_popup_close i{margin-right:5px; line-height:20px; vertical-align:top;}