@charset "utf-8";

@media screen and (min-width: 768px) and (max-width: 1024px) {

	.web_development{
		width:700px;
		height:500px;
		margin:50px auto;
	}	
	
	.web_development .image{
		width:700px;
		height:400px;
		background:url(../../img/logo.svg)no-repeat center center / contain;
		margin:0 auto;
	}	

	.web_development .name{
		font-size:40px;
		margin:50px 0;
		text-align:center;
		font-weight:900;
	}
	
	.web_development .info{
	}
		
	.web_development .note{
		border:2px #FA3242 dotted;
		padding:10px;
		margin:20px 0;
		border-radius:10px;
	}	

	body{
		overflow-x:hidden;
		position:relative;
	}

	.background_main{
		background:#F3E37B url(../../img/background.png);
	}
	
	
	.top{
		width:100%;
		position:fixed;
		top:0;
		left:0;
		z-index:10;
		box-sizing: border-box;
		background:rgba(255,255,255, 0.9);
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;	
	}
		
	.tops{		
		height:100px;
		padding:10px;
		display:flex;
		position:relative;
	}	

	.tops .logo{
		flex: 0 0 220px;
		height:40px;
		margin:0 30px;
		background:url(../../img/視覺主題/img0.svg)no-repeat top 10px center / contain;
		display:block;
		font-size:23px;
		font-weight:bold;
		padding:60px 0 20px 0;
		color:#F09BAE;
		text-shadow:
			1px 1px 0 #eee,
			2px 2px 0 #777,
			3px 3px 0 #fff;			
	}

	.tops .logo:hover{
		text-decoration:none;
	}	


	.tops .right{
		width:(100% - 350px);
		padding-left:10px;
		height:100px;
		flex:1;
	}

	
	.tops .btn_open{	
		width:50px;
		height:50px;
		position:absolute;
		top:30px;
		right:30px;
		text-align:center;	
	}		

	
	.tops .btn_close{	
		width:50px;
		height:50px;
		position:fixed;
		top:30px;
		right:50%;
		margin-right:-25px;
		z-index:101;
		text-align:center;	
	}	
	
	
	
	.tops .btn_open:hover,
	.tops .btn_close:hover
	{	
		background:#FDD216;
		color:#000;	
		border-radius:5px;
		box-shadow:
			1px 1px 0 #eee,
			2px 2px 0 #777,
			3px 3px 0 #fff;			
	}		
	
	
	.tops .btn_open span,
	.tops .btn_close span
	{	
		font-size:35px;
		margin:0;
	}		

	
	.tops .main_menu.rwd{	
		display:block;
	}	
	
	.tops .main_menu{	
		width:100%;
		height:100%;
		background:rgba(255,255,255,0.95);
		position:fixed;
		z-index:100;
		top:0;
		left:0;
		box-sizing: border-box;
		padding:20px;
	}
	
	.tops .main_menus{	
		position:relative;
		display:flex;
		width:100%;
		margin-top:10px;
		flex-wrap:wrap;
		padding:80px 0;
		gap:10px;
	}
		
	
	.tops .main_menus .mu{	
		width:calc(50% - 5px);
		position:relative;
		padding:0;
		text-align: center;
	}	
	
	
	.tops .main_menus .mu .name_mu{	
		font-size:21px;
		line-height:23px;
		font-weight:bold;
		color:#1886EA;
		padding:20px;
		display:block;
		border-radius:5px;
	}		
	
	.tops .main_menus .mu .name_mu:hover{	
		background:rgba(255,255,255, 0.9);
		text-shadow: none;
		text-decoration:none;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;		
	}		
	
	.tops .main_menus .mu:hover .name_mu{	
		background:#FDD216;
		color:#000;
		text-shadow: none;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;		
	}	
		
	.tops .main_menus .mu .su{	
		width:100%;
		font-size:15px;
		line-height:25px;
		font-weight:bold;	
		background:rgba(255,255,255, 0.9);
		padding:0;
		border-radius:5px;
		box-sizing:border-box;
		overflow:hidden;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;	
	}		
	
	.tops .main_menus .mu:hover .su{	
		display:block;
	}		
	
	.tops .main_menus .mu .su .bok{	
		padding:20px;
		display:block;		
	}	

	.tops .main_menus .mu:hover .su .bok:hover{	
		text-decoration:none;
		background:#FDD216;
		color:#000;		
	}
	
	.tops .main_menus .mu .su .du{	
		width:100%;
		font-size:19px;
		line-height:25px;
		font-weight:bold;	
		background:rgba(255,255,255, 0.9);
		padding:0;
	}	
	
	.tops .main_menus .mu .sus{	
		border:1px #eee dashed;
		border-radius:0 10px 0 0;
		padding:20px;
	}		
	
	
	.tops .main_menus .mu .sus:hover .du{	
		display:block;
	}		
	
	.tops .main_menus .mu .su .du .bok{	
		border-left:1px rgba(255,255,255,0.3) solid;
	}	

	.tops .main_menus .mu .sus .bok:first-child{	
		padding:21.5px;
		display:block;		
	}	
	
	
	.tops .side_menu{
		height:50px;
		margin:50px 20px 50px 50px;
		margin-left: auto;
		display:none;
	}	
	
	.tops .side_menu a{
		height:50px;
		padding:10px 20px;
		font-size:25px;
		color:#000;
		line-height:35px;
	}		
	
	
	.tops .side_menu .btn_open{
		height:50px;
		border-radius:5px;
		padding:10px 20px;
		font-size:25px;
		line-height:35px;
		font-weight:bold;
		color:#000;
		
	}	
	
	.tops .side_menu .btn_open span{
		margin-top:-5px;
	}	
	
	.tops .side_menu .btn_open:hover,
	.tops .side_menu .btn_open:hover span{
		color:#F47997;
		text-decoration:none;
	}
	
	.wrapper{	
		position:relative;
		margin:30px auto;
		z-index:1;
		padding:30px;
		box-sizing:border-box;
		background:rgba(255,255,255,0.3);
		border-radius:5px;			
	}

	.wrapper.fixtop{
		padding-top:200px;
	}

	
	.box_slogin{
		margin:50px auto;
		position:relative;
	}

	.bok_slogin{
		width:700px;
		height:400px;
		margin:0 auto;
		position:relative;
	}
	
	.bok_slogin .img0{
		width:700px;
		height:200px;
		margin:0 auto;
		background:url(../../img/視覺主題/img0.svg)no-repeat center center / contain;		

	}

	.bok_slogin .img1{
		width:250px;
		height:150px;
		background:url(../../img/視覺主題/img1.svg)no-repeat center center / contain;		
		position:absolute;
		top:-120px;
		left:80px;
	}
	
	.bok_slogin .img2{
		width:450px;
		height:250px;
		background:url(../../img/視覺主題/img2.svg)no-repeat center center / contain;		
		position:absolute;
		bottom:20px;
		left:160px;
	}	
	
	.bok_slogin .img9{
		width:100px;
		height:100px;
		background:url(../../img/視覺主題/img9.svg)no-repeat center center / contain;		
		position:absolute;
		top:-70px;
		right:100px;
		z-index:0;
	}


	.container_about_us{
		margin:50px auto 0 auto;
		position:relative;
	}		
	
	.container_about_us .txt_content{
		padding:80px 50px 50px 50px;
		font-size:19px;
		line-height:40px;
        border: 5px rgba(238, 223, 121, 0.5) solid;
        border-radius: 5px;
        background: #fff url(../../img/background.png);
        overflow: hidden;
        box-shadow: 
			1px 1px 0 #fff, 
			2px 2px 0 #fff, 
			3px 3px 0 #000;
		
	}	
	
	.container_about_us .txt_content .stage{
		margin-top:20px;

	}
	
	.container_about_us .txt_content .t1{
		padding:30px;
		font-size: 31px;
		font-weight: bold;
		position: relative;
		color: #1886EA;
		text-shadow: 
			1px 1px 0 #fff, 
			2px 2px 0 #fff, 
			3px 3px 0 #000;

	}	

	.container_main{		
		width:100%;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		gap:10px;
		margin:20px 0 100px 0;
	}
	
	
	.container_main .item{		
		width:calc(100% - 10px);
		border:5px rgba(238,223,121,0.5) solid;
		border-radius:5px;
		background:#fff;
		overflow:hidden;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}

	.container_main .item .name1{		
		min-height:50px;
		font-size:27px;
		font-weight:bold;
		padding:20px;
		background:#6DA9DC;
		color:#fff;
	}
	
	.container_main .item .name2{		
		min-height:50px;
		font-size:23px;
		font-weight:bold;
		padding:20px;
		background:#F09BAE;
		color:#fff;
	}
	
	.container_main .item .name3{		
		min-height:50px;
		font-size:23px;
		font-weight:bold;
		padding:20px;
		background:#FDD216;
		color:#fff;
	}	
	

	.container_main .item .info1{		
		padding:30px 30px 60px 30px;
		position:relative;
		
	}
	
	.container_main .item .info1 .title{		
		font-size:50px;
		font-weight:bold;
		display:block;
		margin-bottom:30px;
		color:#FCC422;
		text-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}
		
	.container_main .item .info1 .link2{		
		font-size:21px;
		font-weight:bold;
		display:block;
		position:relative;
		z-index:1;
	}	
	
	.container_main .item a:hover{		
		color:#F09BAE;
		text-decoration:none;
	}	
	
	
	.container_main .item .info1 .img4{		
		width:350px;
		height:350px;
		background:url(../../img/視覺主題/img4.svg)no-repeat top center / contain;
		position:absolute;
		bottom:-30px;
		right:-20px;
		z-index:0;
	}

	.container_main .item .info1 .img5{		
		width:350px;
		height:350px;
		background:url(../../img/視覺主題/img5.svg)no-repeat top center / contain;
		position:absolute;
		bottom:-70px;
		right:30px;
		z-index:0;
	}

	.container_main .item .info1 .img6_1{		
		width:350px;
		height:350px;
		background:url(../../img/視覺主題/img6_1.svg)no-repeat top center / contain;
		position:absolute;
		bottom:-70px;
		right:50px;
		z-index:0;
	}


	.container_news{
		width:100%;
		position:relative;
		z-index:1;
		margin:30px 0;
	}

	.container_news .select{
		margin-bottom:30px;
		border-radius:5px;
		box-sizing: border-box;
		border:5px rgba(238,223,121,0.5) solid;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	

	.container_news .select select{
		padding:20px;
		border-radius:0 10px 0 0;
		border:none;
		background:#fff url(../../img/keyboard_arrow_down.svg)no-repeat right 10px center / 32px;
		font-size:17px;
		font-weight:bold;
	}	
	
	.container_news .select select:hover{
		background-color:#FFE64D;
	}	



	.container_news .item{
		width:100%;
		background:#fff;
		border-radius:5px;
		padding:30px;
		margin-bottom:10px;
		box-sizing: border-box;
		position:relative;
		display:flex;
		border:5px rgba(238,223,121,0.5) solid;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}
	
	.container_news .item:hover{
		text-decoration:none;
		color:#F19CAE;
	}	
	
	.container_news .item .lbox{
		flex:1;
	}	
		
	.container_news .item .rbox{
		width:30px;
		padding:30px;
		display:flex;
		justify-content:center;
		align-items:center; 
	}	
	
	.container_news .item .rbox span{
		font-size:36px;
	}

	
	.container_news .item .lbox .date{
		font-family: "Oswald", sans-serif;	
	}
	
	
	.container_news .item .lbox .name1{
		font-size:21px;

		line-height:31px;
		margin:10px 0
	}

	.container_news .detail{
		background:rgba(255,255,255,1);
		border:5px rgba(238,223,121,0.5) solid;
		border-radius:5px;
		padding:50px;
	}
	
	.container_news .detail .date{
		font-size:17px;
		color:#777;
		margin-bottom:10px;
		font-family: "Oswald", sans-serif;	
	}	
	
	.container_news .detail .name{
		font-size:35px;
		font-weight:bold;
	}

	.container_news .detail .img{
		width:70%;
		height: auto;
		display: block;
		margin:50px auto;
	}

	.container_news .detail .txtcont{
		margin:50px 0;
		font-size:17px;
	}


	.container_award_work{		
		width:100%;
		margin:50px 0;
		padding:30px;
		box-sizing:border-box;
	}

	.container_award_works{		
		width:100%;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		margin-bottom:50px;
	}
	
	
	.container_award_works .mask{		
		width:100%;
		height:100%;
        border-radius: 5px;
        background: rgba(0,0,0,0.5);
		padding:30px;
		box-sizing: border-box;
		top:0;
		left:0;
		position:absolute;
		overflow:hidden;	
		display: flex;
		justify-content: center; 
		align-items: center;
		color:#fff;
		font-size:30px;
		line-height:25px;
	}
	

	.container_award_works .item{		
		width:calc(33.3% - 10px);
        border: 5px rgba(238, 223, 121, 0.5) solid;
        border-radius: 5px;
        background: #fff;
		padding:30px;
		box-sizing: border-box;
		position:relative;
		overflow:hidden;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}

	.container_award_works .item:hover{		
		color:#F09BAE;
		text-decoration:none;
	}	
	
	
	.container_award_works .item .logo_bg{		
		width:300px;
		height:300px;
		opacity:0.05;
		position:absolute;
		top:-90px;
		right:-90px;
	}	
	

	.container_award_works .item .logo{		
		width:80px;
		height:80px;
		margin-bottom:20px;
	}

	.container_award_works .item .logo img{		
		width:80px;
		height:80px;
	}

	.container_award_works .item .rbox{		
		flex:1;
	}

	.container_award_works .item .rbox .name1{		
		font-size:31px;
		font-weight:bold;
	}
	
	.container_award_works .item .rbox .name2{		
		font-size:15px;
		line-height:20px;
		color:#777;
		margin-top:10px;
	}


	.container_award_list{		
		width:100%;
		margin:50px 0;
	}


	.container_gallery{
		column-count: 3;
		column-gap: 20px;
		width:100%;
		margin:50px 0;
	}
	
	.container_gallery img{
		max-width: 100% !important;
		height: auto;		
		border-radius:5px;
		background: #fff;
		border: 5px rgba(238, 223, 121, 0.5) solid;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}


	.root_path{
		min-height:50px;
		margin:50px 0 0 0;
		font-size:17px;
	}



	.table_box{
		width:100%;
		box-sizing:border-box;
		margin-bottom:20px;
		padding:30px;
		background:#fff;
		border: 5px rgba(238, 223, 121, 0.5) solid;		
		border-radius:5px;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	
	
	table.style1{
		width:100%;
		margin-bottom:10px;
		table-layout:auto;		
		border:1 solid #000;
		border-radius:5px;
		overflow:hidden;	
		font-size:17px;
		
	}	
	
	table.style1.w100{
		width:100%;
	}		
	
	table.style1 th{
		border:2px #000 solid;
		padding:20px;	
		vertical-align:top;
		background:rgba(255,255,255, 1);
		text-align:center;
		line-height:20px;
		white-space:nowrap;
	}		
	
	
	table.style1 td{
		border:2px #000 solid;
		padding:20px;	
		vertical-align:top;
		background:rgba(255,255,255, 1);
		font-size:15px;
		text-align:center;
		line-height:20px;
		white-space:nowrap;
	}	
	
	th.f1{
		background:#F6EFBC !important;
	}	
	
	td.f1{
		background:#F6EFBC !important;
		font-size:17px !important;
		font-weight:bold !important; 
	}		
	
	table.style1 td:nth-child(1){
		white-space:nowrap;
	}	
	
	table.style1 td:nth-child(n+2){
	}
	
	table.style1.noborder td{
		border:none;
		
	}	
	
	table.style1 td.title{
		background:#F47997;
		color:#fff;
	}		
	


	.footer{
		margin-top:100px;
		position:relative;
	}	
	

	.footer .fimg1{
		width:300px;
		height:600px;
		background:url(../../img/視覺主題/fimg1.svg)no-repeat center center / contain;	
		z-index:1;
		bottom:200px;
		right:200px;
		position:absolute;
		z-index:0;
	}
		

	.footers{
		height:300px;
		padding:30px 30px 100px 30px;
		background:url(../../img/視覺主題/fimg0.svg)no-repeat top center / cover;	
		position:relative;
		z-index:1;
	}			

	.footers .copyright{
		color:#000;
		position:relative;
		z-index:1;
		text-align:center;
		font-size:17px;
		line-height:25px;
	}

	.unit{
		margin:50px auto;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between; 
		gap:20px;	
		background:#fff;
		border:5px rgba(238, 223, 121, 0.5) solid;
		border-radius:5px;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}			

	.unit .item{
		width:calc(25% - 20px);
		position:relative;
		display:block;
		min-height:100px;		
		box-sizing: border-box;	
		padding:20px;		
	}


	.unit .item:hover{
		text-decoration:none;
	}


	.unit .item .name{
		height:30px;
		font-size:21px;
		font-weight:bold;
		color:#000;
		font-size:17px;
		border-radius:5px 0 0 0;
	}

	.unit .item .logo{
		box-sizing: border-box;	
		padding:20px;
		height:100px;
	}


	/* video_index setting */
	.video_index{
		margin:70px auto;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}		
		
	
	.video_index .item{
		width: calc((100% - 40px) / 3);
		height: 250px;
		background:#fff;
		border-radius:5px;
		border:1px #000 dashed;
		display:block;
		cursor:pointer;
	}			
	
	.video_index .iframe{
		width:1000px;
		min-height:600px;
		margin:0 auto;
		aspect-ratio: 16 / 10;
	}		
	
	.video_index .iframe iframe{
		width:100%;
		height:100%;
		aspect-ratio: 16 / 10;
	}		


	.name_main{
		height:100px;
		padding-left:200px;
		font-size:50px;
		font-weight:bold;
		position:relative;
		color:#1886EA;
		text-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}
	
	.name_main .name1{
		height:60px;
		font-size:40px;
		font-weight:bold;
		position:relative;
		margin:30px 0;
		color:#1886EA;
		text-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	
	
	.name_main .icon{
		width:150px;
		height:150px;	
		position:absolute;
		left:0;
		bottom:0;
		border-radius:100%;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	
	
	.name_main .icon.about_us{
		background:url(../../img/comment.png)no-repeat center center / contain;
	}
		
	.name_main .icon.news{
		background:url(../../img/promote.png)no-repeat center center / contain;
	}	

	.name_main .icon.award_work{
		background:url(../../img/achievement.png)no-repeat center center / contain;
	}
		
	.name_main .icon.award_list{
		background:url(../../img/award_list.png)no-repeat center center / contain;
	}		
	
	.name_main .icon.result{
		background:url(../../img/result.png)no-repeat center center / contain;
	}	
	
	.name_main .icon.training{
		background:url(../../img/training.png)no-repeat center center / contain;
	}
	
	
	.name_sub{
		height:100px;
		font-size:40px;
		font-weight:bold;
		position:relative;
		color:#1886EA;	
		text-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	
	
	
	
	
	.img3{
		width:400px;
		height:400px;
		background:url(../../img/視覺主題/img3.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		bottom:80px;
		right:-80px;
	}	
	
	
	
	.img6{
		width:400px;
		height:400px;
		background:url(../../img/視覺主題/img6_1.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		bottom:100px;
		left:-100px;
		transform:scaleX(-1);
	}


	
	.img7_1{
		width:300px;
		height:300px;
		background:url(../../img/視覺主題/img7.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:100px;
		left:-100px;
	}

	.img7_2{
		width:500px;
		height:500px;
		background:url(../../img/視覺主題/img7.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:50px;
		right:-100px;
	}

	.img7_3{
		width:600px;
		height:600px;
		background:url(../../img/視覺主題/img7.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		bottom:-300px;
		left:-100px;
	}



	.img8_1{
		width:300px;
		height:200px;
		background:url(../../img/視覺主題/img8.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:100px;
		right:100px;
		opacity:0.5;
		animation: img8_1 2s infinite alternate ease-in-out;
		z-index:-1;
	}	
	
	.img8_2{
		width:200px;
		height:150px;
		background:url(../../img/視覺主題/img8.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:-50px;
		right:400px;
		opacity:0.5;
		animation: img8_1 1s infinite alternate ease-in-out;
		z-index:-1;
	}		
	
	
	.img8_3{
		width:400px;
		height:300px;
		background:url(../../img/視覺主題/img8.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:300px;
		left:100px;
		opacity:0.5;
		animation: img8_1 2.5s infinite alternate ease-in-out;
		z-index:-1;
	}	
	
	
	.img8_4{
		width:400px;
		height:300px;
		background:url(../../img/視覺主題/img8.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		bottom:50px;
		right:300px;
		opacity:0.5;
		animation: img8_1 3s infinite alternate ease-in-out;
		z-index:-1;
	}		
	
	

	.img10{
		width:200px;
		height:200px;
		background:url(../../img/視覺主題/img10.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:0;
		left:180px;
	}
	
	.img11{
		width:300px;
		height:300px;
		background:url(../../img/視覺主題/img11.svg)no-repeat center center / contain;
		position:fixed;
		z-index:0;
		top:0;
		right:180px;
	}	
	
	
	
	@keyframes img8_1 {
	  0%   { transform: translateY(0); }
	  100% { transform: translateY(20px); }
	}		
			
	
	a.btn_gotop{
		width:100px;
		height:40px;
		line-height:40px;
		text-align:center;
		position:fixed;
		bottom:0;
		left:50%;
		display:block;
		margin-left:-50px;
		background:#F09BAE;
		z-index:10;
		color:#fff;
		border-radius:5px 5px 0 0;
		box-shadow:
			1px 1px 0 #fff,
			2px 2px 0 #fff,
			3px 3px 0 #000;			
	}	
	
	
	a.btn_gotop:hover{
		height:50px;
		line-height:50px;
		background:#F09BAE;
		color:#fff;
	}	


	a.btn_gotop span{
		font-size:30px;
		margin:0;
	}	

	.anchor_fix{
		position:absolute;
		top:-250px;
		height: 0;
		display:block;
	}
	
}