/**
* 기본사이트 
**/


  .hidden.menu {
    display: none;
  }

  .masthead.segment {
    /*min-height: 700px;*/
    background-color:#F4D430!important;
    padding: 1em 0em;
  }
  .masthead .logo.item img {
    margin-right: 1em;
  }
  .masthead .ui.menu .ui.button {
    margin-left: 0.5em;
  }
  .masthead h1.ui.header {
    margin-top: 3em;
    margin-bottom: 0em;
    font-size: 4em;
    font-weight: normal;
  }
  .masthead h2 {
    font-size: 1.7em;
    font-weight: normal;
  }

  .ui.vertical.stripe {
    padding: 8em 0em;
  }
  .ui.vertical.stripe h3 {
    font-size: 2em;
  }
  .ui.vertical.stripe .button + h3,
  .ui.vertical.stripe p + h3 {
    margin-top: 3em;
  }
  .ui.vertical.stripe .floated.image {
    clear: both;
  }
  .ui.vertical.stripe p {
    font-size: 1.33em;
  }
  .ui.vertical.stripe .horizontal.divider {
    margin: 3em 0em;
  }

  .quote.stripe.segment {
    padding: 0em;
  }
  .quote.stripe.segment .grid .column {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .footer.segment {
    padding: 5em 0em;
  }

  .secondary.pointing.menu .toc.item {
    display: none;
  }

/*
  @media only screen and (max-width: 700px) {
    .ui.fixed.menu {
      display: none !important;
    }
    .secondary.pointing.menu .item,
    .secondary.pointing.menu .menu {
      display: none;
    }
    .secondary.pointing.menu .toc.item {
      display: block;
    }
    .masthead.segment {
      min-height: 350px;
    }
    .masthead h1.ui.header {
      font-size: 2em;
      margin-top: 1.5em;
    }
    .masthead h2 {
      margin-top: 0.5em;
      font-size: 1.5em;
    }
  }
  */
  /*
  @media (max-width: 767px) {
   
	}
*/





.items_shadow{
	background-color: white;
    border-radius: 6px;
    -webkit-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
}
/*가로로 세개의 박스 style*/
.items_02{}
.items_02{
	height:300px!important;
	background-color:transparent!important;
	background: transparent!important;
	
}
.items_02 .column{
	height:300px!important; 
	padding:10px!important;
	
	background-color:transparent!important;
	background:transparent!important;
		
	
}

.items_02 .column .segment{
	height:100%!important; 
	border:0px solid #0292FA!important;
}

.items_02 .column .segment .header{
	text-align:center;
	margin-top:40px;
}

.items_02 .column .segment .summary,
.items_02 .column .segment .content{
	text-align:center;
}

.items_02 .column .segment .summary{
	color:#0292FA;
}
.items_02 .column .segment .content{
	margin-top:20px;
	line-height:2.1em;
	font-size:1.1em;
}
/*@가로로 세개의 박스 style*/


.items_03{
	height:350px!important;
	background-color:transparent!important;
	background: transparent!important;
	boarder:0px solid #FFFFFF!important;
	box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05)!important;
	
}
.items_03 .two.column{
	height:350px!important; 
	padding:10px!important;
	
	background-color:transparent!important;
	background:transparent!important;
		
	
}

.items_03 .two.column .column{
	height:100%!important; 
	border:0px solid #0292FA!important;
}

.items_03 .two.column .column .header{
	text-align:left;
	margin-top:40px;
	width:90%;
	margin-left:5%;
}

.items_03 .two.column .column .summary,
.items_03 .two.column .column .content{
	text-align:left;
		width:90%;
	margin-left:5%;
}

.items_03 .two.column .column .summary{
	color:#0292FA;
}
.items_03 .two.column .column .content{
	margin-top:20px;
	line-height:2.1em;
	font-size:1.1em;
}




.btn_css_normal{
	border-radius:3px; font-size:1.4em; letter-spacing:0.1em; /*linear-gradient(0.25turn, #1D976C,#93F9B9)*/
	background-color:#84BA3F;/*#089814*/
	/* background: linear-gradient(0.25turn, #089814,#0aad16);*/
	 color:#FFFFFF;
	 padding:10px;
	 
	-webkit-transition:background-color 0.3s, -webkit-transform 0.3s;
    transition:background-color 0.3s, transform 0.3s;
}

/*main_top_wrap*/
	.main_top_wrap{background-color:#F4D430!important; height:75px;}
	.main_top_wrap .container .menu .item{
		background:rgba(238,238,238,0.0);
		-webkit-transition:background-color 0.5s, -webkit-transform 0.5s;
	    transition:background-color 0.5s, transform 0.5s;
	}/*transparent*/
	
	.ui.secondary.menu .item {
		background:rgba(238,238,238,0.0);
		-webkit-transition:background 0.5s, -webkit-transform 0.5s;
	    transition:background 0.5s, transform 0.5s;
	 }
	 
	/*.main_top_wrap .container .menu .item.active{background:rgba(255,255,255,0.9);}
	.main_top_wrap .container .menu .item:hover{background:rgba(255,255,255,0.9)!important;}*/
	
	.main_top_wrap .container .menu .right.item .ui.button:hover{background:rgba(0,0,0,1.0)!important; color:#FFFFFF; } 
	.main_top_wrap .container .menu .right.item .ui.button .arrow{font-weight:bold; font-size:1.0em; margin-left:3px; display:none; } 
	.main_top_wrap .container .menu .right.item .ui.button:hover > .arrow{display:inline-block; } 
	
	.main_top_wrap .container .header{color:#343434;}
	.main_top_wrap .container .header i{display:inline-block;}
	
	
	/*architecture*/
	.masthead.segment.main_top_wrap_architecture{background:rgba(2,146,250,1.0)!important; background-color:#0292FA!important;}
	.masthead.segment.main_top_wrap_architecture .container .menu a{color:#FFFFFF;}
	.main_top_wrap_architecture .container .menu .right.item .ui.button:hover{color:#FFFFFF; } 
	
	.masthead.segment.page_top_wrap_architecture{background-color:#0292FA!important; height:200px;}

	.masthead.segment.main_top_wrap_description{background-color:#F9F9F9!important;}
	.masthead.segment.page_top_wrap_board{background-color:#FFFFFF!important; min-height:10px!important; height:10px!important;}


/*@main_top_wrap*/

/*page_top_wrap  index*/
	.page_top_wrap{min-height:700px;}
	.page_top_wrap .container .header{color:#343434;}
	
	
	
	.page_top_wrap .title_main{position:absolute; left:0%; width:100%; text-aligin:center; }
	.page_top_wrap .title_sub{position:absolute; margin-top:80px;  left:0%; width:100%; text-aligin:center;}
	.page_top_wrap .title_01{animation: index_title_01 12s infinite alternate;}
	.page_top_wrap .title_02{animation: index_title_02 12s infinite alternate; }
	.page_top_wrap .title_03{animation: index_title_03 12s infinite alternate; }
	.page_top_wrap_description .doc_img_wrap:hover > .doc_img{
	-webkit-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
}



@keyframes index_title_01 {
	0% {opacity:1.0;}
	10% {opacity:1.0;}
	20% { opacity:1.0;}
	35% { opacity:0.0;}
	40%  { opacity:0.0;}
	50%  { opacity:0.0;}
	60%  { opacity:0.0;}
	70%  { opacity:0.0;}
	80%  { opacity:0.0;}
	90%  { opacity:0.0;}
	100%  { opacity:0.0;}
}

@-webkit-keyframes index_title_01 {
	0% {opacity:1.0;}
	10% {opacity:1.0;}
	20% { opacity:1.0;}
	35% { opacity:0.0;}
	40%  { opacity:0.0;}
	50%  { opacity:0.0;}
	60%  { opacity:0.0;}
	70%  { opacity:0.0;}
	80%  { opacity:0.0;}
	90%  { opacity:0.0;}
	100%  { opacity:0.0;}
}

@keyframes index_title_02 {
	0% {opacity:0.0;}
	10% {opacity:0.0;}
	20% { opacity:0.0;}
	35% { opacity:1.0;}
	40%  { opacity:1.0;}
	50%  { opacity:1.0;}
	60%  { opacity:1.0;}
	75%  { opacity:0.0;}
	80%  { opacity:0.0;}
	90%  { opacity:0.0;}
	100%  { opacity:0.0;}
}

@keyframes index_title_03 {
	0% {opacity:0.0;}
	10% {opacity:0.0;}
	20% { opacity:0.0;}
	35% { opacity:0.0;}
	40%  { opacity:0.0;}
	50%  { opacity:0.0;}
	60%  { opacity:0.0;}
	75%  { opacity:1.0;}
	80%  { opacity:1.0;}
	90%  { opacity:1.0;}
	100%  { opacity:1.0;}
}


/*@page_top_wrap   index*/

.follow_top_wrap .container .menu .right.item .ui.button:hover{background:rgba(0,0,0,1.0)!important; color:#FFFFFF; }
.follow_top_wrap .container .menu .right.item .ui.button{margin-left:6px;}
.follow_top_wrap .container .menu .right.item .ui.button .arrow{font-weight:bold; font-size:1.0em; margin-left:3px; display:none; } 
.follow_top_wrap .container .menu .right.item .ui.button:hover > .arrow{display:inline-block; } 

/*style="background:rgba(2,146,250,1.0);" 파란색*/



/*사용설명 page*/
.masthead.segment.page_top_wrap_description{background-color:#F9F9F9!important; }
.page_top_wrap_description {}
.page_top_wrap_description .doc_img_wrap{
	width:250px;
	height:300px;
	position:absolute;	
		top:100%; margin-top:-400px;
	left:50%; margin-left:-150px;
}
.page_top_wrap_description .doc_img{
	background-position:center center; background-repeat:no-repeat; background-size:contain; 
	width:100%; height:100%; 
	border:1px solid #000000;
	border-radius:3px;
	background-color:#FFFFFF;
	padding:0 10px 0 10px;
	opacity:0.2;
	cursor:pointer;
	z-index:999;

}

.page_top_wrap_description .doc_01{background-image:url("/file/site/doc_01.gif"); animation: doc_01 6s infinite alternate;}/*animation-delay:2s*/
.page_top_wrap_description .doc_02{background-image:url("/file/site/doc_02.gif"); animation: doc_02 6s infinite alternate;} 
.page_top_wrap_description .doc_03{background-image:url("/file/site/doc_03.gif"); animation: doc_03 6s infinite alternate;}
.page_top_wrap_description .doc_04{background-image:url("/file/site/doc_04.gif"); animation: doc_04 6s infinite alternate;}
.page_top_wrap_description .doc_05{background-image:url("/file/site/doc_05.gif"); animation: doc_05 6s infinite alternate;}
.page_top_wrap_description .doc_06{background-image:url("/file/site/doc_06.gif"); animation: doc_06 6s infinite alternate;}
.page_top_wrap_description .doc_07{background-image:url("/file/site/doc_07.gif"); animation: doc_07 6s infinite alternate;}
.page_top_wrap_description .doc_08{background-image:url("/file/site/doc_08.gif"); animation: doc_08 6s infinite alternate;}
.page_top_wrap_description .doc_09{background-image:url("/file/site/doc_09.gif"); animation: doc_09 6s infinite alternate;}
.page_top_wrap_description .doc_img_wrap:hover > .doc_img{
	-webkit-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
}
.page_top_wrap_description .doc_img_wrap:hover{
	z-index:1000;
}




@keyframes doc_01 {
	0% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(-400px) translateY(0px); opacity:1.0;}
	100% {transform:translateX(-400px) translateY(0px); opacity:1.0;}
}
@keyframes doc_02 {
	0% {transform:translateX(0px)  translateY(0px); opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(-300px) translateY(-110px); opacity:1.0;}
	100% {transform:translateX(-300px) translateY(-110px); opacity:1.0;}
}
@keyframes doc_03 {
	0% {transform:translateX(0px)  translateY(0px); opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(-200px) translateY(-190px); opacity:1.0;}
	100% {transform:translateX(-200px) translateY(-190px); opacity:1.0;}
}
@keyframes doc_04 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(-100px) translateY(-230px); opacity:1.0;}
	100% {transform:translateX(-100px) translateY(-230px); opacity:1.0;}
}
@keyframes doc_05 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(0px) translateY(-250px); opacity:1.0;}
	100% {transform:translateX(0px) translateY(-250px); opacity:1.0;}
}
@keyframes doc_06 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(100px) translateY(-230px); opacity:1.0;}
	100% {transform:translateX(100px) translateY(-230px);opacity:1.0;}
}
@keyframes doc_07 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(200px) translateY(-190px); opacity:1.0;}
	100% {transform:translateX(200px) translateY(-190px);opacity:1.0;}
}
@keyframes doc_08 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(300px) translateY(-110px); opacity:1.0;}
	100% {transform:translateX(300px) translateY(-110px);opacity:1.0;}
}
@keyframes doc_09 {
	0% {transform:translateX(0px) translateY(0px);opacity:0.0;}
	30% {transform:translateX(0px) translateY(0px); opacity:0.0;}
	60% {transform:translateX(400px) translateY(0px); opacity:1.0;}
	100% {transform:translateX(400px) translateY(0px);opacity:1.0;}
}
     
     
     

 .guide_img{
	background-position: center 100px;  background-repeat:no-repeat; background-size:contain; 
	width:100%; height:600px; 
	border:0px solid #000000;
	/*border-radius:3px;*/
	padding:0px!important;
	
}
.guide_01{background-image:url("/file/site/guide_01.png");}
.guide_02{background-image:url("/file/site/guide_02.png");}
.guide_03{background-image:url("/file/site/guide_03.png");}
.guide_04{background-image:url("/file/site/guide_04.png");}
/*@사용설명 page*/


/*아키텍처 page*/
.architecture_page_title{
	position:absolute;
	top:250px;
	left:45%;
}
.architecture_page_title .header{
	color:#FFFFFF!important;
	text-align:right;}
			
	/*architecture  action style*/
	    #boxSmallGroup01{
	           animation: waveAnim 3s infinite alternate;
	    }
	    
	    /*
	    #boxSmallGroup02{
	    	animation: updown_motion01 3s infinite alternate;
	    }
	    */
	     
	   #dotMotion01{
	    	animation: dot_motion01 6s infinite alternate;
	    }
	    #dotMotion02_01{animation: dot_motion02_01 3s infinite ease-in-out ;}
	    #dotMotion02_02{animation: dot_motion02_02 3s infinite ease-in-out ;}
	    #dotMotion02_03{animation: dot_motion02_03 3s infinite ease-in-out ;}
	    
	    #dotMotion03_01{animation: dot_motion03_01 3s infinite  alternate;}
	    #dotMotion03_02{animation: dot_motion03_02 3s infinite ease-in-out ;}
	    
	    #dotMotion04_01{animation: dot_motion04_01 9s infinite ease-in-out ;}
	    
	    #dotLine01{animation:dotLine01 3s infinite normal; animation-delay: 4s}
	    #bigBox01{animation:bigBox01 4s infinite alternate ;}
	    #bigBox01_01{animation:bigBox01_01 4s infinite alternate ; animation-delay: 4s;}/*박스하단라인*/
	    
		@keyframes waveAnim {
	           from {
	               opacity: 1;
	               transform: scale(1, 1);/*0.5*/
	           }
	
	           to {
	               opacity: 1;
	               transform: scale(1, 1.1);
	           }
	     }
		
		@keyframes updown_motion01 {
			0% {transform:translateY(0px);}
			100% {transform:translateY(10px);}
	     }
	          
	     @keyframes dot_motion01 {
			0% {transform:translateX(0px) translateY(0px);}
			50% {transform:translateX(64px) translateY(38px);}
			100% {transform:translateX(120px) translateY(2px);}
	     }
	     
	     
	     @keyframes dot_motion02_01 {
			0% {transform:translateX(0px) translateY(0px); opacity: 0.2;}
			100% {transform:translateX(20px) translateY(-12px); opacity: 1;}
	     }
	     
	    @keyframes dot_motion02_02 {
			0% {transform:translateX(0px) translateY(0px); opacity: 0.2;}
			100% {transform:translateX(11px) translateY(-7px); opacity: 1;}
	     }
	     
	    @keyframes dot_motion02_03 {
			0% {transform:translateX(0px) translateY(0px); opacity: 0.2;}
			100% {transform:translateX(11px) translateY(-7px); opacity: 1;}
	     }
	     
	     @keyframes dot_motion03_01 {
	     		0% {transform:translateX(0px) translateY(0px);}
			100% {transform:translateX(55px) translateY(-35px);}
	
	     }
	     
	     @keyframes dot_motion03_02 {
			0% {transform:translateX(0px) translateY(0px); opacity: 0.2;}
			100% {transform:translateX(32px) translateY(-22px); opacity: 1;}
	     }
	     
	      @keyframes dot_motion04_01 {
			0% {transform:translateX(0px) translateY(0px); opacity: 1;}
			100% {transform:translateX(-40px) translateY(30px); opacity: 0;}
	     }
	     
	     @keyframes dotLine01 {
			0% {transform:translateX(0px) translateY(0px); scaleX: 1;}
			100% {transform:translateX(-3px) translateY(2px); scaleX:0.9;}
	     }
	
	     @keyframes bigBox01{
			to {
				transform:translateX(0px) translateY(-20px); 
				-webkit-transform: translateX(0px) translateY(-20px); 
			  	-ms-transform: translateX(0px) translateY(-20px); 
		  	
		  	}
			from {
				transform:translateX(0px) translateY(0px);
				-webkit-transform: translateX(0px) translateY(0px);
			  	-ms-transform: translateX(0px) translateY(0px);
			}
	     }     
	     
	    @keyframes bigBox01_01{
			0% {transform:translateX(0px) translateY(0px);  opacity:0.2;}
			25% {transform:translateX(0px) translateY(0px);  opacity:1;}
			50% {transform:translateX(0px) translateY(0px);  opacity:0.2;}
			75% {transform:translateX(0px) translateY(0px);  opacity:1;}
			100% {transform:translateX(0px) translateY(0px);  opacity:0.2}
	     }     
	     
	/*@architecture  action style*/



/*@style end*/