@charset "utf-8";
body, ul, ol, span, input, p, dl, dt, dd, table, th, td, div, section, textarea, h1, h2, h3, h4, h5, h6{
	margin:0px; padding:0px; list-style:none;
	font-family: "S-Core Dream","GmarketSans","Pretendard","Noto Sans KR", -apple-system, apple SD Gothic Neo, sans-serif;
	letter-spacing:-0.04em;
	font-weight:300;
	word-break:keep-all;
}

.layout{width:1200px; margin:auto;}

body{overflow-y:scroll;}
@media(max-width:1200px){
	.layout{width:96%;}
}
@media(max-width:768px){
	.layout{width:96%;}
}

/* HEADER */
#header #nav{color:#eee; overflow:hidden;  height:30px;  font-size:12px;  background:linear-gradient(to bottom right,rgba(18,111,235,.9),rgba(114,3,225,.9)); background-position:50% 50%; background-size:cover, cover}
#header #nav .menu{ list-style:none; margin:0px; padding:0px; float:right; color:inherit;}
#header #nav li{float:left; padding:0px 10px; color:inherit;}
#header #nav li a{display:inline-block; color:inherit; line-height:28px; color:rgba(255,255,255,0.8); text-decoration:none; transition:0.3s;}
#header #nav li a:hover{color:rgba(255,255,255,1); transition:0.3s;}
@media(max-width:1000px){
	#header #nav li a{font-size:11px;}
}
#header{position:fixed; background:white; width:100%; top:0px; clear:both; /*border-bottom:1px solid #04CF5C;*/  min-height:95px; box-shadow:0px 0px 5px rgba(0,0,0,0.3); z-index:10; }
#header .globalmenu{display:none;}
#header .logo{float:left; height:65px; align-content:center; }
#header .logo img{height:34px; margin-top:-4px; }
#header .logo img.m365_logo{height:25px !important; }
#header .logo span{display:inline-block; width:1px; line-height:30px; background:#ddd; margin:0px 10px;}
#header #menutop{float:right;}
#header #menutop .menu{overflow:hidden; list-style:none; margin:0px; padding:0px;}
#header #menutop .menu li{float:left;}
#header #menutop .menu li a{display:inline-block; padding:0px 30px; text-align:center; line-height:65px; color:#555; font-size:1.2em; font-weight:500; text-decoration:none; position:relative;}
#header #menutop .menu li a:hover{color:#3f63bf; /*font-size:12pt;*/}
#header #menutop .menu li a.active{color:#3f63bf; font-size:1.1em;}
#header #menutop .menu li .help{position:relative; padding-left:58px;}
#header #menutop .menu li .help i{position:absolute; font-size:1.6em; left:30px;}
#slidemenu{display:none;}
@media(max-width:1000px){
		#header .logo img{height:24px !important; margin-top:-4px;}
		#header .logo img.m365_logo{height:20px !important; }
		#header .logo span{display:inline-block; width:1px; line-height:24px; background:#ddd; margin:0px 10px;}
		#header #menutop{display: none;}
}
#middler.main{margin:95px 0px 40px 0px; background:white; padding:0px 0px 50px 0px;}

#visual.main{background:url('/images/servicezone.avif') center center ; height:357px; overflow:hidden; position:relative; background-size:cover; align-content: center;}
#visual.main .slogan{/*position:absolute; top:20%; border:1px solid red;*/}
#visual.main .slogan .subtitle .title{font-family:"GmarketSans"; font-weight:500;  font-size:1em;}
#visual.main .slogan .subtitle .btn{font-size:13px; border-radius: 0px; border:none; margin:0px; width:auto; padding:5px 20px;}
#visual.main .slogan .summary{font-size:1.2em; word-break:keep-all; width:850px; margin:10px 0px 0px 0px;}
#visual.main .slogan button{font-weight:400; letter-spacing:-0.04em; margin:40px 0px 0px 0px; border:3px solid #098CD2; border-radius:40px; width:220px; color:#0FA4DC; font-size:1.1em; line-height:24px; background:white;}
#visual.main .slogan .menu{display: flex; flex-wrap:wrap; gap:0px 0px; margin-top:100px;}
#visual.main .slogan .menu li{flex:1;}
#visual.main .slogan .menu li .box{text-align:center; cursor:pointer;}
#visual.main .slogan .menu li .box .thumb{position:relative; width:41px; margin:auto;}
#visual.main .slogan .menu li .box .thumb .noti{position:absolute; top:-10px; right:-10px;}
#visual.main .slogan .menu li .box .title{font-size:13px; font-weight:400; margin-top:5px;}
@media(max-width:1000px){
	#visual.main .slogan .subtitle .title{font-size:0.75em;}
	#visual.main .slogan .menu{margin-top:20px;}
	#visual.main .slogan .menu li{flex:0 0 calc(100%/4);}
	#visual.main .slogan .menu li .box{padding:20px 0px;}
}

#middler.main .intro{background:#f8f8f8; padding:50px 0px 50px 0px;}
#middler.main .intro .title{font-family:"GmarketSans"; text-align:center; font-size:2em; font-weight:500; margin-bottom:20px;}
#middler.main .intro .layout{background:white; padding:50px 30px 30px 30px;}
#middler.main .intro .layout dl{margin-bottom:30px;}
#middler.main .intro .layout dl dt{font-size:1.4em; font-weight:500; color:#312b6c; background:url('/images/dot1.png') no-repeat 0px 13px; padding-left:20px;}
#middler.main .intro .layout dl dd{padding:5px 20px;}
#middler.main .intro .layout dl dd .dot2{background:url('/images/dot2.png') no-repeat 0px 5px; margin-top:10px; padding-left:25px;}
@media(max-width:1000px){
	#middler.main .intro .title{font-size:1.6em;}
	#middler.main .intro .layout dl dd ul li{text-indent:-8px; margin-left:8px; margin-bottom:5px; word-break:keep-all;}
}
#middler.main .intro .layout dl dd .menu{overflow:hidden; margin-top:20px;}
#middler.main .intro .layout dl dd .menu li{float:left; width:calc(100%/5); margin:0px; text-indent:0px;}
#middler.main .intro .layout dl dd .menu li .box{font-size:14px; font-weight:400; height:120px; color:white; padding:15px; word-break:keep-all; max-width:185px; letter-spacing:-1px;}
#middler.main .intro .layout dl dd .menu li .box.box1{background:url('/images/guide1.jpg') no-repeat;}
#middler.main .intro .layout dl dd .menu li .box.box2{background:url('/images/guide2.jpg') no-repeat;}
#middler.main .intro .layout dl dd .menu li .box.box3{background:url('/images/guide3.jpg') no-repeat;}
#middler.main .intro .layout dl dd .menu li .box.box4{background:url('/images/guide4.jpg') no-repeat;}
#middler.main .intro .layout dl dd .menu li .box.box5{background:url('/images/guide5.jpg') no-repeat;}
@media(max-width:1000px){
	#middler.main .intro .layout{padding:50px 5px 30px 10px;}
	#middler.main .intro .layout dl dd .menu li{width:calc(100%/2);}	
	#middler.main .intro .layout dl dd .menu li .box{margin:5px; font-size:0.9em; padding:10px;}
}

#middler.sub{margin:95px 0px 40px 0px; background:white; padding:0px 0px 50px 0px;}
#middler.sub .webcon .subtitle .title{font-family: "GmarketSans"; font-size:1.4em; font-weight:500; text-align: center; height:110px; line-height:120px;}

#footer{clear:both;  font-size:9pt; border-top:1px solid #eee; padding:10px 0px 10px 0px; overflow:hidden; position:fixed; width:100%; bottom:0px; background:#3c3c3c; z-index:-1; }
#footer .copyright{text-align:center; color:#999; font-weight:400;}
#footer .copyright strong{font-weight:600;}
@media(max-width:768px){
	#footer .copyright{float:none; text-align: center;}
	#footer .copyright p span{font-size:8pt;}
	#footer .copyright .copy{display:block;}
}

.subtitle .title{font-family: "GmarketSans"; font-size:1.4em; font-weight:500;}
.subtitle .summary{font-size:13px; color:#0d336b; background:#F0F6FF;  padding:10px 10px; border-radius:5px; font-weight:400;}