@charset "utf-8";

* { margin: 0; padding: 0; font-family: "Nanum Gothic";}
a { text-decoration: none; display: block;}
img { border: 0;}
li { list-style: none;}

.nanum-pen-script-regular {
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}


/* header */
.header_wrap { width: 100%; border-bottom: 1px solid #d1d1d1;}
.main_header { width: 1000px; height: 130px; margin: 0 auto; display: flex; justify-content: space-between;}
.logo { display: flex; align-items: center; z-index: 3;}

/* nav */
.nav_wrap { display: flex; flex-direction: column; justify-content: space-between; position: relative;}
div.gnb {display: flex; justify-content: end; z-index: 10;}
/* ul.gnb { display: flex; justify-content: end;}
ul.gnb li { display: flex; align-items: center;}
ul.gnb li::after { content: "|"; font: 0.6em "돋움"; color:#d1d1d1}
ul.gnb li:last-child::after { content: "";}
ul.gnb li a { font: 0.8em "돋움"; color:#999; padding: 2px 4px; transition: all 0.3s;}
ul.gnb li a:hover { color:#a8353a; transform: translateY(-5px);}
 */
ul.lnb { display: flex; justify-content: end; z-index: 3; margin-bottom: 30px;}
ul.lnb > li { height: 40px; width: 125px;}
ul.lnb > li > a { font:500 1.1em "Pretendard"; padding: 10px 5px; color:#777; line-height: 40px; text-align: center;}
ul.lnb > li > a:hover { color:#a8353a;}

/* submenu */
.submenu { display: none; height: 200px;/* 서브메뉴 전체 높이값 */}
.submenu > li { height: 30px; font: 700 0.8rem "Nanum Gothic"; text-align: center;}
.submenu > li > a { color:#999; padding: 5px;} 
.submenu > li > a:hover { color:#a8353a;}

.top { height: 100px; width: 100%; position: absolute; top: 40px; background: #fff; z-index: 1; border-bottom: 1px solid #d1d1d1;}
.menu_bg { width: 1000px; margin: 0 auto; height: 400px; background: url(../images/menu_bg.png) left center no-repeat; display: none;}

/* main_slide */
.main_slide { width: 1440px; margin: 0 auto; position: relative;}

/* 롤링텍스트 */
.box_text { overflow: hidden; position: absolute; bottom: -35px; left: 50%; margin-left: -490px; width: 1000px; padding: 23px 42px; box-shadow: 0 0 5px #0004; font-size: 1.5em; line-height: 1.4; box-sizing: border-box; border-radius: 5px; background: #fff; z-index: 100;}
.box_text > div { overflow: hidden;}
p.rolling_text { width: 2200px; white-space: nowrap; color:#999; animation: rolling 22s linear infinite;}

@keyframes rolling { 
    from { transform: translateX(20%);}
    to { transform: translateX(-102%);}
}

.st { width: 1000px; padding: 50px 0; margin: 0 auto;}/* section size */
/* section01 */
.section_wrap { background: #f2f2f2; width: 100%;}
.section01 { width: 1000px; margin: 0 auto; padding: 80px 0 50px;}
h1.s_title { text-align: center; font:700 2.5em "Nanum Gothic" ;}
h4.small_text { text-align: center; font:700 1.4em "Nanum Gothic"; margin: 15px 0 30px;}
.box_wrap { margin: 0 auto; width: 1000px; display: flex; justify-content: space-between;}
.box { width: 320px; height: 300px; border: 1px solid #d1d1d1; border-radius: 4px; box-shadow: 0 0 3px #0003; padding: 25px; box-sizing: border-box;}
.box h3 { font-size: 1.1em; color:#666}
.box h1 { margin: 10px 0 15px; font-size: 2.2em; }
.box h4 { font-size: 0.9em; line-height: 1.4; color:#999}

.box1 { background: url(../images/box_bg1.png) 95% 95% no-repeat #fff;}
.box1 h1 { color:#d14146}

.box2 { background: url(../images/box_bg2.png) 95% 95% no-repeat #fff;}
.box2 h1 { color:#ffa12e}

.box3 { background: url(../images/box_bg3.png) 95% 95% no-repeat #fff;}
.box3 h1 { color:#5461c7}

/* section02 */
.section02 { padding: 50px 0;}
.section02 .box { display: flex; flex-direction: column; justify-content: space-between;}
.section02 .box h2 { color:#333; text-align: center;}
.section02 .box h3 { text-align: center; color:#999; line-height: 1.3;}
.box4 {  background: url(../images/box_bg4.png) center 35%/20% no-repeat #fff;}
.box5 {  background: url(../images/box_bg5.png) center 35%/45% no-repeat #fff;}
.box6 {  background: url(../images/box_bg6.png) center 35%/35% no-repeat #fff;}

/* section03 */
.section03 { padding: 50px 0; margin: 0 auto; width: 1000px;}
div.thumb { display: flex; justify-content: space-between;}

/* section04 */
.section04 { background: url(../images/section04_bg.png) center/cover no-repeat; padding: 50px 0;}
.section04 .box { border: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: space-between;}
.s4_title { color:#fff; text-align: center; font-size: 1.4em;}
.s4_text { color:#fff; text-align: center; font-size: 1.9em;}

.box7 {  background: url(../images/box_bg7.png) center/40% no-repeat;}
.box8 {  background: url(../images/box_bg8.png) center/40% no-repeat;}
.box9 {  background: url(../images/box_bg9.png) center/40% no-repeat;}

/* section05 */
ul.sprite { display: flex; flex-wrap: wrap; width: 976px; margin: 0 auto;}
ul.sprite li a { width: 244px; height: 75px; border: 1px solid #d1d1d1; box-sizing: border-box; text-indent: -9999px; background: url(../images/sprite.png) no-repeat; border-right: 0; transition: all 0.3s;}
ul.sprite li:nth-child(4n) a { border: 1px solid #d1d1d1;}
ul.sprite li:nth-child(4) ~ li a { border-top: 0;} 

/* bacground-position */
ul.sprite li:nth-child(1) a { background-position: 0 0;}
ul.sprite li:nth-child(2) a { background-position: 0 -75px;}
ul.sprite li:nth-child(3) a { background-position: 0 -150px;}
ul.sprite li:nth-child(4) a { background-position: 0 -225px;}
ul.sprite li:nth-child(5) a { background-position: 0 -300px;}
ul.sprite li:nth-child(6) a { background-position: 0 -375px;}
ul.sprite li:nth-child(7) a { background-position: 0 -450px;}
ul.sprite li:nth-child(8) a { background-position: 0 -525px;}

/* hover */
ul.sprite li:nth-child(1) a:hover { background-position: -244px 0;}
ul.sprite li:nth-child(2) a:hover { background-position: -244px -75px;}
ul.sprite li:nth-child(3) a:hover { background-position: -244px -150px;}
ul.sprite li:nth-child(4) a:hover { background-position: -244px -225px;}
ul.sprite li:nth-child(5) a:hover { background-position: -244px -300px;}
ul.sprite li:nth-child(6) a:hover { background-position: -244px -375px;}
ul.sprite li:nth-child(7) a:hover { background-position: -244px -450px;}
ul.sprite li:nth-child(8) a:hover { background-position: -244px -525px;}

/* footer*/
.footer_wrap { width: 100%; border-top: 1px solid #d1d1d1;}
.main_footer { width: 1000px; margin: 0 auto; padding: 40px 0; display: flex; justify-content: space-between;}
.b_logo { font: 2em "Nanum Pen Script"; color:#777}
.copyright { display: flex; flex-direction: column; justify-content: space-between;}
ul.f_lnb { display: flex;  margin-bottom: 20px;}
ul.f_lnb li {  display: flex; justify-content: center; align-items: center;}
ul.f_lnb li::after { content: "|"; font-size: 0.8em; color:#c1c1c1;}
ul.f_lnb li:last-child::after { content: ""; }
ul.f_lnb li a { color:#999; font: 700 0.9em "Nanum Gothic"; padding: 2px 20px;}
ul.f_lnb li a:hover { color:#a8353a}

ul.copy {font:700 0.9em "Nanum Gothic"; color:#999; margin-left: 20px;}
ul.copy li { line-height: 1.8;}

/* famliy */
.family { position: relative; cursor: pointer;}
ul.family_site { position: absolute; top: -107px; display: none; border: 1px solid #d1d1d1; background: #f1f1f1; width: 120px; padding: 5px; box-sizing: border-box; }
ul.family_site li a { font: 12px "Nanum Gothic"; color:#999; line-height: 2;}
ul.family_site li a:hover { color:#a8353a}

a.return-top { position:fixed; right: 15px; bottom: 15px; color:#000; opacity: 0.4; transition: all 0.3s;}
a.return-top:hover { color:#a8353a; opacity: 1;}


@media screen and (min-width:960px) {/* 스크린 */
  #ham, .mobile_lnb, .br { display: none;}
}/* 960px(스크린) */

@media screen and (min-width:768px) and (max-width:959px) {/* 탭 */
  
}/* 탭 */

@media screen and (max-width:767px) { /* 모바일 */
.lnb, .box_text, .section05 { display: none !important;}
.main_header, .main_slide, .section01, .section03, .box_wrap, .main_footer { width: 100% !important;}

.box_wrap { flex-wrap: wrap;}
.box { width: 95%; margin: 15px auto;}
.thumb { width: 95%; margin: 0 auto;}
.thumb img { width: 32%;}

.main_footer { flex-wrap: wrap;}

/* 모바일메뉴 */
#ham{position:fixed;top:40px; right:10px; z-index:999; border:1px solid #d1d1d1; border-radius:4px; transition:all 0.3s;box-shadow:2px 2px 2px rgba(0,0,0,0.4); }
#ham a { color:#999; transition:all 0.3s}
#ham a:hover { color:#333}
#ham:hover { border-color:#333}

.mobile_lnb{ display:none; position: fixed;right:0;top:0; width:100%; height:100%;background:rgba(0,0,0,0.7); z-index:9999;  box-shadow:0px 3px 3px #999;}
.mobile_lnb { padding:0; box-sizing:border-box}
.mobile_lnb > ul.navi {  width:100%; text-indent:10px; padding:65px 0px 30px; background:#fff;border-bottom:1px solid #d1d1d1;}
.mobile_lnb > ul > li { border-bottom:1px solid #d1d1d1;}
.mobile_lnb > ul > li > a { display:block; color:#666; font-weight:400; font-size:12px;transform:translate(0,0); transition:all 0.3s}
.mobile_lnb > ul > li > a:hover { color:#F60; transform:translate(5px,0);}

.mobile_lnb > .img1{position: absolute; left:5px;top:5px; cursor: pointer; width:40%;}
.mobile_lnb > .img2{ position: absolute;right:5px;top:10px; cursor: pointer; /* width:7%; */ border:1px solid #666; padding:1px; border-radius:2px; color:#666}

/* 아코디언메뉴(서브메뉴) */
li.group { margin-bottom:0px;background:#fff;}
div.title { height:35px; line-height:35px; cursor:pointer; font-weight:400; padding:3px 0; font-family: "Pretendard";}
div.title a {color:#333;}
ul.submenu1 li { height:30px; margin-bottom:0px; line-height:30px; background:#f4f4f4; cursor:pointer;}
ul.submenu1 li a { display:block; width:100%; height:100%; color:#333; text-decoration:none; font-size:13px; text-align: left;}
ul.submenu1 li a:hover { background:#f4f4f4; color:#000}

/* section01 */
.section01 { padding:30px 15px; box-sizing: border-box;}
h1.s_title { font-size: 5vw; }
h4.small_text { font-size: 3vw; line-height: 1.4;}
.br { display: block; }

/* section04 */
.section04 { padding: 0;}
.section04 .box_wrap { flex-wrap: nowrap;}
.box4 { background-size: 15%;}
.box5 { background-size: 30%;}
.box6 { background-size: 23%;}
.s4_title, .s4_text { font-size: 3.5vw;}

/* footer */
.main_footer { position: relative;}
.f_lnb { margin: 20px 0 0 0;}
.f_lnb li a { padding: 0 5px !important;}
ul.copy {margin:10px 0 0 0; letter-spacing: -0.5px;}
.family { position: absolute; right: 10px; top: 40px;}

/* 인사말(춘천연탄은행) */
.section_wrap1, .sub_section {width: 100% !important;}
.l_nav {display: none;}
.g_top {background-size: 43% !important;}

/* 나눔은행(사업소개) */
.b_thumb li img {width: 100%;}
}/* 모바일 */