@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400');
@font-face {
 font-family: 'NanumSquare';
 font-weight: 100;
 src: url(../fonts/NanumSquare100.eot);
 src: url(../fonts/NanumSquare100.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquare100.woff) format('woff'),
      url(../fonts/NanumSquare100.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 300;
 src: url(../fonts/NanumSquare300.eot);
 src: url(../fonts/NanumSquare300.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquare300.woff) format('woff'),
      url(../fonts/NanumSquare300.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 500;
 src: url(../fonts/NanumSquare500.eot);
 src: url(../fonts/NanumSquare500.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquare500.woff) format('woff'),
      url(../fonts/NanumSquare500.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 700;
 src: url(../fonts/NanumSquare700.eot);
 src: url(../fonts/NanumSquare700.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquare700.woff) format('woff'),
      url(../fonts/NanumSquare700.ttf) format('truetype');
}

* { margin: 0; 
	padding: 0; 
	list-style: none; 
	text-decoration: none; 
	box-sizing: border-box; 
	word-break: break-all; 
	letter-spacing: -1px;
	color:inherit;
	font-family: "NanumSquare"; }

	.common_box { width:100%; float:left; min-width:1200px; }
	.common_box > div { width:1200px; margin:0 auto; }
	.common_box > div > div { width:100%; float:left; }

	table { width:100%; table-layout:fixed; border:0; border-collapse: collapse; border-spacing: 0; }

	.scrols { cursor:pointer; }

/*top*/
	.sl_bg{width:100%; float:left; background-image: url("/images/sl_bg1.png"); position: relative; min-width:1200px; height: 875px; background-position: 0 105px; }
	.sl_bg > img{position: absolute; bottom: -180px; left: 235px; min-width: 760px;}
	.sl_top{width: 100%; float: left; padding: 30px 0; background-color: #FFF; }
	.sl_top > div > div > ul li{float: left;}
	.sl_top > div > div > ul:nth-child(1){width: 30%; float: left;}
	.sl_top > div > div > ul:nth-child(1) > li > img{width: 100%; float: left; vertical-align: center;}
	.sl_top > div > div > ul:nth-child(2){width: 70%; float: left; padding-top: 15px; }
	.sl_top > div > div > ul:nth-child(2) > li{width: 16%; color: #333; font-size: 18px; font-weight: 500; line-height: 49px; text-align: center; height: 49px; }
	.sl_top > div > div > ul:nth-child(2) > li:nth-child(5){ width: 30%; font-size: 17px; border: 1px solid #CCCCD9;}
	.sl_top > div > div > ul:nth-child(2) > li:nth-child(6){width:7%; border: 1px solid #CCCCD9;margin-left:1%;}


/*visual*/
	.sl_visual{width: 100%; float: right;}
	.sl_visual ul{width: 45%; float: right; padding: 140px 0 0 0;}
	.sl_visual ul > li:nth-child(1){width: 100%; color: #ffffff; font-size: 18px; text-align: left; padding: 10px 0;  font-family: "Noto Sans KR"; letter-spacing: -0.5px; font-weight: bold; }
	.sl_visual ul > li:nth-child(2){width: 100%; float: left; padding: 10px 0;/*font-size: 82px; font-weight: 800; text-align: left;  background: rgb(185,136,69); /* Old browsers
background: -moz-linear-gradient(-45deg, rgba(185,136,69,1) 0%, rgba(244,220,130,1) 27%, rgba(182,134,58,1) 44%, rgba(182,134,58,1) 100%); /* FF3.6-15
background: -webkit-linear-gradient(-45deg, rgba(185,136,69,1) 0%,rgba(244,220,130,1) 27%,rgba(182,134,58,1) 44%,rgba(182,134,58,1) 100%); /* Chrome10-25,Safari5.1-6
background: linear-gradient(135deg, rgba(185,136,69,1) 0%,rgba(244,220,130,1) 27%,rgba(182,134,58,1) 44%,rgba(182,134,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98845', endColorstr='#b6863a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient  -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/}
	.sl_visual ul > li:nth-child(2) > img{float: left; margin-bottom: 20px; width: 480px; }
	.sl_visual ul > li:nth-child(3){width: 100%; color: #ffffff; font-size: 16px; text-align: left; padding: 30px 0; line-height: 28px; font-family: "Noto Sans KR"; letter-spacing: -0.5px; }
	.sl_visual ul > li:nth-child(4){width: 100%; border: 5px ; border-radius: 50%; }
	/*.sl_visual ul > li:nth-child(4) > p{width: 156px; float: left; font-family: "a고딕11"; color: #ffffff; font-size: 18px; line-height: 22px; letter-spacing: -2px; border: 5px ; border-radius: 50%; border-style: solid;
    border-image: linear-gradient(to top, #b98845 0%, #f4dc82 50%, #b98845 100%); border-image-slice: 1; height: 156px; text-align: center; padding-top: 50px; margin-right: 12px;}*/
	.sl_visual ul > li:nth-child(4) > p:nth-child(2){padding-top: 20px;}

/*sub1*/
	.sl_sub1{padding: 150px 0 120px 0; background-color: #ffffff;}
	.sl_subtxt{width: 100%; float: left;}
	.sl_subtxt > ul{width: 100%; float: left;}
	.sl_subtxt > ul > li:nth-child(1){width: 100%; float: left; font-size: 23px; font-weight: 500; color: #cccccc; text-align: center;}
	.sl_subtxt > ul > li:nth-child(2){width: 100%; float: left; font-size: 50px; font-weight: 800; color: #3f1b63; text-align: center; margin-top: 15px;}

	.sl_subinfo{width: 100%; float: left; margin-top: 130px;}
	.sl_subinfo > ul{width: 25%; float: left; position: relative;}
	.sl_subinfo > ul > li:nth-child(1){width: 138px; height: 138px; float: left; border-radius: 50%; border: 1px solid #8869a7; background-color: #ffffff; padding: 8px 8px; position: absolute; top: -69px; left: 44.5px;}
	.sl_subinfo > ul > li:nth-child(1) > p{width: 120px; height: 120px; float: left; border-radius: 50%; background-color: #572e80; padding: 25px 25px;}
	.sl_subinfo > ul > li:nth-child(2){width: 220px; height: 220px; float: left; border-radius: 10px; border: 3px solid #572e80; font-size: 18px; font-weight: 500; color: #333333; line-height: 26px; text-align: center; padding: 90px 25px 25px 25px; }
	.sl_subinfo > ul > li:nth-child(2) > span{font-size: 18px; font-weight: 650; color: #572e80; line-height: 26px; text-align: center;}
	.sl_subinfo > ul:nth-child(4) > li:nth-child(2){padding: 80px 25px 25px 25px;}

/*sub2*/
	.sl_bg2{width:100%; float:left; background-image: url("/images/sl_bg2.png"); height: 968px;}
	.sl_sub2{padding-top: 80px; height: 968px;}
	.sl_subtxt2{width: 100%; float: left;}
	.sl_subtxt2 > ul{width: 100%; float: left;}
	.sl_subtxt2 > ul > li:nth-child(1){width: 100%; float: left; font-size: 22px; font-weight: 300; color: #282B5E; text-align: center;}
	.sl_subtxt2 > ul > li:nth-child(2){width: 100%; float: left; font-size: 53px; font-weight: 500; color: #3F1878; text-align: center; margin-top: 25px;}
.sl_subtxt2 > ul > li:nth-child(3) { width: 100%; float: left; text-align: center; margin-top: 20px; margin-bottom: 10px; }
.sl_subtxt2 > ul > li:nth-child(3) > span { display: inline-block; width: 325px; height: 1px; background-color: #7250A5; }
	.sl_subtxt2 > ul > li:nth-child(4){width: 100%; float: left; margin-top: 20px;}
	.sl_subtxt2 > ul > li:nth-child(4) > span{width: 325px; height: 1px; float: left; background-color: #ffffff; margin-left: 437.5px;}
	.sl_subtxt2 > ul > li:nth-child(5){width: 100%; float: left; font-size: 20px; font-weight: 100; color: #ffffff; text-align: center; line-height: 28px; margin-top: 25px;}

	.sl_center{width:100%; float:left; min-width: 800px;}
	.sl_subinfo2{width: 800px; margin: 0 auto;}
	.sl_subinfo2 > ul{width: 100%; float: left; padding-top: 10px;}
	.sl_subinfo2 > ul > li:nth-child(1){width: 325px; height: 71px; float: left; background-color: #7250A5; font-size: 23px; font-weight: bold; color: #FFF; text-align: center; border-radius: 50px; line-height: 71px; margin-top: 25.5px;}
	.sl_subinfo2 > ul > li:nth-child(2){width: 150px; float: left; padding: 23px 0 0 10px;/*font-size: 110px; color: #333333; text-align: center; font-weight: 900; background: rgb(185,136,69);  Old browsers 
background: -moz-linear-gradient(-45deg, rgba(185,136,69,1) 0%, rgba(244,220,130,1) 43%, rgba(244,220,130,1) 59%, rgba(185,136,69,1) 86%, rgba(185,136,69,1) 100%); /* FF3.6-15 
background: -webkit-linear-gradient(-45deg, rgba(185,136,69,1) 0%,rgba(244,220,130,1) 43%,rgba(244,220,130,1) 59%,rgba(185,136,69,1) 86%,rgba(185,136,69,1) 100%); /* Chrome10-25,Safari5.1-6 
background: linear-gradient(135deg, rgba(185,136,69,1) 0%,rgba(244,220,130,1) 43%,rgba(244,220,130,1) 59%,rgba(185,136,69,1) 86%,rgba(185,136,69,1) 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98845', endColorstr='#b98845',GradientType=1 ); /* IE6-9 fallback on horizontal gradient -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/}
	.sl_subinfo2 > ul > li:nth-child(2) > img{width: 95%; float: left;}
	.sl_subinfo2 > ul > li:nth-child(3){width: 325px; height: 71px; float: left; background-color: #282B5E; font-size: 23px; font-weight: bold; color: #FFF; text-align: center;  border-radius: 50px; line-height: 71px; margin-top: 25.5px;}
	
	.sl_center2{width:100%; float:left; min-width: 146px;}
	.sl_center2 > ul{width: 100%; margin: 0 auto;  }
	.sl_center2 > ul > li{width: 100%; float: left; font-family: "Noto Sans KR"; font-size: 16px; font-weight: bold; color: #333;  text-align: center; margin-top: 40px; }

	.sl_center3{width:100%; float:left; min-width: 1060px; margin-top: 100px;}
	.sl_center3 > ul{width: 1060px; margin: 0 auto;}
	.sl_center3 > ul > img{width: 100%; float: left;}

/*sub3*/
	.sl_sub3{padding: 90px 0; background-color: #ffffff; }

	.sl_subtxt3{width: 100%; float: left;}
	.sl_subtxt3 > ul{width: 100%; float: left;}
	.sl_subtxt3 > ul > li:nth-child(1){width: 100%; float: left; font-size: 23px; font-weight: 500; color: #cccccc; text-align: center;}
	.sl_subtxt3 > ul > li:nth-child(2){width: 100%; float: left; font-size: 50px; font-weight: 800; color: #3f1b63; text-align: center; margin-top: 15px;}

	.sl_subbox{width:100%; float:left; min-width: 600px; margin-top: 70px;}
	.sl_subbox > ul{width: 600px; margin: 0 auto;}
	.sl_subbox > ul > li{float: left; text-align: center; font-size: 20px; font-weight: 650; width: 50%; line-height: 53px; color: #3f1b63; border: 1px solid #3f1b63; cursor:pointer;}
	.sl_subbox > ul > li.active { background-color: #3f1b63; color:#f3d46f; }

	.sl_subline{width:100%; float:left; min-width: 1200px; margin-top: 30px;}
	.sl_subline > ul{width: 1200px; margin: 0 auto;}
	.sl_subline > ul > li{width: 100%; float: left;}
	.sl_subline > ul > li:nth-child(1){width: 1200px; border-bottom: 1px solid #3f1b63;}
	.sl_subline > ul > li:nth-child(2){width: 0px; height: 0px; border-top: 10px solid #3f1b63; border-bottom: 10px solid none; border-right: 10px solid transparent; border-left: 10px solid  transparent; margin-left: 595px;}

	.sl_subbox2{width:100%; float:left; min-width: 1100px; margin-top: 25px; padding: 70px 80px; min-height: 850px; border: 3px solid #563D7E; border-radius: 50px; }
	.sl_subbox2 > ul{width: 1100px; margin: 0 auto;}
	.sl_subbox2 > ul > li{float: left; text-align: center; font-size: 17px; font-weight: 500; margin-top: 15px;}
	.sl_subbox2 > ul > li > span{font-size: 17px; padding-left: 5px;}
	.sl_subbox2 > ul > li:nth-child(1){width: 20%; border-radius: 50px; background-color: #67448a; color: #ffffff; line-height: 42px;}
	.sl_subbox2 > ul > li:nth-child(2){width: 80%; text-align: left; color: #3F1B63; line-height: 42px; padding-left: 30px;}

/*sub4_상담폼*/
	.sl_bg3{width:100%; float:left; background-color: #ffffff; height: 550px;}
	.sl_sub4{background-color: #8869a7; height: 295px;}

.sl_sub4 .sl_sub4_titWrap { width: 100%; float: left; padding: 50px 0; }
.sl_sub4 .sl_sub4_titWrap > div { width: 100%; float: left; text-align: center; }

.sl_sub4 .sl_sub4_titWrap > .small { font-size: 17px; color: #FFF; font-weight: 500; }
.sl_sub4 .sl_sub4_titWrap > .big { font-size: 38px; color: #EAEAEA; font-weight: 500; margin-top: 10px; letter-spacing: -0.5px; }
.sl_sub4 .sl_sub4_titWrap > .big > span { font-weight: bold; }

	.sl_subbox3{width: 100%; background-color: #ffffff; border: 1px solid #e1e1e1; padding: 30px 20px; display: table; }

.sl_subbox3 > ul { width: 25%; border-right: 1px solid #E1E1E1; display: table-cell; vertical-align: top; padding: 20px; }
.sl_subbox3 > ul:last-of-type { border-right: 0; }
.sl_subbox3 > ul > li { width: 100%; float: left; text-align: center; color: #333; font-family: "Noto Sans KR"; font-size: 14px; line-height: 18px; }
.sl_subbox3 > ul > li > a { width: 100%; float: left; text-align: center; background-color: #333; font-size: 18px; font-weight: bold; color: #FFF; padding: 10px 0; margin-top: 30px; }
.sl_subbox3 > ul > li > a:hover { color: #FFCC00; }

.sl_subbox3 > ul > li > i { font-size: 63px; margin-bottom: 8px; color: #BFBFBF; }

.sl_subbox3 > ul > li.tit { font-size: 22px; font-weight: bold; font-family: "NanumSquare"; margin: 10px 0; }
.sl_subbox3 > ul > li.small { font-size: 13px; }
 
/*footer*/
	.sl_fbg2{width: 100%; float: left;  background-color: #333; height: 250px; min-width: 1200px;}
	.sl_fbg1{width:100%; float: left; background-color: #ffffff; border-top: 1px solid #333; height: 45px; min-width: 1200px; }
	.sl_ftop{width: 100%; float: left;}
	.sl_ftop > ul{width: 100%; float: left;}
	.sl_ftop > ul > li:nth-child(1){width: 90%; float: left; font-family: "Noto Sans KR"; font-size: 15px; font-weight: 500; color: #333; text-align: left; line-height: 45px; padding-left: 55px;}
	.sl_ftop > ul > li:nth-child(1) > a{font-family: "Noto Sans KR"; font-size: 15px; font-weight: 500; color: #2e124b; text-align: left; line-height: 45px;}
	.sl_ftop > ul > li:nth-child(2){width: 10%; float: left; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 650; color: #333 ; text-align: center; border-left: 1px solid #333; border-right: 1px solid #333; line-height: 45px;}
.sl_ftop > ul > li:nth-child(2) > a { font-family: "Noto Sans KR" }

	.sl_fbottom{width: 100%; float: left;}
	.sl_fbottom > ul{float: left;}
	.sl_fbottom > ul:nth-child(1){width: 63%; padding: 50px 0 0 55px;}
	.sl_fbottom > ul:nth-child(1) > li{float: left; font-family: "Noto Sans KR"; font-size: 15px;  color: #ffffff; text-align: left; line-height: 27px;}
	.sl_eg{letter-spacing: 0px; font-family: "Noto Sans KR"}
	.sl_fbottom > ul:nth-child(2){width: 37%; padding-top: 50px;}
	.sl_fbottom > ul:nth-child(2) > li:nth-child(1){width: 100%; float: left;}
	.sl_fbottom > ul:nth-child(2) > li:nth-child(1) > img{float: left; width: 172px; }
	.sl_fbottom > ul:nth-child(2) > li:nth-child(1) > p{float: left; font-family: "Noto Sans KR"; font-size: 17px; font-weight: 300; color: #ffffff; text-align: left; padding: 7px 0 0 5px;}
	.sl_fbottom > ul:nth-child(2) > li:nth-child(2){width: 32%; float: left; font-family: "Noto Sans KR"; font-size: 17px; font-weight: 500; color: #ffffff; text-align: left; padding: 10px 0 0 5px;}
	.sl_fbottom > ul:nth-child(2) > button{width: 260px; float: left; background-color: #ffffff; height: 30px; margin-top: 7px;}



/* 2020-02-12 */

/* 팝업 디자인 */
.common_popup { width:100%; height:100%; position:fixed; left:0; top:0; z-index:10; display:none; }
.common_popup > div { position:fixed; left:0; top:0; }
.common_popup > .cont { background-color:white; z-index:2; left:50%; top:50%; transform: translate(-50%, -50%); }

.common_popup > .cont .pop_tit { width:100%; float:left; border-bottom: 1px solid #ccc; }
.common_popup > .cont .pop_close_btn { position: absolute; right: 30px; top: 20px; }
.common_popup > .cont .pop_close_btn > i { font-size: 32px; cursor: pointer; color: #AAA; }
.common_popup > .cont .pop_tit > ul { width:100%; float:left; }
.common_popup > .cont .pop_tit > ul > li { width:auto; float:left; line-height:70px; }
.common_popup > .cont .pop_tit .main_tit { padding:0 30px; font-size:25px; font-weight: bold; }
.common_popup > .cont .pop_tit .sub_tit { padding-right:5px; }

.common_popup > .cont .popup_contBox { width:100%; float:left; padding:25px 30px; height: 650px; overflow-y: auto; }
.common_popup > .cont .popup_contBox > form { width: 100%; float: left; }

.common_popup > .cont iframe { width: 100%; float: left; height: 100%; float: left; height: 579px; overflow-y: auto; border: 0; }

/* 등록 */
.common_popup > .cont .popup_write table { width:100%; table-layout: fixed; border-top:2px solid black; border-bottom:2px solid black; }
.common_popup > .cont .popup_write table tbody td { border-bottom: 1px solid #DDD; padding:15px; }
.common_popup > .cont .popup_write table tbody td.label { background-color:#EBEBEB; text-align:center; }
.common_popup > .cont .popup_write table tbody td.value {  }

.common_popup > .cont .popup_write table tfoot.popup_btns td { border-bottom: 1px solid #DDD; padding:15px; }
.common_popup > .cont .popup_write table tfoot.popup_btns td.left { text-align:left; }
.common_popup > .cont .popup_write table tfoot.popup_btns td.right { text-align:right; }
.common_popup > .cont .popup_write table tfoot.popup_btns button { display: inline-block; width:100px; height:35px; }
.common_popup > .cont .popup_write table tfoot.popup_btns button.proc_btn { background-color:#ffcc33; color:white; }


.common_popup > .back { width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index:1; }



.importantData:before { content: "*"; color:#DC3333; margin-right: 3px; }



.common_popup .table_wrap { width: 100%; float: left; }
.common_popup .table_wrap > h1:first-of-type { margin-top: 0; }
.common_popup .table_wrap > h1 { font-size: 18px; margin-bottom: 10px; margin-top: 50px; padding: 0 5px; width: 100%; float: left; position: relative; }
.common_popup .table_wrap > h1 > p { font-family: "Noto Sans KR"; font-size: 13px; color: #666; position: relative; position: absolute; right: 0; bottom: 0; }
.common_popup .table_wrap > h1 > p > b { font-family: "Noto Sans KR"; }
.common_popup .table_wrap > table { width: 100%; float: left; border-collapse: collapse; table-layout: fixed; }
.common_popup .table_wrap > table tr > * { border-right: 1px solid #DDD; }
.common_popup .table_wrap > table tr > *:last-child { border-right: 0; }
.common_popup .table_wrap > table th { font-size: 15px; font-weight: bold; font-family: "Noto Sans KR", sans-serif; color: #000; text-align: center; border-bottom: 1px solid #DDD; background-color: #F2F2F2; width: 20%; }
.common_popup .table_wrap > table td { padding: 12px; border-bottom: 1px solid #DDD; width: 30%; }
.common_popup .table_wrap > table th > span { font-family: "Noto Sans KR"; }
.common_popup .table_wrap > table td label { font-size: 15px; font-family: "Noto Sans KR"; }
.common_popup .table_wrap > table input[type="text"] { width: 100%; float: left; border: 1px solid #BBB; height: 40px; font-size: 14px; font-family: "Noto Sans KR", sans-serif; padding: 0 10px; }
.common_popup .table_wrap > table input[type="text"]:focus { outline: none; }
.common_popup .table_wrap > table input[type="password"] { width: 100%; float: left; border: 1px solid #BBB; height: 40px; font-size: 14px; font-family: "Noto Sans KR", sans-serif; padding: 0 10px; }
.common_popup .table_wrap > table input[type="password"]:focus { outline: none; }
.common_popup .table_wrap > table textarea { width: 100%; float: left; border: 1px solid #BBB; height: 80px; font-size: 14px; font-family: "Noto Sans KR", sans-serif; padding: 10px; resize: none; }
.common_popup .table_wrap > table textarea:focus { outline: none; }
.common_popup .table_wrap > table .userInfoWrap { width: 100%; float: left; height: 50px; overflow-y: auto; border: 1px solid #DEDEDE; background-color: #FAFAFA; }
.common_popup .table_wrap > table .userInfoWrap > .con { width: 100%; float: left; padding:5px 10px; font-size: 13px; font-family: "Noto Sans KR", sans-serif; color: #666; text-align: left; }
.common_popup .table_wrap > table .userNoticeWrap { width: 100%; float: left; font-size: 13px; font-family: "Noto Sans KR", sans-serif; color: #999; text-align: left; margin-top: 10px; }
.common_popup .table_wrap > table .userCheckWrap { width: 100%; float: left; margin-top: 30px; text-align: left; padding-bottom: 20px; }
.common_popup .table_wrap > table .userCheckWrap > input { cursor: pointer; }
.common_popup .table_wrap > table .userCheckWrap > input:focus { outline: none; }
.common_popup .table_wrap > table .userCheckWrap > label { cursor: pointer; font-size: 17px; font-weight: bold; color: #000; font-family: "Noto Sans KR", sans-serif; padding-left: 10px; }

.common_popup .btn_wrap { width: 100%; float: left; margin-top: 20px; text-align:center; }
.common_popup .btn_wrap > button { cursor: pointer; background-color: #000; color: #FFF; font-size: 17px; font-weight: bold; font-family: "Noto Sans KR", sans-serif; width: 350px; height: 48px; border: none; }
.common_popup .btn_wrap > button:focus { outline: none; }

.sharePopup { position:absolute; top:60px; right:0; background-color:white; width:552px; height:293px; border-radius:8px; display:none; }
.sharePopup .cont { position:absolute; width:100%; height:100%; }
.sharePopup .cont > div { width:100%; float:left; color:black; }
.sharePopup .cont > .topArea { padding:46px 53px; }
.sharePopup .cont > .topArea .icons { width:100%; float:left; }
.sharePopup .cont > .topArea .icons > ul { width:20%; float:left; cursor:pointer; }
.sharePopup .cont > .topArea .icons > ul > li { width:100%; float:left; }
.sharePopup .cont > .topArea .icons > ul > li img { vertical-align: top; }
.sharePopup .cont > .topArea .icons .txt { line-height:25px; margin-top:10px; }

.sharePopup .cont > .topArea .shortUrl { width:100%; float:left; margin-top:25px; }
.sharePopup .cont > .topArea .shortUrl * { height:45px; outline:none; border-radius: 5px; }
.sharePopup .cont > .topArea .shortUrl input { width:84%; float:left; border:1px solid #e0e0e0; padding-left:5px; }
.sharePopup .cont > .topArea .shortUrl button { width:15%; float:right; border:none; background-color:#401c66; color:white; }

.sharePopup .cont > .bottomArea { border-top:1px solid #ccc; cursor:pointer; }

/* 200313 스크롤 이벤트 */
#scroll_01 { bottom: -200px; opacity: 0; transition: all 1s; }
#scroll_01.active { bottom: -150px; opacity: 1; }

#scroll_02 { top: 50px; opacity: 0; transition: all 1s; position: relative; }
#scroll_02.active { top: 0; opacity: 1; }

#scroll_03 { left: -50px; opacity: 0; transition: all 1s; position: relative; }
#scroll_03.active { left: 0; opacity: 1; }

#scroll_04 { right: -50px; opacity: 0; transition: all 1s; position: relative; }
#scroll_04.active { right: 0; opacity: 1; }

#scroll_05 { opacity: 0; transition: all 1s; position: relative; }
#scroll_05.active { opacity: 1; }

#scroll_06 { top: 50px; opacity: 0; transition: all 1s; position: relative; }
#scroll_06.active { top: 0; opacity: 1; }

#scroll_07 { top: 50px; opacity: 0; transition: all 1s 0.5s; position: relative; }
#scroll_07.active { top: 0; opacity: 1; }

#scroll_08 { top: 50px; opacity: 0; transition: all 1s 1s; position: relative; }
#scroll_08.active { top: 0; opacity: 1; }

/* 200316 데모 */
#demoWrap * { position: relative; }
.common_box.demo { background-color: #EBEBEB; }
#demoWrap { padding-top: 80px; }
#demoWrap > div { width: 100%; float: left; }

#demoWrap > .titWrap{width: 100%; float: left;}
#demoWrap > .titWrap > ul{width: 100%; float: left;}
#demoWrap > .titWrap > ul > li:nth-child(1){width: 100%; float: left; font-size: 22px; font-weight: 300; color: #282B5E; text-align: center;}
#demoWrap > .titWrap > ul > li:nth-child(2){width: 100%; float: left; font-size: 53px; font-weight: 500; color: #3F1878; text-align: center; margin-top: 25px;}
#demoWrap > .titWrap > ul > li:nth-child(3) { width: 100%; float: left; text-align: center; margin-top: 20px; margin-bottom: 10px; }
#demoWrap > .titWrap > ul > li:nth-child(3) > span { display: inline-block; width: 325px; height: 1px; background-color: #7250A5; }
#demoWrap > .titWrap > ul > li:nth-child(4){width: 100%; float: left; margin-top: 20px;}
#demoWrap > .titWrap > ul > li:nth-child(4) > span{width: 325px; height: 1px; float: left; background-color: #ffffff; margin-left: 437.5px;}
#demoWrap > .titWrap > ul > li:nth-child(5){width: 100%; float: left; font-size: 20px; font-weight: 100; color: #ffffff; text-align: center; line-height: 28px; margin-top: 25px;}

#demoWrap > .infoWrap > p { width: 100%; float: left; font-size: 17px; color: #333; font-family: "Noto Sans KR"; line-height: 26px; text-align: center; padding: 30px 0; }

#demoWrap > .demoListWrap > ul { width: 100%; float: left; }
#demoWrap > .demoListWrap > ul > li { width: 32%; margin-right: 2%; float: left; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); background-color: #FFF; overflow: hidden; border-radius: 5px; }
#demoWrap > .demoListWrap > ul > li:nth-of-type(3n) { margin-right: 0; }

#demoWrap > .demoListWrap .imgWrap { width: 100%; float: left; }
#demoWrap > .demoListWrap .imgWrap > img { width: 100%; float: left; }

#demoWrap > .demoListWrap .titWrap { width: 100%; float: left; text-align: center; margin-top: -20px; }
#demoWrap > .demoListWrap .titWrap > p { display: inline-block; width: 100px; height: 100px; border-radius: 100%; background-color: #451F6C; padding-top: 22px; }
#demoWrap > .demoListWrap .titWrap > p > span { width: 100%; float: left; color: #FFF; }

#demoWrap > .demoListWrap .titWrap > p > .ver { font-size: 15px; font-family: "Noto Sans KR"; margin-bottom: 3px; letter-spacing: -0.5px; }
#demoWrap > .demoListWrap .titWrap > p > .tit { font-size: 21px; font-weight: bold; }

#demoWrap > .demoListWrap .infoWrap { width: 100%; float: left; padding: 40px 0; }
#demoWrap > .demoListWrap .infoWrap > p { width: 100%; float: left; font-size: 16px; font-family: "Noto Sans KR"; color: #333; text-align: center; }
#demoWrap > .demoListWrap .infoWrap > p > b { color: #8140C0; font-family: "Noto Sans KR"; }

#demoWrap > .demoListWrap .linkWrap { width: 100%; float: left; padding: 20px; }
#demoWrap > .demoListWrap .linkWrap > a { width: 50%; float: left; text-align: center; font-size: 14px; font-weight: bold; font-family: "Noto Sans KR"; color: #333; height: 40px; line-height: 40px; border: 1px solid #D7D7D7; border-right: 0; }
#demoWrap > .demoListWrap .linkWrap > a:nth-of-type(2n) { border-right: 1px solid #D7D7D7; }

#demoWrap > .footWrap { text-align: center; margin-top: 50px; margin-bottom: 80px; }
#demoWrap > .footWrap > p { display: inline-block; width: 750px; font-family: "Noto Sans KR"; font-size: 14px; color: #FFF; background-color: #693D95; border-radius: 50px; padding: 8px 0; font-weight: bold; }

#demoWrap > .demoListWrap li:nth-of-type(2n) > .titWrap > p { background-color: #69468D; }
#demoWrap > .demoListWrap li:nth-of-type(3n) > .titWrap > p { background-color: #8658B5; }