@charset "utf-8";


[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'Apple SD Gothic Neo',
		'S-Core Dream',
		'본고딕','Noto Sans KR',NotoSans,'Noto Sans CJK KR', /* ☆ */
		'Open Sans',OpenSans,
		'Microsoft JhengHei',
		'Meiryo',
		/* '나눔고딕',NanumGothic,'Nanum Gothic', */
		'맑은 고딕','Malgun Gothic',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,
		sans-serif;
}


#head{position:relative;
	box-sizing:border-box;
	height:80px;
	padding:10px 15px;
	background:#2f4bb4;
	overflow:hidden;
}
#wrap{background:#f2f3f8;
	padding:15px;
}



#logo{float:left;position:relative;
	z-index:1;
	margin:10px 0 0;
}
#logo img{width:50%;}

#title1{
	z-index:0;
	position:absolute;left:0;right:0;bottom:0;top:0;
	text-align:center;
	color:#fff;
	font-size:30px;
	padding:20px 0 0;
}
#title1>.t1{font-size:17px;font-weight:300;}
#title1:before{content:'';
	display:inline-block;
	width:55px;height:55px;
	background:url(../../img/ic110light1.png) no-repeat 0 0 /contain;
	vertical-align:top;
	margin:-10px 5px 0 0;
}

#gn1{position:relative;float:right;margin:7px 0 0;z-index:2}
#gn1 a{display:inline-block;
	vertical-align:middle;
	margin-left:5px;
}
#gn1 a.link1{
	color:#fff;
	background:rgba(0,0,0,.3) url(../../img/ic15right1.png) no-repeat 90% 50%;
	border-radius:20px;padding:10px 45px 10px 20px;
}
#gn1 a.link2{
	position:relative;
	background:#fff;
	width:46px;height:46px;
	border-radius:100%;
}
#gn1 a.link2:before{content:'';
	display:block;
	width:40px;height:40px;
	position:absolute;left:50%;top:50%;
	margin:-20px;
	background:url(../../img/ic80close1.png) no-repeat 0 0 / contain;
}
#gn1 a.link3{
	color:#000;
	background:#fff568;
	border-radius:20px;padding:10px 20px;
}


.section{display:block;
	position:relative;
	background:#fff;
	border-radius:10px;
	border:#e8e8e8 1px solid;
	padding:40px;
	box-sizing:border-box;
	overflow:hidden;
}
.section .h1{display:block;
	padding:0;margin:0;
	color:#000;
	font-size:30px;
}



#section1{float:left;width:400px;height:1030px;margin-right:20px}
#section1{padding-left:30px;padding-right:20px}
#section1 .file1{position:relative;margin:10px 0 0;overflow:hidden;}
#section1 .file1 input[type="file"]{position: absolute;width:0;height:0;padding:0;overflow:hidden;border:0;}/* 숨기기 */
#section1 .file1 input[type="text"]{display:block;
	border:#d6d6d6 1px solid;
	background:#f8f8f8;
	border-radius:0;
	margin:0 10px 0 0;
	box-sizing:border-box;
	width:calc(100% - 110px);
}
#section1 .file1 label{display:block;
	position:absolute;right:0;top:0;
	width:100px;height:40px;
	line-height:40px;
    background: #26282a;
    color:#fff;
	text-align:center;
    border-radius:5px;
	box-sizing:border-box;
	cursor:pointer;
}/* 이미지찾기 버튼 */
#section1 .scroll{margin:20px 0 0;
	padding:0 10px 0 0;
	height:840px;
	overflow:hidden;overflow-y:auto;
}
#section1 .h2{position:relative;
	display:inline-block;
	padding:0 10px;
	margin:0 0 10px 0;
	font-size:20px;
	color:#2e3e93;
}
#section1 .h2:before{content:'';
	display:block;
	position:absolute;left:0;right:0;bottom:0;
	border-radius:10px;
	height:15px;
	background:rgba(46,62,147,.15)
}
#section1 ul{
	padding:15px 0;
	margin:0 0 25px;
	border-bottom:1px solid #e8e8e8;
}
#section1 li{display:inline-block;width:auto;text-align:center;}
#section1 li a{display:block;
	padding:15px;
	box-sizing:border-box;
	border:2px solid #fff;
}
#section1 li img{
	position:relative;
	max-width:100%;width:auto;height:40px;
	opacity:.7;
}
#section1 li a.on{display:block;
	border-color:#000;
}
#section1 li a.on img{opacity:1;}
#section1 ul:before,
#section1 ul:after{content:'';display:block;clear:both;}



#section2{float:right;
	position:relative;
	width:calc(100% - 400px - 20px);
	margin-bottom:10px;
	padding:0;
}
/*#section2:before{content:'';
	display:block;
	position:Absolute;left:50%;top:0;
	height:90px;
	border-left:1px solid #e8e8e8;
}*/
#section2 .section2s{
	position:relative;
	width:100%;
	padding:25px 40px;
	box-sizing:border-box;
	overflow:hidden;
}
#section2 .h1{float:left;
	font-size:24px;
	margin-right:40px;
}
#section2 .section2s input{
	float:left;display:block;
	border:#d6d6d6 1px solid;
	background:#f8f8f8;
	border-radius:0;
	margin:0 10px 0 0;
	box-sizing:border-box;
}
#section2 .section2s button{float:left;padding:0 20px;border:0;background:#26282a;color:#fff;border-radius:5px;}
#section2 #section2s1 input{width:50%}
#section2 #section2s1 .t1{float:left;margin:10px 0 0 10px;font-size:14px;color:#777}

#section2 #section2s3{border-top:1px solid #e8e8e8;padding-right:0;}
#section2 #palette1{float:left;width:calc(100% - 195px);}
#section2 #palette1 a{display:block;
	float:left;
	position:relative;
	border-radius:100%;
	width:36px;height:36px;
	margin:0 7px 5px 0;
	box-sizing:border-box;
	cursor:pointer;
}
#section2 #palette1 a.on{border:3px solid #072d66}
#section2 #palette1 a.on:before{content:'';
	display:block;position:absolute;left:50%;top:50%;
	width:20px;height:20px;
	margin:-10px;
	background:url(../../img/ic20check1.png) no-repeat;
}
#section2 #palette1 a.c01{background:#ef3f4a}
#section2 #palette1 a.c02{background:#b21035}
#section2 #palette1 a.c03{background:#ee4d9b}
#section2 #palette1 a.c04{background:#af006f}
#section2 #palette1 a.c05{background:#89288f}
#section2 #palette1 a.c06{background:#2f2076}
#section2 #palette1 a.c07{background:#1793b7}
#section2 #palette1 a.c08{background:#00648e}
#section2 #palette1 a.c09{background:#1a4589}
#section2 #palette1 a.c10{background:#1b3362}
#section2 #palette1 a.c11{background:#b26f29}
#section2 #palette1 a.c12{background:#843c30}
#section2 #palette1 a.c13{background:#65471c}
#section2 #palette1 a.c14{background:#422d2e}
#section2 #palette1 a.c15{background:#9e9e3a}
#section2 #palette1 a.c16{background:#00a096}
#section2 #palette1 a.c17{background:#55662f}
#section2 #palette1 a.c18{background:#008757}
#section2 #palette1 a.c19{background:#13687c}
#section2 #palette1 a.c20{background:#26282a}
#section2 #palette1 a.c21{background:#f0efe9}



#section3{float:right;width:calc(100% - 400px - 20px);}
#section3 .info1{float:left;display:block;
	position:relative;
	padding:0 0 0 100px;
	margin:0 0 40px 0;
	font-size:17px;
	font-weight:300;
	line-height:150%;
	overflow:hidden;
	max-width:calc(100% - 550px);
}
#section3 .info1 b{}
#section3 .info1 p{font-weight:600;
	color:#2e3e93;
	font-size:15px;
	margin:10px 0 0;
	line-height:120%;
}
#section3 .info1 p+p{color:#000;
	font-weight:normal;
}
#section3 .info1:before{content:'';
	display:block;position:absolute;left:0;top:0;
	width:90px;height:90px;
	background:url(../../img/ic180person1.png) no-repeat 0 0 / contain;
}
#section3 .btn1{float:right;margin:20px 0 0;}
#section3 .btn1 button{position:relative;
	border-color:#0d32a4;
	border-radius:5px;
	padding:0 20px;
	font-size:18px;
	height:3em
}
#section3 .btn1 button:before{content:'';
	width:20px;height:20px;
	background:url() no-repeat 0 0 / contain;
}
#section3 .btn1 button.reset{padding:0 15px;background-color:#fff;}
#section3 .btn1 button.reset:before{display:block;background-image:url(../../img/ic40reset1.png)}
#section3 .btn1 button.download{
	background-color:#0d32a4;
	border-color:#0d32a4;
	color:#fff;
}
#section3 .btn1 button.download:before{display:inline-block;
	margin-right:10px;
	background-image:url(../../img/ic40download1.png);
}
#section3 #canvas1{clear:both;float:none;
	position:relative;
	text-align:center;
	width:100%;height:560px;
	box-sizing:border-box;
	outline:1px solid #e8e8e8;
	border-radius:15px;
	background:#fff;
	overflow:hidden;
	/*overflow-x:auto;*/
	/*background:url(../../img/grid.png) repeat;*/
}
#section3 #canvas1 .wrap1{display:inline-block;position:relative;
	margin:170px 0 0;
	width:100%;height:186px;
	text-align:center;
}
#section3 #canvas1 .img1{	display:inline-block;
	width:410px;height:186px;
	margin:0;
	vertical-align:top;
	box-sizing:border-box;
}
#section3 #canvas1 .img1 img{display:block;width:100%;}
#section3 #canvas1 .w{display:inline-block;
	position:relative;
	text-align:right;
	vertical-align:top;
	margin:82px -10px 0;
}
#section3 #canvas1 .w .text1{
	position:relative;
	font-family:'Nanum Square';font-size:44px;font-weight:800;
	text-align:right;
	border-top:19px solid #3e4351;
	padding:16px 0 0;
	color:#3e4351;
	white-space:nowrap;
}
#section3 #canvas1 .w .text1.hanja{
	font-family:
		'Open Sans',OpenSans,
		'Segoe UI',
		'华文细黑',STXihei,'微软雅黑','Microsoft YaHei',
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}
#section3 #canvas1 .w .icon1{z-index:1;
	position:absolute;left:0;bottom:75px;
	background:#fff
}
#section3 #canvas1 .w .icon1 img{max-width:110px;padding-right:5px;}
#section3 #canvas1 .w .icon1 .user_img{
	width:auto;height:140px;
	margin:-61px 0 0;
}


#section3 #canvas1 .w .text1.c01{color:#ef3f4a;border-top-color:#ef3f4a;}
#section3 #canvas1 .w .text1.c02{color:#b21035;border-top-color:#b21035;}
#section3 #canvas1 .w .text1.c03{color:#ee4d9b;border-top-color:#ee4d9b;}
#section3 #canvas1 .w .text1.c04{color:#af006f;border-top-color:#af006f;}
#section3 #canvas1 .w .text1.c05{color:#89288f;border-top-color:#89288f;}
#section3 #canvas1 .w .text1.c06{color:#2f2076;border-top-color:#2f2076;}
#section3 #canvas1 .w .text1.c07{color:#1793b7;border-top-color:#1793b7;}
#section3 #canvas1 .w .text1.c08{color:#00648e;border-top-color:#00648e;}
#section3 #canvas1 .w .text1.c09{color:#1a4589;border-top-color:#1a4589;}
#section3 #canvas1 .w .text1.c10{color:#1b3362;border-top-color:#1b3362;}
#section3 #canvas1 .w .text1.c11{color:#b26f29;border-top-color:#b26f29;}
#section3 #canvas1 .w .text1.c12{color:#843c30;border-top-color:#843c30;}
#section3 #canvas1 .w .text1.c13{color:#65471c;border-top-color:#65471c;}
#section3 #canvas1 .w .text1.c14{color:#422d2e;border-top-color:#422d2e;}
#section3 #canvas1 .w .text1.c15{color:#9e9e3a;border-top-color:#9e9e3a;}
#section3 #canvas1 .w .text1.c16{color:#00a096;border-top-color:#00a096;}
#section3 #canvas1 .w .text1.c17{color:#55662f;border-top-color:#55662f;}
#section3 #canvas1 .w .text1.c18{color:#008757;border-top-color:#008757;}
#section3 #canvas1 .w .text1.c19{color:#13687c;border-top-color:#13687c;}
#section3 #canvas1 .w .text1.c20{color:#26282a;border-top-color:#26282a;}
#section3 #canvas1 .w .text1.c21{color:#f0efe9;border-top-color:#f0efe9;}



@media all and (max-width:1755px){
	#section3 .info1{max-width:none;margin-bottom:20px;}
	#section3 .info1 br{display:none;}
	#section3 .btn1{clear:both;float:none;text-align:right;margin:0 0 20px 0;}
}
@media all and (max-width:1519px){
	#section2:before{display:none;}
	#section2 .section2s{clear:both;float:none;width:100%;}
	#section2 #section2s1 input{width:calc(100% - 115px - 120px);}
	#section2 #section2s1 .t1{clear:both;float:none;margin:0 0 0 150px;padding:5px 0 0;}
	#title1>.t1{display:none;}
}
@media all and (max-width:1200px){
	.section{clear:both !important;float:none !important;width:100% !important;}
	#section1{padding:20px 40px;height:350px;margin-right:0;margin-bottom:10px;}
	#section1 .h1{font-size:24px !important;}
	#section1 .file1{position:absolute;left:200px;right:20px;top:10px;300px;}
	#section1 .scroll{height:250px;margin-top:20px;}
	#section1 .scroll .w{position:relative;padding:0 0 0 100px}
	#section1 .h2{position:absolute;left:0;top:0;}
	#section1 ul{padding:0 0 10px 10px;margin:0 0 10px;}
	#section1 li{clear:both;float:none;}

	#section2:before{display:block;}
	#section2 .sectio2ns{clear:none;float:left;width:50%;}
	#section2 #section2s2{border-top:0}
}
@media all and (max-width:1140px){
	#section2 .section2s{padding:15px 40px;}
	#section2:before{display:none;}
	#section2 .section2s{clear:both;float:none;width:100%;}
	#section2 #section2s2{border-top:1px solid #e8e8e8}
}
@media all and (max-width:1100px){
	#logo{display:none;}
	#title1{text-align:left;padding-left:15px;}
}
@media all and (max-width:768px){
	#logo img{width:30%}
	#title1{font-size:24px;}
	#gn1 a.link2{display:none;}
}
@media all and (max-width:714px){
	.section{padding:20px;}
	#section1{height:300px;padding:20px;}
	#section1 .scroll{height:220px;}
	#section1 li a{padding:10px;}
	#section1 li img{height:30px;}
	
	#section2 .section2s{padding:15px 20px;}
	#section2 .h1{font-size:18px;line-height:40px;}
	#section2 #section2s1 input{width:calc(100% - 205px)}
	#section2 #section2s1 .t1{margin-left:125px;}
	#section2 #palette1{width:calc(100% - 140px)}
	#section2 #palette1 a{transform: scale(0.7, 0.7);margin:0}
	
	#section3 .info1{line-height:130%;font-size:18px}
	#section3 .btn1{text-align:center;}
	#section3 .btn1 button{padding:0 15px;font-size:14px;}
}
@media all and (max-width:645px){
	#gn1 a.link1{display:none;}	
}
@media all and (max-width:540px){
	#title1>.t2{display:none;}
	#logo{display:none}
	#section1 .file1{position:relative;width:100%;left:auto;right:auto;top:auto;}
	#section1 .scroll{height:160px;}
	#section1 .scroll .w{padding-left:80px;}
	#section1 .h2{font-size:16px;}

	#section3 .btn1 button.download span{display:none;}
}
@media all and (max-width:450px){
	#head{height:66px}
	#title1{font-size:18px;}
	#title1:before{width:40px;height:40px;}
	#gn1 a.link3{font-size:13px;padding:7px 15px;}

	#section2 #section2s1 input{width:calc(100% - 85px)}
	#section2 #section2s1 .t1{margin:0}
	#section2 #palette1{width:100%;}
	
	#section3 .info1{font-size:16px;}
	#section3 .info1 p{margin:15px 0 0 -100px;}
}

 /* #canvas 반응형 대응 */
@media all and (max-width:1550px){
	#section3 #canvas1{height:450px;}
	#section3 #canvas1 .img1{width:300px;height:136px;}
	#section3 #canvas1 .w{margin-top:60px;}
	#section3 #canvas1 .w .icon1{bottom:57px;}
	#section3 #canvas1 .w .text1{border-top-width:14px;font-size:30px;}
}
@media all and (max-width:1240px){
	#section3 #canvas1{height:355px;}
	#section3 #canvas1 .wrap1{margin-top:120px}
	#section3 #canvas1 .img1{width:220px;height:100px;}
	#section3 #canvas1 .w{margin-top:44px;}
	#section3 #canvas1 .w .icon1{left:-1px;bottom:42px;} 
	#section3 #canvas1 .w .icon1 img{width:70px;height:auto;}
	#section3 #canvas1 .w .icon1:before{right:-5px}
	#section3 #canvas1 .w .text1{border-top-width:10px;font-size:20px;}
	#section3 #canvas1 .w .icon1 .user_img{height:70px;margin-top:-46px;}
}
@media all and (max-width:600px){
	#section3 #canvas1{height:280px;}
	#section3 #canvas1 .wrap1{margin-top:110px}
	#section3 #canvas1 .img1{width:154px;height:70px;}
	#section3 #canvas1 .w{margin-top:31px;}
	#section3 #canvas1 .w .icon1{bottom:29px;}
	#section3 #canvas1 .w .icon1 img{width:50px;}
	#section3 #canvas1 .w .text1{border-top-width:7px;font-size:16px;padding-top:8px;}
}
@media all and (max-width:430px){
	#section3 #canvas1{height:280px;}
	#section3 #canvas1 .wrap1{margin-top:110px}
	#section3 #canvas1 .img1{width:110px;height:50px;}
	#section3 #canvas1 .w{margin-top:22px;}
	#section3 #canvas1 .w .icon1{bottom:25px;}
	#section3 #canvas1 .w .icon1 img{width:40px}
	#section3 #canvas1 .w .text1{border-top-width:5px;font-size:14px;padding-top:6px;}
	#section3 #canvas1 .w .icon1 .user_img{height:50px;margin-top:-30px;}
}

 /*#cavas 반응형 대응
@media all and (max-width:1700px){
	#section3 #canvas1 .wrap1{transform:scale(0.8,0.8)}
}
@media all and (max-width:1400px){
	#section3 #canvas1 .wrap1{transform:scale(0.6,0.6)}
}
@media all and (max-width:1260px){
	#section3 #canvas1 .wrap1{transform:scale(0.4,0.4)}
}
@media all and (max-width:1200px){
	#section3 #canvas1 .wrap1{transform:scale(1,1)}
}
@media all and (max-width:1100px){
	#section3 #canvas1 .wrap1{transform:scale(0.8,0.8)}
}
@media all and (max-width:900px){
	#section3 #canvas1{height:300px;}
	#section3 #canvas1 .wrap1{margin:50px 0 0;transform:scale(0.6,0.6)}
}
@media all and (max-width:790px){
	#section3 #canvas1 .wrap1{transform:scale(0.4,0.4)}
}
@media all and (max-width:570px){
	#section3 #canvas1 .wrap1{transform:scale(0.4,0.4)}
}
@media all and (max-width:480px){
	#section3 #canvas1{height:150px;}
	#section3 #canvas1 .w{margin-top:63px}
	#section3 #canvas1 .wrap1{transform:scale(0.3,0.3)}
}
@media all and (max-width:400px){
	#section3 #canvas1 .wrap1{transform:scale(0.2,0.2)}
}*/