@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
		*{margin:0;padding:0;box-sizing:border-box;word-break: keep-all;}
		a,img,input{outline:none;}
		li{list-style:none;vertical-align:top;}
		img,fieldset,iframe{border:none 0;vertical-align:top;border:0 none;}
		strong,em,address,th{font-style:normal;font-weight:normal;}
		a{text-decoration:none;color:#333;}
		a:hover,a:focus{text-decoration:none;}

		body,input,select,textarea,button{font:17px/1.5 'Noto Sans KR','돋움','굴림','Gulim',sans-serif ; color:#333;}

		html, body{width: 100%;height: 100%;}

		.header{position: absolute;top: 50px;left: 0;width: 100%;height: 100px;}
		h1{text-align: center;}
		h1 > img{width: 100px;}

		.footer{width: 100%;height: 120px;background-color: #393939;color: #afafaf;position: absolute;left: 0;bottom: 0;padding-top: 10px;}
		.footer strong{color: #35b5ff;display: block;}
		.footer .container{width: 80%;margin: 0 auto;}
		.footer .container > ul{display: flex;}
		.footer .container > ul > li{width: 33.33%;}


		.main{width: 100%;height: 100%;display: flex;align-items: center; justify-content:center;}
		.main > ul{width: 80%;display: flex;}
		.main > ul > li{width: 33.33%;position: relative;}
		.main > ul > li > a{display: block;height: 500px;background: url('../images/bg_intro01.jpg') 50% 50% no-repeat;color: #fff;position: relative;transition: 0.3s;background-size:auto 120% ;}
		.main > ul > li > a:before{content: '';position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);transition: 0.3s;}
		.main > ul > li > a:hover:before{background-color: rgba(0,0,0,.1);}
		.main > ul > li > a:hover{background-size:auto 150% ;}
		.main > ul > li > a > strong{position: absolute;width: 100%;top: 50%; transform: translateY(-50%);font-size: 1.5rem;text-align: center;transition: 0.3s;text-shadow:2px 2px 1px rgba(0,0,0,.5)}


		.main > ul > li:nth-child(2) > a{background-image: url('../images/bg_intro02.jpg');}
		.main > ul > li:nth-child(3) > a{background-image: url('../images/bg_intro03.jpg');}


		 
		@media (max-width:1200px){
			.main > ul{width: 90%;}
			.footer .container{width: 90%;}
		}


		@media (max-width:768px){
			.main{height: auto;padding:80px 0 50px 0; }
			.main > ul{display: block;}
			.main > ul > li{width: 100%;}
			.main > ul > li > a{height: 150px;}
			.main > ul > li > a:hover{background-size:100% auto ;}
			.footer{position: static;height: auto;font-size: 14px;}
			
			.footer .container > ul{display: block;}
			.footer .container > ul > li{width: 100%;padding-bottom: 14px;}
			.header{position: static;padding-top: 40px;}
			.main > ul > li > a{background-size: 100%;}
		}