@charset "utf-8";
/* CSS Document */
/* contants *****************************************/
@media (min-width: 320px) {
	.video {margin: 80px 0 10px;}
	.video .videoTxt {margin: 10px 0 50px;font-size: 18px;}
	.video .videoTxt span {font-size: 15px;display: block;}
	.mainBtn {overflow: hidden;}
	.mainBtn a .icon_pdf {background: url(../images/common/icon_pdf.png) no-repeat;background-size: 100%;width: 23px;height: 25px;display: inline-block;margin-right: 10px;position: relative;top: 5px;}
	.mainBtn a .icon_y {background: url(../images/common/icon_y_b.png)left center no-repeat;background-size: 100%;width: 27px;height: 27px;display: inline-block;margin-right: 12px;position: relative;top: 6px;}
	.mainBtn a:hover .icon_pdf {background: url(../images/common/icon_pdf_w.png) no-repeat;background-size: 100%;width: 23px;height: 25px;display: inline-block;margin-right: 10px;position: relative;top: 5px;}
	.mainBtn a:hover .icon_y {background: url(../images/common/icon_y_m.png)left center no-repeat;background-size: 100%;width: 27px;height: 27px;display: inline-block;margin-right: 12px;position: relative;top: 6px;}
	.btnMain {border-radius: 5px; font-size: 24px;font-family:'NanumSquareR';vertical-align:middle;width:330px;height: 70px;padding: 8px 20px 8px; transition: all 0.2s ease-in-out; color:#222; background: #fff; border: 1px solid #999; text-align: center; cursor: pointer;line-height: 1.5em;}
	.btnMain02 {margin: 0 17px;}
	.btnMain:hover, .btnMain:active, btnMain:visited, btnMain:focus {color:#fff !important;background: #ff0e3b;border: 1px solid #ff0e3b !important;}
	section {width: 100%;padding: 50px 0; letter-spacing: -0.3px;overflow: hidden;}
	section h2 {font-family: 'NanumSquareEB';font-size: 40px;margin: 0;}
	section h3 {font-family: 'NanumSquareB';font-size: 18px;margin: 10px 0 20px;}
	section .con {}
	section .con ul li {display: inline-block;cursor: pointer;position: relative;overflow: hidden;}
	section .con ul li span {font-size: 20px;letter-spacing: -1px;font-family: NanumSquareEB;}
	section .con ul li p {font-size: 14px;margin: 2px 0 0;letter-spacing: -1px;}
	section .con ul li a:hover {text-decoration: none;}
	section .con ul li .conTxt {text-align: center;padding-top: 10px;}
	section .con ul li .conTxt a {width: 100%;height: 70px;color: #555;}
	section .con ul li .conTxt a:hover {color: #111;}
	section.business {padding-top: 100px;}
	section.business ul li {width: 253px;float: left;text-align: center;padding-top: 0;transition: 0.4s;margin-right: 4px;}
	section.business ul li:last-child {margin-right: 0px;}
	section.business ul li a {width: 253px;height: 150px;transition: 0.4s;display: block;}
/* 	section.business ul li a:hover {-webkit-transform: scale(1.1);transform: scale(1.1);} */
	section.business ul li .businessImg_01 {background: url(../images/sub/business_01.png)center no-repeat;background-size: cover;}
	section.business ul li .businessImg_02 {background: url(../images/sub/business_02.png)center no-repeat;background-size: cover;}
	section.business ul li .businessImg_03 {background: url(../images/sub/business_03.png)center top no-repeat;background-size: cover;}
	section.business ul li .businessImg_04 {background: url(../images/sub/business_04.png)center no-repeat;margin-right: 0;background-size: cover;}
	section.business ul li .businessImg_01:hover {background: url(../images/sub/business_01_ov.png)center no-repeat;background-size: cover;}
	section.business ul li .businessImg_02:hover {background: url(../images/sub/business_02_ov.png)center no-repeat;background-size: cover;}
	section.business ul li .businessImg_03:hover {background: url(../images/sub/business_03_ov.png)center top no-repeat;background-size: cover;}
	section.business ul li .businessImg_04:hover {background: url(../images/sub/business_04_ov.png)center no-repeat;background-size: cover;}
	section.solution {}
	section.solution ul li {width: 510px;height: 150px;float: left;text-align: center;padding-top: 0;transition: 0.4s;margin-right: 4px;}
	section.solution ul li:last-child {margin-right: 0px;}
	section.solution ul li a {width: 510px;height: 250px;transition: 0.4s;display: block;}
/* 	section.solution ul li a:hover {-webkit-transform: scale(1.01);transform: scale(1.01);} */
	section.solution ul li .solutionImg_01 {background: url(../images/sub/solution_01.png)center no-repeat;background-size: cover;}
	section.solution ul li .solutionImg_02 {background: url(../images/sub/solution_02.png)center no-repeat;background-size: cover;}
	section.solution ul li .solutionImg_01:hover {background: url(../images/sub/solution_01_ov.png)center no-repeat;background-size: cover;}
	section.solution ul li .solutionImg_02:hover {background: url(../images/sub/solution_02_ov.png)center no-repeat;background-size: cover;}
	section.news {}
	section.news ul li {width: calc(100% / 4 - 4px);float: left;text-align: center;padding-top: 0;transition: 0.4s;margin-right: 4px;}
	section.news ul li:last-child {margin-right: 0px;}
	section.news ul li a {width: 100%;height: 150px;transition: 0.4s;display: block;}
/* 	section.news ul li a:hover {-webkit-transform: scale(1.01);transform: scale(1.01);} */
	section.news ul li .newsImg_01 {background: url(../images/sub/news_01.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_02 {background: url(../images/sub/news_02.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_03 {background: url(../images/sub/news_03.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_04 {background: url(../images/sub/news_04.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_01:hover {background: url(../images/sub/news_01_ov.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_02:hover {background: url(../images/sub/news_02_ov.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_03:hover {background: url(../images/sub/news_03_ov.png)center no-repeat;background-size: cover;}
	section.news ul li .newsImg_04:hover {background: url(../images/sub/news_04_ov.png)center no-repeat;background-size: cover;}
	section.family ul li {width: 339px;float: left;text-align: center;padding-top: 0;transition: 0.4s;margin-right: 3.5px;margin-bottom: 3.5px;}
	section.family ul li:nth-child(4), section.family ul li:nth-child(5), section.family ul li:nth-child(4) a, section.family ul li:nth-child(5) a {width: 510px;}
	section.family ul li:nth-child(3), section.family ul li:last-child {margin-right: 0px;}
	section.family ul li a {width: 339px;height: 150px;transition: 0.4s;display: block;}
/* 	section.family ul li a:hover {-webkit-transform: scale(1.01);transform: scale(1.01);} */
	section.family ul li .familyImg_01 {background: url(../images/sub/family_01.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_02 {background: url(../images/sub/family_02.png)center top no-repeat;background-size: cover;}
	section.family ul li .familyImg_03 {background: url(../images/sub/family_03.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_04 {background: url(../images/sub/family_04.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_05 {background: url(../images/sub/family_05.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_01:hover {background: url(../images/sub/family_01_ov.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_02:hover {background: url(../images/sub/family_02_ov.png)center top no-repeat;background-size: cover;}
	section.family ul li .familyImg_03:hover {background: url(../images/sub/family_03_ov.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_04:hover {background: url(../images/sub/family_04_ov.png)center no-repeat;background-size: cover;}
	section.family ul li .familyImg_05:hover {background: url(../images/sub/family_05_ov.png)center no-repeat;background-size: cover;}
	section.remember {position: relative;padding: 70px 0 100px;}
	section.remember span.icon_remember {display:inline-block;width:195px;height:181px;background: url(../images/common/icon_remember.png)center no-repeat;position: absolute;top:40px;}
	section.remember .topTit {margin: 30px 0 0 210px;}
	section.remember .topTit h4 {color: #ff305c;font-family: 'YG-JALNAN_0','NanumSquareEB';font-size: 26px;margin: 0 0 10px;letter-spacing:-0.5px;}
	section.remember .topTit h3 {color: #333;font-size: 46px;font-family: 'NanumSquareEB';letter-spacing:-1.5px;}
	section.remember .boxWrap {display: inline-block;width: 49.5%;border: 1px solid #aaa;float: left;text-align: center;}
	section.remember .boxWrap02 {display: inline-block;width: 49.5%;border: 1px solid #aaa;float: right;text-align: center;}
	section.remember .con {background: #fff;color: #333;border-radius: 10px;padding: 30px 0 50px;overflow: hidden;float: left;}
	section.remember h4 {margin: 50px 0 10px;font-size: 26px;font-family: 'NanumSquareEB';color: #333;letter-spacing:-1.5px;}
	section.remember h5 {margin: 0px 0 20px;font-size: 16px;color: #333;letter-spacing: -0.5px;font-weight: bold;}
	section.remember .noti {background: #fff !important;color: #333 !important;display: block;float: left;width: 100%;padding: 10px 0 0 !important;margin: 0 !important;font-size: 14px !important;letter-spacing: -0.5px;}
	section.remember .noti a {color: #004aa7;}
	section.remember .topTxt {font-family: 'NanumSquareB';font-size: 17px;letter-spacing: -0.5px;line-height: 1.4em;float: left;margin-bottom: 30px;}
	section.remember .topTxt strong {font-family: 'NanumSquareB';color: #ff0e3b;margin: 0;font-weight: bold;}
	section.remember .logo span {display: block;background: #ff0e3b;padding: 7px 0;color: #fff;margin-bottom: 25px;font-size: 16px;}
	section.remember .logo span.txt_02 {display: block;background: #999;padding: 7px 0;color: #fff;margin-bottom: 35px;}
	section.remember .logo p.remember_01 {width: 266px;height: 99px;background: url(../images/common/remember_01.png)center no-repeat;margin: 0 auto;}
	section.remember .logo p.remember_02 {width: 320px;height: 92px;background: url(../images/common/remember_02.png)center no-repeat;margin: 0 auto;}
	section.remember .company {overflow: hidden;float: left;}
	section.remember .company span.txt_01 {display: block;background: #e5e5e5;padding: 7px 0;color: #222;font-size: 16px;}
	section.remember .company .boxDetail {text-align: left;padding: 30px 20px;}
	section.remember .company .boxDetail h4 {margin: 0 0 10px;font-size: 22px !important;font-family: 'NanumSquareEB';text-align: center;letter-spacing: -0.5px;}
	section.remember .company .boxDetail span {font-size: 15px;font-weight: bold;padding: 10px 0 5px;display: block;letter-spacing: -0.5px;}
	section.remember .company .boxDetail p {font-size: 12px;color: #777;letter-spacing: -0.7px;margin: 0;}

	
	audio {
		display: block;
		position: fixed;
		right: 5%;
		bottom: 0;
		margin: 20px auto;
	  }

	/* 상단 sub 버튼 */

	@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600);
	@font-face {
	  font-weight: normal;
	  font-style: normal;
	  font-family: 'codropsicons';
	  src: url("../fonts/codropsicons/codropsicons.eot");
	  src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg");
	}
	*,
	*:after,
	*:before {
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	}
	.cf:before,
	.cf:after {
	  content: '';
	  display: table;
	}
	.cf:after {
	  clear: both;
	}

	.support {
	  font-weight: bold;
	  padding: 2em 0 0 0;
	  font-size: 1.4em;
	  color: #ee2563;
	  display: none;
	}
	a {
	  color: #333333;
	  text-decoration: none;
	  outline: none;
	}
	a:hover,
	a:focus {
	  color: #a91e24;
	}
	.hidden {
	  position: absolute;
	  width: 0;
	  height: 0;
	  overflow: hidden;
	  pointer-events: none;
	}

	.content {
	  padding: 2em 1em 5em;
	  z-index: 1;
	  max-width: 1000px;
	  margin: 0 auto;
	}
	.content h2 {
	  margin: 0 0 2em;
	}
	.content p {
	  margin: 1em 0;
	  padding: 0 0 2em;
	  font-size: 0.85em;
	}
	.box {
		width: 1000px;
		margin: 0 auto;
	  padding: 0 0 2em;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-flex-wrap: wrap;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  -webkit-justify-content: center;
	  justify-content: space-around;
	}
	

	
	/* Top Navigation Style */
	.codrops-links {
	  position: relative;
	  display: inline-block;
	  white-space: nowrap;
	  font-size: 1.25em;
	  text-align: center;
	}
	.codrops-links::after {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  width: 1px;
	  height: 100%;
	  background: #ffffff;
	  content: '';
	  -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	  transform: rotate3d(0, 0, 1, 22.5deg);
	}
	.codrops-icon {
	  display: inline-block;
	  margin: 0.5em;
	  padding: 0em 0;
	  width: 1.5em;
	  text-decoration: none;
	}
	.codrops-icon:before {
	  margin: 0 5px;
	  text-transform: none;
	  font-weight: normal;
	  font-style: normal;
	  font-variant: normal;
	  font-family: 'pretendard';
	  line-height: 1;
	  speak: none;
	  -webkit-font-smoothing: antialiased;
	}
	.codrops-icon span {
	  display: none;
	}
	.codrops-icon--drop:before {
	  content: "\e001";
	}
	.codrops-icon--prev:before {
	  content: "\e004";
	}
	
	/* Related demos */
	.content--related {
	  text-align: center;
	  font-weight: 600;
	}
	.media-item {
	  display: inline-block;
	  padding: 1em;
	  margin: 1em 0 0 0;
	  vertical-align: top;
	  -webkit-transition: color 0.3s;
	  transition: color 0.3s;
	}
	.media-item__img {
	  opacity: 0.8;
	  max-width: 100%;
	  -webkit-transition: opacity 0.3s;
	  transition: opacity 0.3s;
	}
	.media-item:hover .media-item__img,
	.media-item:focus .media-item__img {
	  opacity: 1;
	}
	.media-item__title {
	  font-size: 0.85em;
	  margin: 0;
	  padding: 0.5em;
	}
	@media screen and (max-width:50em) {
	  .codrops-header {
		padding: 3em 10% 4em;
	  }
	}
	@media screen and (max-width:40em) {
	  .codrops-header h1 {
		font-size: 2.8em;
	  }
	}
	
	/* Box colors */
	.bg-2 {
	  background: #ffffff;
	  color: #ffffff;
	}

	
	/* Common button styles */
	.button {
	  float: left;
	  min-width: 200px;
	  max-width: 300px;
		height: 40px;
	  display: block;
	  margin: 1em;
	  padding: 1em 2em;
	  border: none;
	  background: none;
	  color: inherit;
	  cursor: pointer;
	  vertical-align: middle;
	  position: relative;
	  z-index: 1;
	  -webkit-backface-visibility: hidden;
	  -moz-osx-font-smoothing: grayscale;
	}
	.button:focus {
	  outline: none;
	}
	.button > span {
	  vertical-align: middle;
	}
	
	/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
	.bg-2 .button {
	  color: #333333;
	  border-color: #333333;
	}
	
	/* Sizes */
	.button--size-s {
	  font-size: 12px;
	}
	.button--size-m {
	  font-size: 16px;
	}
	.button--size-l {
	  font-size: 18px;
	}
	
	/* Typography and Roundedness */
	.button--text-upper {
	  letter-spacing: 2px;
	  text-transform: uppercase;
	}
	.button--text-thin {
	  font-weight: 300;
	}
	.button--text-medium {
	  font-weight: 500;
	}
	.button--text-thick {
	  font-weight: 600;
	}
	.button--round-s {
	  border-radius: 5px;
	}
	.button--round-m {
	  border-radius: 15px;
	}
	.button--round-l {
	  border-radius: 40px;
	}
	
	/* Borders */
	.button--border-thin {
	  border: .3px solid;
	}
	.button--border-medium {
	  border: 1px solid;
	}
	.button--border-thick {
	  border: 2px solid;
	}




	.button--winona {
		overflow: hidden;
		padding: 0;
		-webkit-transition: border-color 0.3s, background-color 0.3s;
		transition: border-color 0.3s, background-color 0.3s;
		-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	  }
	  .button--winona::after {
		content: attr(data-text);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		color: #ffffff;
		-webkit-transform: translate3d(0, 25%, 0);
		transform: translate3d(0, 25%, 0);
	  }
	  .button--winona > span {
		display: block;
	  }
	  .button--winona.button--inverted {
		color: #ea6b71;
	  }
	  .button--winona.button--inverted:after {
		color: #fff;
	  }
	  .button--winona::after,
	  .button--winona > span {
		padding: .7em 1em;
		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;
		-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	  }
	  .button--winona:hover {
		border-color: #a91e24;
		background-color: #a91e24;
	  }
	  .button--winona.button--inverted:hover {
		border-color: rgba(169, 30, 36, 1);
		background-color: #ffffff;
	  }
	  .button--winona:hover::after {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
	  .button--winona:hover > span {
		opacity: 0;
		-webkit-transform: translate3d(0, -25%, 0);
		transform: translate3d(0, -25%, 0);
	  }

}
@media (max-width: 767px) {
	.video iframe {width: 100% !important;height: 200px !important; }
	.video .videoTxt {margin: 10px 0 30px;font-size: 14px;}
	.video .videoTxt span {font-size: 12px;}
	.btnMain {font-size: 13px;padding: 5px;height: 40px;letter-spacing: -0.5px;width: 100%;}
	.btnMain02 {margin: 7px 0;}
	.mainBtn {margin-bottom: 0px;}
	section .con ul li a {height: 110px !important;}
	section .con ul li .conTxt a {height: 70px !important;}
	section.remember .topTxt {margin-bottom: 20px;}
	section.remember .topTxt br {display: none;}}
@media (min-width: 768px) {
	.btnMain {font-size: 16px;padding: 5px;height: 50px;letter-spacing: -0.5px;}}
@media (min-width: 768px)and (max-width: 1024px) {
	.video iframe {width: 100% !important;height: 420px !important;}
	.btnMain {font-size: 13px;padding: 5px;height: 40px;letter-spacing: -0.5px;width: 32%;}
	.btnMain02 {margin: 0 10px;}}
@media (max-width: 1024px) {
	.mainBtn a .icon_pdf, .mainBtn a .icon_y, .mainBtn a:hover .icon_pdf, .mainBtn a:hover .icon_y {display: none;}
	section {padding: 50px 0 0;}
	section h2 {font-size: 1.6em;}
	section h3 {font-size: 0.89em;line-height: 1.4em;margin: 5px 0 15px;}
	section .con ul li {margin-bottom: 4px;width: 49.5% !important;margin-right: 0px !important;float: left;}
	section .con ul li:nth-child(2n) {margin-right: 0;float: right;}
	section .con ul li a {width: 100% !important;height: 170px;}
	section .con ul li .conTxt {padding: 10px 0 0;}
	section .con ul li .conTxt a {height: 70px;}
	section .con ul li span {font-size: 1.0em;}
	section .con ul li p {font-size: 0.7em;}
	section.family ul li:nth-child(5) {margin-bottom: 0px;width: 100% !important;margin-right: 0px;}
	section.remember {padding: 50px 0 20px;}
	section.remember span.icon_remember {width: 70px;height: 70px;background-size: 100%;top:60px;}
	section.remember .con {padding: 5px 0 20px;}
	section.remember .topTit {margin: 25px 0 0 80px;}
	section.remember .topTit h4 {font-size: 1.1em;margin: 0 0 5px;}
	section.remember .topTit h3 {font-size: 1.2em;margin: 0 0 10px;}
	section.remember .topTxt {font-size: 0.8em;}
	section.remember .topTxt .point {line-height: 0.9em;}
	section.remember h4 {font-size: 1.2em;margin: 30px 0 5px;}
	section.remember h5 {font-size: 0.8em;margin: 0 0 10px;}
	section.remember .noti {font-size: 0.8em !important;letter-spacing: -0.8px;}
	section.remember .logo span.txt_01, section.remember .logo span.txt_02 {margin-bottom: 0px;font-size: 1.0em;padding: 5px 0;}
	section.remember .logo p.remember_01 {width: 110px;height: 50px;background: url(../images/common/remember_01.png)center no-repeat;background-size: 100%;margin-bottom: 7px;margin-top: 7px;}
	section.remember .logo p.remember_02 {width: 110px;height: 50px;background: url(../images/common/remember_02.png)center no-repeat;background-size: 100%;margin-bottom: 7px;margin-top: 7px;}
	section.remember .company .boxWrap, section.remember .company .boxWrap02 {width: 100%;margin-bottom: 5px;}
	section.remember .company.product .boxWrap .boxDetail, section.remember .company.product .boxWrap02 .boxDetail {padding: 20px 10px 10px;}
	section.remember .company .boxDetail {padding: 10px;}
	section.remember .company span.txt_01, section.remember .company span.txt_02 {margin-bottom: 10px;font-size: 1.0em;padding: 5px 0;}
	section.remember .company .boxDetail h4 {font-size: 1.0em !important;margin: 0;}
	section.remember .company .boxDetail span {font-size: 0.8em;}}
@media (min-width: 1200px) {
	.btnMain {font-size: 24px;height: 70px;padding: 8px 20px 8px;}
	section.remember .logo .boxWrap, section.remember .logo .boxWrap02 {height: 200px;}
	section.remember .company .boxWrap, section.remember .company .boxWrap02 {height: 175px;}
	section.remember .company.product .boxWrap, section.remember .company.product .boxWrap02 {height: 165px;}
}