@font-face {
			font-family: 'SCoreDream';
			font-weight: 100;
			font-style: normal;
			src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format('woff2'),
				 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 200;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 300;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 400;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 500;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 600;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 700;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 800;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 900;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff');
				font-display: swap;
			}
			@font-face {
				font-family: 'SCoreDream';
				font-weight: 900;
				font-style: normal;
				src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'),
					 url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff');
				font-display: swap;
			}
			
		*{box-sizing:border-box}
		html, 
		body{width:100%; height:100%; margin:0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
		section#intro{width:100%; height:100%;  background-size:cover; position:relative;}
		section#intro > section{height:100%; display:flex; justify-content:space-between;padding:1rem; gap:1rem; position:relative;}
		section#intro > section > aside{gap:2rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300px; height:300px; background-color:#ff6700;border-radius:50%; display:flex; justify-content:center; flex-direction:column; align-items:center;}
		section#intro > section > aside > a{line-height:1; position:relative; color:#fff; text-decoration:none; background-color:#fff; color:#ff6700; border-radius:50px; padding:10px 20px 10px 20px; border:2px solid #fff; transition:0.2s}
		section#intro > section > aside > a img{ position:absolute; right:30px; top:50%; transform:translateY(-50%); opacity:0; transition:0.2s all; }
		section#intro > section > aside > a:hover{padding-right:40px}
		section#intro > section > aside > a:hover img{right:10px; opacity:1;}
		section#intro > section > article{box-sizing:border-box; flex:1;position:relative; overflow:hidden; height:100%; border-radius:10px; display:flex; justify-content:center; align-items:center; flex-direction:column}
		section#intro > section > article.speak{ }
		section#intro > section > article.speak:after{z-index:-2; content:''; transition:0.5s; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url('/images/intro/intro_img01.jpg');background-size:cover;}
		
		section#intro > section > article.writing{}
		section#intro > section > article.writing:after{z-index:-12; content:''; transition:0.5s; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url('/images/intro/intro_img02.jpg');background-size:cover;}
		section#intro > section > article > div {text-align:Center;}

		section#intro > section > article h2{color:#fff; text-align:center; line-height:1; margin:0; font-size:2.5rem;  font-weight:400}
		section#intro > section > article h2 p{transition:0.2s all; position:relative; color:#fff; margin:0; font-size:3rem;font-weight:600;}
		section#intro > section > article h2 p:after{z-index:-1; content:''; width:0; height:100%; position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:rgba(255,103,0,0.8);}
		section#intro > section > article h3{color:#fff; margin:1rem 0; line-height:1; font-size:2rem; font-weight:400;}
		section#intro > section > article a{color:#fff; text-decoration:none; transition:0.2s; background-color:#ff6700; border:2px solid #ff6700; padding:10px 20px; display:flex; justify-content:center; font-size:19px; border-radius:50px;}
		section#intro > section > article a img{width:10px; margin-left:10px }
		@media (hover: hover){
			section#intro > section > article a:hover{background-color:rgba(255,103,0,0.7)}
			section#intro > section > article:hover{background-size:150%;}
			section#intro > section > article.writing:hover h2{}
			section#intro > section > article:hover h2 p{font-size:3.5rem;}
			section#intro > section > article:hover h2 p:after{animation-name : textUnder; animation-duration : 0.5s; animation-fill-mode: both;}
		}
		
		@keyframes textUnder {
			0% {
				width:0;
			}
			100% {
				width:105%;
			}
		}

		@media(max-width:1440px){
			section#intro > section > aside{width:250px; height:250px; gap:1rem}
		}
		@media(max-width:1300px){
			section#intro > section > aside{width:200px; height:200px;}
			section#intro > section > aside > img{width:60%}
			section#intro > section > article h2 p{font-size:2.5rem;}
		}
		@media(max-width:1200px){
			section#intro > section > aside{top:80%}
		}
		@media(max-width:1023px){
			section#intro > section{flex-direction:column; }
			section#intro > section > article{width:100%;}
			section#intro > section > aside{top:50%; width:150px; height:150px;}
			section#intro > section > aside > a{font-size:13px; padding:5px 20px 5px 10px;}
			section#intro > section > aside > a img{opacity:1; right:0; width:17px}
			section#intro > section > article.speak{padding:50px 0 70px;}
			section#intro > section > article.writing{padding:70px 0 50px;}
			section#intro > section > article h2{font-size:21px;}
			section#intro > section > article h2 p{font-size:21px;}
			section#intro > section > article h3{font-size:21px}
			section#intro > section > article a{font-size:15px; padding:5px 20px;}
			section#intro > section > article a img{width:6px;}
		}
		@media(max-width:767px){
			
		}