::-webkit-scrollbar {
    width: 0.5rem;
}
::-webkit-scrollbar-thumb {
    background-color:rgba(0,0,0,0.2); 
    cursor: pointer;
}
::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0.1); 
    cursor: pointer;
}
/**=====================
 * 	body
 =====================*/	
body{
	background-color:#e5eefb;
}

/**=====================
 * 	main
 =====================*/			
main{
	position:absolute;
	width:192.0rem;height:108.0rem;
	background-image:url('res/main-bg.jpg');
	
	font-family:'PRE';
	font-weight:100;
}
	article{
		position:absolute; left:0; top:0;
		width:100%; height:100%;
	}
		
		/**=====================
		 * 	head
		 =====================*/
		header.head{
			position:fixed; left:0rem; top:0rem; z-index:1;
			width:100%;
			border-top:0.3rem solid #b8cce8;
		}
			header.head h1{
				position:absolute; left:3.0rem; top:0rem;
				
				font-size:1.5rem;
				font-weight:bold;
				color:#fff;
				
				background-color:#b8cce8;
				padding:0.2rem 1.2rem 0.4rem 1.2rem;
				
				border-radius:0rem 0rem 1.0rem 1.0rem;
			}
				
		/**=====================
		 * 	body
		 =====================*/
		section.body{
			position:absolute; left:0; top:0; 
			width:100%; height:100%;
			padding:8.0rem 5.0rem 5.0rem 5.0rem;
			
		}
			section.body>section{
				position:relative; left:50%; transform:translateX(-50%);
				width:auto; height:100%;
				display:inline-block;
				overflow-x:hidden; overflow-y:auto;
			}
				section.body>section>div{
					position:relative;
					padding:0 5.0rem;
				}
				
				
				/**=====================
				 * 	intro
				 =====================*/
				
				section.intro{
					position:relative; left:50%; top:0%; transform:translateX(-50%);
					width:158.0rem;
					padding:0 2.0rem;
					
					margin-bottom:15.0rem;
				}
				
					section.intro>header{}
					section.intro>header h2{
						width:25.9rem; height:10.8rem;
						font-size:3.0rem; 
						font-weight:bold;
						line-height:7.0rem;
						color:#fff;
						text-indent:3.0rem;
						text-align:center;
						background-image:url('res/icon-works.png');
					}	
					
					section.intro section.info{
						position:relative; left:50%; transform:translateX(-50%);
						display:inline-block;
						width:112.0rem;
						margin-top:2.0rem;
					}
						section.intro section.info h3{
							position:relative;
							font-size:4.0rem;
							font-weight:bold;
							display:inline-block;
							color:#5e6a82;
							padding:0 2%;
						}
							section.intro section.info h3:after{
							    content: '';
							    display: block;
							    position: absolute;
							    left: 0%;
							    bottom: -1.0rem;
							    width: 100%;
							    height: 0.6rem;
							    background-repeat: repeat-x;
							    background-size: 100% 100%;
							    background-image: url('res/line-works.png');
							}


						section.intro section.info>div{
							margin-top:2.5rem;
						}
							section.intro section.info .photo{
								display:inline-block;
								position:relative; left:2.0rem;
								width:26.0rem; height:31.6rem;
								background-image:url('res/photo-box.png');
							}
								section.intro section.info .photo img{
									width:20.0rem; height:26.0rem;
									position:absolute; left:1.8rem; top:3.2rem;
									border-radius:1.5rem;
								}
								
							section.intro section.info .text{
								display:inline-block; width:calc(100% - 34.0rem);
								margin-left:4.0rem; margin-top:0rem;
							}
								section.intro section.info .text>div{
									margin-top:2.0rem;
									font-size:2.2rem;
									font-weight:normal;
									line-height:4.0rem;
									color:#5e6a82;
								}
								
								section.intro section.info .text .label{
									position:relative;
									padding-left:8.0rem;
									text-align:justify;
								}
								section.intro section.info .text .label label{
									position:absolute;
									left:0; top:0;
								}
								section.intro section.info .text .label span{
									float:right;
								}
								section.intro section.info em{
									color:#212121;
								}
					 section.intro .note{
					 	padding:0 4.0rem;
					 	font-size: 2.0rem;
					    line-height: 3.4rem;
					    text-align:justify;
					    color: #8490a8;
					 }
				/**=====================
				 * 	solution
				 =====================*/
				section.solution{
					position:relative; left:50%; transform:translateX(-50%);
					display:inline-block;
					width:112.0rem;
					margin-top:15.0rem;
				}
					section.solution>header h2{
						position:absolute; left:-21.0rem; top:-15.0rem;
						width: 25.9rem;
					    height: 10.8rem;
					    font-size: 3.0rem;
					    font-weight: bold;
					    line-height: 7.0rem;
					    color: #fff;
					    text-indent: 3.0rem;
					    text-align: center;
					    background-image: url('res/icon-works.png');
					}
					
					section.solution>header h2 span{
						position:absolute; left:calc(100% + 2.0rem); top:1.7rem;
						width:100.0rem;
						font-size:2.4rem;
						font-weight:normal;
						line-height:4.0rem;
						color:#8490a8;
						text-align:left;
					}
					section.solution>header h2 span label{
					 	font-weight:bold;
					 	color:#ad6ee9;
					}
					
					/**=====================
					 * 	설명
					 =====================*/
					section.note{
						padding:0 4.0rem;
					}
						section.note em{
							font-weight:bold;
							color:#5e6a82;
						}
					
						section.note>nav{
							font-family:'SUIT';
							font-size:4.0rem;
							font-weight:bold;
							color:#5e6a82;
						}
						
						
							section.note>nav h3{
								position:relative;
								display:inline-block;
							}
							
								section.note>nav h3:after{
									content:'';
									display:block;
									position:absolute; left:-8%; bottom:-1.0rem;
									width:116%; height:0.6rem;
									background-repeat:repeat-x;
									background-size:100% 100%;
									background-image:url('res/line-works.png');
								}
									section.note>nav h3>span{
										position:absolute; left:calc(100% + 5.0rem); top:50%; transform:translateY(-50%);
										width:50.0rem;
										
										font-family:'PRE';
										font-weight:100;
										font-size:2.0rem;
										color:#aaccff;
									}
										section.note>nav h3 b{
											color:#69cdfb;
										}
									
										section.note>nav button{
											cursor:pointer;
											position:absolute; left:calc(100% - 5.0rem); top:50%; transform:translateY(-50%);
											
											width:14.0rem; height:3.4rem;
											
											text-align:center;
											color:#fff;
											background-color:#ad6ee9;
											border-radius:1.0rem;
										}
											section.note>nav button span{
												font-size:2.0rem;
												line-height:3.4rem;
											}
											section.note>nav button:hover{
												background-color:#999;
											}
										
										section.note>nav button[data-type="solution"]{
											width:16.0rem; left:calc(100% - 5.0rem); 
										}
										section.note>nav button[data-type="ebook"]{
											left:47.0rem; 
										}
										section.note>nav button[data-type="proposal"]{
											width:16.0rem; left:44.0rem; 
										}
										section.note>nav button[data-type="textbook"]{
											width:19.0rem; left:61.0rem; 
										}
										
						section.note>section{
							font-size:2.0rem;
							line-height:3.4rem;
							color:#8490a8;
							
							margin-top:3.5rem;
						}
					
					/**=====================
					 * 	views
					 =====================*/
					section.views{
						margin-top:5.0rem;
						width:100%;
					}
						section.views img{
							width:100%;
							border:0.3rem solid #d3dff2;
						}
						
					/**=====================
					 * 	events
					 =====================*/
					section.solution section.events{
						margin-top:5.0rem;
					}
						section.solution section.events button{
							cursor:pointer;
							width:54.2rem; height:32.1rem;
							
							font-size:0rem;
							line-height:0rem;
							text-align:center;
						}
						section.solution section.events button+button{
							margin-left:3.0rem;
						}
						section.solution section.events button:nth-child(1){
							background-image:url('res/btn-solution.png');
						}
						section.solution section.events button:nth-child(2){
							background-image:url('res/btn-guide.png');
						}
				
				/**=====================
				 * 	works
				 =====================*/
				section.textbook{
					position:relative; left:50%; transform:translateX(-50%);
					display:inline-block;
					width:112.0rem;
					
					margin-top:10.0rem;
					padding-top:10.0rem;
					border-top:0.3rem dashed rgba(0,0,0,0.1);
				}
				
					section.textbook section.events{
						margin-top:5.0rem;
					}
					
					section.textbook section.events button{
						cursor:pointer;
						position:relative; left:50%; transform:translateX(-50%);
						
						width:120.0rem; height:76.0rem;
						
						font-size:0rem;
						line-height:0rem;
						text-align:center;
					}
					section.textbook section.events button{
						background-image:url('res/btn-textbook.png');
					}
					
				/**=====================
				 * 	histroy
				 =====================*/
				
				section.histroy{
					position:relative; left:50%; top:0%; transform:translateX(-50%);
					width:158.0rem;
					margin-top:17.0rem;
				}
				
				/**=====================
				 * 	works
				 =====================*/
				
				section.works{
					position:relative;
					width:100%;
					padding:0 2.0rem;
				}
					section.works+section.works{
						margin-top:10.0rem;
					}
					section.works>header{
						
					}
					section.works>header h2{
						position:relative;
						width:25.9rem; height:10.8rem;
						font-size:3.0rem; 
						font-weight:bold;
						line-height:7.0rem;
						color:#fff;
						text-indent:3.0rem;
						text-align:center;
						background-image:url('res/icon-works.png');
					}
					
					section.works>header h2 span{
						position:absolute; left:calc(100% + 2.0rem); top:1.7rem;
						width:100.0rem;
						font-size:2.4rem;
						font-weight:normal;
						line-height:4.0rem;
						color:#8490a8;
						text-align:left;
					}
					section.works>header h2 span label{
					 	font-weight:bold;
					 	color:#ad6ee9;
					}
					
					/**=====================
					 * 	works list
					 =====================*/
					
					section.works .workList{
						margin-top:5.0rem;
						padding-bottom:6.0rem;
					}
						/**
						 * 	dp 1
						 */
						section.works .workList>ul{
							display:block;
						}
							section.works .workList>ul>li{
								position:relative;
								display:inline-block;
								width:25%;
								flex-direction:row;
								padding:0 1.5%;
							}
							section.works[data-leng="2"] .workList>ul>li{
								width:50%;
							}
							section.works[data-leng="3"] .workList>ul>li{
								width:33.3%;
							}
								section.works .workList>ul>li:before{
									content:'';
									display:inline-block;
									width:0; height:100%;
									position:absolute; left:0; top:0;
									border-left:0.1rem solid #d3dff2;
								}
								section.works .workList>ul>li:after{
									content:'';
									display:inline-block;
									width:0; height:100%;
									position:absolute; right:0; top:0;
									border-left:0.1rem solid #d3dff2;
								}
								
								section.works .workList>ul>li:nth-child(1):before{
									content:none !important;
								}
								section.works .workList>ul>li:nth-child(5n):before{
									content:none !important;
								}
								section.works .workList>ul>li:nth-child(n+5){
									margin-top:10.0rem;
								}
								
								section.works[data-leng="2"] .workList>ul>li:nth-child(2n):after{
									content:none !important;
								}
								section.works[data-leng="3"] .workList>ul>li:nth-child(3n):after{
									content:none !important;
								}
								section.works[data-leng="4"] .workList>ul>li:nth-child(4n):after{
									content:none !important;
								}
								
							
							section.works .workList>ul>li>p{
								font-size:2.2rem;
								font-weight:bold;
								line-height:3.0rem;
								color:#253b69;
								text-align:center;
								
							}
								section.works .workList>ul>li>p>span{
									position:relative;
									display:inline-block;
									padding:0 0.5rem 1.5rem 0.5rem;
									line-height:4.0rem;
									width:100%;
								}
								section.works .workList>ul>li>p>span:after{
									content:'';
									display:block;
									position:absolute; left:0; bottom:0;
									width:100%; height:0.4rem;
									background-repeat:repeat-x;
									background-size:100% 100%;
									background-image:url('res/line-works.png');
								}
							
							
						/**
						 * 	dp2
						 */
						section.works .workList>ul>li>ul{
							margin-top:2.0rem;
						}
							section.works .workList>ul>li>ul>li{
								min-height:15.0rem;
							}
							section.works .workList>ul>li>ul>li+li{
								margin-top:3.0rem;
							}
							
							section.works .workList>ul>li>ul>li>p{
								position:relative;
								font-size:1.7rem;
								font-weight:normal;
								line-height:4.0rem;
								color:#fff;
								text-align:left;
							}
							section.works .workList>ul>li>ul>li>p>span{
								padding:0.1rem 1.0rem 0.3rem 1.0rem;
								border-radius:10.0rem;
								background-color:#253b69;
							}
								section.works .workList img{
									cursor:pointer;
									position:absolute; right:0; top:4.5rem;
									width:14.0rem; height:10.2rem;
									background-color:#fc0;
									border-radius:1.0rem;
									border:0.1rem solid #9eaba3;
								}
								section.works .workList img:hover{
									outline:solid; outline-color:#09f; outline-width:0.2rem;
								}
							
							
						/**
						 * 	dp3
						 */
						section.works .workList>ul>li>ul>li>ul{
							margin-left:1.0rem;
						}
						section.works .workList>ul>li>ul>li>ul>li>p{
							width:20.0rem;
							font-size:1.8rem;
							font-weight:normal;
							line-height:3.2rem;
							color:#6c7890;
							letter-spacing:-0.5px;
							text-align:justify;
						}
					    
					    
					    section.works[data-leng="3"] .workList>ul>li>ul>li>ul>li>p{
					    	width:29.0rem;
					    }
						
						
						section.works[data-leng="3"] .workList>ul>li>ul>li>ul>li>p{
					    	width:29.0rem;
					    }
						
						section.histroy>section:nth-child(6) .workList>ul>li>ul>li>ul>li>p{
					    	width:100%;
					    }
						
		/**=====================
		 * 	foot
		 =====================*/		
		 	
		footer.foot{
			position:absolute; left:0; bottom:0; z-index:1;
			width:100%; height:2.0rem;
			color:#777;
			border-bottom:0.3rem solid #b8cce8;
		}
			footer.foot .copyright{
				float:right;
				font-size:1.5rem;
				line-height:2.2rem;
				margin-right:2.0rem;
				padding:0 1.0rem;
				border-radius:1.0rem 1.0rem 0 0; 
				background-color:#b8cce8;
			}
		
		
		
		/**=====================
		 * 	imageViewContainer
		 =====================*/
		article.imageViewContainer{
			background-color:rgba(255,255,255,0.7);
		}
		.imageView{
			cursor:pointer;
			position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
			
			border-radius:2.0rem;
			outline:1.0rem solid rgba(140,180,220,0.8);
			overflow:hidden;
		}
		article.imageViewContainer.x .imageView{
			width:70%; 
		}
		article.imageViewContainer.y .imageView{
			height:90%; 
		}
		
			article.imageViewContainer.x img{
				width:100%;
			}
			article.imageViewContainer.y img{
				width:auto;
				height:100%;
			}