@charset "utf-8";
/**
 * @File Name : intro.css
 * @Description : Base Adjust + Layout[main+sub] Mobile First!
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2021.07.21 | 김효진 | 최초 등록
 * 2021.07.21 | 김효진 | 요구반영. 결함개선. 고도화.

 * </pre>
 * @author 디자인팀 김효진
 * @since 2021.07.21
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* Table of contents ))
 | Base Adjust
 | Layout[main+sub] Mobile First!
 | clearfix
 | #head, ..
 | ETC
 | @media print{} ))) sub.css
 | RWD ◇◆
 | @keyframes ◇◆
 */

/* 웹폰트 */
@font-face {
    font-family: 'KBIZHanmaumGothic';
    src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KBIZHanmaumGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family:"Noto Sans";
	font-style:normal;
	font-weight:500;
	src: local('☺'),
				url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
				url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff');
}
@font-face {
	font-family:"Noto Sans";
	font-style:normal;
	font-weight:700;
	src: local('☺'),
				url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
				url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff');
}


 /* 공통 */
 html {height:100%;overflow-y:scroll}
 body{
	background:url(../img/intro_bg.jpg) no-repeat 50% 0;
	color:#333; /* ☆#555 */
	font-weight:500;
	font-size:1.063em; /* (((17px */
	line-height:1.75; /* ☆ */
	letter-spacing:-.05em; /* (-.5px/16px) */
	height:100%;
}

[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'Apple SD Gothic Neo',
		'Noto Sans',
		'맑은 고딕','Malgun Gothic',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}

.container {max-width:1200px;margin:auto;}
@media all and (max-width:1229px){
	#container {margin-left:15px;margin-right:15px;}
}

.corona1intro {background:url(../img/intro_bg.png) no-repeat 50% 0;font-size:17px;}
#head {padding:38px 0 0}
#bbs1:before{display:none;}
#logo {text-indent:-9999px;background:url(../img/intro_sprite.png) no-repeat 0 0;margin:auto auto 5px; width:76px; height:35px; background-size:auto 131px;}
#titletxt01{margin:0 auto 10px;}
#titletxt01 img{width:100%;}
#titletxt02{margin:0 auto 10px;}
#titletxt02 img{width:100%;}
#link1{margin-top:25px;}

@media all and (min-width:768px){
#logo{width:108px; height:50px; background-size:auto 186px; margin:auto auto 5px;}
#titletxt01{position:relative; margin:0 auto 10px; width:100%; height:150px;}
#titletxt01 img{position:absolute; width:568px; left:50%; margin-left:-284px;}
#titletxt02{position:relative; margin:0 auto 10px; width:100%; height:92px;}
#titletxt02 img{position:absolute; width:450px; left:50%; margin-left:-220px;}
}/* min-width:768px */

@media all and (min-width:1000px){

#logo{width:139px; height:63px; background-size:auto 240px; position:absolute; left:50%; margin-left:-48%;}
#titletxt01 {height:165px;}
#titletxt01 img{width:620px; height:159px; margin-left:-19em;}
#titletxt02 {height:84px;}
#titletxt02 img{width:470px; height:80px; margin-left:-15em;}
}/* min-width:1000px */

@media all and (min-width:1200px){
#bbs1:before{display:block;}
#logo{margin-left:-14em;}
#titletxt01 {height:190px;}
#titletxt01 img{width:720px; height:185px; margin-left:-21em;}
#titletxt02 {height:107px;}
#titletxt02 img{width:470px; height:80px; margin-left:-14em;}
}


@media all and (max-width:1199px){
	.corona1intro {font-size:16px;}
}
@media all and (max-width:999px){
	.corona1intro {font-size:15px;background-size:auto 550px}	
}
@media all and (max-width:767px){
	.corona1intro {font-size:14px;background-size:auto 495px}
}
@media all and (max-width:599px){
	.corona1intro {font-size:13px;}
}
@media all and (max-width:499px){
}

#bbs1 {position:relative;padding:19px 40px 18px 242px;background:#fff;border-radius:9px;box-shadow:0 5px 40px 2px rgba(0,0,0,.15);}
#bbs1:before {position:absolute;bottom:0;left:37px;content:"";width:176px;height:128px;background:url(../img/intro_sprite.png) no-repeat -196px 0}
#bbs1 ul li {position:relative;font-family:"KBIZHanmaumGothic", sans-serif;font-size:1.75em;line-height:1.5em;font-weight:bold;padding-left:16px;}
#bbs1 ul li:before {position:absolute;top:15px;left:0;content:"";display:block;width:5px;height:5px;background:#0063bd;border-radius:50%;}
#bbs1 ul li a {position:relative;color:#333;max-width:calc(100% - 29px);display:inline-block;vertical-align:middle;}
#bbs1 ul li a:after {content:"";display:inline-block;vertical-align:middle;width:19px;height:19px;background:url(../img/intro_sprite.png) no-repeat -101px -90px;margin-left:8px;margin-top:-4px;}
#bbs1 ul li .t2 {position:relative;color: #333;display:inline-block;vertical-align: middle;margin-top: -10px;}
#bbs1 ul li .t2:before {position:relative;content:"";display:inline-block;width:15px;height:18px;background: url(../img/t2bg1.png) no-repeat;margin:1px 0;}
/* #bbs1 ul li.notice a {color:#fa6616} */
#bbs1 ul li a em {color:#df0a00;}
#bbs1 ul li a em.em2 {color:#009;;}
#bbs1 .b1.more {position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-9999px}
#bbs1 .b1.more:after {position:absolute;top:calc(50% - 20px);right:33px;content:"자세히보기";display:block;width:130px;height:40px;background:#0b589e;text-align:center;color:#fff;font-size:.882em;text-indent:0;line-height:40px;border-radius:18px}
@media all and (max-width:1199px){
	#bbs1 {padding-left:50px;padding-right:50px;}
	#bbs1:before {bottom:auto;top:-128px;left:3px;}
	#bbs1 .b1.more:after {top:auto;bottom:20px;right:auto;left:calc(50% - 65px);}
}
@media all and (max-width:999px){
	#bbs1 {padding:25px 40px 30px;}
	#bbs1 ul li {font-size:1.625em;line-height:1.4}
	#bbs1 ul li:before {top:13px}
	#bbs1 .b1.more:after {width:110px;left:calc(50% - 55px);bottom:-15px;}
	#bbs1 ul li .t2:before {top: 6px;}
}
@media all and (max-width:767px){
	#bbs1:before {top:-102px;width:141px;height:102px;background-size:auto 267px;background-position:-157px 0}
}
@media all and (max-width:599px){
	#bbs1 {padding:22px 20px 25px 35px}
	#bbs1:before {top:-89px;width:123px;height:90px;background-size:auto 234px;background-position:-137px 0}
	#bbs1 ul li {font-size:1.5em;padding-left:13px}
	#bbs1 ul li:before {top:10px}
	#bbs1 .b1.more:after {font-size:1em;height:32px;line-height:32px;}
}
@media all and (max-width:499px){
	#bbs1 {padding:14px 22px;}
	#bbs1:before {display:none;}
	#bbs1 ul li {font-size:1.375em}
}

#call1 {text-align:center;color:#333;font-size:1.529em;padding:0;}
#call1:before {content:"";display:inline-block;vertical-align:middle;width:55px;height:50px;background:url(../img/intro_sprite3.png) no-repeat -125px -88px;margin:-6px 13px 0 0;}
#call1 strong {color:#cb2222;word-break:keep-all}
#call1 .e1 {font-size:.825em;}
@media all and (max-width:999px){
	#call1 {padding-top:0;}
}
@media all and (max-width:767px){
	#call1:before {width:35px;height:35px;background-size:auto 267px;background-position:0 -72px;margin-right:5px;}
	#call1 strong {display:block;}
}
@media all and (max-width:599px){
	#call1:before {width:37px;height:31px;background-size:auto 200px;background-position:-73px -51px;}
	#call1 {font-size:1.375em}
}
@media all and (max-width:499px){
	#call1 strong {font-size:.815em}
}

#link1:after {clear:both;content:"";display:block}
#link1 li {float:left;width:31.66%;height:370px;margin-left:2.51%;background:#fff;border-radius:9px;box-shadow:0 5px 40px 2px rgba(0,0,0,.15);text-align:center;}
#link1 li:first-child {margin-left:0;}
#link1 li a {position:relative;display:block;width:100%;height:100%;padding:30px 0;box-sizing:border-box;border-radius:9px;overflow:hidden;}
#link1 li a.a2 {position:relative;display:block;width:100%;height:100%;padding:30px 0;box-sizing:border-box;border-radius:9px;overflow:hidden;}
#link1 li a:before {position:relative;content:"";display:block;width:198px;height:198px;border-radius:50%;margin:auto auto 18px;background:url(../img/intro_sprite.png) no-repeat;z-index:1}
#link1 li a.a2:before {position:relative;content:"";display:block;width:198px;height:198px;border-radius:50%;margin:auto auto 18px;background:url(../img/intro_sprite3.png) no-repeat;z-index:1}
#link1 li a:after {position:absolute;bottom:0;left:0;content:"";display:block;width:100%;height:0;transition:all .4s ease}
#link1 li a span {position:relative;display:block;line-height:1;z-index:1}
#link1 li a .t1 {font-size:1.412em;letter-spacing:-.1em;color:#222;transition:all .35s ease}
#link1 li a .e1 {font-size:.765em;letter-spacing:-.025em;color:#222;margin-top:5px;transition:all .35s ease}
#link1 li a .b1.more {position:absolute;bottom:25px;left:calc(50% - 75px);display:block;width:150px;height:40px;color:#fff;border-radius:20px;line-height:40px;transition:all .35s ease .05s}
/* 아이콘/색상 */
#link1 li.portal a:before {background-position:0 -136px}
#link1 li.covid19 a:before {background-position:-200px -136px}
#link1 li.vaccine a:before {background-position:-400px -136px}
#link1 li.mayor a:before {background-position:-600px -136px}
#link1 li.portal .b1.more, #link1 li.portal a:after {background-color:#006680}
#link1 li.covid19 .b1.more, #link1 li.covid19 a:after {background-color:#eb6100}
#link1 li.vaccine .b1.more, #link1 li.vaccine a:after {background-color:#1cab3e}
#link1 li.mayor .b1.more, #link1 li.mayor a:after {background-color:#1cab3e}
@media all and (max-width:999px){
	#link1 li {height:295px}
	#link1 li a {padding:25px 0}
	#link1 li a .b1.more {bottom:20px}
	#link1 li a:before {width:139px;height:139px;background-size:auto 234px}
	#link1 li.portal a:before {background-position:0 -95px}
	#link1 li.covid19 a:before {background-position:-140px -95px}
	#link1 li.vaccine a:before {background-position:-280px -95px}
	#link1 li.mayor a:before {background-position:-420px -95px}
	
	#link1 li a.a2 {padding:25px 0}
	#link1 li a.a2 .b1.more {bottom:20px}
	#link1 li a.a2:before {width:139px;height:139px;background-size:auto 234px}
	#link1 li.portal a.a2:before {background-position:0 -95px}
	#link1 li.covid19 a.a2:before {background-position:-140px -95px}
	#link1 li.vaccine a.a2:before {background-position:-280px -95px}
	#link1 li.mayor a.a2:before {background-position:-420px -95px}
}
@media all and (max-width:767px){
	#link1 li {height:260px;}
	#link1 li a {padding:25px 0 15px}
	#link1 li a:before {width:109px;height:109px;background-size:auto 184px}
	#link1 li.portal a:before {background-position:0 -75px}
	#link1 li.covid19 a:before {background-position:-110px -75px}
	#link1 li.vaccine a:before {background-position:-220px -75px}
	#link1 li.mayor a:before {background-position:-330px -75px}
	
	#link1 li a.a2 {padding:25px 0 15px}
	#link1 li a.a2:before {width:109px;height:109px;background-size:auto 184px}
	#link1 li.portal a.a2:before {background-position:0 -75px}
	#link1 li.covid19 a.a2:before {background-position:-110px -75px}
	#link1 li.vaccine a.a2:before {background-position:-220px -75px}
	#link1 li.mayor a.a2:before {background-position:-330px -75px}
}
@media all and (max-width:599px){
	#link1 li a .b1.more {width:120px;height:32px;line-height:32px;left:calc(50% - 60px);}
	
	#link1 li a.a2 .b1.more {width:120px;height:32px;line-height:32px;left:calc(50% - 60px);}
}
@media all and (max-width:499px){
	#link1 li {float:none;width:100%;height:150px;margin:0 0 10px}
	#link1 li a {position:relative;padding:40px 20px 25px 36%;}
	#link1 li a:before {position:absolute;top:calc(50% - 54px);left:17%;margin-bottom:0}
	#link1 li a .b1.more {position:relative;width:90px;bottom:auto;left:auto;top:auto;right:auto;text-align:center;margin:12px auto;}
	
	#link1 li a.a2 {position:relative;padding:40px 20px 25px 36%;}
	#link1 li a.a2:before {position:absolute;top:calc(50% - 54px);left:17%;margin-bottom:0}
	#link1 li a.a2 .b1.more {position:relative;width:90px;bottom:auto;left:auto;top:auto;right:auto;text-align:center;margin:12px auto;}
}
@media all and (max-width:399px){
	#link1 li a {padding-left:140px}
	#link1 li a:before {left:30px}
	
	#link1 li a.a2 {padding-left:140px}
	#link1 li a.a2:before {left:30px}
}

#foot {position:relative;max-width:1200px;margin:40px auto 0;border-top:1px solid #e0e0e0;padding:26px 220px 26px 0;box-sizing:border-box;}
#foot address, #foot .copyright {font-size:.941em;color:#666;}
#foot .copyright {margin:0}
#foot .callcenter {position:absolute;top:40px;right:0;padding-left:66px;}
#foot .callcenter:before {position:absolute;top:0;left:0;content:"";display:block;width:52px;height:46px;background:url(../img/intro_sprite.png) no-repeat -46px -90px}
#foot .callcenter .h1 {font-size:.824em;color:#222;font-weight:700;line-height:1;margin:0}
#foot .callcenter .tel {font-size:1.882em;color:#0060af;margin:3px 0 0;line-height:1;font-weight:700}
@media all and (max-width:999px){
	#foot {margin-top:35px}
}
@media all and (max-width:767px){
	#foot {text-align:center;padding:20px 0}
	#foot .callcenter {position:relative;top:auto;right:auto;width:150px;margin:15px auto 0;text-align:left;}
}
@media all and (max-width:499px){
	#foot {margin-top:25px}
}


/* hover 효과 */
@media all and (min-width:1260px){
	/* #bbs1 ul li a:hover {text-decoration:underline} */
	#link1 li a:hover:after, #link1 li a:focus:after {height:100%;}
	#link1 li.portal a:hover:after, #link1 li.portal a:focus:after {background-color:#006680}
	#link1 li.covid19 a:hover:after, #link1 li.covid19 a:focus:after {background-color:#eb6100}
	#link1 li.vaccine a:hover:after, #link1 li.vaccine a:focus:after {background-color:#1cab3e}
	#link1 li.mayor a:hover:after, #link1 li.mayor a:focus:after {background-color:#1cab3e}
	#link1 li.portal a:hover .b1.more {color:#006680}
	#link1 li.covid19 a:hover .b1.more {color:#eb6100}
	#link1 li.vaccine a:hover .b1.more {color:#1cab3e}
	#link1 li.mayor a:hover .b1.more {color:#1cab3e}
	#link1 li a:hover .t1, #link1 li a:hover .e1 {color:#fff}
	#link1 li a:hover .b1.more, #link1 li a:focus .b1.more {background-color:#fff;}	
}