@import url("layout.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 03. 10.

YHY : 2011202 웹접근성 명도대비 수정
-------------------------------------------------*/

#header {position: relative; top: auto; left: auto; z-index: 9999;}

/* 251127 순차적 구조 나중에 롤백 */
.locationWrap {position: relative; height: 60px; background: #f3f3f3; z-index: 11;}
.locationWrap .container {position: absolute; top: 0;left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.location .home,
.location a {display: inline-block; padding: 0 1rem; line-height: 60px; color: #666;}
.location a {width: 100%; white-space: nowrap;}
.location .home,
.location .depth1 {float: left;}
.location .home i {margin-right: 0.5rem; width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 1rem; color: #fff; background: #666; border-radius: 50%;}

.location .depth1 {position: relative; transition: all .25s ease; -webkit-transition: all .25s ease;}
.location ul {padding-top: 60px;}
.location li {width: 100%; min-width: 290px; height: 60px; opacity: 0; visibility: hidden; transition: all .25s ease; -webkit-transition: all .25s ease;}/* 200518 */
.location li.active {position: absolute; top: 0; left: 0; opacity: 1; visibility: visible;}
.location li.active > a {position: relative; padding: 0 3rem; color: #000;}
.location li.active > a:before {position: absolute; top: 0; left: 1rem; font-family: 'xeicon'; content: "\e940";}
.location li.active > a:after {position: absolute; top: 0; right: 1rem; font-family: 'xeicon'; content: "\e936";}
.location .depthWrap{display: flex;}
.location .depth1Wrap,
.location .depth2Wrap,
.location .depth3Wrap {position: relative;}
.location .depth1 > li.active .depth2,
.location .depth2 > li.active .depth3 {opacity: 1; visibility: visible;}
.location .depth1,
.location .depth2,
.location .depth3 {display:none; position: relative;top: 0;height: 0;}
.location .depth1.on,
.location .depth2.on,
.location .depth3.on {display:block;}
.location .depth1.open,
.location .depth2.open,
.location .depth3.open {height: auto;}
.location .depth1.open > li,
.location .depth2.open > li,
.location .depth3.open > li {opacity: 1; visibility: visible; background: rgba(57,60,69,0.63);}
.location .depth1.open > li > a,
.location .depth2.open > li > a,
.location .depth3.open > li > a {color: #fff;}
.location .depth1.open > li.active > a:after,
.location .depth2.open > li.active > a:after,
.location .depth3.open > li.active > a:after {content: "\e930";}

/* // 251127 순차적 구조 나중에 롤백 */


.shareWrap {position: absolute; top: 0; right: 0;}
.shareWrap > li {position: relative; float: left;}
.shareWrap a {display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 1rem;}
.shareWrap > li > a {color: #7f7f7f;}
.shareWrap > li > a.share {position: relative;}
.shareWrap > li > a.share:after {position: absolute; left: 0; top: 20px; width: 1px; height: 1rem; background: #ccc; content: "";}
.shareWrap > li > a:hover,
.shareWrap > li > a.active {color: #000;}
.shareWrap a.facebook {color: #fff; background: #1a3d95;}
.shareWrap a.twitter {color: #fff; background: #1da1f2;}
.shareWrap a.kakaotalk {font-size: 25px; color: #3c1e1e; background: #fae301;}
.shareWrap a.kakaostory {font-size: 22px; color: #fff; background: #fbcb00;}
#shareList {position: absolute; left: 0; top: 60px; display: none;}
#shareList a {height: 60px; line-height: 60px;}
#shareList a:focus {border:2px solid #fff; outline-offset:3px !important;} /*20240909 웹접근성*/

/* ========================================== 컨텐츠 레이아웃 */

#contents {position:relative; padding:1.5rem 1rem;}
#contents:after {clear: both; display: block; width: 100%; content: "";}
#contents .container{max-width:100%;}

.titleH2 {width:100%; max-width:1400px; margin:0 auto; padding:2rem 0; font-size:2rem; font-weight:500; color:#111; text-align: center; border-bottom: 4px solid #ebebea;}

.subCont{position:relative; padding:3rem 20px; width:100%; max-width:1400px; margin:0 auto;}
.subCont:after{content:""; display:block; clear:both;}
.subContFull{width:100%;}
.subContFull:after{content:""; display:block; clear:both;}
.subBgGray {background:#f8f8f8; padding:3rem 0; overflow:hidden;}

/* ========================================== 서브 컨텐츠 */

/* animation */
.mtBox *[class*="mot"]{opacity:0; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}
.mtBox *[class*="mot"][class$="-left"]{transform:translateX(-30px); -webkit-transform:translateX(-30px);}
.mtBox *[class*="mot"][class$="-right"]{transform:translateX(30px); -webkit-transform:translateX(30px);}
.mtBox *[class*="mot"][class$="-top"]{transform:translateY(-30px); -webkit-transform:translateY(-30px);}
.mtBox *[class*="mot"][class$="-bottom"]{transform:translateY(30px); -webkit-transform:translateY(30px);}

.mtBox.active *[class*="mot"]{opacity:1; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}
.mtBox.active *[class*="mot1"]{ transition-delay:0s; -webkit-transition-delay:0s; }
.mtBox.active *[class*="mot2"]{ transition-delay:.45s; -webkit-transition-delay:.45s; }
.mtBox.active *[class*="mot3"]{ transition-delay:.9s; -webkit-transition-delay:.9s; }
.mtBox.active *[class*="mot4"]{ transition-delay:1.3s; -webkit-transition-delay:1.3s; }
.mtBox.active *[class*="mot5"]{ transition-delay:1.7s; -webkit-transition-delay:1.7s; }
.mtBox.active *[class*="mot"][class$="-left"]{transform:translateX(0px); -webkit-transform:translateX(0px);}
.mtBox.active *[class*="mot"][class$="-right"]{transform:translateX(0px); -webkit-transform:translateX(0px);}
.mtBox.active *[class*="mot"][class$="-top"]{transform:translateY(0px); -webkit-transform:translateY(0px);}
.mtBox.active *[class*="mot"][class$="-bottom"]{transform:translateY(0px); -webkit-transform:translateY(0px);}

/* 60주년 기념사 */
.grtWrap{position:relative; padding-left:600px;}
.grtWrap .grtImgBox{position:absolute; left:0; top:3rem;}
.grtWrap .grtImg{position:relative; padding:40px;}
.grtWrap .grtImg img{ position:relative; width:475px; height:535px; z-index:1;}
.grtWrap .grtImg .name span{display:inline-block;padding:15px 60px 15px 15px;color: #333;font-size:0.8rem;background:#efbf4a url('/images/web/cu/sub/grt_mark.png') no-repeat 95% 10px;}
.grtWrap .grtImg .name span strong{font-weight:600; font-size:1rem;}
.grtWrap .grtImg .bg{position:absolute; left:0; top:0; width:270px; height:270px; z-index:0;
	background: #006fba; /* Old browsers */
	background: -moz-linear-gradient(left,  #006fba 0%, #17a7db 100%) ; /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #006fba 0%,#17a7db 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #006fba 0%,#17a7db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fba', endColorstr='#17a7db',GradientType=1 ); /* IE6-9 */}
.grtWrap .grtCont{color:#000;}
.grtWrap .grtCont h3{font-size:5rem; line-height:1.2; color:#006fba; text-align:right; letter-spacing:-2px; margin:1rem 0 0;}/*211222 접근성 수정*/
.grtWrap .grtCont h4{font-size:2.5rem; color:#0056a7; letter-spacing:-1.5px; line-height:1.2; font-weight:600; margin:1.5rem 0;}
.grtWrap .grtCont h4 span{display:block;}
.grtWrap .grtCont .txt{font-size:0.8rem;}

.wgTit { font-size:2rem; color:#0055a7; letter-spacing:-1.5px; font-weight:600; line-height:1.5; word-break:keep-all; }

/* 축하 메시지*/
.cgMsgTit { position:relative; word-break: keep-all; margin-bottom:4rem; }
.cgMsgTit p { margin-right:25rem; }
.cgMsgTit .char { position:absolute; right:0; top:0; display:block; width:25rem; }
.cgMsgTit .char img { width:100%; max-width:25rem; height:auto; }
.msgWrap dl { word-break:keep-all; }
.msgWrap .img { position:absolute; top:50%; left:-6.25rem; width:12rem; height:12rem; transform:translateY(-50%); -webkit-transform: translateY(-50%); }
.msgWrap .img img { width:100%; height:100%; }
.msgWrap dl dt { font-size:1rem; font-weight:500; }
.msgWrap dl dd.txt { margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid #0056a7; }
.cgMsg { height:auto; overflow:hidden; }
.cgMsg .cm_msg { position:relative; width:80%; border:2px solid #0056a7; float:right; margin:2rem 0; padding:2.5rem 2rem 2.5rem 10rem; }
.cgMsg .cm_msg:nth-child(2n) { padding:2.5rem 10rem 2.5rem 2rem; float:left; }
.cgMsg .cm_msg dl dt span { position:relative; padding-left:1rem; font-weight:200; }
.cgMsg .cm_msg dl dt span:before { content:''; position:absolute; top:50%; left:0.5rem; margin-top:-0.4rem; width:1px; height:0.8rem; background:#444; content:''; }
.acMsg { position:relative; height:auto; overflow:hidden; background:#f0cdd3; padding:1.5rem 0; } 
.acMsg .acMsgWrap { max-width:1400px; margin:0 auto; height:auto; overflow:hidden; }
.acMsg .ac_msg { position:relative; width:80%; float:right; margin: 2rem 0; padding:3rem 5rem 3rem 10rem; border-radius:10rem; background:#fff; border:none; }
.acMsg .ac_msg:nth-child(2n) { padding:3rem 10rem 3rem 5rem; float:left; }
.cgMsg .cm_msg:nth-child(2n) .img, .acMsg .ac_msg:nth-child(2n) .img { left:auto; right:-6.25rem;}

/* 히스토리 */
.histSub { position:relative; margin:3rem 0; }
.histSub.active:before { content:""; position:absolute; top:3.2rem; left:0; width:100%; height:1px; border-top:1px dashed #0055a7; }
.histSub .histbox { position:relative; width:80%; max-width:1200px; height:auto; margin:0 auto; z-index:2;}
.histSub:last-child .histbox:before { height:3.5rem; }
.histSub > strong { padding-left:0.6rem; font-size:1rem; color:#000; font-weight:600; }
.histSub h3 { width:12rem; font-family: 'Titillium Web'; font-weight:300; font-size:4rem; color:#000; line-height:0.8; background:#fff;  }
.histSub .histList { position:relative; padding:0.8rem 0;}
.histSub .histList:before { content:''; position:absolute; left:-5%; top:0; width:1px; height:0; background:#1a3d95; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition-delay:0.8s; }
.histSub .histList:after { content:''; position:absolute; bottom:-0.5rem; left:-5%; width:1rem; height:1rem; border-radius:1rem; border:3px solid #1a3d95; background:#f0cdd3; margin-left:-0.5rem; opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; transition-delay:1.3s; }
.histSub.active .histList:before { height:100%;  }
.histSub.active .histList:after { opacity:1; }
.histSub .histList li em { font-size:0.9rem; font-weight:500; color:#0055a7; }
.histSub .histList li ul li { margin-bottom:0.7rem; }
.histSub .photoWrap { width:100%; background:#f0cdd3; height:auto; overflow:hidden; }
.histSub .photoWrap ul { width:80%; overflow:hidden; margin:2rem 0; }
.histSub .photoWrap ul.right { float:right;}
.histSub .photoWrap ul li { float:left; width:33.3%; }
.histSub .photoWrap ul li .img { position:relative; display:block; width:100%; height:280px; background:#fff; border-top:5px solid #fff; border-bottom:5px solid #fff; overflow:hidden;  }
.histSub .photoWrap ul.right li:nth-child(1) .img { border-radius:140px 0 0 140px; border-left:5px solid #fff; }
.histSub .photoWrap ul.left li:nth-child(3) .img { border-radius:0 140px 140px 0; border-right:5px solid #fff; }
.histSub .photoWrap ul li .img img { position:relative; width:100%; height:auto; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  }
.histSub .photoWrap ul li i { width:100%; padding:0 1rem; display:block; margin-top:0.5rem; }
.histSub .photoWrap ul li:nth-child(1) i { text-align:right;}
.txtBox p { word-break:keep-all; }
.histSub .histbox2 { position:relative; width:90%; max-width:1400px; height:auto; margin:0 auto; z-index:2; }
.histSub .histbox2 div { width:33%; float:left; padding-right:3rem; }
.histSub .histbox2 div > ul { height:300px; }

/*신협 60주년 기념 광고*/
.adTit h3 { position:relative; font-size:2.2rem; color:#000; font-weight:200; }
.adTit h3 span { position:absolute; left:30rem; bottom:0; }
.adTit h3:before { content:''; position:absolute; left:18rem; bottom:1.6rem; width:0; height:1px; background:#000; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition-delay:0.5s; }
.adTit.active h3:before { width:10rem; }
.adCont div { margin-top:3rem; }
.adCont div:after { clear: both; display: block; width: 100%; content: ""; } 
.adCont h4 {position: relative;  color:#526e1b; font-size:1.5rem;font-weight:300;margin-bottom:1rem;}/* 210107 컬러값수정 : 기존 color: #00854C; */
.adCont h4:before { content:'#'; position:absolute; top:-2rem; left:-2rem; color:#d1e8ca; line-height:1; font-size:5rem; font-weight:400; font-style: italic; z-index:1;}
.adCont h4 span { position: relative; z-index:2; }
.adCont h4 ~ h4 { margin-top:3rem;}
.adCont .img img { width:100%; }
.adCont .imgWrap span { display:block; width:32%; float:left; }
.adCont .imgWrap span + span { margin-left:2%; }

/*특별인터뷰1*/
.intv01, .intv01_2, .intv01_3, .intv01_5 { word-break:keep-all; }
.intv01_3, .intv01_4, .intv01_5 { position:relative; }
.intv01_2 .subCont, .intv01_3.subCont, .intv01_4.subCont, .intv01_5.subCont { padding:0; margin-bottom:3rem; }
.intv01 h3 { position:relative; font-size:2.2rem; color:#000; font-weight:200; }
.intv01 span { font-size:0.8rem; }
.intv01 .img_book { width:25%; min-width:15rem; float:right; text-align:center; }
.intv01 .img_book img { width:100%; }
.intv01_2 { position: relative; }
.intv01_2 .img { position:absolute; left:0; top:0; float:left; width:50%; height:100%; overflow:hidden;}
.intv01_2 .img img { position:relative; left:50%; top:50%; width:100%; height:auto; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.intv01_2 .subCont > div { width:45%; float:right; }
.intv01_3 .ment {display:block;width:100%;font-weight:200;font-size:1.5rem;color: #684800;word-break:keep-all;}
.intv01_4 > div { width:70%; }
.intv01_4 .img { position:absolute; top:20px; width:25%; height:calc(100% - 40px); right:0; overflow:hidden; }
.intv01_4 .img img { width:auto; height:100%; }
.intv01_5 > div { width:60%; float:right;}
.intv01_5 .img { position:absolute; top:20px; width:35%; height:calc(100% - 40px);  left:0; overflow:hidden; }
.intv01_5 .img img { position:relative; left:50%; top:50%; width:100%; height:auto; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.intv01 .pc_yell, .intv01_2 .pc_yell, .intv01_3 .pc_yell, .intv01_4 .pc_yell, .intv01_5 .pc_yell {color:#976d0e;} /* 210107 컬러값 추가 */

/*특별인터뷰2*/
.intv02, .intv02Last { position:relative; max-width:1400px; width:95%; margin:0 auto; height:auto; overflow:hidden; word-break:keep-all; }
.bgGreen { background:#ecefe0; padding:3rem 0; margin-top:3rem;}
.intv02 .tit h3 { text-align:center; color:#519656; font-size:2.2rem; font-weight:400; line-height:1.3; }
.intv02 .tit h3:before { content:''; position:absolute; left:0; top:50%; width:100%; height:5px; } 
.intv02 .tit p { text-align:center; font-weight:500; font-size:0.9rem; margin-top:1.5rem; }
.intv02.right .img { position:absolute; right:0; top:0; width:45%; height:100%; overflow:hidden; }
.intv02.right .img img { position: relative; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.intv02.right .txt { margin-right:50%; }
.intv02.left .img { position:absolute; left:0; top:0; width:30%; height:100%; overflow:hidden; }
.intv02.left .img li { width:100%; overflow:hidden; }
.intv02.left .img li:nth-child(1) { height:60%; }
.intv02.left .img li:nth-child(2) { height:40%; }
.intv02.left .img img { position: relative; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); }
.intv02.left .txt { margin-left:35%; }
.intv02 dl + dl { margin-top:3rem; }
.intv02 dl dt { color:#526e1b; font-size:1rem; margin-bottom:1rem; }/* 210107 컬러값 수정 : 기존 color:#779c2e; */
.intv02 dl dd { position: relative;  padding-left:5rem; display:inline; font-size:0.8rem; }
.intv02 dl dd:before { content:''; position:absolute; width: 3.5rem; height:1px; background:#779c2e; top:0.6rem; left:0; }
.intv02 dl dd:after { content:'\e940\e940'; font-family: 'xeicon'; position:absolute; color:#779c2e; top:0rem; left:2.9rem; letter-spacing:-0.7rem; font-size:1rem; line-height:1.3rem; }
.intv02Last .img { position: relative; float:right; width:calc(100% - 25rem); height:35rem; right:0; top:0; overflow:hidden; }
.intv02Last .img img { position: absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
.intv02Last dl { padding-top:5rem; }
.intv02Last dl dt { color:#779c2e; font-size:1.2rem; margin-bottom:1.5rem; }
.intv02Last dl dd { color:#46814A; font-size:1.2rem; margin:1.5rem 0 0; }/* 명도대비 컬러 수정 : 기존 #519656*/

/*우리동네 신협*/
.ourtownTit { position:relative; max-width:1400px; width:95%; margin:0 auto; word-break: keep-all; margin-top:3rem; }
.ourtownTit h3.pc_skyblue {color:#006fba;} /* 210107 컬러 추가 */
.ourtownTit > div { position: relative; }
.ourtownTit h4 { position:absolute; left:0; top:0; width:7rem; border-bottom:1px solid #0056a7; }
.ourtownTit ul.history { padding-left:10rem; }
.ourtownTit ul.history li { position:relative; padding:0.2rem 0 0.2rem 9rem; }
.ourtownTit ul.history li strong { position:absolute; left:0; top:0.2rem; font-weight:600; }
.ourtownTit ul.history li .pc_skyblue {color:#006fba;} /* 210107 컬러 추가 */
.ourtownImg { max-width:1920px; height:auto; overflow:hidden; margin:0 auto; }
.ourtownImg img { float:left; width:50%; }
.ourtownCont { position: relative; max-width:1400px; width:95%; margin:4rem auto 0; }
.ourtownCont .conbox { position:relative; word-break: keep-all; width:45%; }
.otWrap { position:relative; }
.otWrap .img1 { position:absolute; right:0; top:0; width:50%; height:100%; overflow:hidden; }
.otWrap .img1 img { position:relative; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); height:auto; }
.ourtownCont .ourtown_ment { position:relative; height:auto; word-break: keep-all; margin:4rem 0 0; overflow:hidden; } 
.ourtownCont .ourtown_ment img { position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:50%; }
.ourtownCont .ourtown_ment p { top:50%; width:45%; float:right; color:#007C9A; font-size:1.4rem; font-weight:200; padding:2rem 0; }
.cng_ment { position:relative; background:#e1dbd6; margin-top:2rem; padding:2rem 0; }
.cng_ment .mentTit { max-width:1400px; width:95%; margin:0 auto 2rem; text-align:center; word-break:keep-all;}
.cng_ment .mentTit span { position:relative; display:inline-block; color:#000; font-size:1.5rem; margin:1rem 0;}
.cng_ment .mentTit span:before { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#000; }
.cng_ment .mentTit strong {display:block;color: #594E45;font-weight:700;font-size:2rem;line-height:1.2;}
.cng_ment .mentBox { position: relative; display:table; width:95%; max-width:1400px; min-height:380px; margin:1rem auto; background:#fff; padding:2rem; }
.cng_ment .mentBox .img { position:absolute; bottom:0; left:0; width:520px; text-align:center; }
.cng_ment .mentBox .img img { max-width:100%; }
.cng_ment .mentBox ul { display:table-cell; vertical-align:middle; word-break:keep-all; padding-left:520px; }
.cng_ment .mentBox ul li em.num { display:block; width:1rem; height:1rem; line-height:1rem; background:#0055a7; color:#fff; font-size:0.7rem; text-align:center; border-radius:50%; margin-right:5px; float:left; }
.cng_ment .mentBox ul li span { color:#0055a7; line-height:1rem; font-size:0.9rem; font-weight:600; display:block; margin-bottom:0.5rem;}
.cng_ment .mentBox ul li + li { margin-top:0.8rem; }


/*금융용어사전*/
.finc_d { position:relative; word-break: keep-all; }
.finc_d:before { content:''; position:absolute; left:0; top:0; width:0; height:30rem; background:#b4daae; transition:all 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); -webkit-transition:all 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.finc_d.active:before { width:100%; }
.finc_d p { font-size:1.1rem; }
.finc_d .img { display:block; width:40%; float:right; margin:0 0 5% 5%; text-align:center; }
.finc_d .img img { width:100%; max-width:600px; }
.finc_d .box { position: relative; float:left; }
.finc_d h3  { font-size:2rem; }
.finc_d .txt_onbank { width:15rem; margin-bottom:0.5rem; }
.finc_d h3 span { display:block; }
.finc_d dl { font-size:1rem; margin-top:8rem; }
.finc_d dl dt { color:#339024; margin-bottom:1rem;  }
.finc_d dl dd { font-size:0.8rem; }
.finc_d dl em { padding-right:1rem; }

/*평생어부바*/
.eobuba { position: relative; background:#d5e9d1 url('/images/web/newsrm/sub/bg_green1.png') no-repeat right top 10rem;word-break:keep-all;  }
.eobuba:after { content:''; position:absolute; right:0; top:95rem; width:800px; height:432px; background:url("/images/web/newsrm/sub/bg_green2.png") no-repeat; }
.eobuba:before { content:''; position:absolute; left:0; top:45rem; width:500px; height:440px; background:url("/images/web/newsrm/sub/bg_green3.png") no-repeat; }
.eobuba h3 {font-size:2rem;color: #005832;}
.eobuba .box { position: relative; height:auto; overflow:hidden; z-index:2; }
.eobuba .box .img1 { position:absolute; width:30%; height:auto; left:2rem; bottom:10%; overflow:hidden; border:10px solid #fff; }
.eobuba .box .img1 img { width:100%; }
.eobuba .box.active .img1 { transform: translateX(0px) rotate(-10deg); -webkit-transform: translateX(0px) rotate(-10deg); }
.eobuba .box .img2 { position:relative; width:60%; margin-top:2rem; float:right; border-radius:2rem; overflow:hidden; }
.eobuba .box .img2 img { width:100%; }
.eobuba .box2, .eobuba .box3 { margin-top:4rem; }
.eobuba .box2 .img1 { height:auto; }
.eobuba .box3 { background:url("/images/web/newsrm/sub/bg_eobuba.png") no-repeat left bottom; }

/*온누리에 사랑을*/
.letter { position: relative; min-height:2100px; word-break:keep-all; overflow:hidden; background:url('/images/web/newsrm/sub/bg_letter.png') center no-repeat; padding:8rem 15rem; }
.letter h3 { font-size:2.5rem; text-align:center; color:#0a55a7; font-weight:200; line-height:1.2; }
.letter span { display:block; font-size:0.9rem; line-height:1.8; color:#5e61a6; margin:2.5rem 0;  }
.letter em { text-decoration:underline; }
.letter p { line-height:2; }
.letter i { display:block; font-size:0.75rem; margin-top:2rem; padding-top:1rem; border-top:1px solid #5e61a6; }

/*톡톡 지식창고*/
.healthWrap { background:#fdf7e4; padding-bottom:5rem; }
.healthWrap > div{ max-width:1400px; width:95%; margin:0 auto; padding:4rem 0 0; }
.healthWrap .health { background:#fff; height:auto; overflow:hidden; margin-top:3rem; padding:2rem 4rem; border-right:1px solid #0f2546; border-left:1px solid #0f2546; }
.healthBox { position:relative; height:100%; overflow:hidden; margin-top:3rem; }
.healthBox .img { width:30%; float:left; text-align:center; }
.healthBox dl { padding-left:30%; }
.healthBox dl dt { position:relative; display:inline-block; color:#0f2546; font-size:1.5rem; margin-bottom:2rem; }
.healthBox dl dt:before { position:absolute; bottom:0; width:100%; height:1px; background:#0f2546; content:''; }
.healthBox.right .img { float:right; }
.healthBox.right dl { padding-right:30%; padding-left:0; }
.titFood { font-size:1.8rem; color:#e17779; text-align:center; padding:5rem 0 0; font-weight:600; line-height:1.5; }
.foodBox { width:90%; max-width:1250px; margin:0 auto; padding:2rem 0; background:#fff; }
.foodBox:after { clear: both; display: block; width: 100%; content: ""; } 
.foodBox li { position:relative; width:50%; height:9rem; word-break:keep-all; margin:1rem 0; padding:1rem 0; float:left; }
.foodBox li img { position:absolute; top:0rem; float:left; }
.foodBox li:nth-child(2n+1) img { left:-75px; }
.foodBox li:nth-child(2n) img { right:-75px; }
.foodBox li:nth-child(2n+1) dl { padding:0 20px 0 100px; }
.foodBox li:nth-child(2n) dl { padding:0 100px 0 20px; }

/*인생 한 소절*/
.message { background:url('/images/web/newsrm/sub/bg_flower1.png') no-repeat center left 2rem, url('/images/web/newsrm/sub/bg_flower2.png') no-repeat top right 10rem, url('/images/web/newsrm/sub/bg_flower3.png') no-repeat bottom right; }
.message dl { width:60%; height:auto; overflow:hidden; word-break:keep-all; padding:1rem; float:left; background:rgba(255,255,255,0.6); }
.message dl:nth-child(2n) { float:right; text-align:right; }
.message dl + dl { margin-top:3rem; }
.message dl dt { position:relative; font-size:1.2rem; line-height:2; margin-bottom:1rem; color:#000; }
.message dl dt:before { content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#000; }
.message dl dd { font-size:0.9rem; }
.message dl dd.name { margin-top:1rem; font-size:0.8rem; color:#000; font-weight:500; text-align:right; }


@media screen and (max-width: 1440px){

	.subCont{width:96%; padding:3rem 0;}
	.adCont { padding:0 2rem; }
	
	/* 축하 메시지*/
	.acMsg .acMsgWrap { width:96%; }

	/*히스토리*/
	.histSub .photoWrap ul { width:95%; }
	.histSub .photoWrap ul li .img { height:230px; }
	
	/*특별인터뷰1*/
	.intv01_2 .img img { width:auto; height:100%; }

	/*평생어부바*/
	.eobuba .box3 { background:none; }
	.eobuba .box3 .img2 { width:100%; }

}
@media screen and (max-width: 1240px){

	 /* 251127 순차적 구조 나중에 롤백 */
    	.locationWrap .container {padding-right: 120px;}
	.location .home {display: none;}
	.location li {min-width: 100%;}
	.location li.active:after {position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #ccc; content: "";}
	.location li.active.depCt:after{display:none;}
	.location li.active > a {padding: 0 1rem;}
	.location li.active > a:before {display: none;}

	.location .depth1Wrap,
	.location .depth2Wrap,
	.location .depth3Wrap {width:100%;}
	.location .depthWrap div:not(.mobLnb){display: none;}
	.location .depth1{width:100%;}
	.location .depth2{width:100%; left:0;}
	.location .depth3 {width:100%; left:0;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2 > li.active.depCt > a{display:none;}
/* // 251127 순차적 구조 나중에 롤백 */
	
	/* 60주년 기념사 */
	.grtWrap{padding-left:450px;}
	.grtWrap .grtImg{padding:30px;}
	.grtWrap .grtImg img{width:375px; height:auto;}

	/*축하 메시지*/
	.cgMsgTit p { margin-right:20rem; }
	.cgMsgTit .char { width:20rem; }
	.cgMsg .cm_msg,.acMsg .ac_msg { width:calc(100% - 6.25rem); }
	.cgMsg .cm_msg dl dt span { display:block; padding-left:0; }
	.cgMsg .cm_msg dl dt span:before { display:none; }

	/*특별인터뷰1*/
	.intv01_5 .img img { width:auto; height:100%; }

	/*특별인터뷰2*/
	.intv02Last .img img { width:100%; right:50%; transform: translate(50%,-50%); -webkit-transform: translate(50%,-50%); }

	/*온누리에 사랑을*/
	.letter { background:url('/images/web/newsrm/sub/bg_letter2.png'); min-height:auto; padding:8rem 5rem; }

	/*톡톡 지식창고*/
	.healthBox dl { padding-left:0; }
	.healthBox.right dl { padding-right:0; }
	.healthBox .img { width:auto; margin:0 2rem 2rem 0; }
	.healthBox.right .img { margin:0 0 2rem 2rem; }
	.foodBox { width:100%; }
	.foodBox li { padding:0 1rem; }
	.foodBox li:nth-child(2n+1) dl, .foodBox li:nth-child(2n) dl { padding:0; }
	.foodBox li img { position:relative; top:auto; margin-right:1rem; }
	.foodBox li:nth-child(2n+1) img { left:auto;; }
	.foodBox li:nth-child(2n) img { right:auto; }

	/*우리동네 신협*/
	.ourtownCont .ourtown_ment p br { display:none; }

}

@media screen and (max-width: 1024px){

	.titleH2 { margin-top:0; }
	.locationWrap .container {padding-right: 60px;}
	/* .location{margin:0;}
	.location .home {display: none;}
	.location li {min-width: 100%;}
	.location li.active:after {position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #ccc; content: "";}
	.location li.active.depCt:after{display:none;}
	.location li.active > a {padding: 0 1rem;}
	.location li.active > a:before {display: none;}

	.location .depth1{width:100%;}
	.location .depth1 ul{width:100%; left:0; opacity:0;}
	.location .depth1 ul{}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2 > li.active.depCt > a,
	.location .depth3 > li.active.depCt > a{display:none;} */

	.shareWrap > li > a.print{display:none;}
	.shareWrap > li > a.share:after {display:none;}
		
	/* 60주년 기념사 */
	.grtWrap{padding-left:0;}
	.grtWrap .grtImgBox{position:relative; left:auto; top:auto; text-align:center;}
	.grtWrap .grtImg{display:inline-block; float:none;}
	.grtWrap .grtImg .name span{float:left;}

	/*특별인터뷰1*/
	.intv01_4 > div { width:60%; }
	.intv01_4 .img { width:35%; }

	/*평생어부바*/
	.eobuba .box.active .img1 { transform:translateX(0px); -webkit-transform:translateX(0px); }
	.eobuba .box .img1 { position:relative; bottom:auto; left:auto; width:100%; border:none; text-align:center; margin-top:2rem; }
	.eobuba .box .img1 img { width:auto; max-width:100%; border-radius:2rem; }
	.eobuba .box .img2 { width:100%; max-width:600px; float:none; margin:2rem auto 0; }
	
	/*우리동네 신협*/
	.ourtownCont {margin-top:2rem; }
	.ourtownCont .ourtown_ment img { position:relative; left:auto; top:auto; transform:translateY(0); -webkit-transform:translateY(0); display:block; max-width:100%; width:auto; margin:0 auto; }
	.ourtownCont .ourtown_ment p { width:100%; padding-bottom:0; }
	.cng_ment .mentBox .img { position:relative; left:auto; bottom:auto; width:100%; margin-bottom:1rem; } 
	.cng_ment .mentBox ul { display:block; width:100%; padding-left:0; }

	/*톡톡 지식창고*/
	.foodBox li { width:100%; height:auto; padding:0 2rem; }
}

@media screen and (max-width: 900px){

	/*특별인터뷰1*/
	.intv01 > div { width:100%; }
	.intv01_2, .intv01_3, .intv01_5 { margin-top:1rem; }
	.intv01_2 .subCont > div, .intv01_4 > div, .intv01_5 > div { width:100%; }
	.intv01_2 .img, .intv01_4 .img, .intv01_5 .img { position: relative; width:100%; height:auto; left:auto; top:auto; }
	.intv01_4 .img { height:30rem; text-align:center; background:#eee; }
	.intv01_2 .img, .intv01_4 .img, .intv01_5 .img { margin-bottom:20px; }
	.intv01_2 .img img, .intv01_5 .img img { width:100%; height:auto; left:auto; top:auto; transform: none; -webkit-transform: none; }

	/*특별인터뷰2*/
	.intv02.right .img { position: relative; right:auto; top:auto; height:30rem; float:right; margin:0 0 1.5rem 1.5rem; }
	.intv02.right .txt { margin-right:0; }
	.intv02.left .img { position:relative; left:auto; top:auto; width:50%; height:40rem; float:left; margin: 0 1.5rem 1.5rem 0; }
	.intv02.left .txt { margin-left:0; }
	.intv02Last dl { padding-top:0; }
	.intv02Last .img { width:100%; height:25rem; margin-bottom:1.5rem; }
	.intv02Last .img img { width:auto; max-width:100%; }

	
	/*우리동네 신협*/
	.ourtownImg img { width:100%; } 
	.ourtownCont .conbox { width:100%; }
	.otWrap .img1 { position:relative; right:auto; top:auto; width:95%; height:auto; margin:1rem auto 0; }
	.otWrap .img1 img { left:auto; top:auto; transform: none; -webkit-transform: none; width:100%; } 

}

@media screen and (max-width: 840px){

	/*축하 메시지*/
	.cgMsgTit { margin-bottom:2rem; }
	.cgMsgTit p { margin-right:0; }
	.cgMsgTit .char { width:15rem; }
	.cgMsg .cm_msg, .acMsg .ac_msg { width:100%; padding:16rem 2rem 2rem !important; margin:1rem 0; }
	.acMsg .ac_msg { border-radius:2rem; }
	.msgWrap .img { left:50% !important; right:auto !important; top: 2rem; transform: translateX(-50%); -webkit-transform: translateX(-50%); }

	/*히스토리*/
	.histSub .photoWrap ul { width:80%; margin:2rem auto; }
	.histSub .photoWrap ul.right { float:none; }
	.histSub .photoWrap ul li { width:100%; margin-bottom:1rem; }
	.histSub .photoWrap ul li .img { height:auto; border-radius:0 !important; border:none !important;}
	.histSub .photoWrap ul li .img img { left:auto; top:auto; transform: none; -webkit-transform: none;}
	.histSub .photoWrap ul li:nth-child(1) i { text-align:left; }
	.histSub .histbox2 { width:100%; }
	.histSub .histbox2 div { width:80%; margin:0 auto; float:none; }
	.histSub .histbox2 div + div { margin-top: 1.5rem; }
	.histSub .histbox2 div > ul { height:auto; }

	/*신협 60주년 기념 광고*/
	.adTit h3 br { display:none; }
	.adTit h3:before { display:none; }
	.adTit h3 span { position: relative; left:auto; bottom:auto; display:block; }
	
	/*금융용어사전*/
	.finc_d h3 br { display:none; }
	.finc_d .img { float:none; width:100%; margin:0 0 2rem; }
	.finc_d dl { margin-top:2rem; }

	/*인생 한 소절*/
	.message dl { width:100%; padding:1.5rem 1rem; }
	.message dl:nth-child(2n) { text-align:left; }
	.message dl + dl { margin-top:0; }

}

@media screen and (max-width: 768px){

	/*평생어부바*/
	.eobuba { background:#d5e9d1; }
	.eobuba:before, .eobuba:after { display:none; }

	/*톡톡 지식창고*/
	.healthWrap .health { padding:0 2rem 2rem; }
	.healthBox { margin-top:1.5rem; }
	.healthBox .img { width:100%; margin:0 0 1rem; }
	.healthBox.right .img { margin:0 0 1rem; }
	.healthBox .img img { transform:scale(0.8); -webkit-transform:scale(0.8); }


	/* ========================================== 컨텐츠 레이아웃 */
	.subBgGray {padding:1.5rem 0;}


}

@media screen and (max-width: 690px){

	/*축하 메시지*/
	.cgMsgTit h3 br { display:none; }
	.cgMsgTit .char { position: relative; right:auto; top: auto; width:100%; text-align:center; }
	.cgMsgTit .cm_msg, .acMsg .ac_msg { margin:1rem 0; }
	
	/*온누리에 사랑을*/
	.letter { padding:5rem 1.5rem; } 
	.letter h3 { font-size:2rem; }

	/*우리동네 신협*/
	.ourtownTit h4 { position: relative; left:auto; top:auto; }
	.ourtownTit ul.history { padding-left:0; }
}

@media screen and (max-width: 640px){

	.locationWrap .container{padding-right:60px;}
	.location .depth1{width:100%;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2{left:0;}
		
	/* 60주년 기념사 */
	.grtWrap .grtImg img{width:300px; height:auto;}
	.grtWrap .grtCont h3{font-size:3.5rem; }
	.grtWrap .grtCont h4{font-size:2rem; }

	/*특별인터뷰2*/
	.intv02.right .img { width:100%; margin:0 0 1.5rem; } 
	.intv02.left .img { width:100%; margin:0 0 1.5rem; }

}

@media screen and (max-width: 560px){

	.locationWrap .container{padding-right:60px;}
	.location .depth1{width:100%;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2{left:0;}
		
	/* 60주년 기념사 */
	.grtWrap .grtImg img{width:300px; height:auto;}
	.grtWrap .grtCont h3{font-size:3.5rem; }
	.grtWrap .grtCont h4{font-size:2rem; }

	/*신협 60주년 기념 광고*/
	.adTit h3 { word-break: keep-all; font-size:1.8rem; }
	.adTit h3 span { display:inline-block; }
	.adCont .imgWrap span { width:100%; }
	.adCont .imgWrap span + span { margin-left:0; margin-top:2rem; }

	/*특별인터뷰1*/
	.intv01 .img_book { width:100%; }
	.intv01 .img_book img { max-width:15rem; }

	/*톡톡 지식창고*/
	.foodBox li img { display:block; margin:0 auto; float:none; }

}
@media screen and (max-width: 480px){
		
	/* 60주년 기념사 */
	.grtWrap .grtImg{padding:15px;}
	.grtWrap .grtImg img{width:250px; height:auto;}
	.grtWrap .grtImg .bg{width:180px; height:180px;}
	.grtWrap .grtCont h3{font-size:3rem; }
	.grtWrap .grtCont h4{font-size:1.6rem; }

	/*특별인터뷰2*/
	.intv02Last dl dd br { display:none; }

	/*우리동네 신협*/
	.ourtownTit ul.history li strong { position:relative; top:auto; left:auto; display:block; }
	.ourtownTit ul.history li { padding-left:0; }
	
}

@media print {
	#header, #footer, .sVisual, .locationWrap, .titleH2 {display: none; width: 0; height: 0;}
	.container { min-width:100%; page-break-after:always; zoom:65%; }
}