@charset "utf-8";
/* main */
body#main #mainVisual{position:relative; z-index:0;}
body#main #mainVisual>[class*="btn_"]{
	display:block; position:absolute; top:50%; z-index:100; width:140px; height:140px; margin-top:-70px; background-repeat:no-repeat; background-position:center center;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #mainVisual>[class*="btn_"] span{overflow:hidden; display:block; position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; text-indent:-1000px; background-repeat:no-repeat; background-position:center center;}
body#main #mainVisual>.btn_prev{left:50%; margin-left:-812px;}
body#main #mainVisual>.btn_next{right:50%; margin-right:-812px;}
body#main #mainVisual>.btn_play,
body#main #mainVisual>.btn_stop{right:50%; margin-right:-904px;}
body#main #mainVisual>.btn_prev:before,
body#main #mainVisual>.btn_next:before{
	opacity:0; content:""; display:block; position:absolute; left:50%; top:50%; z-index:5; width:92px; height:92px; margin:-46px 0 0 -46px; background-color:#1d83d0;
	border-radius:50%;
	-webkit-border-radius:50%;
	transform:scale(0);
	-webkit-transform:scale(0);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #mainVisual>.btn_prev:hover:before,
body#main #mainVisual>.btn_next:hover:before{
	opacity:1;
	transform:scale(1);
	-webkit-transform:scale(1);
}
body#main #mainVisual>.btn_prev:after,
body#main #mainVisual>.btn_next:after{
	content:""; display:block; position:absolute; left:50%; top:50%; width:140px; height:140px; margin:-70px 0 0 -70px; background-color:rgba(255,255,255,0.1);
	border-radius:50%;
	-webkit-border-radius:50%;
	transform:scale(0);
	-webkit-transform:scale(0);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #mainVisual>.btn_prev:hover:after,
body#main #mainVisual>.btn_next:hover:after{
	transform:scale(1);
	-webkit-transform:scale(1);
	transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
}
body#main #mainVisual>.btn_prev span{background-image:url(/images/center/layout/main_visual_prev.png);}
body#main #mainVisual>.btn_next span{background-image:url(/images/center/layout/main_visual_next.png);}
body#main #mainVisual>.btn_prev span:after{right:0;}
body#main #mainVisual>.btn_next span:after{left:0;}
body#main #mainVisual>.btn_prev span:after,
body#main #mainVisual>.btn_next span:after{
	content:""; display:block; position:absolute; right:0; top:50%; width:0; height:1px; background-color:#fff;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
body#main #mainVisual>.btn_prev:hover span:after,
body#main #mainVisual>.btn_next:hover span:after{width:82px;}
body#main #mainVisual>.btn_play{background-image:url(/images/center/layout/main_visual_play.png);}
body#main #mainVisual>.btn_play:hover{background-image:url(/images/center/layout/main_visual_play_on.png);}
body#main #mainVisual>.btn_stop{display:none; background-image:url(/images/center/layout/main_visual_stop.png);}
body#main #mainVisual>.btn_stop:hover{background-image:url(/images/center/layout/main_visual_stop_on.png);}
body#main #mainVisual img.grid{display:block; position:relative; z-index:0; max-width:100%; margin:0 auto;}
body#main #mainVisual .bg{position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;}
body#main #mainVisual .bg [class*="item_"]{
	opacity:0; display:block; position:absolute; left:100%; top:0; z-index:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;
	transition:left 0s ease 3s, opacity 3s ease;
	-webkit-transition:left 0s ease 3s, opacity 3s ease;
}

body#main #mainVisual.step_1 .bg .item_1,
body#main #mainVisual.step_2 .bg .item_2,
body#main #mainVisual.step_3 .bg .item_3,
body#main #mainVisual.step_4 .bg .item_4,
body#main #mainVisual.step_5 .bg .item_5,
body#main #mainVisual.step_6 .bg .item_6,
body#main #mainVisual.step_7 .bg .item_7,
body#main #mainVisual.step_8 .bg .item_8,
body#main #mainVisual.step_9 .bg .item_9,
body#main #mainVisual.step_10 .bg .item_10{
	opacity:1; left:0; z-index:100;
	transition:left 0s ease 0s, opacity 3s ease;
	-webkit-transition:left 0s ease 0s, opacity 3s ease;
}


body#main #mainVisual .layout{overflow:hidden; width:100%; height:100%; max-width:800px; margin:0 auto;}
body#main #mainVisual .titles{position:absolute; left:0; top:50%; z-index:10; width:100%; height:467px; max-width:800px; margin:-233px auto 0 auto;}
body#main #mainVisual .titles svg{position:relative; width:100%; height:467px;}
body#main #mainVisual .titles svg text tspan{
	text-shadow:2px 2px 2px rgba(0,0,0,0.5);
	-webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.5);
}
body#main #mainVisual .titles svg g.btns a path{
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #mainVisual .titles svg g.btns a:hover path{
	fill:#1c92eb; stroke:#1c92eb;
	box-shadow:5px 5px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.2);
}
body#main #mainVisual .titles svg{
	opacity:0;
	animation-name:mainvisual_ani;
	animation-iteration-count:1;
	animation-duration:1s;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
}
@keyframes mainvisual_ani{
	0%{
		opacity:0; top:50px;
	}
	100%{
		opacity:1; top:0;
	}
}
body#main #mainVisual>.simbol{position:absolute; left:0; bottom:30px; z-index:100; width:100%; text-align:center;}
body#main #mainVisual>.simbol a:not([class*="btn_"]){
	overflow:hidden; display:inline-block; width:8px; height:8px; margin:0 4px; text-align:left; text-indent:-1000px; background-color:#fff;
	border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #mainVisual>.simbol a:not([class*="btn_"]).on{width:40px; background-color:#fdd154;}

body#main #mainVisual>.simbol a[class*="btn_"]{display:inline-block; position:relative; width:9px; height:9px; margin:0 5px;}
body#main #mainVisual>.simbol a[class*="btn_"] span{overflow:hidden; display:block; position:absolute; left:0; top:0; width:100%; height:100%; text-align:left; text-indent:-1000px; background-repeat:no-repeat; background-position:center center;}
body#main #mainVisual>.simbol a.btn_play span{background-image:url(/images/center/layout/visual_simbol_play.png);}
body#main #mainVisual>.simbol a.btn_stop span{background-image:url(/images/center/layout/visual_simbol_stop.png);}



/* type_2 */
body#main #mainVisual.type_2{height:637px;}
body#main #mainVisual.type_2 img.grid{display:none;}
body#main #mainVisual.type_2>[class*="btn_"]{margin-top:0;}
body#main #mainVisual.type_2 .layout{max-width:1100px;}
body#main #mainVisual.type_2 .titles{left:50%; top:65px; height:200px; margin:0 0 0 -400px;}
body#main #mainVisual.type_2 .titles svg{height:200px;}
body#main #mainVisual.type_2 .lists{position:absolute; left:0; top:270px; z-index:100; width:100%;}
body#main #mainVisual.type_2 .lists ul{position:absolute; left:0; top:0; width:20000px; height:236px;}
body#main #mainVisual.type_2 .lists ul:after{content:""; display:block; clear:both;}
body#main #mainVisual.type_2 .lists ul li{float:left; position:relative; width:256px; height:100%; margin-right:25px;}
body#main #mainVisual.type_2 .lists ul li:before{
	content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-color:#f3d049;
	transition:border-radius 0.3s linear;
	-webkit-transition:border-radius 0.3s linear;
}
body#main #mainVisual.type_2 .lists ul li a{
	overflow:hidden; display:block; position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; padding:35px; background-color:#fff;
	box-shadow:5px 5px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.2);
	transition:top 0.3s linear, border-radius 0.3s linear;
	-webkit-transition:top 0.3s linear, border-radius 0.3s linear;
}
body#main #mainVisual.type_2 .lists ul li a>em,
body#main #mainVisual.type_2 .lists ul li a>strong,
body#main #mainVisual.type_2 .lists ul li a>span{display:block;}
body#main #mainVisual.type_2 .lists ul li a>em{position:relative; height:33px; line-height:16px; font-family:"Noto Sans KR"; font-size:15px; border-bottom:1px solid #d2d5d7; color:#0086cd;}
body#main #mainVisual.type_2 .lists ul li a.new em:after,
body#main #mainVisual.type_2 .lists ul li a.end em:after,
body#main #mainVisual.type_2 .lists ul li a>em span{
	display:block; position:absolute; right:0; top:0; z-index:0; height:22px; line-height:22px; padding:0 10px; text-align:center; font-family:"Noto Sans KR"; font-size:13px; color:#fff; background-color:#0086cd;
	border-radius:11px;
	-webkit-border-radius:11px;
}
body#main #mainVisual.type_2 .lists ul li a.new>em span,
body#main #mainVisual.type_2 .lists ul li a.end>em span{display:none;}
body#main #mainVisual.type_2 .lists ul li a.new em:after{content:"NEW"; z-index:10;}
body#main #mainVisual.type_2 .lists ul li a.end em{color:#727d83;}
body#main #mainVisual.type_2 .lists ul li a.end em:after{content:"Close"; z-index:10; background-color:#727d83;}
body#main #mainVisual.type_2 .lists ul li a>strong{overflow:hidden; display:block; height:105px; line-height:21px; margin-top:10px; font-family:"Noto Sans KR"; font-size:15px; color:#222;}
body#main #mainVisual.type_2 .lists ul li a>span{display:block; position:absolute; left:35px; bottom:35px; line-height:16px; font-family:"Noto Sans KR";  font-size:15px; color:#727d83;}
body#main #mainVisual.type_2 .lists ul li:hover:before,
body#main #mainVisual.type_2 .lists ul li a:hover{
	border-radius:0 20px 0 20px;
	-webkit-border-radius:0 20px 0 20px;
}
body#main #mainVisual.type_2 .lists ul li:hover:before{
	left:5%;
	box-shadow:5px 5px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.2);
}
body#main #mainVisual.type_2 .lists ul li a:hover{top:-15px;}
@media screen and (max-width: 800px){
	body#main #mainVisual.type_2 .titles{left:0; margin:0;}
}

/* type_3 */
body#main #mainVisual.type_3{height:637px;}
body#main #mainVisual.type_3 img.grid{display:none;}
body#main #mainVisual.type_3>[class*="btn_"]{margin-top:0;}
body#main #mainVisual.type_3 .layout{max-width:1100px;}
body#main #mainVisual.type_3 .titles{left:50%; top:65px; height:200px; margin:0 0 0 -400px;}
body#main #mainVisual.type_3 .titles svg{height:200px;}
@media screen and (max-width: 800px){
	body#main #mainVisual.type_3 .titles{left:0; margin:0;}
}

body#main #mainVisual .searchs{position:absolute; left:50%; top:200px; z-index:100; width:351px; height:45px; margin-left:-175px;}
body#main #mainVisual .searchs input[type="text"]{
	position:relative; z-index:0; width:317px; height:41px; line-height:37px; padding:0 45px 0 35px; margin-top:2px; font-family:"Noto Sans KR"; font-size:15px; border:2px solid rgba(255,255,255,0.7); color:#fff; background-color:transparent; background:url(/images/center/layout/mainVisual_icon_search.png) no-repeat 16px center;
	border-radius:20px;
	-webkit-border-radius:20px;
}
body#main #mainVisual .searchs input[type="text"]::placeholder{line-height:37px; font-family:"Noto Sans KR"; font-size:15px; color:#e5e5e5;}
body#main #mainVisual .searchs input[type="submit"]{
	position:absolute; right:0; top:0; z-index:10; width:65px; height:45px; line-height:45px; font-family:"Noto Sans KR";  font-size:15px; color:#205eb6; background-color:#fff;
	border-radius:22px;
	-webkit-border-radius:22px;
}

body#main #mainVisual.type_3 .popupzone{width:auto; height:auto; background-color:#fff;}
body#main #mainVisual.type_3 .popupzone>img{display:block; position:relative; z-index:0;}
body#main #mainVisual.type_3 .popupzone ul{z-index:10;}
body#main #mainVisual.type_3 .popupzone ul li a{display:block;}
body#main #mainVisual.type_3 .popupzone ul li a img{display:block; width:100%;}
body#main #mainVisual.type_3 .popupzone .simbol{right:40px; top:8px;}

body#main #mainVisual.type_3 .notice{position:absolute; right:0; top:278px; z-index:50; width:100%; height:275px; padding-left:305px;}
body#main #mainVisual.type_3 .notice .lay{position:relative; width:100%; height:100%; padding-top:44px;}
body#main #mainVisual.type_3 .notice .head,
body#main #mainVisual.type_3 .notice .midd{padding-left:30px;}
body#main #mainVisual.type_3 .notice .head{position:absolute; left:0; top:0; width:100%; height:44px; background-color:#0086cd;}
body#main #mainVisual.type_3 .notice .head ul li{line-height:44px; font-weight:400; color:#fff;}
body#main #mainVisual.type_3 .notice .midd{width:100%; height:100%; background-color:#fff;}
body#main #mainVisual.type_3 .notice .midd ul{padding:12px 0;}
body#main #mainVisual.type_3 .notice .midd ul li span{line-height:34px; font-weight:400; color:#2b2b2b;}
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4){ color:#666;}
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5){ color:#0086cd;}
body#main #mainVisual.type_3 .notice .head ul,
body#main #mainVisual.type_3 .notice .midd ul li{display:table; table-layout:fixed; width:100%;}
body#main #mainVisual.type_3 .notice .head ul li,
body#main #mainVisual.type_3 .notice .midd ul li span{display:table-cell; text-align:center; letter-spacing:0; font-family:"Noto Sans KR"; font-size:15px;}
body#main #mainVisual.type_3 .notice .head ul li:nth-child(1),
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1){width:80px;}
body#main #mainVisual.type_3 .notice .head ul li:nth-child(2),
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(2){width:80px;}
body#main #mainVisual.type_3 .notice .head ul li:nth-child(3),
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(3){width:auto;}
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(3){text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left;}
body#main #mainVisual.type_3 .notice .head ul li:nth-child(4),
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4){width:120px;}
body#main #mainVisual.type_3 .notice .head ul li:nth-child(5),
body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5){width:180px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

/*장례식장*/
body#main #mainVisual.type_3 .notice .lay.funeral_lay{overflow-y: auto;background-color: #fff;height:303px;}
/* 20220727 장례식장 메인페이지 표 수정 */
body#main .funeral_body #mainVisual.type_3 .notice {max-width: 800px; left: 50%; right: auto; padding-left: 0; transform: translateX(-50%);}
body#main .funeral_body #mainVisual.type_3 .notice .head, body#main .funeral_body #mainVisual.type_3 .notice .midd {padding-left: 0;}

@media screen and (max-width: 1700px){
	body#main #mainVisual>.btn_stop{display:none !important;}
}
@media screen and (max-width: 1500px){
	body#main #mainVisual>.btn_prev,
	body#main #mainVisual>.btn_next{display:none !important;}
}
@media screen and (max-width: 1100px){
	body#main #mainVisual.type_2 .layout,
	body#main #mainVisual.type_3 .layout{max-width:94%;}
	body#main #mainVisual.type_3 .notice .head ul li,
	body#main #mainVisual.type_3 .notice .midd ul li span{font-size:13px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(1),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1){width:50px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(2),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(2){width:60px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(4),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4){width:100px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(5),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5){width:150px;}
}
@media screen and (max-width: 900px){
	body#main #mainVisual.type_3 .popupzone{width:32%;}
	body#main #mainVisual.type_3 .notice{padding-left:30%;}
}
@media screen and (max-width: 700px){
	body#main #mainVisual.type_3 .notice{height:232px;}
	body#main #mainVisual.type_3 .notice .head,
	body#main #mainVisual.type_3 .notice .midd{padding-left:3%;}
	body#main #mainVisual.type_3 .notice .head ul li,
	body#main #mainVisual.type_3 .notice .midd ul li span{font-size:12px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(1),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1){width:35px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(2),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(2){width:50px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(4),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4){width:90px;}
	body#main #mainVisual.type_3 .notice .head ul li:nth-child(5),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5){width:100px;}
	body#main #mainVisual.type_3 .notice .lay{padding-top:36px;}
	body#main #mainVisual.type_3 .notice .lay.funeral_lay{height: 270px;}
	body#main #mainVisual.type_3 .notice .head{height:36px;}
	body#main #mainVisual.type_3 .notice .head ul li{line-height:36px;}
	body#main #mainVisual.type_3 .notice .midd ul li span{line-height:28px;}

	body#main #mainVisual.type_3{height:537px;}
	body#main #mainVisual.type_3 .titles{top:0;}
	body#main #mainVisual.type_3 .popupzone{top:182px;}
	body#main #mainVisual.type_3 .notice{top:208px;}
}
@media screen and (max-width: 600px){
	body#main #mainVisual.type_2{height:470px;}
	body#main #mainVisual.type_2 .titles{top:0;}
	body#main #mainVisual.type_2 .lists{top:160px;}

	body#main #mainVisual.type_3{height:auto; padding:0 0 50px 0;}
	body#main #mainVisual.type_3 .titles,
	body#main #mainVisual.type_3 .notice,
	body#main #mainVisual.type_3 .popupzone{position:relative; left:auto; top:auto; width:100%; margin-bottom:20px;}
	body#main #mainVisual.type_3 .titles{margin-bottom:0;}
	body#main #mainVisual.type_3 .popupzone>img{width:100%;}
	body#main #mainVisual.type_3 .notice{padding-left:0;}
	body#main #mainVisual.type_3 .notice .head,
	body#main #mainVisual.type_3 .notice .midd{padding-left:12px; padding-right:12px;}
	body#main #mainVisual.type_3 .notice .lay.funeral_lay{height: 364px;}
}
@media screen and (max-width: 500px){
	body#main #mainVisual{height:260px;}
	body#main #mainVisual>.simbol{bottom:15px;}
}
@media screen and (max-width: 400px){
	body#main #mainVisual.type_3 .popupzone{margin-bottom:0;}
	body#main #mainVisual.type_3 .notice{height:auto;}
	body#main #mainVisual.type_3 .notice .head{display:none;}
	body#main #mainVisual.type_3 .notice .lay{padding-top:0;}

	body#main #mainVisual.type_3 .notice .midd ul{padding:0;}
	body#main #mainVisual.type_3 .notice .midd ul li{position:relative; padding:10px 15px;}
	body#main #mainVisual.type_3 .notice .midd ul li:nth-child(2n+2){background-color:#efefef;}
	body#main #mainVisual.type_3 .notice .midd ul li span{display:block; float:left; position:relative; line-height:20px;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(2){ font-size:14px;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4),
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5){width:100%; text-align:left;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1){width:auto; margin-right:3px;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1):before{content:"[";}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(1):after{content:"]";}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(2){width:auto;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(3){text-overflow:initial; overflow:auto; white-space:normal; width:100%; padding-left:42px;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(3):before{content:"상주명 : "; position:absolute; left:0; top:0;}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(4):before{content:"발인일시 : ";}
	body#main #mainVisual.type_3 .notice .midd ul li span:nth-child(5):before{content:"장지 : ";}
}



body#main #container{position:relative; z-index:10;}
body#main #container [id*="line_"] .title{margin-bottom:30px; text-align:center;}
body#main #container [id*="line_"] .title strong{display:block; margin-bottom:5px; font-family:"Noto Sans KR";  font-size:30px; color:#1e91c3;}
body#main #container [id*="line_"] .title p{margin:0; line-height:22px; font-family:"Noto Sans KR";  font-size:18px; color:#353839;}
@media screen and (max-width: 700px){
	body#main #container [id*="line_"] .title strong{font-size:24px;}
	body#main #container [id*="line_"] .title p{line-height:20px; font-size:15px;}
}

/* line_1 */
body#main #container #line_1{
	position:relative; z-index:10; height:88px;
	background: #2159b3;
	background: -webkit-linear-gradient(to left, #2159b3 30%, #18a3c2 80%);
	background: linear-gradient(to left, #2159b3 30%, #18a3c2 80%);
}
body#main #container #line_1 .layout{padding:23px 340px 0 280px;}
body#main #container #line_1 .tel{position:absolute; left:0; top:0; width:280px; line-height:88px; padding-left:62px; letter-spacing:0; font-family:"nsr"; font-weight:400; font-size:30px; color:#fff;}
body#main #container #line_1 .tel .simbol{position:absolute; left:0; top:26px; width:35px; height:35px;}
body#main #container #line_1 .tel .simbol:before,
body#main #container #line_1 .tel .simbol:after{
	opacity:0; content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; border:2px solid #f5e6d2; box-sizing:border-box;
	border-radius:50%;
	-webkit-border-radius:50%;

	animation-name:tel_simbol;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:tel_simbol;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
body#main #container #line_1 .tel .simbol:after{
	animation-delay:0.5s;
}
@keyframes tel_simbol{
	0%{opacity:0.3; border-width:2px; transform:scale(0); -webkit-transform:scale(0);}
	30%{transform:scale(0.9); -webkit-transform:scale(0.9);}
	50%{opacity:0.3;}
	90%{opacity:0.1;}
	100%{opacity:0; border-width:1px; transform:scale(2.2); -webkit-transform:scale(2.2);}
}
@-webkit-keyframes tel_simbol{
	0%{opacity:0.3; border-width:2px; transform:scale(0); -webkit-transform:scale(0);}
	30%{transform:scale(0.9); -webkit-transform:scale(0.9);}
	50%{opacity:0.3;}
	90%{opacity:0.1;}
	100%{opacity:0; border-width:1px; transform:scale(2.2); -webkit-transform:scale(2.2);}
}
body#main #container #line_1 .tel .simbol span{
	position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; background-color:#ffcb38;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container #line_1 .tel .simbol span:before{
	content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(/images/center/layout/line1_icon_tel.png) no-repeat center center;
	animation-name:tel_simbol_icon;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:tel_simbol_icon;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
@keyframes tel_simbol_icon{
	0%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	2%{transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
	6%{transform:rotate(15deg); -webkit-transform:rotate(15deg);}
	8%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	10%{transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
	14%{transform:rotate(15deg); -webkit-transform:rotate(15deg);}
	16%,
	100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes tel_simbol_icon{
	0%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	2%{transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
	6%{transform:rotate(15deg); -webkit-transform:rotate(15deg);}
	8%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	10%{transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
	14%{transform:rotate(15deg); -webkit-transform:rotate(15deg);}
	16%,
	100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
body#main #container #line_1 .tel.type_2{line-height:32px;}
body#main #container #line_1 .tel.type_2.part_time{left: 214px;}
body#main #container #line_1 .tel.type_2 em{display:block; line-height:16px; padding:22px 0 2px 0; font-family:"nsr"; font-size:15px;}
body#main #container #line_1 .tel.type_2.recruit{left: 431px;/* display: none; */font-size: 13px;letter-spacing: -0.03em;}
body#main #container #line_1 .tel.type_2.recruit a{color:#fff;}
body#main #container #line_1 .tel.type_2.recruit em{position:relative}
body#main #container #line_1 .tel.type_2.recruit em:before,
body#main #container #line_1 .tel.type_2.recruit em:after{content:""; display:block; position:absolute;}
body#main #container #line_1 .tel.type_2.recruit em:before{opacity:0.6;right:21px;top: 32px;width: 97px;height:1px;background-color:#fff;}
body#main #container #line_1 .tel.type_2.recruit em:after{
	overflow:hidden;
	width:15px;
	height:15px;
	right:0;
	top: 24px;
	background:#fff url(/images/center/layout/map_info_more.png) no-repeat center center;
	border-radius:50%;
	-webkit-border-radius:50%;
}



body#main #container #line_1 .hotline{
	display:inline-block; height:39px;
	background: #1573be;
	background: -webkit-linear-gradient(to left, #1573be 40%, #1575c1 80%);
	background: linear-gradient(to left, #1573be 40%, #1575c1 80%);
	border-radius:19px;
	-webkit-border-radius:19px;
}
body#main #container #line_1 .hotline ul{display:block; height:100%; padding:8px 15px;}
body#main #container #line_1 .hotline ul:after{content:""; display:block; clear:both;}
body#main #container #line_1 .hotline ul li{float:left; position:relative; line-height:23px; vertical-align:top; letter-spacing:0; font-family:"nsr"; font-weight:normal; font-size:15px; color:#fff;}
body#main #container #line_1 .hotline:not([class*="type_2"]) ul li:not(:first-child){padding-left:25px;}
body#main #container #line_1 .hotline:not([class*="type_2"]) ul li:not(:first-child):before{content:""; display:block; position:absolute; left:12px; top:5px; width:1px; height:12px; background-color:rgba(255,255,255,0.5);}
body#main #container #line_1 .hotline ul li em{line-height:23px; font-family:"nsr"; font-weight:600; font-size:15px;}

body#main #container #line_1 .hotline.type_2{overflow:hidden; position:relative; width:100%;}
body#main #container #line_1 .hotline.type_2:before,
body#main #container #line_1 .hotline.type_2:after{content:""; display:block; position:absolute; top:0; z-index:20; width:90px; height:100%;}
body#main #container #line_1 .hotline.type_2:after{right:0;background: transparent;background: -webkit-linear-gradient(to right, transparent 30%, #1372bd 80%);background: linear-gradient(to right, transparent 30%, #1372bd 80%);}
body#main #container #line_1 .hotline.type_2:before{left:0;background: transparent;background: -webkit-linear-gradient(to left, transparent 30%, #1372bd 80%);background: linear-gradient(to left, transparent 30%, #1372bd 80%);}
body#main #container #line_1 .hotline.type_2 ul{position:absolute; left:0; top:0; z-index:10; white-space:nowrap;}
body#main #container #line_1 .hotline.type_2 ul li{float:none; display:inline-block;}
body#main #container #line_1 .hotline.type_2 ul li{padding-left:25px;}
body#main #container #line_1 .hotline.type_2 ul li:before{content:""; display:block; position:absolute; left:12px; top:5px; width:1px; height:12px; background-color:rgba(255,255,255,0.5);}
body#main #container #line_1 .telline{background:rgba(0,0,0,0) !important}
body#main #container #line_1 .telline ul li em,
body#main #container #line_1 .telline ul li{font-size:26px;}

body#main #container #line_1.public .hotline.type_2{text-align:center;}
body#main #container #line_1.public .layout{padding:23px;}
body#main #container #line_1.public .hotline{max-width:700px;}

body#main #container #line_1 .map_info{position:absolute; right:0; top:0; width:340px; height:88px; padding-top:23px;}
body#main #container #line_1 .map_info a{display:block; width:100%; height:100%;}
body#main #container #line_1 .map_info:before,
body#main #container #line_1 .map_info:after{content:""; display:block; position:absolute; right:-19px; top:-16px; width:189px; height:137px; background-position:center center; background-repeat:no-repeat;}
body#main #container #line_1 .map_info:before{
	opacity:0; right:30px;
	background-image:url(/images/center/layout/map_info_simbol_1.png);
	animation-name:map_info_simbol_1;
	animation-duration:2s;
	animation-delay:1s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	animation-fill-mode:forwards;

	-webkit-animation-name:map_info_simbol_1;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode:forwards;
}
body#main #container #line_1 .map_info:after{
	opacity:0; right:-108px; top:-53px;
	background-image:url(/images/center/layout/map_info_simbol_2.png);
	animation-name:map_info_simbol_2;
	animation-duration:2s;
	animation-delay:1s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	animation-fill-mode:forwards;

	-webkit-animation-name:map_info_simbol_2;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode:forwards;
}
body#main #container #line_1 .map_info a strong{display:block; line-height:22px; font-family:"Noto Sans KR"; font-weight:400; font-size:15px; color:#fff;}
body#main #container #line_1 .map_info a strong em,
body#main #container #line_1 .map_info a strong span{font-family:"Noto Sans KR";}
body#main #container #line_1 .map_info a strong em{display:inline-block; position:relative; padding-right:76px; font-weight:400; color:#59edff;}
body#main #container #line_1 .map_info a strong em:before,
body#main #container #line_1 .map_info a strong em:after{content:""; display:block; position:absolute;}
body#main #container #line_1 .map_info a strong em:before{opacity:0.6; right:21px; top:10px; width:47px; height:1px; background-color:#fff;}
body#main #container #line_1 .map_info a strong em:after{
	overflow:hidden; width:15px; height:15px; right:0; top:2px; background:#fff url(/images/center/layout/map_info_more.png) no-repeat center center;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container #line_1 .map_info a strong span{display:block;}
body#main #container #line_1 .map_info a:hover strong em:before{
	animation-name:map_info_a;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:map_info_a;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
body#main #container #line_1 .map_info a:hover strong em:after{
	animation-name:map_info_b;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:map_info_b;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
@keyframes map_info_a{
	0%{right:21px; width:47px;}
	25%{right:21px; width:0px;}
	50%{right:68px; width:0px;}
	100%{right:21px; width:47px;}
}
@-webkit-keyframes map_info_a{
	0%{right:21px; width:47px;}
	25%{right:21px; width:0px;}
	50%{right:68px; width:0px;}
	100%{right:21px; width:47px;}
}
@keyframes map_info_b{
	0%,25%,51%,100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	50%{transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}
@-webkit-keyframes map_info_b{
	0%,25%,51%,100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	50%{transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}
@keyframes map_info_simbol_1{
	25%,45%,65%{top:-10px;}
	35%,55%,75%{top:-16px;}
	0%,20%{opacity:0; right:30px;}
	80%,100%{opacity:1; right:-19px;}
}
@-webkit-keyframes map_info_simbol_1{
	25%,45%,65%{top:-10px;}
	35%,55%,75%{top:-16px;}
	0%,20%{opacity:0; right:30px;}
	80%,100%{opacity:1; right:-19px;}
}
@keyframes map_info_simbol_2{
	0%{opacity:0; right:-108px; top:-53px;}
	40%,100%{opacity:1; right:-19px; top:-16px;}
}
@-webkit-keyframes map_info_simbol_2{
	0%{opacity:0; right:-108px; top:-53px;}
	40%,100%{opacity:1; right:-19px; top:-16px;}
}
@media screen and (max-width: 1100px){
	body#main #container #line_1{height:auto;}
	body#main #container #line_1 .layout{width:100%; height:100%; padding:0 !important;}
	body#main #container #line_1 .tel{position:relative; left:auto; top:auto; height:88px; margin-left:2%;}
	body#main #container #line_1 .hotline{
		display:block; position:relative; z-index:30; width:100%; height:auto;
		border-radius:0;
		-webkit-border-radius:0;
	}
	body#main #container #line_1 .map_info{right:2%;}

	body#main #container #line_1 .hotline.type_2{max-width:100%; height:40px;}
	body#main #container #line_1 .tel.type_2.recruit,
	body#main #container #line_1 .tel.type_2.part_time{
	position:absolute;
	top:0;
	width:260px;
	line-height: 1.3;}
	body#main #container #line_1 .tel .simbol{left:3%;}
	body#main #container #line_1 .map_info{position:relative; right:auto; top:auto; z-index:50; width:100%; padding-left:3%;}
}

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


	body#main #container #line_1 .tel.type_2.recruit,
	body#main #container #line_1 .tel.type_2.part_time{
	position:relative;
	top:0;
	left:0;
	width:260px;
	line-height: 1.3;}

}
	
}
@media screen and (min-width: 500px) and (max-width: 700px){
	body#main #container #line_1 .map_info{width:230px; height:68px; padding-top:11px;}
	body#main #container #line_1 .map_info:before,
	body#main #container #line_1 .map_info:after{width:150px; background-size:100% auto;}
	body#main #container #line_1 .map_info:before{display:none;}
	body#main #container #line_1 .tel{width:100% !important; padding-left:37px; padding-right:260px; line-height:68px; font-size:26px;}
	body#main #container #line_1 .tel .simbol{top:22px; width:27px; height:27px;}
	body#main #container #line_1 .tel .simbol span:before{background-size:100% auto;}
}
@media screen and (max-width: 500px){
	body#main #container #line_1 .layout{}
	body#main #container #line_1 .hotline{padding:5px 0;}
	body#main #container #line_1 .tel{
		width:100% !important; line-height:88px; padding-left:56px; margin-left:0; z-index:50; background-color:#1372bd;
		border-bottom:1px solid rgba(255,255,255,0.5);
	}
	
}


body#main #container .titles,
body#main #container .titles>a{display:block; line-height:21px; /*font-family:"Noto Sans KR";*/  font-size:20px; letter-spacing:-1px; color:#222;}
body#main #container .titles{height:40px;}
@media screen and (max-width: 400px){
	body#main #container .titles,
	body#main #container .titles>a{font-size:18px;}
}

body#main #container .more{overflow:hidden; display:block; position:absolute; right:0; top:0; width:102px; padding-right:76px; text-align:left; text-indent:-1000px; color:#59edff;}
body#main #container .more:before,
body#main #container .more:after{content:""; display:block; position:absolute; left:auto; bottom:auto;}
body#main #container .more:before{opacity:0.6; right:39px; top:11px; width:63px; height:1px; background-color:#d3d3d3;}
body#main #container .more:after{
	overflow:hidden; width:19px; height:19px; right:0; top:2px; background:#fff url(/images/center/layout/notice_more.png) no-repeat center center;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container .more:hover:before{
	animation-name:notice_more_a;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:notice_more_a;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
body#main #container .more:hover:after{
	animation-name:notice_more_b;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;

	-webkit-animation-name:notice_more_b;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}
@keyframes notice_more_a{
	0%{right:39px; width:63px;}
	25%{right:39px; width:0px;}
	50%{right:102px; width:0px;}
	100%{right:39px; width:63px;}
}
@-webkit-keyframes notice_more_a{
	0%{right:39px; width:63px;}
	25%{right:39px; width:0px;}
	50%{right:102px; width:0px;}
	100%{right:39px; width:63px;}
}
@keyframes notice_more_b{
	0%,25%,51%,100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	50%{transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}
@-webkit-keyframes notice_more_b{
	0%,25%,51%,100%{transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	50%{transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}

/* notice */
body#main #container .notice{position:relative; width:100%;}
body#main #container .notice>ul{position:relative; width:100%;}
body#main #container .notice>ul>li{float:left;}
body#main #container .notice>ul>li>strong{display:inline-block; position:relative;}
body#main #container .notice>ul>li:not(:nth-child(1))>strong{padding-left:35px;}
body#main #container .notice>ul>li:not(:nth-child(1))>strong:before{content:""; display:block; position:absolute; left:19px; top:3px; width:2px; height:17px; background-color:#e0e0e0;}
body#main #container .notice>ul>li>strong a{white-space:nowrap; opacity:0.5; color:#222;}
body#main #container .notice>ul>li>ul{display:none; position:absolute; left:0; top:40px; width:100%;}
body#main #container .notice>ul>li>ul:after{content:""; display:block; clear:both;}
body#main #container .notice>ul>li>ul>li{float:left; width:50%; padding:8px 0;}
body#main #container .notice>ul>li>ul>li:nth-child(2n+1){padding-right:19px;}
body#main #container .notice>ul>li>ul>li:nth-child(2n+2){padding-left:19px;}
body#main #container .notice>ul>li>ul>li a{display:block; position:relative; height:60px; padding-left:60px;}
body#main #container .notice>ul>li>ul>li a strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:26px; padding-top:5px; font-family:"Noto Sans KR";  font-size:15px; color:rgba(34,34,34,1);}
body#main #container .notice>ul>li>ul>li a.new strong:before{content:""; display:inline-block; width:19px; height:19px; margin-right:3px; vertical-align:middle; background:url(/images/center/layout/icon_new.png) no-repeat center center;}
body#main #container .notice>ul>li>ul>li a>span:not([class*="days"]){overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:22px; margin:0; font-family:"Noto Sans KR"; font-weight:400; font-size:15px; color:rgba(34,34,34,0.8);}
body#main #container .notice>ul>li>ul>li a:hover strong,
body#main #container .notice>ul>li>ul>li a:hover>span:not([class*="days"]){text-decoration:underline;}
body#main #container .notice>ul>li>ul>li .days{display:block; position:absolute; left:0; top:0; width:60px; line-height:13px; padding:44px 0 0 2px; letter-spacing:0; text-align:left; font-family:"Noto Sans KR";  font-size:12px; color:rgba(34,34,34,0.7);}
body#main #container .notice>ul>li>ul>li .days span{display:block; position:absolute; left:0; top:0; width:100%; line-height:41px; letter-spacing:-1px; font-family:"Noto Sans KR";  font-size:40px; color:rgba(34,34,34,1);}
body#main #container .notice>ul>li .more{display:none;}

body#main #container .notice.type_2>ul>li>ul>li a{padding-left:22px;}
body#main #container .notice.type_2>ul>li>ul>li a:before{content:""; display:block; position:absolute; left:10px; top:20px; width:2px; height:2px; background-color:#3c3c3c;}
body#main #container .notice.type_2>ul>li>ul>li .days{display:none;}

body#main #container .notice>ul>li.on>strong a,
body#main #container .notice>ul>li>strong a:hover{opacity:1;}
body#main #container .notice>ul>li.on>ul{display:block;}
body#main #container .notice>ul>li.on .more{display:block;}
@media screen and (max-width: 400px){
	body#main #container .notice>ul>li:not(:nth-child(1))>strong{padding-left:25px;}
	body#main #container .notice>ul>li:not(:nth-child(1))>strong:before{left:13px;}
	body#main #container .notice>ul>li>ul>li a{padding-left:49px;}
	body#main #container .notice>ul>li>ul>li a strong{font-size:14px;}
	body#main #container .notice>ul>li>ul>li a>span:not([class*="days"]){font-size:13px;}
	body#main #container .notice>ul>li>ul>li .days{font-size:11px;}
	body#main #container .notice>ul>li>ul>li .days span{font-size:35px;}
}

/* popupzone */
body#main .popupzone{position:relative; z-index:100; width:374px; height:180px;}
body#main .popupzone>img{display:block; max-width:100%; width:100%;}
body#main .popupzone ul{overflow:hidden; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;}
body#main .popupzone ul li{
	opacity:0; position:absolute; left:100%; top:0; z-index:0; width:100%; height:100%;
	transition:left 0s ease 3s, opacity 3s ease;
	-webkit-transition:left 0s ease 3s, opacity 3s ease;
}
body#main .popupzone.step_1 ul li:nth-child(1),
body#main .popupzone.step_2 ul li:nth-child(2),
body#main .popupzone.step_3 ul li:nth-child(3),
body#main .popupzone.step_4 ul li:nth-child(4),
body#main .popupzone.step_5 ul li:nth-child(5),
body#main .popupzone.step_6 ul li:nth-child(6),
body#main .popupzone.step_7 ul li:nth-child(7),
body#main .popupzone.step_8 ul li:nth-child(8),
body#main .popupzone.step_9 ul li:nth-child(9),
body#main .popupzone.step_10 ul li:nth-child(10),
body#main .popupzone.step_11 ul li:nth-child(11),
body#main .popupzone.step_12 ul li:nth-child(12),
body#main .popupzone.step_13 ul li:nth-child(13),
body#main .popupzone.step_14 ul li:nth-child(14),
body#main .popupzone.step_15 ul li:nth-child(15),
body#main .popupzone.step_16 ul li:nth-child(16),
body#main .popupzone.step_17 ul li:nth-child(17),
body#main .popupzone.step_18 ul li:nth-child(18),
body#main .popupzone.step_19 ul li:nth-child(19){
	opacity:1; left:0; z-index:100;
	transition:left 0s ease 0s, opacity 3s ease;
	-webkit-transition:left 0s ease 0s, opacity 3s ease;
}
body#main .popupzone ul li a{display:block;}
body#main .popupzone ul li a img{display:block; width:100%;}
body#main .popupzone .simbol{position:absolute; right:calc(50% - 33px); bottom:10px; z-index:100; text-align:right;}
body#main .popupzone .simbol a:not([class*="btn_"]){
	overflow:hidden; display:inline-block; width:8px; height:8px; margin:0 2px; text-align:left; text-indent:-1000px; background-color:#fff;
	border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main .popupzone .simbol a.on{width:40px; background-color:#fdd154;}

body#main .popupzone .simbol [class*="btn_"]{overflow:hidden; display:inline-block; width:20px; height:20px; vertical-align:middle; text-align:left; text-indent:-1000px;}
body#main .popupzone .simbol [class*="btn_"]:before{content:""; display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
body#main .popupzone .simbol .btn_play:before{background-image:url(/images/center/layout/popupzone_play.png);}
body#main .popupzone .simbol .btn_stop:before{background-image:url(/images/center/layout/popupzone_stop.png);}


body#main #container .simbol_list{}
body#main #container .simbol_list:after{content:""; display:block; clear:both;}
body#main #container .simbol_list li{float:left; position:relative; width:33.3%; padding-right:40px; padding-top:30px; padding-bottom:30px;}
body#main #container .simbol_list li:before{content:""; display:block; position:absolute; left:0; top:50%; width:1px; height:51px; margin-top:-25px; background-color:#e5e5e5;}
body#main #container .simbol_list:not([class*="type_2"]) li{border-top:1px solid #e5e5e5;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(1),
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(2),
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3){border-top:none;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+1){padding:30px 30px 30px 0;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+2){padding:30px 15px;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+3){padding:30px 0 30px 30px;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+1):before{left:auto; right:8px;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+2):before{display:none;}
body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+3):before{left:8px;}
body#main #container .simbol_list li .lay,
body#main #container .simbol_list li a{display:table; position:relative; width:100%; height:100%; min-height:75px; padding:7px 75px 0 0; vertical-align:middle;}
body#main #container .simbol_list li .lay{padding-right:0;}
body#main #container .simbol_list li .lay strong,
body#main #container .simbol_list li .lay strong span,
body#main #container .simbol_list li a strong,
body#main #container .simbol_list li a strong span{display:inline; position:relative; line-height:30px; /*font-family:"Noto Sans KR";*/  font-size:22px; color:#222;}
body#main #container .simbol_list li a strong{display:block; vertical-align:middle;}
body#main #container .simbol_list li a strong:after{
	content:""; display:inline-block; width:21px; height:21px; margin:5px 0 0 10px; vertical-align:top; background:#ccc url(/images/center/layout/simbol_list_more.png) no-repeat center center;
	border-radius:50%;
	-webkit-border-radius:50%;
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #container .simbol_list li a:hover strong:after{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
body#main #container .simbol_list li .lay strong span,
body#main #container .simbol_list li a strong span{display:inline; line-height:30px;}
body#main #container .simbol_list li a strong span:not(:last-child){display:block;}
body#main #container .simbol_list li .lay strong,
body#main #container .simbol_list li .lay strong span,
body#main #container .simbol_list li .lay strong span{display:block; color:#2865c9;}
body#main #container .simbol_list li .lay strong span:nth-child(2){}
body#main #container .simbol_list li a>span:not([class*="main-simbol"]){display:block; margin:0; line-height:22px; margin-top:5px; font-family:"Noto Sans KR"; font-weight:400; font-size:15px; color:#222;}
body#main .simbol_list .main-simbol{position:absolute; right:0; top:50%; width:75px; height:75px; margin-top:-37px;}

body#main #container .simbol_list.middle li a{padding-top:0;}
body#main #container .simbol_list.middle li a strong{display:table-cell;}

body#main #container .simbol_list.type_2 li{width:25%; padding:20px; border-top:1px solid #e5e5e5;}
body#main #container .simbol_list.type_2 li:nth-child(1),
body#main #container .simbol_list.type_2 li:nth-child(2),
body#main #container .simbol_list.type_2 li:nth-child(3),
body#main #container .simbol_list.type_2 li:nth-child(4){border:none;}
body#main #container .simbol_list.type_2 li:not(:nth-child(1)){padding-left:20px;}
body#main #container .simbol_list.type_2 li:nth-child(4n+1):before{display:none;}
body#main #container .simbol_list.type_2 li a{padding-right:60px;}
body#main #container .simbol_list.type_2 li .lay strong,
body#main #container .simbol_list.type_2 li a strong,
body#main #container .simbol_list.type_2 li .lay strong span,
body#main #container .simbol_list.type_2 li a strong span{line-height:24px;  font-size:18px;}
body#main #container .simbol_list.type_2 li .lay strong span:nth-child(1),
body#main #container .simbol_list.type_2 li a strong span:nth-child(1){display:block;}
body#main #container .simbol_list.type_2 li a strong:after{margin-top:2px;}
body#main #container .simbol_list.type_2 li a{padding-top:0;}
body#main #container .simbol_list.type_2 li a strong{display:table-cell; width:100%; height:75px; vertical-align:middle;}
body#main #container .simbol_list.type_2 .main-simbol{width:55px; height:55px; margin-top:-27px;}
@media screen and (max-width: 1000px){
	body#main #container .simbol_list.type_2 li,
	body#main #container .simbol_list.type_2 li:nth-child(1),
	body#main #container .simbol_list.type_2 li:nth-child(2),
	body#main #container .simbol_list.type_2 li:nth-child(3),
	body#main #container .simbol_list.type_2 li:nth-child(4){border-bottom:1px solid #e5e5e5;}
	body#main #container .simbol_list.type_2 li{width:33.3%; border-top:none;}
	body#main #container .simbol_list.type_2 li:before,
	body#main #container .simbol_list.type_2 li:nth-child(4n+1):before{display:block;}
	body#main #container .simbol_list.type_2 li:nth-child(3n+1):before{display:none;}
	body#main #container .simbol_list.type_2 li .lay{padding-top:0;}
	body#main #container .simbol_list.type_2 li .lay strong{display:table-cell; height:75px; vertical-align:middle;}
}
@media screen and (max-width: 900px){
	body#main #container .simbol_list{}
	body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+1){padding:20px 20px 20px 0;}
	body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+2){padding:20px 5px;}
	body#main #container .simbol_list:not([class*="type_2"]) li:nth-child(3n+3){padding:20px 0 20px 20px;}
	body#main #container .simbol_list li .lay,
	body#main #container .simbol_list li a{min-height:55px; padding-top:0; padding-right:60px;}
	body#main #container .simbol_list li .lay strong{display:table-cell; height:75px; vertical-align:middle;}
	body#main #container .simbol_list .main-simbol{width:55px; height:55px; margin-top:-27px;}
	body#main #container .simbol_list li .lay strong,
	body#main #container .simbol_list li .lay strong span,
	body#main #container .simbol_list li a strong,
	body#main #container .simbol_list li a strong span{font-size:18px;}
	body#main #container .simbol_list li a>span:not([class*="main-simbol"]){line-height:16px; margin-top:2px; font-size:13px;}
}
@media screen and (max-width: 700px){
	body#main #container .simbol_list{border-bottom:1px solid #e5e5e5;}
	body#main #container .simbol_list li{width:50%; padding:20px !important; border-bottom:1px solid #e5e5e5;}
	body#main #container .simbol_list li:nth-child(2n+1):before{display:none !important;}
	body#main #container .simbol_list li:nth-child(2n+2):before{display:block !important;}

	body#main #container .simbol_list.type_2 li{width:50%;}
}
@media screen and (max-width: 600px){
	body#main #container .simbol_list li{width:100%; padding:15px 10px !important;}
	body#main #container .simbol_list li:nth-child(1n+1):before{display:none !important;}

	body#main #container .simbol_list.type_2 li{width:100%; padding:15px 10px !important;}
}
@media screen and (max-width: 500px){
	body#main #container #line_1 .hotline:not([class*="type_2"]) ul li{float:none; display:block;}
	body#main #container #line_1 .hotline:not([class*="type_2"]) ul li:not(:first-child){padding-left:0;}
	body#main #container #line_1 .hotline:not([class*="type_2"]) ul li:not(:first-child):before{display:none;}
}


/* 교육일정 */
body#main #container .edu_cal{}
body#main #container .edu_cal .head,
body#main #container .edu_cal .midd{padding:0 10px;}
body#main #container .edu_cal .head{
	width:100%; height:22px; background-color:#1c92eb;
	border-radius:11px;
	-webkit-border-radius:11px;
}
body#main #container .edu_cal .head span{display:block; float:left; width:14.2%; line-height:22px; text-align:center; font-family:"Noto Sans KR";  font-size:15px; color:#fff;}
body#main #container .edu_cal .head:after{content:""; display:block; clear:both;}
body#main #container .edu_cal .midd{}
body#main #container .edu_cal .midd ul{padding-top:10px;}
body#main #container .edu_cal .midd ul:after{content:""; display:block; clear:both;}
body#main #container .edu_cal .midd ul li{float:left; width:14.2%; height:25px; line-height:25px;}
body#main #container .edu_cal .midd ul li:nth-child(7n+1){clear:both;}
body#main #container .edu_cal .midd ul li a,
body#main #container .edu_cal .midd ul li span{display:block; position:relative; width:100%; height:100%; text-align:center; font-family:"Noto Sans KR";  font-size:14px; color:#6f6e6e;}
body#main #container .edu_cal .midd ul li a.hit:after{content:""; display:block; position:absolute; left:30%; bottom:2px; width:40%; height:2px; background-color:#1c92eb;}


/* 교육행사일정 */
body#main #container .edu_list{}
body#main #container .edu_list ul li{padding:14px 0;}
body#main #container .edu_list ul li:nth-child(1){padding-top:0;}
body#main #container .edu_list ul li:not(:nth-child(1)){border-top:1px dashed #e9e9e9;}
body#main #container .edu_list ul li a{display:block; position:relative; padding-left:50px;}
body#main #container .edu_list ul li a span{display:block; position:absolute; left:0; top:0; line-height:17px; font-family:"Noto Sans KR";  font-size:16px; color:#1c92eb;}
body#main #container .edu_list ul li a strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:17px; font-family:"Noto Sans KR"; font-weight:400; font-size:15px; color:rgba(34,34,34,0.7);}
body#main #container .edu_list ul li a:hover strong{text-decoration:underline;}


/* 메인 리스트 게시판(보도자료,갤러리) */
body#main #container .mlist{}
body#main #container .mlist .layout{max-width:1120px; height:285px;}
body#main #container .mlist [class*="btn_"]{
	display:block; position:absolute; top:50%; width:58px; height:58px; margin-top:-29px; border:1px solid #2fabe2; background:url(/images/center/layout/mlist_icon_arrow.png) no-repeat center center;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container .mlist [class*="btn_"]:before,
body#main #container .mlist [class*="btn_"]:after{
	opacity:0; content:""; display:block; position:absolute; left:-1px; top:-1px; width:100%; height:100%; border:1px solid #2fabe2;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container .mlist [class*="btn_"]:hover:before,
body#main #container .mlist [class*="btn_"]:hover:after{
	animation-name:mlist_btn;
	animation-fill-mode:forwards;
	animation-duration:3s;
	animation-iteration-count:infinite;

	-webkit-animation-name:mlist_btn;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
}
body#main #container .mlist [class*="btn_"]:hover:after{
	animation-delay:1s;
	-webkit-animation-delay:1s;
}
@keyframes mlist_btn{
	0%{
		opacity:0;
		transform:scale(0.9);
		-webkit-transform:scale(0.9);
	}
	20%{opacity:0.3;}
	100%{
		opacity:0;
		transform:scale(1.7);
		-webkit-transform:scale(1.7);
	}
}
@-webkit-keyframes mlist_btn{0%{opacity:0; transform:scale(0.9); -webkit-transform:scale(0.9);} 20%{opacity:0.3;} 100%{opacity:0; transform:scale(1.7); -webkit-transform:scale(1.7);}}
body#main #container .mlist .btn_prev{left:-98px;}
body#main #container .mlist .btn_next{
	right:-98px;
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
body#main #container .mlist [class*="btn_"] span{overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%; text-indent:-1000px;}
body#main #container .mlist .move{overflow:hidden; position:relative; width:100%; height:100%; padding:0 10px;}
body#main #container .mlist .move ul{position:absolute; left:10px; top:0; width:200000px; height:100%; padding:10px 0;}
body#main #container .mlist .move ul:after{content:""; display:block; clear:both;}
body#main #container .mlist .move ul li{float:left; width:257px; height:100%; margin-left:24px;}
body#main #container .mlist .move ul li:first-child{margin-left:0;}
body#main #container .mlist .move ul li .lay{position:relative; height:100%;}
body#main #container .mlist .move ul li .lay:after{
	opacity:0; content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-color:#19bda7;
	border-radius:0 20px 0 0;
	-webkit-border-radius:0 20px 0 0;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #container .mlist .move ul li .lay:hover:after{opacity:1;}
body#main #container .mlist .move ul li .lay a{
	display:block; position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; padding:25px; border:1px solid #eaeaea; background-color:#fff;
	border-radius:0 20px 0 0;
	-webkit-border-radius:0 20px 0 0;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #container .mlist .move ul li .lay:hover a{
	left:-10px; top:-10px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}
body#main #container .mlist .move ul li .lay a .tis{overflow:hidden; display:block; height:74px; line-height:24px; font-family:"Noto Sans KR"; font-size:18px; color:#2b383f;}
body#main #container .mlist .move ul li .lay a .tis em{display:block; line-height:16px; margin-bottom:10px; font-family:"Noto Sans KR"; font-size:14px; color:#666;}
body#main #container .mlist .move ul li .lay:hover a .tis{color:#1b85cb;}
body#main #container .mlist .move ul li .lay a .texts{overflow:hidden; display:block; height:80px; line-height:20px; margin-top:20px; font-family:"Noto Sans KR";  font-size:14px; color:#727d83;}
body#main #container .mlist .move ul li .lay a .photos,
body#main #container .mlist .move ul li .lay a .movies{
	overflow:hidden; position:absolute; left:0; bottom:0; width:100%; height:142px;
	border-radius:0 20px 0 0;
	-webkit-border-radius:0 20px 0 0;
}
body#main #container .mlist .move ul li .lay a .photos span,
body#main #container .mlist .move ul li .lay a .movies span{position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
body#main #container .mlist .move ul li .lay a .photos span img,
body#main #container .mlist .move ul li .lay a .movies span img{height:100%;}
body#main #container .mlist .move ul li .lay a .days{position:absolute; left:25px; bottom:25px; line-height:16px; font-family:"Noto Sans KR"; font-size:15px; color:#727d83;}
body#main #container .mlist .move ul li .lay a .photos ~ .texts,
body#main #container .mlist .move ul li .lay a .photos ~ .days,
body#main #container .mlist .move ul li .lay a .movies ~ .texts,
body#main #container .mlist .move ul li .lay a .movies ~ .days{display:none;}
body#main #container .mlist .move ul li .lay a .movies:after{content:""; display:block; position:absolute; left:50%; top:50%; z-index:30; width:41px; height:40px; margin:-20px 0 0 -20px; background:url(/images/center/layout/mlist_icon_movie.png) no-repeat center center;}
body#main #container .mlist .move ul li .lay a:before{
	overflow:hidden; display:none; content:"new"; display:block; position:absolute; right:25px; top:25px; z-index:20; width:20px; height:20px; text-indent:-1000px; background-repeat:no-repeat center; background-position:center;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#main #container .mlist .move ul li .lay a.new:before{background-color:#2face3 !important; background-image:url(/images/center/layout/mlist_icon_new.png) !important;}

body#main #container .mlist.type_2 .move ul li .lay a .tis{height:50px;}
body#main #container .mlist.type_2 .move ul li .lay a .photos{height:167px;}
body#main #container .mlist.type_2 .move ul li .lay a:before{
	display:block; background-color:#c8ccce; background-image:url(/images/center/layout/mlist_icon_more.png);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#main #container .mlist.type_2 .move ul li .lay a:hover:before{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
@media screen and (max-width: 1350px){
	body#main #container .mlist .btn_prev,
	body#main #container .mlist .btn_next{z-index:100;}
	body#main #container .mlist .btn_prev{left:-58px;}
	body#main #container .mlist .btn_next{right:-58px;}
}
@media screen and (max-width: 1200px){
	body#main #container .mlist .layout{max-width:100%; padding:0 30px 0 20px;}
	body#main #container .mlist .btn_prev,
	body#main #container .mlist .btn_next{background-color:rgba(255,255,255,0.5);}
	body#main #container .mlist .btn_prev{left:0px;}
	body#main #container .mlist .btn_next{right:0px;}
}
@media screen and (max-width: 1024px){
	body#main #container .mlist .layout{padding:0; padding:0 10px 0 0;}
	body#main #container .mlist .btn_prev{left:-20px;}
	body#main #container .mlist .btn_next{right:-20px;}
}

.vod_view {position: relative;width: 100%;height: auto;padding-bottom: 57.44%;margin-bottom: 70px;}
.vod_view iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}