@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;}
*:after,
*:before {box-sizing:border-box;}

a {text-decoration: none; color:inherit;}
ul, li, ol {list-style: none;}
select {background:url(/resource/img/maskstore/ico_arrow_down.png) no-repeat center right 10px; border:1px solid #ddd; height:40px; padding: 0 35px 0 10px; -webkit-appearance:none; -ms-appearance:none; -moz-appearance: none; font-size: inherit;}
select::-ms-expand {display:none;}
input {border:0; background:none; font-size: inherit;}
button {font-size: inherit; border:0; background:none; height:40px; padding: 0 10px; background:#6a7a90; color:#fff; cursor:pointer; vertical-align:middle;}

html {font-size:10px;}
body {font-size: 1.5em; font-family: "SCDream", sans-serif; line-height:1;}

/* theme */
.txt_red {color:#de3508 !important;}
.fsNone {font-size:1em !important;}
.fsZoomIn1 {font-size:1.1em !important;}
.fsZoomIn2 {font-size:1.15em !important;}
.fsZoomIn3 {font-size:1.2em !important;}
.fsZoomIn4 {font-size:1.3em !important;}
.fsZoomIn5 {font-size:1.5em !important;}
.fsZoomOut1 {font-size:0.95em !important;}
.fsZoomOut2 {font-size:0.9em !important;}
.fsZoomOut3 {font-size:0.85em !important;}
.fsZoomOut4 {font-size: 0.75em !important;}
.fsZoomOut5 {font-size: 0.6em !important;}

.mb20 {margin-bottom:20px;}

#topNotice {position:fixed; top:0; left:0; right:0; overflow:hidden; z-index:9999; background:#db2b39; padding:1em; color:#fff; font-size:1.1em;}
#topNotice > p {max-width:1400px; margin:0 auto; position:relative; padding-left:calc(32px + 1em); line-height:1.2; word-break: keep-all;}
#topNotice > p:before {content:""; display:inline-block; width:32px; height:36px; background:url(/resource/open/img/ico_disaster.png) no-repeat center center / cover; position:absolute; top:-7px; left:0;}
#topNotice > p .tit {font-size:0.9em; display:inline-block; padding:0.5em 1em; white-space:nowrap; line-height:1; border-radius:50px; background:#ff5959; margin:0 0.5em 0 1em;}

/* layout */
#intro .wrap .introWrap {display:table; width:80%; margin:0 auto; height:93px; margin-bottom:50px; max-width:100%;}
#intro .wrap .introWrap:after {content:""; display:block; clear:both;}
#intro .wrap .introWrap .introTit {background:#005DAF; border-top-left-radius:15px; border-bottom-left-radius:15px; width:50%; height:100%; padding:1rem; display:table-cell; vertical-align:middle; line-height:1.2; white-space:normal;}
#intro .wrap .introWrap .introTit > p {color:#fff713; text-align:center; font-size:1.6em; font-weight:bold; letter-spacing:-1px; word-break:keep-all; }
#intro .wrap .introWrap .introTit span {font-weight:bold; color:#ffb900;}
#intro .wrap .introWrap .introTxt { background:#fff; border-top-right-radius:15px; border-bottom-right-radius:15px; width:50%;  padding:1rem; height:100%; display:table-cell; vertical-align:middle; font-size:1.2em; line-height:1.2;}
#intro .wrap .introWrap .introTxt .introTxt_innr {color:#333; text-align:left;}
#intro .wrap .introWrap .introTxt .introTxt01 span {font-size:1.3em; font-weight:bold;}
#intro .wrap .introWrap .introTxt .introTxt02 {background:#e8e8e8; padding:5px 10px; border-radius:5px; margin-top:5px; font-size:0.9em; word-break:keep-all;}

#intro {background:#fff; position:relative; text-align: center;}
#intro:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:34.6%; background:#e0f2f3;}
#intro .wrap {margin:0 auto; position:relative;}
#intro .wrap > a > p {margin-bottom:40px;}
#intro .wrap > a > p > img {max-width:100%;}
#intro .wrap .logo {padding:65px 0; display:block;}
#intro .wrap .title {margin-bottom:70px; font-size:1.2em; line-height:1.4; word-break: keep-all;}
#intro .wrap .introList:after {content:""; display:block; clear:both;}
#intro .wrap .introList .item {float:left; position:relative;}
#intro .wrap .introList .item > a {display:block; height:100%; border-radius:10px; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,.3);}
#intro .wrap .introList .img {position:relative; height:50%; overflow:hidden;}
#intro .wrap .introList .img img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; max-width:120%;}
#intro .wrap .introList .txt {width:100%; height:50%; background:#fff; padding:20px 15px; border-top:1px solid #ddd; line-height:1.2;}
#intro .wrap .introList .txt > h4 {font-size:1.6em; word-break:keep-all;}
#intro .wrap .introList .txt > h4 > a {display:block;}
#intro .wrap .introList .txt > p {font-size:1em; color:#666; line-height:1.4; word-break:keep-all; margin-top:1em;}
#intro .wrap .introList .txt > p > a {display:inline-block; background:#F96700; color:#fff; padding:10px 0; border-radius:50px; line-height:1; white-space:nowrap; font-size:0.9em; margin-bottom:0.5em; width:90%;}
#intro .wrap .introList .txt > p > a.blue_btn {width:49%; float:left; padding:10px 0; background:#15589b;}
#intro .wrap .introList .txt > p > a.blue_btn:nth-of-type(1) {margin-right:5px;}

/* #intro .wrap .introList .item li {display:table; width:100%; border-bottom:1px solid #ddd; padding:7px 0;}
#intro .wrap .introList .item li:last-child {border-bottom:0;}
#intro .wrap .introList .item li span {display:table-cell; width:50%; vertical-align: middle;}
#intro .wrap .introList .item li span:nth-child(1) {color:#666; text-align:left;}
#intro .wrap .introList .item li span:nth-child(2) {text-align:right;} */

#intro .wrap .introList .item .txt > ul {margin-top:20px;}
#intro .wrap .introList .item .txt > ul:after {content:""; display:block; clear:both;}
#intro .wrap .introList .item .txt > ul > li {float:left; width:50%; padding: 0.2em;}
#intro .wrap .introList .item .txt > ul > li > a {display:block; background:#F96700; color:#fff; height:2.4em; line-height:2.4em; border-radius:25px; font-size:0.85em;}

#intro .wrap .introList .item > div {display:block; height:100%; border-radius:10px; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,.3);}

/* 기본값 item 3개 */
#intro .wrap {max-width:1000px;}
#intro .wrap .introList .item {width:33.3333%; height:420px; padding: 0 20px 20px;} 

#intro.type2 .wrap .introList {max-width:650px; margin:0 auto;}
#intro.type2 .wrap .introList .item {width:50%;}

#intro.type4 .wrap {max-width:1200px;}
#intro.type4 .wrap .orange_btn {display:inline-block; background:#F96700; color:#fff; padding: 8px 0; border-radius:50px; line-height:1; font-size:0.9em; width:100%; margin-top:5px; height: 30px;}
#intro.type4 .wrap .introList .item {width:25%; padding: 0 10px 10px;}
#intro.type4 .wrap .introList .item4 .txt p {font-size:1em; text-align:center;}
#intro.type4 .wrap .introList .item4 .txt p span {width:35%; float:right;}
#intro.type4 .wrap .introList .item4 .txts {text-align:center; font-size:0.9em; margin:3px 0 10px 0;}

#intro.type5 .wrap {max-width:1400px;}
#intro.type5 .wrap .orange_btn {display:inline-block; background:#F96700; color:#fff; padding: 8px 0; border-radius:50px; line-height:1; font-size:0.9em; width:100%; margin-top:5px; height: 30px;}
#intro.type5 .wrap .introList .item {width:20% !important; padding: 0 10px 10px;}
#intro.type5 .wrap .introList .item5 .txt p {font-size:1em; text-align:center;}
#intro.type5 .wrap .introList .item5 .txt p span {width:35%; float:right;}
#intro.type5 .wrap .introList .item5 .txts {text-align:center; font-size:0.9em; margin:3px 0 10px 0;}


#intro .wrap .introList .item5 .txt > a {margin-top: 17px;}
.mb20 {margin-bottom: 10px;}


.copyWrap {width:100%; background:#fff; position: fixed; bottom:0; margin-top:1.5em;}
.copy  {color:#666; border-top:1px solid #aaa; font-size: 0.9em;   max-width: 1200px; text-align:center; margin:0 auto; padding:20px 0; }

@media all and (min-width:768px) and (max-width:1400px){
	#intro.type5 .wrap {width:1000px;}
	#intro.type5 .wrap .introList .item {width:33.33% !important; padding: 0 10px 10px;}
	#intro .wrap .introWrap {width:100%;}
	#intro .wrap .introList .item5 .txt > a {margin-top: 17px;}
}

@media all and (min-width:1025px){
	#intro {padding-bottom:54px;}
}

@media all and (max-width:1024px){
	body {font-size:1.4em;}
	
	#topNotice {height:auto;}
	#topNotice > p > span {display:block; margin-top:10px;}
	#topNotice > p .tit {margin-left:0;}
	
	#intro:before {bottom:61%;}
	#intro .wrap {padding:0 15px;}
	#intro .wrap > a > p {margin-bottom:20px;}
	#intro .wrap .logo {padding: 20px 0;}
	#intro .wrap .title {display:none;}
	
	/*인트로 상단*/
	#intro .wrap .introWrap {width:90%;}
	#intro .wrap .introWrap .introTit {width:40%;}
	#intro .wrap .introWrap .introTxt {width:60%;}
	
	#intro .wrap .introList {max-width:500px; margin:0 auto;}
	#intro .wrap .introList .item {width:100%; height:195px; padding: 0 0 20px;}
	#intro .wrap .introList .item:last-child {margin-bottom:0;}
	#intro .wrap .introList .item > a {height:100%;}
	#intro .wrap .introList .item > a:after {content:""; display:block; clear:both;}
	#intro .wrap .introList .img {width:50%; height:100%; float:left; border-right:1px solid #ddd;}
	#intro .wrap .introList .txt {width:50%; height:100%; float:left; border-top:none;}
	#intro .wrap .introList .txt > p {margin-top:0.25em;}
	/* #intro .wrap .introList .txt a {padding:5px 10px;} */
	
	#intro.type2:before {bottom:50.5%;}
	#intro.type2 .wrap .introList .item {width:100%;}
	
	#intro.type4:before {bottom:57%;}
	#intro.type4 .wrap {max-width:100%;}
	#intro.type4 .wrap > a > p {margin-bottom:20px;}
	#intro.type4 .wrap .logo {padding: 20px 0;}
	#intro.type4 .wrap .title {display:none;}
	#intro.type4 .wrap .introList {max-width:100%; padding: 0 50px;}
	#intro.type4 .wrap .introList .item {width:50%; padding: 0 10px 20px; height:400px; max-height: 440px;}
	#intro.type4 .wrap .introList .item:last-child {margin-bottom:0;}
	#intro.type4 .wrap .introList .item > a:nth-child(2) {bottom:45px;}
	#intro.type4 .wrap .introList .item > div {height:100%;}
	#intro.type4 .wrap .introList .item > div:after {content:""; display:block; clear:both;}
	#intro.type4 .wrap .introList .img {width:100%; height:60%;}
	#intro.type4 .wrap .introList .txt {width:100%; height:40%;}
	
	#intro.type5:before {bottom:57%;}
	#intro.type5 .wrap {max-width:100%;}
	#intro.type5 .wrap > a > p {margin-bottom:20px;}
	#intro.type5 .wrap .logo {padding: 20px 0;}
	#intro.type5 .wrap .title {display:none;}
	#intro.type5 .wrap .introList {max-width:100%; padding:0 50px;}
	#intro.type5 .wrap .introList .item {width:33.33% !important; padding: 0 10px 20px; height:400px; max-height: 440px;}
	#intro.type5 .wrap .introList .item:last-child {margin-bottom:0;}
	#intro.type5 .wrap .introList .item > a:nth-child(2) {bottom:45px;}
	#intro.type5 .wrap .introList .item > div {height:100%;}
	#intro.type5 .wrap .introList .item > div:after {content:""; display:block; clear:both;}
	#intro.type5 .wrap .introList .txt {height:40%;}
	/* #intro.type5 .wrap .introList .txt h4 {height:62px;} */
	/* #intro.type5 .wrap .introList .txt a {padding:5px 10px;} */
	#intro.type5 .wrap .introList .img {width:100%; height:60%;}
	#intro.type5 .wrap .introList .txt {width:100%; height:40%;}
	#intro.type5 .wrap .orange_btn {height:100%;}

	#intro .wrap .introList .txt a.blue_btn {width:100%; float:none; padding:7px 0;}
	#intro .wrap .introList .txt a.blue_btn:nth-of-type(1) {margin-right:0; margin-bottom:5px;}
	
	.copyWrap {position:relative;}
	.mb20 {margin-bottom: 10px;}
}

@media all and (max-width:960px){
#intro.type5 .wrap .introList {padding:0;}

}
@media all and (max-width:768px){
	 /*인트로 상단*/
 	#intro .wrap .introWrap {width:100%; margin-bottom:30px;}
	#intro .wrap .introWrap .introTxt .introTxt01 span {font-size:1em;}
	#intro .wrap .introWrap .introTxt .introTxt02 {font-size:0.8em;}
	
	#intro .wrap .introList .txt > h4 > a {padding:0 0 5px;}
	#intro .wrap .introList .txt > a {font-size:0.8em;}
	
	#intro .wrap .introList .item .txt > ul {margin-top:10px;}
	
	#intro.type2:before {bottom:52.5%;}
	
	#intro.type4 .wrap .introList {padding:0;}
	#intro.type4 .wrap .introList .item {width:50% !important;}
	#intro.type4 .wrap .introList .txt h4 {font-size:1.3em;}
	#intro.type4 .wrap .introList .txt > a {margin-top:0;}
	
	#intro.type5 .wrap .orange_btn {white-space: pre-line; line-height:1.2; border-radius: 15px;}
	#intro.type5 .wrap .introList {padding: 0}
	#intro.type5 .wrap .introList .item {width:50% !important;}
	#intro.type5 .wrap .introList .txt h4 {font-size:1.3em;}
	#intro.type5 .wrap .introList .txt a {font-size:0.8em;}
	
	/* #intro .wrap .introList .item4 {height: 350px !important;} */
	#intro .wrap .introWrap .introTit {width:45%;}
	#intro .wrap .introWrap .introTxt {width:55%;}
	.mb20 {margin-top: 15px;}

}


@media all and (max-width:560px){
	/*인트로 상단*/
	#intro .wrap .introWrap .introTit {padding:2px;}
	#intro .wrap .introWrap .introTit > p {font-size:1.2em;}
	#intro .wrap .introWrap .introTxt {font-size:1em;}
	#intro .wrap .introWrap .introTxt01 {font-size:0.9em;}
	#intro .wrap .introWrap .introTxt01 span {font-size:1.1em; font-weight:bold;}
	#intro .wrap .introWrap {height:70px;}
	
	#intro .wrap .introList .txt {padding:20px 10px;}
}

@media all and (max-width:480px){
	
	.mb20 {margin-bottom:0;}
		
	#intro .wrap .introList .txt h4 {font-size:1.3em;}
	#intro .wrap .introWrap .introTit {width:50%;}
	#intro .wrap .introWrap .introTxt {width:50%;}
	
/* 	#intro.type4:before {bottom:54.2%;}
	#intro.type4 .wrap .introList .item {height:240px;}
	#intro.type4 .wrap .introList .txt {display:table; width:100%;}
	#intro.type4 .wrap .introList .txt > div {display:table-cell; vertical-align: middle;}
	#intro.type4 .wrap .introList .txt h4 {font-size:1em; height:auto;}
	#intro.type4 .wrap .introList .txt a {white-space:normal; line-height:normal; border-radius:10px; word-break: keep-all;}
	#intro.type4 .wrap .introList .txt p {display:none;} */
	
	#intro.type4 .wrap .introList .item {width:100% !important; padding:10px 50px;}
	#intro.type5 .wrap .introList .item {width:100% !important; padding:10px 50px;}
}

@media all and (max-width:380px){
		
	#intro.type4 .wrap .introList .item {padding:10px 0;}
	#intro.type5 .wrap .introList .item {padding:10px 0;}
}