@charset "utf-8";
/* CSS Document */

header#Visual { width: 100%; margin: 0 auto 0 auto; padding: 0; height: 450px; position: relative; }

div#MianBanner { width: 100%; margin: auto; }
div#MianBanner div.item { width: 100%; height:450px; background: #333; overflow: hidden; position: relative;  }
div#MianBanner div > div.Content { width: 40%; height: 450px; color:#FFF; padding: 100px 70px 0 80px; float: left; }
div#MianBanner div > div.Content a { color: #FFF; }
div#MianBanner div > div.Content h1 { font-weight: 600; font-size: 1.8em; line-height: 1.4; margin: 0 0 10px 0; }
div#MianBanner div > div.Content p { line-height: 1.5; font-size: 15px; font-weight: 600; }

div#MianBanner div > div.Content div.BTN { border: solid rgba(255,255,255,0.5) 2px; border-radius: 4px; height: 45px; line-height: 42px; font-size: 1.4em; width: 100%; text-align: center; overflow: hidden; }
div#MianBanner div > div.Content div.BTN:hover { background: #FC0; border: solid #FC0 2px; }
div#MianBanner div > div.Content div.BTN a { color:#FFF; display: block;  }
div#MianBanner div > div.Content div.BTN a:hover { color:#222; }

div#MianBanner div.dark > div.Content { color:#222;  }
div#MianBanner div.dark > div.Content a { color: #FFF; }
div#MianBanner div.dark > div.Content div.BTN { border: 0px; background: #222; }
div#MianBanner div.dark > div.Content div.BTN a { color:#FFF; }


/*UUU*/
div#MianBanner div.UUU { background: url('/Public/images/2017-V2-Visual/HomeVisual-01.jpg') no-repeat; background-size: cover; }
div#MianBanner div.UUU div.ContentBOX { width: 40%; padding: 125px 0 0 100px; }
div#MianBanner div.UUU div.ContentBOX img { width: 100%; }
div#MianBanner div.UUU div.ContentBOX h1, 
div#MianBanner div.UUU div.ContentBOX p { text-align: center; letter-spacing: 3px; }
div#MianBanner div.UUU div.ContentBOX h1 { color: #FFF; font-size: 3em; padding: 0 0 10px 0; margin: 0;   font-family: 'DFT_ZY5'; font-weight: 200; }
div#MianBanner div.UUU div.ContentBOX p { color: #FFF; font-size: 1.15em; padding: 0; margin: 0; font-family: 'DFT_R3'; line-height: 28px; font-weight: 200; }

/*Brochure*/
div#MianBanner div.Brochure { background: url('/Public/images/2017-V2-Visual/Brochure_1440.jpg') no-repeat; background-size: 100%  }
div#MianBanner div.Brochure > div.Content { float: right; padding: 140px 50px 0 50px; margin: 0; color: #000; background: rgba(255,216,51,0.5); border-radius: 0px; }
div#MianBanner div.Brochure > div.Content h1 { font-size: 2em; }
div#MianBanner div.Brochure > div.Content div.BTN { border: 0; background: #000; line-height: 45px; }
div#MianBanner div.Brochure > div.Content div.BTN a { color: #FFF; }
div#MianBanner div.Brochure > div.Content div.BTN:hover { background: #C33; }


/*Brochure20201-12*/
div#MianBanner div.Brochure201811 {
    background: url('/Public/images/2017-V2-Visual/BC20200928.jpg');
    background-size: cover;
    background-position: bottom;
    position: relative;
    }

div#MianBanner div.Brochure201811 div.Content { position: absolute; left: 2.5%; top: 160px; width: 52%; z-index: 600; }
div#MianBanner div.Brochure201811 div.Content img { width: 100%; }
div#MianBanner div.Brochure201811 div.Content h1 { font-size: 2em; text-align: center;margin: 10px 0;color: #FFF;text-shadow: rgb(66, 66, 66) 4px 2px 3px;}

div#MianBanner div.Brochure201811 > div.Content div.BTN {
    border: solid rgba(255,255,255,0.5) 2px;
    border-radius: 4px;
    height: 45px;
    line-height: 42px;
    font-size: 1.4em;
    width: 67%;
    text-align: center;
	overflow: hidden;
	margin: auto;
}
div#MianBanner div.Brochure201811 div.BTN { background: #000000;color:#FFF;}
div#MianBanner div.Brochure201811 div.BTN:hover { background: #f6b916 !important; border-color: transparent;}
div#MianBanner div.Brochure201811 > div.Content div.BTN a:hover { color:#000000; }



/*Testimony*/
div#MianBanner div.Testimony { background: url('/Public/images/2017-V2-Visual/Testimony-01.jpg') no-repeat; background-size: 100% }
div#MianBanner div.Testimony > div.IMGBOX { float: right; width: 60%; height: 450px; background: url('/Public/images/2017-V2-Visual/Testimony_IMGBOX.png') no-repeat; background-size: 85%; background-position: center; }
div#MianBanner div.Testimony > div.Content { background: rgba(59,155,168,0.6); padding: 140px 50px 0 50px; }

/*Student*/
div#MianBanner div.Student { 
	background: -webkit-linear-gradient(left,rgba(239,232,225,1),rgba(239,232,225,0.95),rgba(239,232,225,0.8)),url('/Public/images/2017-V2-Visual/Student_bg.jpg');
	background: -moz-linear-gradient(left,rgba(239,232,225,1),rgba(239,232,225,0.95),rgba(239,232,225,0.8)),url('/Public/images/2017-V2-Visual/Student_bg.jpg');
	background: -ms-linear-gradient(left,rgba(239,232,225,1),rgba(239,232,225,0.95),rgba(239,232,225,0.8)),url('/Public/images/2017-V2-Visual/Student_bg.jpg');
	background-size: 100% 
}
div#MianBanner div.Student > div.IMGBOX { width: 60%; height:480px; float: left; background: url('/Public/images/2017-V2-Visual/Student_IMG.png') no-repeat; background-position: bottom center; background-size: 90%; }
div#MianBanner div.Student > div.Content { float: right; text-align: center; padding: 140px 50px 0 50px; }
div#MianBanner div.Student > div.Content h1 { font-size: 4em; line-height: 1; }
div#MianBanner div.Student > div.Content p { font-size: 20px; }
div#MianBanner div.Student > div.Content div.BTN { background: #A5584E;  }
div#MianBanner div.Student > div.Content div.BTN:hover { background: #48874E; }


/*GPall*/
div#MianBanner div.GPall { 
	background: -webkit-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/GPall.jpg');
	background: -moz-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/GPall.jpg');
	background: -ms-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/GPall.jpg');
	background-size: 100% 
}

div#MianBanner div.GPall > div.Content { float: left; text-align: center; padding: 140px 50px 0 50px; color: #000; }
div#MianBanner div.GPall > div.Content h1 { font-size: 4em; line-height: 1; color: #01111F; }
div#MianBanner div.GPall > div.Content p { font-size: 20px; font-weight: 500; letter-spacing: 2px; }
div#MianBanner div.GPall > div.Content div.BTN { background: #01111F; }
div#MianBanner div.GPall > div.Content div.BTN:hover { background: #FCBA00; border-color: transparent; }

/*Ctia*/
div#MianBanner div.Ctia { 
	background: -webkit-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/Ctia_bg.jpg');
	background: -moz-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/Ctia_bg.jpg');
	background: -ms-linear-gradient(left,rgba(239,232,225,0),rgba(239,232,225,0),rgba(239,232,225,0)),url('/Public/images/2017-V2-Visual/Ctia_bg.jpg');
	background-size: 100% 
}
div#MianBanner div.Ctia > div.Content { float: left; text-align: center; padding: 180px 30px 0  50px; width:50%;}
div#MianBanner div.Ctia > div.Content h1 { font-size: 2.5em; line-height: 1.3; color:#141719; }
div#MianBanner div.Ctia > div.Content p { font-size: 20px; font-weight: 500; color:#141719; margin-bottom: 30px;}
div#MianBanner div.Ctia > div.Content div.BTN { background: #141719; width:55%; margin:0 auto; border:transparent; }
div#MianBanner div.Ctia > div.Content div.BTN:hover { background:rgb(143, 0, 0); transition: .2s linear;}
div#MianBanner div.Ctia > div.Content div.BTN > a:hover{ color: #FFF;}


	@media (max-width: 1440px) {
		header#Visual, div#MianBanner div.item { height: 400px; }
		div#MianBanner div > div.Content { width: 45%; }
		/*Testimony*/
		div#MianBanner div.Testimony > div.IMGBOX { width: 55%;}
		/*Brochure*/
		div#MianBanner div.Brochure > div.Content { padding: 120px 50px 0 50px;}
		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { width: 55%; height:400px; }
		div#MianBanner div.Student > div.Content { padding: 100px 50px 0 50px; }
		/*GPall*/
		div#MianBanner div.GPall > div.Content h1 { font-size: 3.5em; }
		div#MianBanner div.GPall > div.Content p { font-size: 18px; }

		/*Ctia*/
		div#MianBanner div.Ctia > div.Content h1 { font-size: 2.2em; }
		div#MianBanner div.Ctia > div.Content p { font-size: 18px; }

		/*Brochure20187-12*/
		div#MianBanner div.Brochure201811 div.Content { position: absolute; left: 2.5%; top: 130px; width: 52%; z-index: 600; }

		

	}

	@media (max-width: 1280px) {
		header#Visual, div#MianBanner div.item { height: 360px; }
		div#MianBanner div > div.Content { width: 45%; height: 360px; }
		div#MianBanner div > div.Content p { font-size: 14px; }
		/*Testimony*/
		div#MianBanner div.Testimony > div.Content { padding: 100px 50px 0 50px; }
		div#MianBanner div.Testimony > div.IMGBOX { height: 360px; background-size: 90%; }
		/*Brochure*/
		div#MianBanner div.Brochure > div.Content { padding: 80px 50px 0 50px;}
		div#MianBanner div.Brochure > div.Content h1 { font-size: 1.85em; }
		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { height:360px; }
		/*GPall*/
		div#MianBanner div.GPall > div.Content { padding: 120px 50px 0 50px; }
		div#MianBanner div.GPall > div.Content h1 { font-size: 3em; }
		div#MianBanner div.GPall > div.Content p { font-size: 15px; }
		/*Ctia*/
		div#MianBanner div.Ctia > div.Content {padding: 150px 80px 0 0; position: absolute; left: 5%; }
		div#MianBanner div.Ctia > div.Content h1 { font-size: 2.5em; line-height: 1.2; }

		/*Brochure20187-12*/
		div#MianBanner div.Brochure201811 img.IMG-Bouble01 { right: 50px; width: 180px; }
		div#MianBanner div.Brochure201811 div.Content { top: 100px;}

			/*MOV*/
		    @keyframes Brochure_MOV {
		        0%  { top: 40px;  }
		        50%  { top: 45px;  }
		        100%  { top: 40px; ; }
		        
		    }

	}

	@media (max-width: 1200px) {
		header#Visual, div#MianBanner div.item { height: 312px; }
		div#MianBanner div > div.Content { width: 45%; height: 312px; }
		div#MianBanner div > div.Content p { font-size: 13px; }
		div#MianBanner div > div.Content div.BTN { font-size: 1.32em;}
		/*UUU*/
		div#MianBanner div.UUU { background-position: right center; }
		/*Testimony*/
		div#MianBanner div.Testimony > div.Content { padding: 80px 50px 0 50px; height: 312px; }
		div#MianBanner div.Testimony > div.IMGBOX { height: 312px; }
		/*Brochure*/
		div#MianBanner div.Brochure > div.Content { padding: 70px 50px 0 50px;}
		div#MianBanner div.Brochure > div.Content h1, div#MianBanner div.Testimony > div.Content h1 { font-size: 1.5em; }
		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { height:312px; }
		div#MianBanner div.Student > div.Content { padding: 85px 50px 0 50px; }
		div#MianBanner div.Student > div.Content h1 { font-size: 3.5em; line-height: 1; }
		/*Ctia*/
		div#MianBanner div.Ctia { 	background-size: cover; }
		div#MianBanner div.Ctia > div.Content {padding: 140px 90px 0 0; position: absolute; left: 8%; bottom:0; width: 50% !important; height: 100% !important;  }
		div#MianBanner div.Ctia > div.Content h1 { font-size: 1.6em; line-height: 1; }
		div#MianBanner div.Ctia > div.Content p { font-size: 16px; }

		/*Brochure20187-12*/
		div#MianBanner div.Brochure201811 img.IMG-Bouble01 { right: 60px; width: 140px; }
		div#MianBanner div.Brochure201811 div.Content { top: 30px; }
        div#MianBanner div.Brochure201811 div.Content h1 { font-size: 1.5em;}
			/*MOV*/
		    @keyframes Brochure_MOV {
		        0%  { top: 40px;  }
		        50%  { top: 45px;  }
		        100%  { top: 40px; ; }
		        
		    }

	}

	/* viewport - 1160 >> visual szie = 800x600 */
	@media (max-width: 1160px) {
		header#Visual, div#MianBanner div.item { height: 350px; }
		div#MianBanner div > div.IMGBOX { height: auto; float: none !important; clear: both; width: 100% !important; }
		div#MianBanner div > div.Content { height: auto !important; float: none !important; clear: both; width: 100%; padding: 30px !important;  }
		
		/*UUU*/
		div#MianBanner div.UUU { background-position: 0px; position: relative; }
		div#MianBanner div.UUU div.ContentBOX { width: 45%; padding: 0; position: absolute; bottom: 120px; left: 10%; }

		/*Brochure20187-12*/
		div#MianBanner div.Brochure201811 img.IMG-Bouble01 { right: 50px; top: 30px;  }
        div#MianBanner div.Brochure201811 div.Content { left: 4%; top: 180px; width: 60%;  }
        div#MianBanner div.Brochure201811 div.Content h1 { font-size: 1.5em; text-align: center;margin: 10px 0;}
        div#MianBanner div.Brochure201811 {
        background: url('/Public/images/2017-V2-Visual/BC20200928_M.jpg');background-size: cover;}

			/*MOV*/
		    @keyframes Brochure_MOV {
		        0%  { top: 80px;  }
		        50%  { top: 85px;  }
		        100%  { top: 80px; ; }
		    }
		
		/*Testimony*/
		div#MianBanner div.Testimony { background-size: cover; background-position: top right; position: relative; }
		div#MianBanner div.Testimony > div.IMGBOX { width: 60% !important; height: 450px; position: absolute; right: 0; top: 0; padding: 0; }
		div#MianBanner div.Testimony > div.Content { position: absolute; width: 42% !important; height: 100% !important; left: 0; bottom:0; padding: 70px 25px 0 55px !important; }

		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { width: 60% !important; height:480px; position: absolute; left: 0; bottom: 0; }
		div#MianBanner div.Student > div.Content { width: 40% !important; padding: 140px 50px 0 50px; position: absolute; right: 5%; bottom: 50px; }
		div#MianBanner div.Student > div.Content h1 { font-size: 2.5em; line-height: 1; }
		div#MianBanner div.Student > div.Content p { font-size: 15px; }

		/*GPall*/
		div#MianBanner div.GPall { background-size: cover; background-position: -80px 0; }
		div#MianBanner div.GPall > div.Content { padding: 120px 0px 0 0px !important; position: absolute; left: 8%; bottom:0; width: 50% !important; height: 100% !important;  }
		div#MianBanner div.GPall > div.Content h1 { font-size: 3em;  }
		div#MianBanner div.GPall > div.Content p { font-size: 16px; font-weight: 500; letter-spacing: 2px; }
		div#MianBanner div.GPall > div.Content div.BTN { background: #01111F }
		div#MianBanner div.GPall > div.Content div.BTN:hover { background: #FCBA00; border-color: transparent; }

		/*Ctia*/
		div#MianBanner div.Ctia { 	background-size: cover; }
		div#MianBanner div.Ctia > div.Content {padding: 140px 0px 0 0px !important; position: absolute; left: 8%; bottom:0; width: 50% !important; height: 100% !important;  }
		div#MianBanner div.Ctia > div.Content h1 { font-size: 2em; line-height: 1; color:#141719; }
		div#MianBanner div.Ctia > div.Content p { font-size: 16px; }

	}


	@media (max-width: 800px) {
		header#Visual, div#MianBanner div.item { height: 350px; }
		/*UUU*/
		div#MianBanner div.UUU { background-position: -180px 0; }


			/*MOV*/
		    @keyframes Brochure_MOV {
		        0%  { top: 120px;  }
		        50%  { top: 125px;  }
		        100%  { top: 120px; ; }
		    }

		/*Testimony*/
		div#MianBanner div.Testimony > div.IMGBOX { width: 100% !important; background-size: 70%; background-position: center; height: 200px; right: 0; top: 0; padding: 0; }
		div#MianBanner div.Testimony > div.Content { width: 100% !important; height: 170px !important; left: 0; bottom:0; padding: 20px 30px !important; }
		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { width: 80% !important; height:480px; left: -80px; bottom: 0; }
		div#MianBanner div.Student > div.Content { width: 55% !important; padding: 50px 20px 0 0px !important; right: 0; bottom: 100px; }
		div#MianBanner div.Student > div.Content h1 { font-size: 2.2em; line-height: 1; }
		div#MianBanner div.Student > div.Content p { font-size: 14px; }
		/*GPall*/
		div#MianBanner div.GPall { background-size: cover; background-position: -250px 0 !important; }
		div#MianBanner div.GPall > div.Content { padding: 120px 0px 0 0px !important; position: absolute; left: 8%; bottom:0; width: 50% !important; height: 100% !important;  }
		div#MianBanner div.GPall > div.Content h1 { font-size: 2.5em;  }
		div#MianBanner div.GPall > div.Content p { font-size: 12px; font-weight: 500; letter-spacing: 2px; }
		div#MianBanner div.GPall > div.Content div.BTN { background: #01111F }
		div#MianBanner div.GPall > div.Content div.BTN:hover { background: #FCBA00; border-color: transparent; }

		/*Ctia*/
		div#MianBanner div.Ctia { 	background-size: cover; background-position: -120px 0 !important;}
		div#MianBanner div.Ctia > div.Content { padding: 140px 0px 0 0px !important; position: absolute; left: 8%; bottom:0; width: 50% !important; height: 100% !important;  }
		div#MianBanner div.Ctia > div.Content h1 { font-size: 2.3em; line-height: 1; }
		div#MianBanner div.Ctia > div.Content p { font-size: 12px; }
	
	}

	/*iPad 1-~4 Gen Mini*/
	@media (max-width: 768px) {	
		div#MianBanner div.Brochure201811 div.Content h1 { font-size: 1.4em;margin: 5px 0;}
		div#MianBanner div.Brochure201811 div.Content { left: 5%;}
	}

	/*Mobile Device Start*/
	@media (max-width: 599px) {
		header#Visual { height: 463px; }
		div#MianBanner div.item { height: 463px; }
		/*UUU*/
		div#MianBanner div.UUU { background-size: cover !important; background-position: -790px 0px;   }
		div#MianBanner div.UUU div.ContentBOX { width: 100%; padding: 15px 60px; bottom: 0; left: 0; background: rgba(79,83,89,0.85); }
		div#MianBanner div.UUU div.ContentBOX img { width: 100%; }
		/*Brochure*/
		div#MianBanner div.Brochure201811 div.Content { left: 0; top: 300px; width: 100%; padding: 10px 25px;}
		div#MianBanner div.Brochure201811 { background: url('/Public/images/2017-V2-Visual/BC20200928-mb.jpg'); background-size: 100%; background-position: center top;background-repeat: no-repeat;}
        div#MianBanner div.Brochure201811 div.Content h1 { font-size: 1.5em;margin: 5px 0;}
			/*MOV*/
		    @keyframes Brochure_MOV {
		        0%  { bottom: : 60px;  }
		        50%  { bottom: 65px;  }
		        100%  { bottom: 60px; ; }
		    }
		
		/*Testimony*/
		div#MianBanner div.Testimony > div.IMGBOX { background-size: 90%; background-position: center; height: 350px; right: 0; top: 0; padding: 0; }
		div#MianBanner div.Testimony > div.Content { height: 210px !important; left: 0; bottom:0; padding: 20px 30px !important; }
		div#MianBanner div.Testimony > div.Content h1 { font-size: 18px !important; }

		/*Student*/
		div#MianBanner div.Student > div.IMGBOX { width: 500px !important; left: -70px; }
		div#MianBanner div.Student > div.Content { width: 100% !important; padding: 50px 20px !important; right: 0; bottom: initial; top: 0; }

		/*GPall*/
		div#MianBanner div.GPall { background-size: cover; background-position: -750px -100px !important; }
		div#MianBanner div.GPall > div.Content { padding: 20px !important; left: 0; bottom:0; width: 100% !important; height: auto !important; background: #082C3C; color: #FFF;  }
		div#MianBanner div.GPall > div.Content h1 { font-size: 2.5em; color: #FFF; }
		div#MianBanner div.GPall > div.Content p { font-size: 12px; font-weight: 500; letter-spacing: 2px; }
		div#MianBanner div.GPall > div.Content div.BTN { border:0 !important; }
		div#MianBanner div.GPall > div.Content div.BTN:hover { border:0 !important; }

		/*Ctia*/
		div#MianBanner div.Ctia { background-size: cover; background-position: -130px 0px !important; }
		div#MianBanner div.Ctia > div.Content { padding: 10px !important; left: 0; bottom:0; width: 100% !important; height: auto !important; margin-top:60%;}
		div#MianBanner div.Ctia > div.Content h1 { font-size: 2em; line-height: 1; }
		div#MianBanner div.Ctia > div.Content p { font-size: 12px; }

	}

	/*iPhone Plus*/
	@media (max-width: 414px) {

	}

	/*Nexus*/
	@media (max-width: 412px) {

	}

	/*iPhone 6*/
	@media (max-width: 375px) {


	}

	/*Samsung Galaxy*/
	@media (max-width: 360px) {

	}

	/*iPhone 5*/
	@media (max-width: 320px) {


	}