@charset "utf-8";
@import url('/fininfo/design/common/css/NanumSquareNeo.css');
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot');
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix') format("embedded-opentype"), url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff') format("woff"), url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf') format("truetype");
}
@media all and (max-width:1023px) {
    html {font-size:0.9px;}
}
@media all and (max-width:768px) {
    html {font-size:0.85px;}
}


/*var*/
:root {
    --hcenter: translateY(calc(-50% + 0.5px));
    --wcenter: translateX(calc(-50% + 0.5px)) ;
    --center: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) ;
    --green: #007a46 ;
    --blue: #075fa8;
    --sprite : url('../img/sprite.png') no-repeat;
}

/*common*/
::-webkit-scrollbar { width:10rem; height:10rem; }
::-webkit-scrollbar-thumb { background:var(--green);}
::-webkit-scrollbar-track { background:#ddd; }

html { font-size:1px; }
body, input, button, textarea, select { font-family:'NanumSquareNeo', sans-serif; font-weight:400; font-size:16rem; color:#111; line-height:1.7; letter-spacing: -0.5px; }
input, button, textarea, select { background:#fff; border-radius:0; vertical-align:middle; border:1px solid #ddd;}
button, input[type="submit"] { cursor:pointer; }
a { color:#222; }
.green {color:var(--green);}
.blue {color:var(--blue);}

.wrap { max-width:1400px; width:96%; margin:0 auto; }
.controls { display:flex; align-items:center; justify-content:center; }
.controls a { position:relative; display:block; width:17px; height:17px; text-indent:-99999px; margin-left:10rem; }
.controls a.play { display:none; }
.controls a::before { content:''; position:absolute; left:50%; top:50%; width:15px; height:16px; background:var(--sprite) -4px -239px;  transform:var(--center); }
.controls a.play::before { width:10px; background-position-x:-59px; }
.controls.white {gap:10rem;}
.controls.white a.next { transform:rotateY(180deg); }
.controls.white a::before { background-position:-265px -240px; }
.controls.white a.play::before { width:11px; height:18px; background-position:-320px -238px; }
.controls.white a.arrow::before { width:11px; height:18px; background-position:-214px -238px; }

header { display:flex; align-items:center; justify-content:space-between; height:100rem; padding:0 40rem; }
/*
header { position:relative; }
header::before { content:''; position:absolute; left:0; top:50rem; width:100%; height:1px; background:#ff0000; }
*/
header h1 a { display:flex; align-items:center; font-size:22rem; line-height:1.3; gap:15rem; }
header h1 a::before { content:''; display:block; width:75px; height:55px; background:var(--sprite) 0 0; }
header h1 a span { display:block; font-size:18rem; font-weight:400; }
header .sitemap { display:flex; align-items:center; gap:10rem; font-size:15rem;  }
header .sitemap::before {content:''; display:block; width:24px; height:14px; background:var(--sprite) -112px 0; }

#pc_nav { position:absolute; left:50%; top:15rem; transform:var(--wcenter); z-index:20; }
#pc_nav .depth1 { display:flex; justify-content:center; width:480rem; transition:all 0.3s; }
#pc_nav .depth1 > li > a { display:block; font-size:20rem; text-align:center; font-weight:500; white-space:nowrap; padding:20rem 30rem; }
#pc_nav .depth1 > li > a.on { font-weight:700; color:var(--green); }
#pc_nav .depth1 > li:last-of-type {display:none;}
#pc_nav .depth2 { display:none; margin-top:10rem; }
#pc_nav .depth2 a { display:inline-flex; align-items:center; text-align:left; font-size:16rem; gap:8rem; margin:5rem 0; background: linear-gradient(#fffccc 0 100%) no-repeat 15rem calc(100% + 5px) / 0 12rem; transition:all 0.3s; }
#pc_nav .depth2 a::before { content:''; display:block; width:5px; height:5px; background:#555; border-radius:50%; }
#pc_nav .depth2 a:hover { background-size:100% 12rem; }
#pc_nav .depth2 a:hover::before {background:var(--green);}
#pc_nav .depth3 {display:none;}

header .nav_bg { position:absolute; left:-60rem; top:0; width:calc(100% + 120rem); height:0; background:rgba(255,255,255,.7); backdrop-filter:blur(10px); box-shadow:0 0 20rem rgba(0,0,0,0.2); transition:0.2s; z-index:10; }
header.nav_on #pc_nav .depth2 { display:block; }
header.nav_on #pc_nav .depth1 { width:900rem;}
header.nav_on #pc_nav .depth1 > li { width:25%; }
header.nav_on .nav_bg { height:350rem; }

#m_nav_open,
#m_nav { display:none; }

footer { background:#6c7681; color:#fff; }
footer a { color:#fff; }
.banner { border-bottom:1px solid #828a94; }
.banner .wrap { display:flex; align-items:center; height:80rem; gap:15rem 25rem; }
.banner .slide {overflow:hidden;}
.banner .swiper-slide {width:auto; padding:0 30rem; }
footer > .wrap {padding:60rem 0; }
footer .link { display:flex; align-items:center; gap:5rem 30rem; flex-wrap:wrap; }
footer .link a.point { color:#fff000; }
footer .address { display:flex; flex-wrap:wrap; flex-wrap:wrap; gap:5rem 30rem; margin:20rem 0; }
footer .copy { font-size:13rem; letter-spacing:1rem;  }



/*---------------------------------------------------------------*/



@media all and (max-width:1480px) {
    header {padding:0; width:96%; margin:0 auto; }
}
@media all and (max-width:1300px) {
    #pc_nav {left:60%;}
}
@media all and (max-width:1023px) {
    header .sitemap,
    #pc_nav { display:none; }
    #m_nav_open { display:flex; }

    /*mobile nav*/
    #m_nav { display:block; }
    #m_nav a {display:block;}
    #m_nav a.on {color:var(--blue); font-weight:600;}
    #m_nav a + ul { display:none; }
    #m_nav { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-1; }
    #m_nav::before { content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0); transition:0.5s; z-index:10; }
    #m_nav .scroll { position:absolute; top:0; right:-100%; min-width:320px; width:calc(100% - 300px); height:100%; background:#fff; overflow-y:auto; transition:0.5s; z-index:20; padding:30px; }
    #m_nav.on { z-index:200;}
    #m_nav.on .scroll { right:0; }
    #m_nav.on::before { background:rgba(0,0,0,0.5); }
    #m_nav .m_nav_top {overflow:hidden; margin-bottom:30rem;}
    #m_nav .m_nav_top a { display:inline-block; font-size:16rem; }
    #m_nav .depth1 > li { border-bottom:1px solid #ededed; }
    #m_nav .depth1 > li > a { position:relative; font-size:20rem; font-weight:600; padding:10rem 35rem 10rem 0;}
    #m_nav .depth1 > li > a.more::after {content:''; position:absolute; right:8px; top:50%; width:9px; height:9px; border-left:2px solid #888; border-bottom:2px solid #888; transform:translate(0, -75%) rotate(-45deg);}
    #m_nav .depth1 > li > a.more.on::after { transform:translate(0, -45%) rotate(135deg);}
    #m_nav .depth2 { padding:5rem 20rem 10rem; }
    #m_nav .depth2 > li > a { position:relative; padding:10rem 0;}
    #m_nav .depth2 > li > a.more::before, #m_nav .depth2 > li > a.more::after {content:''; position:absolute; right:0; top:21rem; width:13rem; height:1px; background:#888;}
    #m_nav .depth2 > li > a.more::after { top:15rem; right:6rem; width:1px; height:14rem;}
    #m_nav .depth2 > li > a.more.on::after {display:none;}
    #m_nav .depth3 a { display:flex; align-items:center; font-size:15rem; color:#666; padding:3rem 15rem; }
    #m_nav .depth3 a::before {content:''; display:block; width:4px; height:4px; background:#333; border-radius:50%; margin-right:10rem; }
    #m_nav .depth3 a.on { color:#444; }
    #m_nav_close { position:absolute; right:20rem; top:20rem; width:40rem; height:40rem; text-indent:-99999px; }
    #m_nav_close::before { content:''; position:absolute; left:50%; top:50%; width:19px; height:19px; background:var(--sprite) -112px -75px; transform:var(--center); }
}
@media all and (max-width:480px) {
    header h1 { transform:scale(0.85); margin-left:-20rem; }
    #m_nav_open { margin-left:-20rem; }
    /*
    #m_nav_open {text-indent:-99999px; gap:0; justify-content:flex-end; width:40rem; height:40rem;}
    */
    .banner .wrap { justify-content:space-between; flex-wrap:wrap; height:auto; padding:30rem 0; }
    .banner .slide {width:100%;}
    .banner .swiper-wrapper { gap:30rem;}
    .banner .swiper-slide {padding:0;}
}