@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');

html,body{
	margin:0; padding:0;
    font-family : 'Pretendard', sans-serif;
    font-size:16px;
    color:#191919;
	letter-spacing:-0.2px;
	line-height: 1.4;
}

/* placeholder */
::-webkit-input-placeholder { color:#b2b2b2; font-size:1rem;}
::-moz-placeholder { color:#b2b2b2; font-size:1rem;} /* firefox 19+ */
:-ms-input-placeholder { color:#b2b2b2; font-size:1rem;} /* ie */
input:-moz-placeholder { color:#b2b2b2; font-size:1rem;}

.italic{font-style:italic;}
.relaover {position:relative; overflow:hidden;}
.txt-center {text-align:center !important;}
.txt-left {text-align:left;}
.txt-right {text-align:right;}
.img-center {margin:50px auto; display:block;}
.compulsory {display:inline-block; color:#e81515; position:relative; top:6px; margin-left:5px; font-size:18px; font-weight:500;}
.flex-between {display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}
.figure {display:block; text-align:center}
.figure img {width:90%}
.figure.mb {display:none}
.figure.mb img {width:100%}
hr.w40 {width:40px; margin:18px auto; border:0; border-bottom:1px solid #828282; }
hr.w50 {width:50px; margin:20px auto 50px; border:0; border-bottom:2px solid #fff; }

.white {color:#fff !important}
.blue {color:#0f97e7 !important}
.bg-gray {background-color:#f7f7f7;}

.center {text-align:center; }
.left {text-align:left; }
.right {text-align:right; }

/*----------------------------------------------------------
 INPUT
----------------------------------------------------------*/
input:focus,
textarea,
select {outline:none; border:0;}
label {display:inline-block; font-size:15px; color:#222; font-weight:500; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #222; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition:background-color 5000s ease-in-out 0s; }
input[type="text"] { width:100%; padding:0 20px; font-size:1rem; background:transparent; height:60px; line-height:60px; vertical-align:middle; box-sizing:border-box; border:1px solid #ddd; background-color:#fff;}


/*----------------------------------------------------------
 ICON BUTTONS
----------------------------------------------------------*/
.icon-i {display:inline-block; vertical-align:middle; background-size:cover;}
.i-arrow { width:8px; height:5px; background:url("../img/arrow_select.png") center no-repeat; background-size:cover; margin-left:5px}
.i-more { width:18px; height:14px; background:url("../img/btn_more.png") center no-repeat; background-size:cover; margin-left:10px; position:relative; top:-1px}
.i-bd-top-arrow {width:10px; height:6px; background-image:url('../img/icon_arrow_top_bd.png'); margin-right:15px; position:relative; top:-2px;}
.i-bd-bottom-arrow {width:10px; height:6px; background-image:url('../img/icon_arrow_bottom_bd.png'); margin-right:15px; position:relative; top:-2px;}

.btn-wrap {font-size:0; text-align:center; margin:50px 0;}
.btn {position:relative; display:inline-block; text-align:center; vertical-align:middle; box-sizing:border-box; border:0; padding:0; border-radius:60px;}
.btn.block {display:block; margin:0 auto;}
.btn.lg {width:200px; line-height:54px; font-size:1.125rem;}
.btn.xl {width:300px; line-height:60px; font-size:1.125rem;}
.btn.border {border:1px solid #fff;}
.btn.border.bk {border:1px solid #ddd;}


/* INDEX LAYOUT
=================================================== */
html,body {height:100%;}
section {padding:0;}
.inner {max-width: 1600px; width: 100%; margin: 0 auto; padding:0 100px}


/* HEADER
=================================================== */
.sub_img {position:relative; top: 0; left: 0; width: 100%; height:95px; background:url("../img/bg_img.png") center no-repeat; background-size:cover;  }
.header {display:flex; position:fixed; top: 0; left: 0; width: 100%;  align-items:center; box-sizing:border-box; padding:0 100px; z-index:999; }
.header::after {content:''; position:absolute; top: 95px; left: 0; width: 100%; height: 1px; background: #eee; opacity: 0.3; z-index: -1; opacity: 0;}
.header::before {content:''; position:absolute; top: 0; left: 0; width: 100%; display:block; height: 95px; background: #000; opacity: 0; transition:0.4s; z-index: -1}
.header.scroll::before {opacity: 0.5; top: 0;}

.header .logo {position:relative; width: 150px; height:35px; background:url("../img/logo.png") center no-repeat; background-size:cover;  top: 20px;}
.header .logo a {position:absolute; top: 0; right: 0; bottom: 0; left: 0 ;} 
.header .gnb {width: calc(100% - 263px);}
.header .gnb > ul {display:flex; justify-content:center;}
.header .gnb > ul > li {position:relative; }
.header .gnb > ul > li > a {position:relative; display:inline-block; vertical-align: top; line-height:95px; font-weight:500; font-size:16px; color: #fff; padding: 0 45px; transition:0.4s}
.header .gnb > ul > li > a::after {content:""; position:absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background:#fff; transition:0.4s; transform:translateX(-50%);} 
.header .header__ui {width: 230px;}
.header .header__ui .r_menu {position:relative; z-index: 20; top: 20px;}
.header .header__ui .r_menu > li {position:relative; cursor: pointer; padding-right: 10px; float:left; }
.header .header__ui .r_menu li span {display:inline-block; font-weight:300; font-size:16px; color: #fff;vertical-align: middle;}
.header .header__ui .m_btn {display:none; position:relative; width: 27px; height: 27px; text-align: center;cursor: pointer; z-index: 20;}
.header .header__ui .m_btn span{display:inline-block; vertical-align: top; position:relative; width: 27px; height:2px; background: #fff; margin-top: 12px; transition:0.3s}
.header .header__ui .m_btn span::after{content:""; display:inline-block; vertical-align: top;  position:absolute; top: -8px; left: 0; width: 27px; height:2px; background: #fff; transition:0.3s}
.header .header__ui .m_btn span::before{content:""; display:inline-block; vertical-align: top;  position:absolute; top: 8px; left: 0; width: 16px; height:2px; background: #fff; transition:0.3s}
.header .header__ui .m_gnb {position:fixed; top: 0; right: -100%; width: 100%; max-width: 640px; height: 100%; background: #000000d6; transition:0.6s}
.header .header__ui .m_gnb > ul {margin-top:100px;}
.header .header__ui .m_gnb > ul > li > a {width: 100%; display:block; font-weight:600; font-size:40px; color: #fff; padding:25px 60px;}
.header .gnb > ul > li:hover > a::after{width: 100%;}
.header.hover::after {opacity: 0.3;}
.header.hover .gnb > ul > li > a {padding: 0 3.92vw;}
.header .header__ui .m_btn.on span{background: transparent;}
.header .header__ui .m_btn.on span::before{width: 27px; top: 0; transform:rotate(45deg);}
.header .header__ui .m_btn.on span::after{top: 0; transform:rotate(-45deg);}
.header .header__ui .m_gnb.on{right: 0;}


/* MAIN
=================================================== */
.visual { position:relative; width:100%; overflow:hidden; height: 100vh; z-index: 2; overflow: hidden;}
.visual .visual__txt { position: absolute; top:38%; left:25%; z-index:99}
.visual .visual__txt .txt__01 {font-family: 'Nanum Myeongjo'; font-size:3.125rem; color:#fff; font-weight:700}
.visual .visual__txt .txt__01.mb {font-family: 'Nanum Myeongjo'; display:none}
.visual .visual__txt .txt__02 {font-size:1.5rem; color:#fff; margin-top:10px}
.visual .visual__txt .btn.lg {margin-top:50px}
.visual .visual__videobox {position:relative; width:100%; height:100%}
.visual .visual__videobox video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.visual.sub {height:800px; background:url("../img/news_bg.jpg") center no-repeat; background-size:cover; background-attachment: fixed;} 
.visual.sub .visual__subtxt { position:relative; top:45%; left:unset}
.visual.sub .visual__subtxt .txt__01 {font-size:3.125rem; color:#fff; font-weight:700}
.visual.sub .visual__subtxt .txt__02 {font-size:1.5rem; color:#fff; margin-top:10px}

.titlewrap h3 { font-size:4rem; color:#191919; font-weight:700; }
.titlewrap h3 span {display:block; font-weight:300; font-size:1.875rem; }
.titlewrap .desc {font-size:1rem; margin-top:10px;}

.privacy .titlewrap,
.news .titlewrap,
.service .titlewrap,
.partners .titlewrap,
.newsboard .titlewrap {margin-bottom:70px}

.about, .news, .partners, .service, .newsboard  {padding:50px 0 50px 0;}
.privacy {padding:50px 0 200px 0;}
.about {background:url("../img/gene_bg_01.png") center no-repeat; background-size:cover}
.about .titlewrap {flex:0 0 700px}
.about__content {position:relative;}
.about__content {font-size:1.0625rem;}
.about__content h1 {  line-height:inherit; color: #3d41bd; }
.about__content h2 {  line-height:inherit; color: #3d41bd;}
.about__content .content-txt { margin-top: 50px; }
.about__content .content-txt p{ line-height:inherit; }


#about_wrap .about-anc { position:relative; margin-bottom:70px;}
#about_wrap .about-anc .title {display:inline-block; font-size:25px; border-bottom: 1px solid #eaeaea; -webkit-box-shadow: inset 0 -10px 0 #eaeaea; box-shadow: inset 0 -10px 0 #eaeaea; margin-bottom:15px;}
#about_wrap .about-anc .title-wrap-02 { margin: 0; }
#about_wrap .about-anc .title-wrap-02 .tit {position:relative;font-size:35px;color:#222;text-align:left;font-weight:500;letter-spacing:-1px;}
#about_wrap .about-anc .title-wrap-02 .tit:after {content:''; display:block; position:absolute; bottom:-10px; left:0; height:3px; width:45px; background-color:#3d41bd;}
#about_wrap .titlewrap { padding-left: 20px; }
#about_wrap .titlewrap .about_img { width: 100% }

.sign_warp { margin-top: 100px; }
.sign_warp h1.sign{}
.sign_warp h1.position{}

.product {background:url("../img/product_bg.jpg") center no-repeat; background-size:cover; background-attachment: fixed;}
.product .titlewrap {margin-bottom:140px}
.product .titlewrap h3 {color:#fff;}
.product .titlewrap h3 span {display:block; font-weight:100; font-size:3.125rem; }
.product__content {display:flex; margin-bottom:50px}
.product__content .item {position:relative; width:33.3333%; margin-right:40px}
.product__content .item:last-child {margin-right:0}
.product__content .item .product__imgwrap img {width:100%; height:100%;}
.product__content .item .product__text {min-height:170px; text-align:center;}
.product__content .item .product__text .title {color:#fff; font-size:1.5rem; font-weight:700; margin-bottom:30px}
.product__content .item .product__text .desc {color:#fff; font-size:1.0625rem}

.service {background:url("../img/gene_bg_02.png") center no-repeat; background-size:cover;}
.service .titlewrap h3 span {display:block; font-weight:100; font-size:50px; }
.service__content {display:flex; justify-content:space-between;}
.service__content .img-wrap img {width:100%}
.service__content .img-wrap.mb {display:none}
.service__content .service__text {margin-top:15%; margin-left:70px}
.service__content .service__text .text-wrap .title {font-size:2.5rem; color:#191919; font-weight:300; }
.service__content .service__text .text-wrap .desc {font-size:1.25rem; margin-top:10px}
.service__content .service__text ul {margin-top:50px}
.service__content .service__text ul li {font-size:1.5rem; font-weight:700; line-height:2}

.news .titlewrap {position:relative}
.news .titlewrap .btn-more-02 {position:absolute; right:0; top:80px; font-size: 1rem; font-weight: 500;}
.news__content {position: relative; width: 100%;}
.news__content .item {transition:all .3s ease-out}
.news__content .item .img-wrap img {width:100%; height:100%; border-top-left-radius:30px; border-bottom-right-radius:30px;}
.news__content .item .info-wrap {padding:20px 0 0}
.news__content .item .info-wrap .title {font-size:1rem; font-weight:700; margin-bottom:10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news__content .item .info-wrap .desc {font-size:1rem;}
.news__content .item .info-wrap .date {font-size:0.875rem; color:#999; margin-top:30px}
.swiper-pagination {position:relative; margin-top:50px;}
.swiper-pagination-bullet { width: 28px; height: 8px; border-radius:10px; margin-right:5px}
.swiper-pagination-bullet-active {background:#000}

.partners__content .list-wrap {position: relative; width: 100%; display: flex; flex-wrap: wrap;}
.partners__content .list {border: 1px solid #ddd; width: calc(20.7% - 30px); border-top-left-radius:30px; border-bottom-right-radius:30px; overflow: hidden; margin-right: 25px; text-align: center; background: #fff; transition:all .3s ease-out}
.partners__content .list img {width:100%}
.partners__content .list:nth-child(5n){margin-right: 0;}
.partners__content .list:nth-child(n+6){margin-top: 25px;}

.newsboard .titlewrap h3 {font-size:3rem}
.newsboard .inner {max-width:1400px}
.newsboard .titlewrap {position:relative}
.newsboard .titlewrap .search-wrap {position:absolute; right:0; top:24px;}
.newsboard .titlewrap .search-wrap .search-form {position:relative; width:500px}
.newsboard .titlewrap .search-wrap .search-form input {width:100%; border-radius:50px;}
.newsboard .titlewrap .search-wrap .search-form .btn-search {position:absolute; right:20px; top:18px; display:block; width:22px; height:22px; background:url("../img/btn_search.png") center no-repeat; background-size:cover}

.board__content .total {font-size:1.125rem; font-weight:500; margin-bottom:30px}
.board__content .bd-list {display:flex; flex-wrap: wrap;}
.board__content .bd-list .bd-box {position:relative; width: calc(33.3333% - 20px); min-height:300px; padding:50px 30px; background-color:#fff; border:1px solid #ddd; border-top-left-radius:30px; border-bottom-right-radius:30px; margin-right:30px; transition:all .3s ease-out}
.board__content .bd-list .bd-box:nth-child(3n) {margin-right:0}
.board__content .bd-list .bd-box:nth-child(n+4){margin-top:30px;}
.board__content .bd-list .bd-box:hover {border: 1px solid #2093f5;}
.board__content .bd-list .bd-box .class {margin-bottom:30px}
.board__content .bd-list .bd-box .class span {font-size:1rem; font-weight:700;}
.board__content .bd-list .bd-box .class span:last-child {margin-left:10px}
.board__content .bd-list .bd-box .tit {font-size:1.5rem; font-weight:700; margin-bottom:10px; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
.board__content .bd-list .bd-box .desc {font-size:1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.board__content .bd-list .bd-box .date {position: absolute; bottom: 12px; left: 30px; font-size:0.875rem; color:#999;}
.board__content .btn-more {margin-top:70px}

.board__content .bd-wrap {width:100%;}
.board__content .bd-wrap .sec-01 {border-top:1px solid #ddd; background-color:#fff;}
.board__content .bd-wrap .sec-01 .title-wrap {padding:30px; border-bottom:1px solid #ddd; margin:0;}
.board__content .bd-wrap .sec-01 .title-wrap .title {font-size:1.375rem; color:#222; font-weight:400; margin-bottom:7px;}
.board__content .bd-wrap .sec-01 .title-wrap .date {font-size:1rem; color:#999;}
.board__content .bd-wrap .sec-02 {padding:50px 30px;}
.board__content .bd-wrap .sec-02 p {font-size:1.0625rem; color:#222; line-height:1.4;}
.board__content .bd-wrap .sec-03 dl {position:relative; overflow:hidden;}
.board__content .bd-wrap .sec-03 dl:first-child {border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.board__content .bd-wrap .sec-03 dl:last-child {border-bottom:1px solid #ddd;}
.board__content .bd-wrap .sec-03 dl dt {float:left; width:134px; text-align:center; line-height:60px; font-size:1rem; color:#333; font-weight:400;}
.board__content .bd-wrap .sec-03 dl dd {padding-left:140px; line-height:60px; font-size:1rem; color:#555;}
.board__content .bd-wrap .sec-03 dl dd a {display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.board__content .bd-wrap .bd-btn-wrap {margin-top:50px; text-align:center}
.board__content .bd-wrap .bd-btn-wrap .btn {background-color:#333; width:250px}

/* FOOTER
===================================================== */
.footer {position:relative; background-color:#232323; }
.footer .inner {padding:50px 40px 10px;}
.footer .inner .footer-logo { display: inline-block; vertical-align: top;   padding-left: 22px; padding-bottom: 22px;}
.footer .inner .footer-logo h1 {width: 150px; height:35px; background:url("../img/logo.png") center no-repeat; background-size:cover;  top: 20px; } 
.footer .info { display: inline-block; padding-left: 20px; }
.footer .info p {display:block; font-size:0.875rem; color:#999; margin-right:20px; margin-bottom:10px;}
.footer .info p:last-child {margin-right:0}
.copyright { background-color: #000; width: 100%; height: 50px; padding-left: 40px; padding-top: 10px;}
.copyright div {
	display: inline-block;
}
.copyright div.left {width: 40%;}
.copyright div.right {width: 58%;}
.copyright div p { font-size:0.87rem; color:#999; letter-spacing:0.5px; }


/* 팝업 */
.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 1000;
}
.popup_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
	box-shadow: 0 0 24px rgba(0,0,0,0.4);
	border-radius: 30px;
}
.popup_header {	
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: right;
	height: 60px;
	padding: 25px 25px 0 0;
	font-size: 20px;
}

.popup_clse {display:inline-block;*display:inline;}
.popup_clse:after {display: inline-block;content: "\00d7"; font-size:15pt; font-weight: bold;}

.popup_header .popup_clse input.popup_btn_clse {
	width:60px;
	height: 60px;
	border: 0;
	cursor: pointer;
	background: #191919 url(../Member/Img/icn_popup_clse.png) no-repeat center center;
	text-indent: -5000em;
}
.flex_column_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.popup_btn_wrap {
	position: relative;
	padding: 60px 0 0 0;
	text-align: center;
}
.popup_btn_wrap2 {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	padding: 60px 0 0 0;
	text-align: center;
}
input.popup_btn_comm {
	background: #fff;
	border: 1px solid #191919;
	border-radius: 2px;
	color: #191919;
	letter-spacing: -0.6px;
	line-height: 1.5;
	font-weight: bold;
	font-size: 20px;
	height: 60px;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0 12px 18px rgba(0,0,0,0.1);
}
input.red {
	border: 1px solid #f53939;
	color: #f53939;
	box-shadow: 0 12px 18px rgba(245,57,57,0.1);
}
input.blue {
	border: 1px solid #336dff;
	color: #336dff;
	box-shadow: 0 12px 18px rgba(51,109,255,0.1);
}
input.black {
	border: 1px solid #191919;
	color: #191919;
	box-shadow: 0 12px 18px rgba(0,0,0,0.1);
}
.popup_footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 20px 0 0;
	height: 60px;
}
.cf53939 {
	color: #f53939 !important;
}
#login_wrap { display: none; }
#login_wrap .popup_wrap { width: 500px; }
.login_box { width:100%; margin:0 auto; padding:50px; }
.login_box > .logo { width:100%; height:50px;  margin: 0 auto; text-align:center; font-size:1.5rem; font-family:'NANUM-SQUEARE'}
.login_content { width:100%; margin:0 auto; margin-top:20px; }

.login_input {position: relative;}
.login_input input {
  width: 100%;					/* 원하는 너비 설정 */ 
  height: 50px;					/* 높이값 초기화 */
  line-height : normal;			/* line-height 초기화 */
  margin-bottom:20px;
  padding: 9px 20px;			/* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
  font-family: inherit;			/* 폰트 상속 */
  outline-style: none;			/* 포커스시 발생하는 효과 제거를 원한다면 */
  -webkit-appearance: none;		/* 브라우저별 기본 스타일링 제거 */
  -moz-appearance: none;
  appearance: none;
  border-radius:5px 5px;
  background:#f3f3f3;
  font-size:1.1rem;
  box-sizing:border-box
}


.login_other { width:100%; margin-top: 10px; font-size:1rem; letter-spacing:-1px; }
.login_other > ul { width:100%; overflow:hidden; }
.login_other > ul > li { float:left; height:25px; }
.login_other > ul > li:nth-child(1) { width:50%; } 
.login_other > ul > li:nth-child(2) { width:25%; text-align:right } 
.login_other > ul > li:nth-child(3) { width:25%; text-align:right; }
.login_btn { width:100%; }
.login_alert { width:100%; margin:20px; font-size:1rem; letter-spacing:0px; text-align:left;}


.area_signup_btn2 {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.abtn_dark {display:block; width:100%;	height:50px; line-height:50px; text-align:center; background:#555555; color:#ffffff; font-size:1.3rem;	border:1px solid #555555; border-radius:5px 5px; }
.abtn_gray {display:block; width:100%;	height:50px; line-height:50px; text-align:center; background:#f3f3f3; color:#555555; font-size:1.3rem;	border:1px solid #f3f3f3; border-radius:5px 5px; }
.abtn_blue {display:block; width:100%;	height:50px; line-height:50px; text-align:center; background:#337ab7; color:#ffffff; font-size:1.3rem;	border:1px solid #337ab7; border-radius:5px 5px; }

#join_wrap { display: none; }
#join_wrap .popup_wrap { max-width: 600px; }

.join_box { width:100%; margin:0 auto; padding: 0 50px 50px 50px; }
.join_box > .logo { width:100%; height:50px;  margin: 0 auto; text-align:center; font-size:1.5rem; font-family:'NANUM-SQUEARE'}
.join_content { width:100%; margin:0 auto; margin-top:20px; }

.join_line2 {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
.join_line1 {
	position: relative;
}

.join_input {position: relative;}
.join_input input, select {
  width: 100%;					/* 원하는 너비 설정 */ 
  height: 40px;					/* 높이값 초기화 */
  line-height : normal;			/* line-height 초기화 */
  margin-bottom:10px;
  padding: 9px 20px;			/* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
  font-family: inherit;			/* 폰트 상속 */
  outline-style: none;			/* 포커스시 발생하는 효과 제거를 원한다면 */
  border-radius:5px 5px;
  background:#f3f3f3;
  font-size:1.1rem;
  box-sizing:border-box
}


#find_id_wrap .popup_wrap { width: 500px; }


#find_pw_wrap .popup_wrap { width: 500px; }


#welcome_wrap .popup_wrap { max-width: 600px; }

.overlay {display: none;}

.btn_blue_save { width:80px; height:50px; line-height:50px; margin-bottom:10px; background:#337ab7; color:#ffffff; border:1px solid #337ab7; border-radius:5px 5px; text-align:center; font-size:1.3rem; font-weight:bold; cursor:pointer }
.btn_line { width:100%; height:50px; margin-top:50px; text-align:center; display: flex; justify-content: center; align-items: center; }
.btn_save { width:120px; height:50px; line-height:50px; margin-bottom:10px; background:#333333; color:#ffffff; border:1px solid #333333; border-radius:5px 5px; text-align:center; font-size:1.3rem; font-weight:bold; cursor:pointer }
.btn_del { width:120px; height:50px; line-height:50px; margin-bottom:10px; background:#333333; color:#ffffff; border:1px solid #333333; border-radius:5px 5px; text-align:center; font-size:1.3rem; font-weight:bold; cursor:pointer }
.btn_close { width:120px; height:50px; line-height:50px; margin-bottom:10px; background:#333333; color:#ffffff; border:1px solid #333333; border-radius:5px 5px; text-align:center; font-size:1.3rem; font-weight:bold; cursor:pointer }
.float_btn { position:fixed; top:50px; right:10px; width:80px; height:50px; line-height:50px; background:#333333; color:#ffffff; border:1px solid #333333; border-radius:5px 5px; text-align:center; font-size:1.3rem; font-weight:bold; cursor:pointer }
.float_btns { position:fixed; top:50px; right:10px; width:80px; }


/* RESPONSIVE
=================================================== */


@media (max-width: 1400px){

	.header .gnb > ul > li > a {padding:0 35px}
	#about_wrap .titlewrap .about_img { width: 90% }

}

@media (max-width: 1200px){

	.inner {padding:0 40px}
	.flex-between {flex-direction: column;}
	.figure img {width:100%}
	.titlewrap h3 {font-size:2.8125rem}
	
	.about, .product, .news, .partners, .service, .newsboard {padding:100px 0;}
	.about .titlewrap {flex:0; margin-bottom:50px}

	.header { align-items:center; justify-content:space-between; padding: 0 20px;}
	.header::before { }
	.header .logo {width: 130px; height:36px;}
	.header .gnb {display:none;}
	.header .header__ui {display:flex; width: auto;}
	.header .header__ui .m_btn {display:block; margin-left:30px; top: 20px;}

	.service__content .service__text {margin-top:12%; margin-left:50px}
	.service__content .service__text .text-wrap .title {font-size:35px}
	.service__content .service__text .text-wrap .desc {font-size:1.125rem;}
	.service__content .service__text ul li {font-size:1.25rem;}

	.news .titlewrap .btn-more-02 {top:60px; font-size:0.9375rem}

	.partners__content .list-wrap {justify-content: space-between;}
	.partners__content .list {width: calc(33.3333% - 25px);}
	.partners__content .list:nth-child(5n) {margin-right:25px}
	.partners__content .list:nth-child(3n){margin-right: 0;}
	.partners__content .list:nth-child(n+4){margin-top:25px;}

	.newsboard .titlewrap h3 {font-size:2.8125rem}
	.newsboard .titlewrap .search-wrap {top:27px;}
	.newsboard .titlewrap .search-wrap .search-form {width:400px}
	.newsboard .titlewrap .search-wrap .search-form input {height:55px; line-height:55px}
	.newsboard .titlewrap .search-wrap .search-form .btn-search {top:16px;}

	.board__content .bd-list .bd-box {width: calc(50% - 15px); min-height:300px; margin-right:30px;}
	.board__content .bd-list .bd-box:nth-child(2n) {margin-right:0}
	.board__content .bd-list .bd-box:nth-child(3n) {margin-right:30px}
	.board__content .bd-list .bd-box:nth-child(n+4){margin-top:0;}
	.board__content .bd-list .bd-box:nth-child(n+3){margin-top:30px;}
	

	.footer .inner {padding:50px 40px;}
	
	#about_wrap .titlewrap { padding-top: 10px; text-align: center; }
	


}

@media (max-width:768px){

	.inner {padding:0 20px}
	.footer .inner {padding:50px 20px;}	
	.figure {display:none}
	.figure.mb {display:block}
	.titlewrap h3 {font-size:2.1875rem} 
	
	.visual .visual__txt .txt__01 {font-size:40px;}
	.visual .visual__txt .txt__02 {font-size:20px;}
	.visual.sub {height:500px;} 

	.product .titlewrap, .news .titlewrap, .service .titlewrap, .partners .titlewrap, .newsboard .titlewrap {margin-bottom:50px}
    
	.about {background: url("../img/gene_bg_01.png") right bottom no-repeat; background-size: 130%;}
		
	.product .titlewrap {margin-bottom:100px}
	.product .titlewrap h3 span {font-size:40px;}
	.product__content {flex-direction: column; align-items: center; margin-bottom:0}
	.product__content .item {width:80%; margin-right:0}

	.service .titlewrap h3 span {font-size:2.5rem;}
	.service__content .service__text {margin-top:10%; margin-left:20px}
	.service__content .service__text .text-wrap .title {font-size:26px}
	.service__content .service__text .text-wrap .desc {font-size:1rem;}
	.service__content .service__text ul {margin-top:30px}
	.service__content .service__text ul li {font-size:1.125rem;}

	.news .titlewrap .btn-more-02 {top:50px;}

	.partners__content .list {width: calc(50% - 10px); margin-right:10px}
	.partners__content .list:nth-child(2n) {margin-right:0;}
	.partners__content .list:nth-child(5n) {margin-right:0}
	.partners__content .list:nth-child(3n){margin-right:0;}
	.partners__content .list:nth-child(n+2){margin-top:0;}
	.partners__content .list:nth-child(n+3){margin-top:20px;}
		
	.newsboard .titlewrap h3 {font-size:2.1875rem;}
	.newsboard .titlewrap .search-wrap {position:relative; top:unset; margin-top:30px}
	.newsboard .titlewrap .search-wrap .search-form {width:100%}
	.newsboard .titlewrap .search-wrap .search-form input {height:55px; line-height:55px}
	.newsboard .titlewrap .search-wrap .search-form .btn-search {top:16px;}
	.board__content .btn-more {margin-top:50px}

	.board__content .bd-wrap .sec-01 .title-wrap {padding:20px 10px;}
	.board__content .bd-wrap .sec-01 .title-wrap .title {font-size:1.125rem;}
	.board__content .bd-wrap .sec-02 {padding:50px 10px;}
	.board__content .bd-wrap .sec-02 p {font-size:1rem;}
	.board__content .bd-wrap .sec-03 dl dt {width:112px; line-height:50px; font-size:0.875rem; font-weight:500}
	.board__content .bd-wrap .sec-03 dl dd {padding-left:125px; line-height:50px; font-size:0.875rem;}

}


@media (max-width:570px){


	.btn.lg {width:180px; line-height:50px; font-size:1rem;}
	.btn.xl {width:240px; line-height:55px; font-size:1rem;}

	.header .header__ui .m_btn {margin-left:20px;}
	.header .header__ui .m_gnb > ul > li > a {padding:15px 30px; font-size:30px}

	.visual .visual__txt .txt__01 {display:none}
	.visual .visual__txt .txt__01.mb {display:block; font-size:30px}
	.visual .visual__txt .txt__02 {font-size:1.125rem}

	.about__content .content__text {font-size:1rem}

	.product .titlewrap {margin-bottom:70px}
	.product__content .item .product__text .title {font-size:1.125rem;}
	.product__content .item .product__text .desc {font-size:1rem}

	.service__content {flex-direction: column;}
	.service__content .img-wrap {display:none}
	.service__content .img-wrap.mb {display:block}
	.service__content .service__text {text-align:center; margin-left:0}
	.service__content .service__text .text-wrap .title {font-size:30px}
	.service__content .service__text .text-wrap .desc {font-size:1.125rem;}
	.service__content .service__text ul {margin-bottom:30px}
	.service__content .service__text ul li {font-size:1.25rem;}

	.news .titlewrap .btn-more-02 {top:90px; font-size:0.875rem}

	.board__content .bd-list .bd-box {width:100%; min-height:300px; margin:0; margin-bottom:30px}
	.board__content .bd-list .bd-box:nth-child(n+3) {margin-top:0}	
	.board__content .bd-list .bd-box:nth-child(3n) {margin-right:0;}
	.board__content .btn-more {margin-top:30px}
	.join_box > .logo { font-size: 1.2rem;}

}

@media (max-width:480px){

	.header .logo {width:100px; height:27px;}
	.header .header__ui .m_btn {margin-left:20px;}
	.header .header__ui .m_gnb > ul > li > a {padding:15px 30px; font-size:30px}
	
	#login_wrap .popup_wrap { width: 425px; }
	.join_box > .logo { font-size: 1rem;}

}

@media (max-width:380px){

	.header .header__ui .m_btn {margin-left:20px;}
	.header .header__ui .m_gnb > ul > li > a {padding:15px 30px; font-size:30px}

	.about, .product, .news, .partners, .service, .newsboard  {padding:70px 0; }

	.service__content .service__text .text-wrap .title {font-size:25px}
	.service__content .service__text .text-wrap .desc {font-size:1rem;}
	.service__content .service__text ul {margin-bottom:30px}
	.service__content .service__text ul li {font-size:1.25rem;}

	
	#login_wrap .popup_wrap { width: 300px; }
	.login_other > ul > li:nth-child(1) { width:50%; } 
	.login_other > ul > li:nth-child(2) { width:15%; text-align:right } 
	.login_other > ul > li:nth-child(3) { width:35%; text-align:right; }
}