@charset "utf-8";

@font-face {
	font-family:'SCDream'; font-style:normal; font-weight:400;
	src: url('/humanframe/global/assets/css/font/SCDream4.woff') format('woff'), url('/humanframe/global/assets/css/font/SCDream4.otf') format('opentype');
}
@font-face {
	font-family:'SCDream'; font-style:normal; font-weight:700;
	src: url('/humanframe/global/assets/css/font/SCDream5.woff') format('woff'), url('/humanframe/global/assets/css/font/SCDream5.otf') format('opentype');
}


* {margin:0; padding:0; box-sizing: border-box;}
html {font-size:10px;}
body {font-size: 1.6em; letter-spacing:-0.5px; color:#333; line-height:1; vertical-align:baseline; font-family: "SCDream", sans-serif; max-width:1920px; margin: 0 auto;}
button {background:none; font-size:inherit; font-family: inherit; border:0; cursor:pointer;}
table {border-collapse: collapse; border-spacing: 0;}
a {text-decoration:none; color: inherit; font-weight:normal;}
ul, ol, li {list-style: none;}
input, select, textarea {border:1px solid #ccc; vertical-align: middle;}
img {vertical-align: top; max-width:100%; border:0;}

.hidden {position:absolute; left:-9999px; width:0; height:0; overflow:hidden; font-size:0;}
.inner {max-width:1200px; margin:0 auto; position:relative;}

h4.tit {font-size:2em; text-align: center; margin-bottom:50px;}
h5.tit {font-size:1.2em; margin-bottom:20px;}
.colorRed {color:#d53636 !important;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}

.listStyle {margin: 0 0 30px 30px;}
.listStyle > li {padding:0 0 5px 10px; line-height:1.4;}
.listStyle li:before {content:""; display:inline-block; width:5px; height:5px; margin:0 6px 3px -9px; background:#949494; vertical-align:middle;}
.listStyle li ul {margin:5px 0 5px 0; color:#666;}
.listStyle li li:before{content:""; display:inline-block; width:5px; height:2px; margin:0 6px 3px -9px; background:#949494; vertical-align:middle;}
.listStyle li li li:before{content:""; display:inline-block; width:2px; height:2px; margin:0 6px 3px -9px; background:#949494; vertical-align:middle;}
.listStyle li li li li:before{content:""; display:inline-block; width:5px; height:1px; margin:0 6px 3px -9px; background:#949494; vertical-align:middle;}
.listStyle li li {background:none; border:none; padding-left: 11px;}

.ui-datepicker {z-index:9999 !important;}
.ui-datepicker-trigger {overflow:hidden;width:2.857em; height:2.857em; vertical-align:middle; margin-left:-2px;}
button.ui-datepicker-trigger img{width:auto; height:100%; vertical-align:middle;  }
.ui-datepicker td span, .ui-datepicker td a {height:100%;}

#skip {position:fixed; display:block; z-index:99; top:0; left:0; right:0; background:rgba(0,0,0,0.6); color:#fff; text-align: center; font-size: 0.9em; opacity:0; height:0; overflow:hidden;}
#skip:hover,
#skip:focus {padding: 10px; height:auto; opacity:1;}


/* #header {background:#89c9f5 url(../../assets/img/common/bg_header.jpg) no-repeat center bottom; position:relative;} */
#header {background:#89c9f5; position:relative;}
#header .inner {padding:0 10px 30px;}
/* #header:before {content:""; display:block; width:100%; height:100%; background:url(../../assets/img/common/bg_header.png) no-repeat center bottom; position:absolute; top:0; left:0; animation: wave 10s infinite ease-in-out;} */
#header .logo {margin:10px 0 0 10px; display:inline-block; vertical-align:middle;}
#header .logo img {height:50px;}
#header .utils {position: absolute; top: 0; right:0; padding:10px;}
#header .utils > a {font-size: 0.9em; color:#0067ae; padding-left:20px; display:inline-block; vertical-align: top;}
#header .utils > a:after {content:""; display:inline-block; height:1em; width:1px; background:#0067ae; vertical-align: middle; margin-left:20px;}
#header .utils > a:last-child {padding-right:20px;}
#header .utils > a:last-child:after {display:none;}
#header .corona {font-size:2.2em; font-weight:bold; color:#0067ae; padding:3px 5px; display:inline-block; vertical-align: middle; margin:10px 0 0 10px;}


/****************200304 수정 start**************/
#header #nav {display:table; table-layout:fixed; width:100%;}
#header #nav > li {width:calc( (100%  - 35px) / 5 ); margin-right:8px; font-size:1.2em; vertical-align:middle; text-align:center; display:block; position:relative; float:left;} /*수정*/
#header #nav > li:nth-of-type(5),
#header #nav > li:nth-of-type(8) {margin-right:0;}

#header #nav > li > a:hover,
#header #nav > li > a:focus,
#header #nav > li > a.active {background:#0067ae; color:#fff; font-weight:bold;}



#header #nav > li.policy > a:hover,
#header #nav > li.policy > a:focus,
#header #nav > li.policy > a.active {background:#11A73B; color:#fff;}

#header #nav > li:nth-of-type(6),
#header #nav > li:nth-of-type(7),
#header #nav > li:nth-of-type(8) {margin-top:8px;}

#header #nav > li > a {display:block; padding:15px 0; border-radius:10px; background:#fff;}

#header #nav > li.clean a {display:block;/*  padding:27px 0; */ line-height:1; background:#c4ef8a;}
#header #nav > li.clean a span {display:block; text-align:left; margin-left:40px;}
#header #nav > li.clean a span strong {display:inline-block; text-align:left; font-size:1em;}
#header #nav > li.clean {text-align:left; font-size:1.2em; color:#333; }
#header #nav > li.clean a:before {content:""; display:block; width:40px; height:51px; background:url(../../assets/img/common/ico_cleanzone.png) no-repeat center center; position:absolute; top:50%; left:4px; transform: translateY(-50%); background-size: 80%;}

#header #nav > li.policy {font-size:1.3em; line-height:1.2;}
#header #nav > li.policy a {display:block; padding:27px 0; line-height:1.2; background:#c4ef8a; color:#333;}


#header #nav > li > a.active.menu_on02  {background:#11A73B; color:#fff; font-weight:bold; border-radius:10px;}
#header #nav > li > a.active.menu_on02:before {content:""; display:block; width:40px; height:51px; background:url(../../assets/img/common/ico_cleanzone_w.png) no-repeat center center; position:absolute; top:50%; left:4px; transform: translateY(-50%);background-size: 80%;}
#header #nav > li > a.active.menu_on  {background:#0067ae; color:#fff; font-weight:bold; border-radius:10px;}
#header #nav > li > a.active.menu_on:before {content:""; display:block;  width:65px; height:51px; background:url(../../assets/img/common/ico_road_w.png) no-repeat center center; position:absolute; top:50%; left:15px; transform: translateY(-50%); }

#header #nav > li.clean > a:hover,
#header #nav > li.clean > a:focus {background:#11A73B; color:#fff;}
#header #nav > li.clean > a.menu_on02:hover:before {content:""; display:block; width:40px; height:51px; background:url(../../assets/img/common/ico_cleanzone_w.png) no-repeat center center; position:absolute; top:50%; left:4px; transform: translateY(-50%); background-size: 80%;}
#header #nav > li.clean > a.menu_on02:focus:before {content:""; display:block; width:40px; height:51px; background:url(../../assets/img/common/ico_cleanzone_w.png) no-repeat center center; position:absolute; top:50%; left:4px; transform: translateY(-50%); background-size: 80%;}

#header #nav > li.road {font-size:1.3em; line-height:1.2;}
#header #nav > li.road a {display:block; padding:27px 0; line-height:1.2;  background:#d8eaf5; }
#header #nav > li.road > a:first-child.active,
#header #nav > li.road > a:first-child:hover,
#header #nav > li.road > a:first-child:focus {background:#0067ae; color:#fff; }
#header #nav > li.road > a.menu_on:hover:before {content:""; display:block; width:65px; height:51px; background:url(../../assets/img/common/ico_road_w.png) no-repeat center center; position:absolute; top:50%; left:15px; transform: translateY(-50%); }
#header #nav > li.road > a.menu_on:focus:before {content:""; display:block; width:65px; height:51px; background:url(../../assets/img/common/ico_road_w.png) no-repeat center center; position:absolute; top:50%; left:15px; transform: translateY(-50%); }

#header #nav > li.status > a:last-child.active,
#header #nav > li.status > a:last-child:hover,
#header #nav > li.status > a:last-child:focus {background:#af5607; color:#fff; }
#header #nav > li.status a:last-child {background:#fffab6; color:#333;}

#header .sns_btn {max-width:1020px; margin:0 auto 10px; text-align: right;}
#header .sns_btn > a {display:inline-block; margin-left:5px; vertical-align: middle;}
#header .sns_btn:nth-of-type(2) img, #header .sns_btn:nth-of-type(1) img {width:32px;} 
#header .sns_btn .kcdc_logo img {width:113px; height:36px;}
#header .sns_btn .ico_home_site {font-size:1.1em; margin-right:10px; line-height:36px;}
#header .sns_btn .ico_home_site:before {content:""; display:inline-block; width:15px; height:16px; background:url(../../assets/img/common/ico_home_site.png) no-repeat center center;  margin-right:5px;}

/****************200304 수정 end**************/


.main_banner {text-align: center; margin:0 0 30px;}
.main_banner .banner > a {display:inline-block; position:relative; cursor: default;}
.main_banner .banner > div {display:inline-block; position:relative;}
.main_banner .banner span[class*=item] {position:absolute; transform: translate(-50%,-50%); white-space:nowrap;}
.main_banner .banner .item1 {left:50%; top:5%; font-weight:bold; font-size:1.2em; color:#fff;}
.main_banner .banner .item2,
.main_banner .banner .item3,
.main_banner .banner .item4,
.main_banner .banner .item5,
.main_banner .banner .item6 {font-size:4.5em; top:60%; color:#fff; font-weight:bold;}
.main_banner .banner span[class*=item] > i {font-size:0.4em;}
.main_banner .banner .item2 {left: 13%;}
.main_banner .banner .item3 {left: 32%;}
.main_banner .banner .item4 {left: 50%;}
.main_banner .banner .item5 {left: 69%;}
.main_banner .banner .item6 {left: 86%;}
.main_banner .banner .item_youtube {position:absolute; top:90%; left:64%;}

#container {padding: 50px 10px;}

#footer {text-align: center; background:#3d586b; color:#fff; padding:15px; font-size:0.8em; color: rgba(255,255,255,.5);}

.btnArea {text-align: center; margin:15px 10px;}
a[class*=btn] {padding:15px 25px; background:#0067ae; display:inline-block; color:#fff;}
.button {margin-bottom:3px; display:inline-block; padding:15px 25px;}
.button.small {height: 2.2em;padding:0 0.923em;line-height: 2.2em;font-size: 15px;font-weight: 700;margin-left: 10px;}
.button.medium {height:2.857em; padding:0 1.071em; line-height:2.857em; font-size:14px; font-weight:bold;}
.button.large {height:2.778em; padding:0 0.833em; line-height:2.778em; font-size:18px; font-weight:bold;}
.button.color {border:1px solid #0067ae; color:#fff; background-color:#0067ae;}
.button.white {border:1px solid #d6d9e0; color:#333; background:#f4f5f7;}
.button.icon {position:relative; padding-right:40px !important;}
.button.icon:after {position:absolute; top:50%; right:10px; margin-top:-10px; content:""; display:inline-block; width:20px; height:20px; background:url(/humanframe/global/assets/img/old/icon_button_w.png) no-repeat;}
.button.color.icon:after {background:url('../../assets/img/common/icon_button_w.png') no-repeat;}
.button.white.icon:after {background:url('../../assets/img/common/icon_button_b.png') no-repeat;}
.button.icon.jump:after {background-position: center -432px;}
.button.icon.down:after {background-position:center -481px;}


.tabStyle, .tabStyle * {box-sizing: border-box;}
.tabStyle {margin-bottom:40px; border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
.tabStyle:after {content:""; display:block; clear:both;}
.tabStyle > li {float:left; width:25%; position:relative;}
.tabStyle > li:after {content:""; display:none; width:16px; height:16px; position:absolute; top:100%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); border-top:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #0067ae; border-left:8px solid #0067ae; box-sizing: border-box;}
.tabStyle > li > a {display:block; width:100%; height:45px; padding:0 10px; color:#333; font-size:1em; border-top:1px solid #ccc; border-right:1px solid #ccc; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:45px; text-align: center;}
.tabStyle > li > a:hover, .tabStyle > li > a:focus, .tabStyle > li > a.active, .tabStyle li.active a { border-color:#0067ae; background-color:#0067ae; font-weight:bold; color:#fff;}
.tabStyle > li.active:after {display:block; z-index:1;}

@media all and (min-width:1025px) { 
	/* Tab */
	.tabStyle > li {width:20%;}
	.tabStyle_wd2 > li {width:50%; text-align:center; }
	.tabStyle_wd2 > li  a { text-align:center;}
}

@media all and (max-width:1024px){
	body {font-size:1.4em;}
	#header .inner {padding-top:30px;}
	#header .utils {width:100%; padding:8px; text-align:right; padding:8px; background:#fff;}
	#header #nav {display:block;}
	#header #nav:after {content:""; display:block; clear:both;}
	#header #nav > li {display:block; width:50%; float:left; height:auto; margin-bottom:10px;}
	
	.tabStyle { position: relative; width:100%; }
	.tabStyle > li { width:50%; }
	.tabStyle:hover { -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -ms-transition:all 0.4s ease; -o-transition:all 0.4s ease;} 
	.tabStyle:hover > li {display: block; }
	.tabStyle_wd2 > li  a { text-align:center;}

   	/*추가*/
    #header #nav > li {width:calc( (100%  - 8px) / 2 ); margin-right:8px; }
	#header #nav > li:nth-of-type(2n) {margin-right:0;}
	#header #nav > li:nth-of-type(5),
	#header #nav > li:nth-of-type(6) {margin-top:0px;}
	
	#header #nav > li:nth-of-type(5) {margin-right:8px;}
	#header #nav > li.clean a span strong  {display:inline-block; }
	#header #nav > li.road a span strong  {display:inline-block; font-size:1.2em;}
	
	#header #nav > li.policy a {padding: 30px 0;}
	
	#header #nav > li.clean a {padding: 15px 0;}
	#header #nav > li.clean a span {text-align: center; margin-left: 0;} 
	#header #nav > li.road a span {text-align: center; margin-left: 0;} 
   	
	#header #nav > li.clean a span {letter-spacing:0;}
	#header #nav > li:nth-of-type(7),
	#header #nav > li:nth-of-type(8) {margin-top: 0;}
	
	.main_banner .banner .item2,
	.main_banner .banner .item3,
	.main_banner .banner .item4,
	.main_banner .banner .item5,
	.main_banner .banner .item6 {font-size:3.5em;}
	
	
}


@media all and (max-width:768px){
	img.ui-datepicker-trigger {font-size:12px;}
	
	#header .logo img {height:40px;}
	#header .sns_btn {margin: 10px auto 10px;}

	#header #nav > li.road > a:before {background:none;}
	#header #nav > li.road:focus .menu_on:before {background:none; }
	#header #nav > li.road:hover .menu_on:before {background:none;  }
	#header #nav > li.active > a.menu_on:before {background:none;}

	#header #nav > li.clean > a:before {background:none;}
	#header #nav > li.clean > a.active.menu_on02:before {background:none;}
	#header #nav > li.clean > a:hover,
	#header #nav > li.clean > a:focus {background:#11A73B; color:#fff;}
	#header #nav > li.clean > a.menu_on02:focus:before {background:none; }
	#header #nav > li.clean > a.menu_on02:hover:before {background:none;  }

	
	.main_banner .banner .item2,
	.main_banner .banner .item3,
	.main_banner .banner .item4,
	.main_banner .banner .item5,
	.main_banner .banner .item6 {font-size:3em;}
	.main_banner .banner span[class*=item] > i {font-size:0.6em;}
	.main_banner .banner .item_youtube img {width:30px;}
	
	.scroll-table {position:relative; width:100%; margin-top:30px;}
	.scroll-table:before {content:"Scroll▶"; display:block; position:absolute; top:-20px; right:0; color:#999;}
	.scroll-table:after {content:""; display:block; position:absolute; top:0; bottom:0; right:0; width:20px; background:-webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(100%, #dddddd)); background:-webkit-linear-gradient(left, transparent 0%, #dddddd 100%); background:linear-gradient(to right, transparent 0%, #dddddd 100%);}
	.scroll-table > div {position:relative; width:100%; overflow-x:auto;}
	.scroll-table table {margin-top:0 !important; width:1000px !important;}
	.scroll-table table table {width: auto !important;}
	
	.tabStyle > li:first-child {width:100%;} 
	.tabStyle > li:first-child.active > a {color:#fff; background-color:#e94674; border-color:#e94674;}
	.tabStyle > li:first-child.active:after {border-color:#e94674;}
	

	.tabStyle_wd2 > li:first-child {width:50%;}
	.tabStyle_wd2 > li:first-child > a {background-color:#d8eaf5; border-color:#d8eaf5;}
	.tabStyle_wd2 > li:first-child > a:hover,
	.tabStyle_wd2 > li:first-child > a:focus,
	.tabStyle_wd2 > li:first-child.active > a {background-color:#0067ae; border-color:#0067ae;}
	
}

@media all and (max-width:640px){   
	.main_banner .banner .item2, .main_banner .banner .item3, .main_banner .banner .item4, .main_banner .banner .item5, .main_banner .banner .item6{font-size:2.3em;}
}


@media all and (max-width:486px){
	.main_banner .banner .item1 {font-size:0.6em !important;}
	.main_banner .banner .item_youtube img {width: 18px !important;}
	#header #nav > li.clean {text-align:center;}
	#header #nav > li.clean a {padding:8px 0;}
	#header #nav > li.clean a span strong {display:block; text-align:center;}
	#header #nav > li.road a span strong {display:block;  text-align:center;}
	   
	.main_banner .banner .item2, .main_banner .banner .item3, .main_banner .banner .item4, .main_banner .banner .item5, .main_banner .banner .item6{font-size:1.5em;}
}