@charset "utf-8";
a:hover {text-decoration: none;}

#container {position: relative; overflow: hidden; min-height: 100vh;}
#container .visual_video {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
#container > .inner {z-index: 1; width: 1400px;}
.block {display: block;}
#container span.bg {background: url(/images/intro/intro_bg01.png) no-repeat center; width: 702px; height: 682px; position: absolute; bottom: -11px; left: -50px;}

div.top {margin: 90px 0 70px; color: #fff; padding: 0 0 0 10px;}
div.top span.s_tit {font-size: 15px; font-family: 'Pretendard'; letter-spacing: 4px; font-weight: 500;}
div.top p.tit {margin: 20px 0 25px; font-size: 54px; font-family: 'Paperozi'; font-weight: 600;}
div.top span.txt {font-size: 20px; font-weight: 500; font-family: 'Paperozi'; margin-left: 5px;}

div.bottom {}
div.bottom ul.list {display: flex; justify-content: space-between; font-family: 'Pretendard';}
div.bottom ul.list li {width: 260px; height: 260px; background: #fff; border-radius: 10px; border: 1px solid #d7dadf; position: relative; overflow: hidden;}
div.bottom ul.list li:before {content: ''; width: 138px; height: 136px; background: url(/images/intro/box_bg.png) no-repeat center; position: absolute; bottom: 0; left: 0; bottom: -17px; left: -16px;}
div.bottom ul.list li a {display: block; padding: 30px; height: 100%;}
div.bottom ul.list li a span.type {color: #6d52bb; font-weight: 500;}
div.bottom ul.list li a p.tit {font-size: 28px; color: #222; font-weight: 500; margin-top: 7px; letter-spacing: -2px;}
div.bottom ul.list li a span.arrow {width: 48px; height: 48px; position: absolute; bottom: 30px; right: 30px; background: #6d52bb url(/images/intro/intro_arrow.png) no-repeat 17px 17px; border-radius: 50%; font-size: 0; transition: 0.3s;}
div.bottom ul.list li.yb {}
div.bottom ul.list li.yb a span.type {color: #da1818;}
div.bottom ul.list li.yb:before {background: url(/images/intro/yb_box_bg.png) no-repeat center; width: 59px; height: 68px; bottom: 22px; left: 30px;}
div.bottom ul.list li.yb a span.arrow {background: #fff url(/images/intro/intro_arrow.png) no-repeat -77px 17px; border: 1px solid #da1818;}
div.bottom ul.list li.home {background: #6d52bb; border-color: #fff;}
div.bottom ul.list li.home a span.type {color: #fff;}
div.bottom ul.list li.home a p.tit {color: #fff; font-weight: 600;}
div.bottom ul.list li.home a span.arrow {background: #fff url(/images/intro/intro_arrow.png) no-repeat -170px 17px;}
div.bottom ul.list li.home:after {opacity: 0.2;}
div.bottom ul.list li:hover {border-color: #6d52bb;}
div.bottom ul.list li.yb:hover {border-color: #da1818;}
div.bottom ul.list li:hover span.arrow {transform: rotate(45deg);}
div.bottom ul.list li.home:before {opacity: 0.3;}

div.footer {font-family: 'score'; margin-top: 130px;}
div.footer h1.intro_logo {display: flex; align-items: center; justify-content: center;}
div.footer h1.intro_logo a {}
div.footer h1.intro_logo a img {}
div.footer h1.intro_logo a > span {display: inline-block; vertical-align: top; margin-left: 5px;}
div.footer h1.intro_logo a > span strong {font-family: 'score'; font-size: 27px; color: #222; font-weight: 600; letter-spacing: -1px;}
div.footer h1.intro_logo a > span span {display: block; font-size: 10px; color: #555; font-weight: 300;}
div.right {margin-left: 20px;}
div.right address {font-weight: 300; font-size: 15px; color: #333;}
div.right address span {}
div.right address span a {}
div.right p.copyright {font-weight: 200; font-size: 14px; color: #555; margin-top: 11px;}



@media (max-width: 1800px) {
	div.footer h1.intro_logo {color: #333; -webkit-text-stroke: 2px #ffffff; paint-order: stroke fill;}
	#container span.bg {width: 538px; height: 545px; background-size: contain;}
}

@media (max-width: 1400px) {
	div.bottom ul.list {flex-wrap: wrap;}
	div.bottom ul.list {width: 840px; margin: auto;}
	div.bottom ul.list li {margin-bottom: 25px;}
	div.top {text-align: center;}
	#container > .inner {width: 100%;}
	div.footer {margin: 120px 0 100px;}	
}

@media (max-width: 900px) {
	div.bottom ul.list li {width: 31%;}
	div.bottom ul.list {width: 97%;}
    #container span.bg {width: 431px; height: 441px;}
	div.right {margin: 20px 0 0 0; text-align: center;}
	div.footer h1.intro_logo {flex-direction: column;}	
		
}
@media (max-width: 767px) {
    div.bottom ul.list li {width: 48%;}
}

@media (max-width: 580px) {
	div.top p.tit {font-size: 42px;}
	div.top {margin: 65px 0 55px;}
	div.bottom ul.list li a p.tit {font-size: 25px;}
    #container span.bg {width: 373px; height: 384px;}
	div.footer {margin: 100px 0 70px;}
}

@media (max-width: 480px) {
    div.bottom ul.list li {width: 100%; height: 170px;}
	div.bottom ul.list {width: 95%;}
	div.bottom ul.list li:before {display: none;}
    div.top p.tit {font-size: 36px;}
	.m_block {display: block; }
	div.top span.txt {font-size: 18px;}	
	
}

@media (max-width: 380px) {
    #container span.bg {width: 311px; height: 362px;}
}