@charset "utf-8";

* {margin:0; padding:0; font-family: 'NanumBarunGothic', sans-serif; font-size:16px; font-weight:400; line-height:100%; letter-spacing: -0.012em; color: #484848;}

/* 
@media screen and (max-width: 1280px) {
	* {font-size:14px;}
} */
/*mobile*/
@media screen and (max-width: 768px) {
	* {font-size:14px;}
}

html		{height: 100%; overflow-x: hidden;overflow-y:scroll; -webkit-overflow-scrolling:touch;}
body		{width:100%; height:100%;}
ul, ol, li		{list-style:none;}
img, hr		{border:none;}
img			{vertical-align:top; border:0;}

/* Link Style */
a			{text-decoration:none;}
a:visited		{text-decoration:none;}
a:active		{text-decoration:none;}
a:hover		{text-decoration:none;}

/* Table Style */
table			{border-collapse:collapse; border-spacing:0; width:100%;}
table td img	{vertical-align:middle;}

/* tag all font-size set */
p,div,ul,li,dl,dt,dd,ol,a,em,strong,fieldset,textarea,input,select,span,table,th,td,address,cite,button,
h1,h2,h3,h4,h5,h6 {margin-block-start: 0; margin-block-end: 0; -webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-appearance:none; -webkit-border-radius:0;}

/* From Style */
input			{vertical-align:middle;}
hr, caption		{display:none;}
legend		{position:absolute; height:0; font-size:0px; line-height:0; overflow:hidden; text-indent:-20000px;}
address,cite,em	{font-style:normal;}
fieldset		{border:0; padding:0;}
label			{cursor:pointer;}
button		{cursor:pointer; border:0; background:none; display:block;}
button:focus {outline: none;}
select::-ms-expand{display:none;} 

/* html5 set */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {display: block;}
mark{background:none;}

/* ie11 input click */
input::-ms-clear {display:none;}

/* skip hidden */
.skip {visibility: hidden; position: absolute; top: 0; left: 0;}
.hidden {visibility: hidden;}
.opacity {opacity: 0;}
.scrollBlock {overflow-y: hidden;}

/* common class */
#wrap {width: 100%; height: 100%; box-sizing: border-box; position: relative;}
.container {width: 100%; height: 100%; font-size: 0; max-width: 1320px; margin: 0 auto; position: relative; padding: 0 20px; box-sizing: border-box;}
.content p {line-height: 130%;}
.content .fLeft {float: left; width: 50%; height: 100%; position: relative;}
.content .fRight {float: right; width: 50%; height: 100%;}
.content .boxWrap {box-sizing: border-box; box-shadow: 0 6px 6px rgba(0,0,0,0.16);}
.pdt-first {padding-top: 96px;}
.font-ns {font-family: 'NanumSquare', sans-serif;}

/* common btn */
.bt-linker {width: 170px; line-height: 40px; font-weight: 700; text-align: left; padding-left: 14px; color: #FFFFFF; border: 1px solid #FFFFFF; box-sizing: border-box; display: inline-block; position: relative; z-index: 1; -webkit-transition: border-color .3s; transition: border-color .3s;}
.bt-linker:hover {border-color: #BE272D;}
.bt-linker::before {content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: linear-gradient( to right, #BE272D, #CB2C3E); z-index: -1; -webkit-transition: width .3s; transition: width .3s;}
.bt-linker:hover::before {width: 100%;}
.bt-linker::after {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../image/bt_arrow_right.png")no-repeat right/contain;}
.bt-toggle {width: 170px; line-height: 40px; font-weight: 700; text-align: center; color: #FFFFFF; position: relative; z-index: 1;}
.bt-toggle::after {content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute;background-color: #293742; z-index: -1;}
.bt-toggle::before {content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: linear-gradient( to right, #BE272D, #CB2C3E); z-index: -1; -webkit-transition: transform .3s; transition: transform .3s;}
.bt-toggle.pressed::before {transform: translate(8px, 8px);}
.bt-top {position: absolute; width: 32px; height: 32px; right: 20px; bottom: 6px; background: url("../image/bt_arrow_up_s.png")no-repeat center/20px, linear-gradient( to right, #BE272D, #CB2C3E);}
.selectBtn {width: 124px; height: 32px; text-align: left; font-size: 14px; font-weight: 500; line-height: 31px; border: 1px solid #DFE4E8; position: relative; background: #ffffff url("../image/bt_select_b.png")no-repeat 95px center/22px; cursor: pointer; padding-left: 16px; box-sizing: border-box; display: inline-block;}
.selectBtn .selectBox {width: 100%; position: absolute; top: 30px; right: -1px; background-color: #ffffff; padding: 8px 0; z-index: 10; display: none; border: 1px solid #DFE4E8;}
.selectBtn .list {font-size: 14px; font-weight: 500; padding: 8px; position: relative; display: block;}
.selectBtn .list:hover {background-color: #E2E2E2;}

/* common bg */
#bgChanger,
#bgFront {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; position: absolute; background-position: center;}
.bg-pattern {background-color: #202A31; background-image: url("../image/pattern-hwarang.svg"); background-repeat: repeat; background-size: 160px;}
.bg-gradient-red {background: linear-gradient( to right, #BE272D, #CB2C3E);} 

/* common border */
.bdt-navy02 {border-top: 2px solid #293742;}
.bdt-gray02 {border-top: 2px solid #919191;}

/* common responsive */
@media screen and (max-width: 480px) {
	.container {padding: 0 16px;}
	.pdt-first {padding-top: 45px;}

	.bt-linker {width: 140px; line-height: 32px;}
	.bt-top {right: 16px;}
	.bg-pattern {background-size: 120px;}
	.bdt-navy02,
	.bdt-gray02 {border-width: 1px;}
}

/* header */
#header {width: 100%; height: 96px; position: fixed; top: 0; z-index: 99; background-color: #11161A; border-bottom: 2px solid #293742; transition: all .5s;}
.hBox {width: 100%; max-width: 1320px; height: 100%; margin: 0 auto; position: relative; padding: 0 20px; box-sizing: border-box;}
.headerLogo {width: 113px; height: 100%; display: inline-block; box-sizing: border-box;}
.headerLogo a {display: block; font-size: 0; height: 100%; position: relative;}
.headerLogo img {position:absolute;	max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;}
.headerNav {float: right;}
.gnb > li {display: inline-block; width: 150px; position: relative;}
.gnb > li > a {text-align: center; font-size: 18px; display: block; line-height: 96px; color: #ffffff;}
.gnb .dropdown {display: none; position: absolute; width: 100%; top: 96px; left: 0;  padding-top: 2px; border-bottom: 1px solid #E2E2E2;}
.snb {position: fixed; width: 70px; right: 30px; bottom: 138px; background-color: #202A31;}
.snb li {padding: 16px 0px;}
.snb li:hover {background-color: #293742;}
.snb a {display: block; color: #E2E2E2; font-size: 12px; text-align: center; word-break: keep-all; line-height: 130%;}
.snb a > img {display: block; width: 28px; margin: 0 auto 12px;}
#bt-snb {position: fixed; width: 70px; height: 70px; bottom: 60px; right: 30px;}
#bt-snb::after {background: #293742 url("../image/bt_header.png")no-repeat center/contain;}

.headerMenu {position: absolute; top: 0; right: 0; height: 96px; width: 96px; display: none; z-index: 10;}
.headerMenu span { width: 42px;	height: 4px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #FFFFFF; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.headerMenu span::before,
.headerMenu span::after {content: ''; height: 100%; background-color: #FFFFFF; position: absolute; right: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.headerMenu span::before {width: 100%; top: -12px;}
.headerMenu span::after {width: 73%; bottom: -12px;}
.headerMenu.pressed span {background-color: rgba(255, 255, 255, 0); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}
.headerMenu.pressed span::before,
.headerMenu.pressed span::after {width: 100%;}
.headerMenu.pressed span::before {top: 0; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.headerMenu.pressed span::after {bottom: 0; -webkit-transform: rotate(225deg); transform: rotate(225deg);}

/* footer */
#footer {padding: 20px 0 30px; background-color: #11161A;}
#footer .container {background: url("../image/logo_w.png")no-repeat right/178px; background-origin: content-box;}
#footer em,
#footer li,
#footer a {color: #E2E2E2; font-size: 14px; font-weight: 300;}
#footer .etc {text-align: center; font-size: 0; padding-bottom: 55px;}
#footer .etc li {display: inline-block; margin: 0 50px;}
#footer .etc a {font-weight: 700;}
#footer cite {color: #F5E1D6;}
#footer cite strong {color: #BE272D;}
#footer .contact {padding-top: 20px;}
#footer .contact li {margin-bottom: 10px;}
#footer .contact a:hover {text-decoration: underline;}
#footer em {display: block; text-align: center;}


/* HEADER FOOTER CLASS*/
@media screen and (min-width: 1281px) {
	.gnbWrap {display: block !important;}
	.gnb .hover-line::after {content: ""; position: absolute; width: 0; height: 4px; background: linear-gradient( to right, #BE272D, #CB2C3E); left: 0; bottom: 0; -webkit-transition: width .3s; transition: width .3s;}
	.gnb .hover-line:hover::after {width: 100%;}
	.gnb > li:hover .dropdown {display: block;}
	.gnb .dropdown li {position: relative; background-color: #FFFFFF; border-bottom: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; box-sizing: border-box;}
	.gnb .dropdown li::before {content: ""; position: absolute; width: 0; height: 100%; background: linear-gradient( to right, #BE272D, #CB2C3E); left: 0; top: 0; -webkit-transition: width .5s; transition: width .5s;}
	.gnb .dropdown li:hover::before {width: 100%;}
	.gnb .dropdown a {display: block; font-size: 14px; color: #161616; line-height: 36px; position: relative; z-index: 1; -webkit-transition: color .3s; transition: color .3s;}
	.gnb .dropdown a::before {content: "｜"; padding: 0 4px 0 2px; font-weight: 700;}
	.gnb .dropdown a:hover {color: #FFFFFF;}
}
@media screen and (max-width: 1280px) {
	.headerLogo {width: 90px;}
	.gnbWrap {visibility: hidden; width: 100%; height: 100%; top: 0; right: 0; position: fixed; background-color: rgba(17, 22, 26, 0); transition: background-color .5s, visibility 0s .5s; overflow-y: auto;}
	.gnbWrap.open {visibility: visible; background-color: rgba(17, 22, 26, 0.7); transition-delay: 0s;}
	.gnb {min-height: 100%; width: 480px; top: 0; right: 0; position: absolute; background-color: #202A31; transform: translateX(100%); transition: transform .5s;}
	.open .gnb {transform: none;}
	.gnb > li {display: block; width: 100%;}
	.gnb > li:first-child {margin-top: 150px;}
/* 	.gnb > li:nth-child(4) {margin-bottom: 200px;} */
	.gnb .dropdown {position: relative; top: auto; padding: 8px 20px 0; box-sizing: border-box; border-bottom: none; font-size: 0;}
	.gnb .dropdown::before {content: ""; width: 30px; height: 2px; left: 50%; top: 0; position: absolute; transform: translateX(-50%); background: linear-gradient( to right, #BE272D, #CB2C3E);}
	.gnb .dropdown li {display: inline-block; width: 33.3%; text-align: center; padding: 8px 0;}
	.gnb .dropdown a {display: block; font-size: 14px; color: #FFFFFF; line-height: 42px;}
	.gnb > li > a {line-height: 64px;}
	.snb {position: absolute; bottom: 32px; left: 32px; right: 32px; background-color: #293742; width: auto; font-size: 0;}
	.snb li {display: inline-block; width: 25%; box-sizing: border-box; padding: 34px 5%;}
	.snb li:hover {background-color: transparent;}
	#bt-snb {display: none;}
	.headerMenu {display: block;}

}
@media screen and (max-width: 768px){
	#footer .container {background: none;}
	#footer .etc {padding-bottom: 32px;}
	#footer em {padding-top: 30px;}
}
@media screen and (max-width: 480px) {
	#header {height: 45px; border-width: 1px;}
	.hBox {padding: 0 16px;}
	.headerLogo {width: 42px;}
	.gnb {width: 320px;}
	.gnb > li:first-child {margin-top: 80px;}
/* 	.gnb > li:nth-child(4) {margin-bottom: 150px;} */
	.gnb > li > a {line-height: 48px;}
	.gnb .dropdown li {width: 50%;}
	.gnb .dropdown a {line-height: 32px;}
	.snb {bottom: 4px; left: 0; right: 0;}
	.snb li {padding: 15px 5px;}
	.headerMenu {width: 45px; height: 45px;}
	.headerMenu span {width: 24px; height: 2px;}
	.headerMenu span::before {top: -8px;}
	.headerMenu span::after {bottom: -8px;}

	#footer em,
	#footer li,
	#footer a {font-size: 12px;}
	#footer .etc li {margin: 0 24px;}
}
/* popup */
.popup-wrap{
	position:absolute; 
	z-index:999; 
	background:#fff; 
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	border: 1px solid #DFE4E8;
	display: none;
}
.popup-footer{ padding: 10px; text-align: right;}
.popup-checkbox {width: 18px; height: 18px; margin: 3px 0; cursor: pointer; background-color: #FFFFFF; box-sizing: border-box; border: 1px solid #161616;}
.popup-label {font-size: 14px; line-height: 24px; margin: 0 6px; color: #161616;}
.popup-close{ border: 0; color: #fff; padding: 0 6px; box-sizing: border-box; cursor: pointer; line-height: 24px; font-size: 12px; vertical-align: top; background: #161616; display: inline-block;}
@media screen and (max-width: 768px) {
	.popup-wrap {left: 0 !important; top: 116px !important; right: 0; margin: 0 20px;}
}
@media screen and (max-width: 480px) {
	.popup-wrap{width: auto !important; top: 76px !important;}
	.popup-content{width: 100% !important;  max-height: 450px !important;}
	.popup-content-img{max-height:450px !important;}
}


/* animation */
.ani {
	-webkit-transition-duration: 0.8s; transition-duration: 0.8s;
	-webkit-transition-property: opacity, transform; transition-property: opacity, transform;
}
.aniFast{
	-webkit-transition-duration: 0.5s; transition-duration: 0.5s;
	-webkit-transition-property: opacity, transform; transition-property: opacity, transform;
}
.aniBounce {
	-webkit-transition-timing-function: cubic-bezier(0.600,-0.280,0.735,0.045); transition-timing-function: cubic-bezier(0.600,-0.280,0.735,0.045);
	-webkit-transition-duration: 0.5s; transition-duration: 0.5s;
	-webkit-transition-property: opacity, transform; transition-property: opacity, transform;
}
.ani.t1 {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.ani.t2 {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.ani.t3 {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.ani.t4 {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.ani.t5 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.ani.t6 {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.ani.t7 {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
.ani.t8 {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
.ani.t9 {-webkit-transition-delay: 0.9s; transition-delay: 0.9s;}
.ani.t10 {-webkit-transition-delay: 1s; transition-delay: 1s;}
.ani.t11 {-webkit-transition-delay: 1.1s; transition-delay: 1.1s;}
.ani.t12 {-webkit-transition-delay: 1.2s; transition-delay: 1.2s;}
.aniFast.t1 {-webkit-transition-delay: 0.05s; transition-delay: 0.05s;}
.aniFast.t2  {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.aniFast.t3  {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.aniFast.t4  {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.aniFast.t5  {-webkit-transition-delay: 0.25s; transition-delay: 0.25s;}
.aniFast.t6  {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.aniFast.t7  {-webkit-transition-delay: 0.35s; transition-delay: 0.35s;}
.aniFast.t8  {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.aniFast.t9  {-webkit-transition-delay: 0.45s; transition-delay: 0.45s;}
.aniFast.t10 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.aniFast.t11 {-webkit-transition-delay: 0.55s; transition-delay: 0.55s;}
.ani-up {opacity: 0; -webkit-transform: matrix(0.99619, 0.08715, -0.25881, 0.96592, 0, 50); transform: matrix(0.99619, 0.08715, -0.25881, 0.96592, 0, 50);}
.ani-left {opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px);}
.ani-slide-up {opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px);}
.ani-down {opacity: 0; transform: matrix3d(1,0,0.00,0,0.00,1,0.00,-0.0005,0,0,1,0,0,300,0,1); -webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,-0.0005,0,0,1,0,0,300,0,1);}
.ani-loading {display: inline-block; width: 64px; height: 64px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transition: opacity .3s; transition: opacity .3s;}
.ani-loading:after {content: " ";display: block; width: 46px; height: 46px; margin: 1px; border-radius: 50%; border: 5px solid #fff; border-color: #fff transparent #fff transparent; animation: ani-loading 1.2s linear infinite;}
@keyframes ani-loading {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
@keyframes ani-scaleUp {
	0% {}
	100% {transform: scale(2.5); opacity: 0;}
}
@keyframes ani-cursor {
	0% {opacity: 0;}
	5% {opacity: 1;}
	50% {opacity: 1;}
	55% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes ani-main1 {
	0% {transform: translateX(-150px); opacity: 0;}
	100% {transform: translateX(0); opacity: 1;}
}
@keyframes ani-main2 {
	0% {height: 0; overflow: hidden; padding: 0 20px;}
	100% {height: 368px; padding: 48px 20px;}
}
@keyframes ani-main3 {
	0% {width: 0; display: none;}
	100% {width: 100%;}
}
@keyframes ani-main4 {
	0% {height: 0; overflow: hidden; padding: 0 16px;}
	100% {height: 189px; padding: 30px 16px 20px;}
}
.ani-main1 {animation: ani-main1 .5s;}
.ani-main2 {animation: ani-main2 .5s .4s backwards;}
.ani-main4 {animation: ani-main4 .5s .4s backwards;}
@media screen and (max-width: 480px) {
	.ani-slide-up {opacity: 0; -webkit-transform: translateY(25px); transform: translateY(25px);}
}
#modal-inquiry {position: absolute; left: 0; right: 0; margin-top: 98px; top: 10%; z-index: 50; -webkit-transition: opacity .7s; transition: opacity .7s; opacity: 0; visibility: hidden;}
#modal-inquiry.open {visibility:visible; opacity: 1; transition-delay: .3s;}
#modal-inquiry .content {height: 638px; overflow: hidden; background-color: rgba(17, 22, 26, 0.95); box-sizing: border-box; padding: 60px 8% 80px;-webkit-transition: all .5s; transition: all .5s; position: relative;}
#modal-inquiry .content.submit {height: 170px; transform: translateY(200px);}
#modal-inquiry .formWrap {position: relative; -webkit-transition: opacity .3s; transition: opacity .3s;}
#modal-inquiry .submit .formWrap {opacity: 0;}
#modal-inquiry h1 {font-size: 28px; font-weight: 700; color: #FFFFFF; margin-bottom: 10px; transform: translateX(-100px); transition-delay: 0.7s;}
#modal-inquiry.open h1 {transform: translateX(0); -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .formWrap > p {color: #E2E2E2; margin-bottom: 20px; transform: translateX(-100px); transition-delay: 0.7s;}
#modal-inquiry.open .formWrap > p {transform: translateX(0);  -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .bt-close {position: absolute; right: 0; top: 0; width: 32px; height: 32px; background: url("../image/bt_close.png")no-repeat center/contain;}
#modal-inquiry form {font-size: 0; height: 400px;}
#modal-inquiry .info {float: left; max-width: 324px;}
#modal-inquiry .info li {border-top: 1px solid #E2E2E2; position: relative;}
#modal-inquiry .info li:last-child {border-bottom: 1px solid #E2E2E2;}
#modal-inquiry .info label {width: 75px; line-height: 40px; color: #242424; position: absolute; left: 0; top: 0; text-align: right;}
#modal-inquiry .info .offset {margin-left: 85px; font-size: 0;}
#modal-inquiry .info select {width: 100%; height: 40px; color: #242424; border: none; padding: 0 8px; box-sizing: border-box; background: url("../image/bt_arrow_down.png")no-repeat right/40px;line-height: 20px;}
#modal-inquiry .info input {width: 100%; height: 40px; color: #242424; border: none; padding: 0 8px; box-sizing: border-box; background: none; line-height: 20px;}
#modal-inquiry .memo {max-width: 508px; margin-left: 15px; float: left;}
#modal-inquiry .memo input {width: 100%; height: 40px; color: #242424; border: none; border-bottom: 1px solid #E2E2E2; padding: 0 20px; box-sizing: border-box; background: none; line-height: 20px;}
#modal-inquiry h5 {color: #161616; font-weight: 700; font-size: 18px; line-height: 42px;  text-align: center; border-bottom: 2px solid #919191;}
#modal-inquiry fieldset {width: 100%; font-size: 0;  border-bottom: 16px solid #F8F8F8; background-color: #FFFFFF; display: none;}
#modal-inquiry textarea {width: 100%; height: 300px; border: none; resize: none; padding: 20px; box-sizing: border-box; border-bottom: 1px solid #E2E2E2; background: none; line-height: 130%;}
#modal-inquiry .agree {position: absolute; width: 200px; right: 0; bottom: 0;}
#modal-inquiry .agree a{display: block; font-size: 12px; text-align: right; color: #FFFFFF; margin-bottom: 8px; transform: translateX(100px); transition-delay: 0.7s;}
#modal-inquiry.open .agree a {transform: translateX(0);  -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .agree a:hover {text-decoration: underline;}
#modal-inquiry .agree label {display: block; background-color: #FFFFFF; line-height: 40px; color: #161616; padding-left: 10px; box-sizing: border-box; margin-bottom: 16px; transform: translateX(100px); transition-delay: 0.7s;}
#modal-inquiry.open .agree label {transform: translateX(0);  -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .agree input {margin-left: 8px; width: 18px; height: 18px;  cursor: pointer; background-color: #FFFFFF; box-sizing: border-box; border: 1px solid #E2E2E2;}
#modal-inquiry .agree input:checked {background: url("../image/ic_checked.png")no-repeat center/10px, linear-gradient( to right, #BE272D, #CB2C3E);}
#modal-inquiry .agree input:focus {outline: none;}
#modal-inquiry .agree button {display: block; width: 100%; border: none; line-height: 40px; background: linear-gradient( to right, #BE272D, #CB2C3E); color: #FFFFFF; font-weight: 700; transform: translateX(200px); transition-delay: 0.7s;}
#modal-inquiry.open .agree button {transform: translateX(0);  -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .contact {position: absolute; left: 0; bottom: 0; transform: translateX(-100px); transition-delay: 0.7s;}
#modal-inquiry.open .contact {transform: translateX(0); -webkit-transition: transform 1s .3s; transition: transform 1s .3s;}
#modal-inquiry .contact h4 {font-size: 18px; font-weight: 700; color: #FFFFFF; margin-bottom: 10px;}
#modal-inquiry .contact span {color: #E2E2E2; display: block; line-height: 150%;}
#modal-inquiry .guide {text-align: center; opacity: 0; visibility: hidden; position: absolute; top: 30%; left: 0; right: 0; bottom: 0; transform: translateX(-20px); transition: all .3s;}
#modal-inquiry .guide.step {visibility: visible; opacity: 1; transform: none; transition-delay: .3s;}
#modal-inquiry .guide h3 {font-weight: 700; font-size: 28px; color: #FFFFFF; margin-bottom: 10px;}
#modal-inquiry .guide p {color: #FFFFFF;}

@media screen and (max-width: 1280px) {
	#modal-inquiry {margin-top: 46px;}
	#modal-inquiry .content {height: auto; padding: 40px 16px 60px;}
	#modal-inquiry form {height: 681px; padding-bottom: 150px;}
	#modal-inquiry .info {float: none; max-width: none; margin-bottom: 16px;}
	#modal-inquiry .memo {float: none; max-width: none; margin-left: 0;}
}
@media screen and (max-width: 768px) {
	#modal-inquiry {top: 0; margin-top: 0; z-index: 100;}
	#modal-inquiry .container {padding: 0;}
}
@media screen and (max-width: 480px) {
	#modal-inquiry form {height: 541px;}
	#modal-inquiry .contact {display: none;}
	#modal-inquiry textarea {height: 160px;}
	#modal-inquiry .agree input {margin-left: 25px;}
	#modal-inquiry .bt-close {width: 28px; height: 28px;}
}
#iVideo {width: 100%; height: 100%; display: none; position: absolute; left: 0; top: -100%; z-index: 20; background-color: #202A31; transition: all .5s; overflow: hidden; cursor: pointer; opacity: 0;}
#iVideo.show {top: 0; opacity: 1;}
#iVideo video {width: 100%; height: 100%; object-fit: cover;}
#iVideo .mouseBox {width: 84px; position: fixed; bottom: 84px; left: 0; right: 0; margin: 0 auto;}
#iVideo .mouseBox img {width: 100%;}
#iVideo .muteBox {position: fixed; right: 320px; bottom: 100px;}
#bt-mute {width: 32px; height: 50px; background-size: contain; background-position: center;background-image: url("../image/bt_sound_on.png");}
#bt-mute.mute {background-image: url("../image/bt_sound_off.png");}
#wrap.playing {position: fixed;}
.playing #header {background-color: transparent; border-bottom: none; transition: none;}
.playing .headerNav {display: none;}
.playing #iVideo {display: block;}

#iMain {height: 825px; min-height: 100%; box-sizing: border-box; background: url("../image/bg_main.jpg")no-repeat center/cover; overflow-x: hidden;}
#iMain h1 {color: #ffffff; font-size: 52px; font-weight: 700; margin-bottom: 50px; margin-left: 1px;}
#iMain h1 b {color: #F5E1D6; font-size: inherit; font-weight: inherit;}
#iMain h2 {color: #E2E2E2; font-size: 24px; line-height: 130%; margin-left: 1px;}
#iMain .bt-replay {width: 132px; color: transparent; text-align: left; font-weight: 700; line-height: 32px; position: absolute; top: 40px; -webkit-transition: color .5s; transition: color .5s; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none;}
#iMain .bt-replay:hover {color: #E2E2E2; transition-delay: .2s}
#iMain .bt-replay::after {content: ""; position: absolute; width: 32px; height: 32px; left: 0; top: 0; background: url("../image/bt_replay.png")no-repeat left/contain; -webkit-transition: all .5s; transition: all .5s; transition-delay: .2s}
#iMain .bt-replay:hover::after {left: 100px; transition-delay: 0s}
#iMain .content {position: absolute; top: 30%; margin-top: -100px;}
#iMain .postWrap {max-width: 476px; width: 100%; padding: 48px 20px; box-sizing: border-box; position: relative; background-color: rgba(255, 255, 255, 0.05);}
#iMain .postWrap::before {content: ""; width: 100%; height: 2px; position: absolute; left: 0; top: -26px; background: linear-gradient( to right, #BE272D, #CB2C3E);}
#iMain .postWrap.ani-main2::before {animation: ani-main3 .5s 0.4s backwards;}
#iMain .postWrap::after {content: ""; width: 2px; height: 100%; position: absolute; top: 0; right: -184px; background-color: #E2E2E2;}
#iMain .postWrap .desc {font-size: 24px; font-weight: 700; color: #FFFFFF; margin-bottom: 8%; display: block;}
#iMain .postWrap b {color: #CB2C3E; font-size: inherit; font-weight: inherit;}
#iMain .postCategory {display: block; color: #E2E2E2; margin-bottom: 7%;}
#iMain .postTitle {font-size: 24px; color: #F8F8F8; font-weight: 700; line-height: 150%;}
#iMain .postDate {display: block; text-align: right; color: #E2E2E2; margin-bottom: 9%;}
#iMain .m1 {margin-bottom: 28px;}

@media screen and (max-width: 1280px) {
	#iMain {height: auto; min-height: none;}
	#iMain h1 {font-size: 40px;}
	#iMain h2 {font-size: 19px;}
	#iMain .bt-replay {display: none;}
	#iMain .content {margin-top: 10%; position: static; margin-bottom: 5%;}
	#iMain .postWrap {padding: 20px;}
	#iMain .postWrap .desc {font-size: 20px; margin-bottom: 6%;}
	#iMain .postCategory {font-size: 14px; margin-bottom: 5%;}
	#iMain .postTitle {font-size: 20px;}
	#iMain .postDate {font-size: 14px; margin-bottom: 7%;}

	#iMain .postWrap::after {content: none;}
}
@media screen and (max-width: 480px) {
	#iMain h1 {font-size: 28px;}
	#iMain h2 {font-size: 14px;}
	#iMain .content {margin-bottom: 20%;}
	#iMain .postWrap .desc {font-size: 16px; margin-bottom: 6%;}
	#iMain .postCategory {font-size: 12px; margin-bottom: 5%;}
	#iMain .postTitle {font-size: 16px;}
	#iMain .postDate {font-size: 12px;}
	#iMain .m1 {margin-bottom: 10px;}
}
#iInquiry {width: 416px; padding: 30px 16px 20px; box-sizing: border-box; position: absolute; right: 5%; top: 30%; margin-top: 92px; background-color: #202A31; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; text-align: left; transform-origin: 95%;}
#iInquiry.pressed {animation: ani-scaleUp .7s cubic-bezier(.68,-0.3,.34,1.11) both;}
#iInquiry .title {display: block; font-size: 28px; font-weight: 700; color: #FFFFFF; position: relative; background: url("../image/bt_arrow_right_s.png")no-repeat right/30px; margin-bottom: 47px;}
#iInquiry .title::after {content: ""; width: 100%; height: 2px; background: linear-gradient( to right, #BE272D, #CB2C3E); position: absolute; left: 0; bottom: -23px;}
#iInquiry .guide {color: #E2E2E2; line-height: 200%;}

@media screen and (max-width: 1280px) {
	#iInquiry {width: 100%; position: static; margin-top: 0; margin-bottom: 20px; padding: 18px 16px 14px; transform-origin: bottom;}
	#iInquiry .title {font-size: 22px;}
	#iInquiry .guide {font-size: 14px;} 
}
@media screen and (max-width: 480px) {
	#iInquiry .title {font-size: 14px; margin-bottom: 26px;}
	#iInquiry .title::after {bottom: auto; left: -16px; right: -16px; top: -19px; width: auto;}
	#iInquiry .guide {display: none;}
}

.typing {text-align: center;}
.typing h1 {color: #FFFFFF; font-weight: 700; font-size: 28px; line-height: 232px;}
.typing h1::after {content: ""; border-right: 4px solid #FFFFFF; margin-left: 10px; animation: ani-cursor .5s linear infinite;}
@media screen and (max-width: 1280px) {
	.typing h1 {font-size: 3vw; line-height: 196px;}
}
@media screen and (max-width: 480px) {
	.typing h1 {font-size: 4vw; line-height: 160px;}
	.typing h1::after {border-right-width: 2px;}
}
/* TODO attachment fix */
#iIntro {padding: 10px 0; background: url("../image/bg_intro1.jpg")no-repeat center/cover; background-attachment: fixed;}
#iIntro .bg-white1 {background-color: rgba(255, 255, 255, 0.68); height: 670px;}
#iIntro .content {height: 100%;}
#iIntro .fLeft {width: 60%;}
#iIntro .fRight {width: 40%; background-color: rgba(255, 255, 255, 0.72); padding: 92px 30px 0; box-sizing: border-box;}
#iIntro .subject {position: absolute; right: 100px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#iIntro .fLeft h1 {color: #CB2C3E; width: 568px; font-size: 52px; font-weight: 700; line-height: 150%;}
#iIntro .fLeft h1:last-child {text-align: right;}
#iIntro .fRight h2 {font-size: 28px; font-weight: 700; margin-bottom: 56px;}
#iIntro .fRight p {line-height: 170%; margin-bottom: 7%;}
@media screen and (max-width: 1280px) {
	#iIntro {background-attachment: scroll;}
	#iIntro .bg-white1 {height: auto;}
	#iIntro .content {max-width: 768px; margin: 0 auto;}
	#iIntro .fLeft {float: none; width: 100%; padding: 10% 0 8%;}
	#iIntro .fRight {float: none; width: 100%; padding: 32px 5%;}
	#iIntro .subject {position: static; -webkit-transform: translateY(0); transform: translateY(0); text-align: center;}
	#iIntro .fLeft h1 {font-size: 40px; width: auto;}
	#iIntro .fLeft h1:first-child {margin-right: 30%;}
	#iIntro .fLeft h1:last-child {text-align: center; margin-left: 10%;}
	#iIntro .fRight h2 {font-size: 24px;}
}
@media screen and (max-width: 768px){
	#iIntro .fLeft h1:first-child {margin-right: 40%;}
	#iIntro .fLeft h1:last-child {text-align: center; margin-left: 15%;}
}
@media screen and (max-width: 480px) {
	#iIntro .fLeft h1 {font-size: 28px;}
	#iIntro .fRight h2 {font-size: 18px;}
}
#iLawyer {height: 410px;}
#iLawyer .content {height: 100%;}
#iLawyer img {position: absolute; right: 54%; bottom: 0; width: 346px;}
#iLawyer .desc {padding-left: 30px; box-sizing: border-box; position: absolute; right: 0; width: 50%;}
#iLawyer h2 {font-size: 18px; color: #E2E2E2; margin-top: 105px;}
#iLawyer h1 {font-size: 52px; font-weight: 700; color: #ffffff; margin-top: 15px;}
#iLawyer p {width: 75%; margin-top: 55px;}
#iLawyer p > span {font-size: 28px; font-weight: 700; color: #FFFFFF; line-height: 190%; padding-bottom: 8px; border-bottom: 2px solid #BE272D;}
@media screen and (max-width: 1280px) {
	#iLawyer .desc {padding-left: 0;}
	#iLawyer h2 {margin-top: 79px; font-size: 16px;}
	#iLawyer h1 {font-size: 40px;}
	#iLawyer p {width: 85%;}
	#iLawyer p > span {font-size: 22px; padding-bottom: 6px;}
}
@media screen and (max-width: 768px) {
	#iLawyer {height: 332px;}
	#iLawyer img {width: 265px; right: 50%;}
	#iLawyer h2 {margin-top: 52px;}
	#iLawyer p {width: 95%;}
}
@media screen and (max-width: 480px) {
	#iLawyer img {right: 40%;}
	#iLawyer h2 {font-size: 14px; margin-top: 52px;}
	#iLawyer h1 {font-size: 28px;}
	#iLawyer p {margin-top: 80px;}
	#iLawyer p > span {font-size: 16px; padding-bottom: 4px;}
}
#iCareer {height: 370px; padding-top: 30px; box-sizing: border-box;}
#iCareer .content {height: 100%;}
#iCareer .fRight {padding-left: 30px; box-sizing: border-box;}
#iCareer h2 {display: inline-block; width: 210px; line-height: 35px; font-size: 18px; font-weight: 700; color: #FFFFFF;}
#iCareer h2::before {content: "■"; font-size: 10px; margin: 0 12px 0 10px; vertical-align: middle;}
#iCareer ul {margin: 20px 0 45px;}
#iCareer li {font-size: 18px; line-height: 150%; list-style: square; list-style-position: inside; margin-left: 10px;}
#iCareer .m1 {margin-left: 38%;}
@media screen and (max-width: 1280px) {
	#iCareer {height: auto;}
	#iCareer .content {font-size: 0;}
	#iCareer .fLeft {display: inline-block; float: none; vertical-align: top;}
	#iCareer .fRight {display: inline-block; float: none; padding: 0; margin-bottom: 60px;}
	#iCareer h2 {font-size: 16px;}
	#iCareer li {font-size: 16px;}
	#iCareer .m1 {margin-left: 0;}
}
@media screen and (max-width: 768px) {
	#iCareer .fLeft {width: 100%;}
	#iCareer .fRight {width: 100%;}
}
@media screen and (max-width: 480px) {
	#iCareer h2 {width: 112px; line-height: 24px; font-size: 14px;}
	#iCareer li {font-size: 14px;}
}
#iCareerDetail {padding-top: 88px; background: #F8F8F8 url("../image/bg_career.png")no-repeat 120% bottom/875px; display: none;}
#iCareerDetail h2 {display: inline-block; width: 210px; line-height: 35px; font-size: 18px; font-weight: 700; color: #FFFFFF; margin-left: 19%; margin-bottom: 63px;}
#iCareerDetail h2::before {content: "■"; font-size: 10px; margin: 0 12px 0 10px;}
#iCareerDetail .depth1 {margin-left: 19%; padding-bottom: 70px;}
#iCareerDetail .year {font-size: 20px; font-weight: 700; display: block;}
#iCareerDetail .year::before {content: "■"; color: #BE272D; vertical-align: text-top; font-size: 17px; margin-right: 12px;}
#iCareerDetail .year::after {content: ""; width: 86%; height: 2px; background-color: #293742; float: right; margin-top: 9px;}
#iCareerDetail .depth2 {margin-left: 19%; padding: 55px 0;}
#iCareerDetail .depth2 li {font-size: 18px; line-height: 170%;}
#iCareerDetail .depth2 li > span {font-size: inherit; display: inline-block; width: 220px;}
#iCareerDetail .btWrap {position: relative; padding-top: 78px; background-color: #E2E2E2;}
#iCareerDetail .bt-toggle-round {position: absolute; width: 30px; height: 30px; left: 0; right: 0; margin: 0 auto; top: 0; border-radius: 100%; border: 2px solid #919191; transform: translateY(-50%); background: url("../image/bt_arrow_up_s.png")no-repeat center/20px, linear-gradient( to right, #BE272D, #CB2C3E); z-index: 1;}
@media screen and (max-width: 1280px) {
	#iCareerDetail {background-position-x: 150%; background-size: 80%;}
	#iCareerDetail h2 {font-size: 16px; margin-left: 0;}
	#iCareerDetail .depth1 {margin-left: 0;}
	#iCareerDetail .depth2 li {font-size: 16px;}
	#iCareerDetail .depth2 li > span {width: 180px;}
}
@media screen and (max-width: 768px) {
	#iCareerDetail {padding-top: 30px;}
	#iCareerDetail .year {font-size: 18px;}
	#iCareerDetail .year::after {width: 70%;}
	#iCareerDetail .year::before {font-size: 12px;}
	#iCareerDetail .depth2 {margin-left: 20px; padding: 24px 0;}
}
@media screen and (max-width: 640px) {
	#iCareerDetail {background-position-x: 30%; background-size: 150%;}
	#iCareerDetail .depth2 li > span {display: none;}
}
@media screen and (max-width: 480px) {
	#iCareerDetail h2 {width: 112px; line-height: 24px; font-size: 14px;}
	#iCareerDetail .depth2 {margin-left: 0;}
	#iCareerDetail .depth2 li {font-size: 14px;}
	#iCareerDetail .btWrap {padding-top: 60px;}
}

#iLine {height: 23px;}
#iTask {height: 745px; box-sizing: border-box; padding-top: 120px; background-color: #202A31; position: relative;}
#iTask .container {position: static;}
#iTask h1 {font-size: 28px; font-weight: 700; color: #FFFFFF; float: left;}
#iTask .desc {font-size: 16px; color: #E2E2E2; float: left; margin-left: 20px; line-height: 150%; margin-top: -2px;}
#iTask .linkBox {max-width: 765px; width: 100%; margin: 0 auto; font-size: 0;}
#iTask .linkBox .row {font-size: 0;}
#iTask .linkBox .row:first-child {text-align: right; margin-bottom: 16px;}
#iTask .linkBox li {width: 50%; max-width: 255px; display: inline-block; text-align: center;}
#iTask .linkBox li::before {content: ""; width: 40%; max-width: 745px; height: 100%; position:absolute; top:0; right: 0; background-position: left; background-repeat: no-repeat; background-size: cover; -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; -webkit-transition: all .3s; transition: all .3s;}
#iTask .linkBox li:hover::before {-webkit-transform: translateX(0); transform: translateX(0); opacity: 1;}
#iTask .linkBox li > div {padding-bottom: 100%; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1;}
#iTask .linkBox a {width: 100%; height: 100%; position:absolute; top:0; left:0;}
#iTask .linkBox a::before {content: ""; width: 100%; height: 100%; position:absolute; top:0; left:0; background: linear-gradient( to right, rgba(190, 39, 45, 0.85), rgba(203, 44, 62, 0.85)); opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s;}
#iTask .linkBox a:hover::before {opacity: 1;}
#iTask .linkBox strong {display: block; font-size: 28px; font-weight: 700; color: inherit; margin-bottom: 8px; color: inherit;}
#iTask .linkBox span {font-size: 16px; color: #ffffff; position: absolute; width: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#iTask .linkBox a:hover span {color: #F5E1D6;}
#iTask .linkBox .task1::before {background-image: url("../image/bg_task1.png");}
#iTask .linkBox .task2::before {background-image: url("../image/bg_task2.png");}
#iTask .linkBox .task3::before {background-image: url("../image/bg_task3.png");}
#iTask .linkBox .task4::before {background-image: url("../image/bg_task4.png");}
#iTask .linkBox .task1 > div {background-image: url("../image/ic_task1.png");}
#iTask .linkBox .task2 > div {background-image: url("../image/ic_task2.png");}
#iTask .linkBox .task3 > div {background-image: url("../image/ic_task3.png");}
#iTask .linkBox .task4 > div {background-image: url("../image/ic_task4.png");}
@media screen and (max-width: 1280px) {
	#iTask {height: auto; padding-top: 9%}
	#iTask h1 {font-size: 22px;}
	#iTask .desc {font-size: 14px;}
	#iTask .linkBox {padding: 60px 0 80px;}
	#iTask .linkBox strong {font-size: 22px;}
	#iTask .linkBox span {font-size: 14px;}
}
@media screen and (max-width: 768px) {
	#iTask {padding-top: 60px;}
	#iTask .linkBox .row {text-align: center;}
	#iTask .linkBox .row:first-child {margin-bottom: 0; text-align: center;}
	#iTask .linkBox li::before {content: none;}
}
@media screen and (max-width: 480px) {
	#iLine {height: 16px;}
	#iTask h1 {font-size: 16px;}
	#iTask .desc {font-size: 12px; margin-left: 12px;}
	#iTask .linkBox strong {font-size: 16px;}
	#iTask .linkBox span {font-size: 12px;}
	#iTask .linkBox a::before {content: none;}
	#iTask .linkBox a:hover span {color: #FFFFFF;}
}
#iBoard {height: 938px; box-sizing: border-box; padding-top: 120px; background: url("../image/bg_community.jpg")no-repeat top/cover; background-attachment: fixed;}
#iBoard h1 {font-size: 28px; font-weight: 700; color: #FFFFFF; float: left;}
#iBoard .desc {font-size: 16px; color: #E2E2E2; float: left; margin-left: 20px; line-height: 150%; margin-top: -2px;}
#iBoard .cardWrap {padding-top: 105px; margin: 0 -10px 52px; position: relative;}
#iBoard .cardWrap .prevBtn,
#iBoard .cardWrap .nextBtn {width: 60px; height: 60px; position: absolute; background-position: center; background-size: contain; bottom: 246px; font-size: 0;}
#iBoard .cardWrap .prevBtn {left: -150px; background-image: url("../image/ic_slick_left.png");}
#iBoard .cardWrap .nextBtn {right: -150px; background-image: url("../image/ic_slick_right.png");}
#iBoard .cardWrap li {padding: 0 10px; box-sizing: border-box;}
#iBoard .cardHeader {height: 75px; border-bottom: 1px solid #E2E2E2; background-color: rgba(255, 255, 255, 0.95); position: relative;}
#iBoard .cardHeader::after {content: ""; position: absolute; width: 8px; height: 60px; left: 20px; top: 0; background: linear-gradient( to bottom, #BE272D, #CB2C3E);}
#iBoard .cardBody {height: 392px; padding: 20px; box-sizing: border-box; background-color: #FFFFFF;}
#iBoard .cardFooter {background-color: rgba(255, 255, 255, 0.95); border-top: 1px solid #E2E2E2;}
#iBoard .postNum {font-size: 24px; font-weight: 700;}
#iBoard .postTitle {padding-top: 20px; height: 112px; font-size: 28px; font-weight: 700; color: #242424; line-height: 40px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#iBoard .postCategory {display: block; text-align: center; line-height: 30px; width: 120px; font-weight: 700; color: #FFFFFF; margin: 18px 0 12px;}
#iBoard .postSummary {font-weight: 300; height: 135px; line-height: 170%; color: #6D6D6D; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
#iBoard .postDate {color: #919191; display: block; line-height: 52px; padding-left: 50px; background: url("../image/ic_time.png")no-repeat 20px 45%/20px;}
#iBoard .btWrap {text-align: right;}
@media screen and (max-width: 1800px) {
	#iBoard .container {overflow-x: hidden;}
}
@media screen and (max-width: 1280px) {
	#iBoard {background-attachment: scroll; height: auto; padding-top: 9%;}
	#iBoard h1 {font-size: 22px;}
	#iBoard .desc {font-size: 14px;}
	#iBoard .cardWrap {margin: 0 -10% 52px;}
	#iBoard .postNum {font-size: 20px;}
	#iBoard .postTitle {font-size: 22px; padding-top: 18px; line-height: 32px; height: 100px;}
	#iBoard .btWrap {margin-bottom: 105px;}
}
@media screen and (max-width: 1024px) {
	#iBoard .cardWrap {margin: 0 -20% 52px;}
}
@media screen and (max-width: 768px) {
	#iBoard {padding-top: 60px;}
	#iBoard .cardWrap {padding-top: 80px; margin: 0 -40% 52px;}
	#iBoard .cardHeader {height: 47px;}
	#iBoard .cardHeader::after {height: 36px; left: 24px;}
}
@media screen and (max-width: 480px) {
	#iBoard h1 {font-size: 16px;}
	#iBoard .desc {font-size: 12px; margin-left: 12px;}
	#iBoard .cardWrap {margin: 0 -90% 52px;}
	#iBoard .cardBody {height: 340px;}
	#iBoard .postNum {font-size: 16px;}
	#iBoard .postTitle {font-size: 18px; padding-top: 16px; line-height: 23px; height: 65px;}
	#iBoard .postCategory {width: 96px; line-height: 26px;}
	#iBoard .postSummary {-webkit-line-clamp: 6;}
	#iBoard .postDate {line-height: 30px; font-size: 12px; padding-left: 35px; background-position: 16px 45%; background-size: 13px;}
}
#company {background: url("../image/bg_company.jpg")no-repeat bottom/cover;}
#company .content {padding: 56px 0 220px;}
#company h1 {font-size: 52px; font-weight: 700; margin-bottom: 20px;}
#company h2 {font-size: 24px;}
#company h2 strong {color: #BE272D; font-size: inherit;}
#company .infoWrap {padding-top: 145px; height: 580px;}
#company .fLeft {padding-right: 8px; box-sizing: border-box;}
#company .fRight {padding-left: 8px; box-sizing: border-box;}
#kakaoMap {height: inherit;}
#company .contact {padding: 50px 42px; box-sizing: border-box; height: 100%; background-color: rgba(255, 255, 255, 0.8); position: relative;}
#company .contact h4 {font-size: 28px; font-weight: 700; color: #161616; margin-bottom: 40px;}
#company .contact p {color: #161616; line-height: 200%;}
#company .contact p strong {color: #BE272D; font-weight: 700;}
#company .btWrap {position: absolute; font-size: 0; width: 170px; right: 40px; bottom: 50px;}
#company .btWrap .bt-linker {border-color: #293742; color: #293742;}
#company .btWrap .bt-linker::after {background-image: url("../image/bt_arrow_right_b.png");}
#company .btWrap .bt-linker:hover {border-color: #BE272D; color: #FFFFFF;}
#company .btWrap .bt-linker:hover::after {background-image: url("../image/bt_arrow_right.png");}
#company .btWrap .m1 {margin-bottom: 16px;}
@media screen and (max-width: 1280px) {
	#company .content {padding-bottom: 100px;}
	#company .contact {padding: 48px 32px;}
	#company .contact h4 {font-size: 22px; margin-bottom: 24px;}
	#company h1 {font-size: 40px;}
	#company h2 {font-size: 20px;}
	#company .infoWrap {height: auto; padding-top: 54px;}
	#company .fLeft {float: none; width: 100%; height: 580px; padding: 0; margin-bottom: 32px;}
	#company .fRight {float: none; width: 100%; height: 390px; padding: 0;}
	#company .btWrap {right: 32px; bottom: 48px;}
}
@media screen and (max-width: 768px) {
	#company .content {padding: 38px 0 60px;}
	#company .contact {padding: 20px 12px;}
	#company .infoWrap {padding-top: 28px;}
	#company .fLeft {height: 328px; margin-bottom: 16px;}
	#company .fRight {height: 262px;}
	#company .btWrap {right: 12px; bottom: 20px;}
}
@media screen and (max-width: 480px) {
	#company h1 {font-size: 28px; margin-bottom: 12px;}
	#company h2 {font-size: 16px; line-height: 130%;}
	#company .contact h4 {font-size: 16px; margin-bottom: 12px;}
	#company .btWrap {width: 140px;}
}
#board {background: url("../image/bg_board.jpg")no-repeat left 96px/contain;}
#board .content {padding: 56px 0 80px;}
#board h1 {font-size: 52px; color: #FFFFFF; font-weight: 700; margin-bottom: 20px;}
#board h2 {font-size: 24px; color: #E2E2E2; margin-bottom: 150px; display: inline-block; padding-bottom: 4px; border-bottom: 2px solid #BE272D;}
#board h2 strong {color: #BE272D; font-size: inherit;}
#board h3 {font-size: 28px; font-weight: 700; color: #FFFFFF; padding-top: 130px;     line-height: 130%;}
#board h4 {font-size: 20px; font-weight: 700; color: #FFFFFF; padding-top: 32px; padding-bottom: 8px; border-bottom: 1px solid #FFFFFF; margin-bottom: 60px;}
#board h4 span {font-size: 16px; float: right; color: inherit;}
#board .lnb {background-color: #202A31; padding: 3px 0 3px 180px;}
#board .lnb > ul li {display: inline-block; padding: 7px 0;}
#board .lnb > ul a {display: block; padding: 0 32px; line-height: 32px; color: #FFFFFF; border-radius: 16px;}
#board .lnb .selectBtn {display: none; color: #FFFFFF; border-color: #BE272D; margin: 7px 20px; border-radius: 16px; background: url("../image/bt_select_w.png")no-repeat 95px center/22px, linear-gradient( to right, #BE272D, #CB2C3E);}
#board .lnb .selectBox {border-radius: 16px; top: 32px;}

#boardView .title {background: url("../image/bg_board.jpg")no-repeat left/cover; height: 262px; box-sizing: border-box; padding-top: 40px; position: relative;}
#boardView .title .desc {position: absolute; left: 0; bottom: 24px; box-sizing: border-box; padding: inherit; width: 100%;}
#boardView .title h1 {font-size: 28px; font-weight: 700; color: #FFFFFF; line-height: 130%;}
#boardView .title h4 {font-size: 18px; font-weight: 700; color: #FFFFFF;}
#boardView .title h3 {font-size: 20px; font-weight: 700; color: #FFFFFF; padding-top: 32px; padding-bottom: 8px; border-bottom: 1px solid #FFFFFF;}
#boardView .title h3 span {font-size: 16px; color: #FFFFFF; float: right;}
#boardView .view {max-width: 1024px; margin: 0 auto; padding-top: 20px;}
#boardView .tableWrap {border: none; padding: 40px 0 60px;}
#boardView .tableWrap th {padding: 0;}
#boardView .list-head {font-size: 18px; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid #E2E2E2;}
#boardView .list-head a {float: right; font-size: inherit;}
#boardView .list-head a:hover {text-decoration: underline;}
@media screen and (max-width: 1900px) {
	#board {background-size: 1900px;}
}
@media screen and (max-width: 1280px) {
	#board {background-size: 1280px;}
	#board .content {padding-top: 46px;}
	#board h1 {font-size: 40px;}
	#board h2 {font-size: 20px; margin-bottom: 32px;}
	#board .lnb {text-align: right; padding-left: 0;}
	#board .lnb > ul {display: none;}
	#board .lnb .selectBtn {display: inline-block; text-align: left;}

	#boardView .title {padding-top: 25px;}
	#boardView .title h1 {font-size: 24px;}
	#boardView .title h4 {font-size: 16px;}
	#boardView .title h3 {font-size: 16px; padding-top: 16px;}
	#boardView .title h3 span {font-size: 14px;}
	#boardView .list-head {font-size: 16px;}
}
@media screen and (max-width: 768px) {
	#board {background-size: 1000px;}
	#board h3 {padding-top: 20px;}
}
@media screen and (max-width: 480px) {
	#board {background-size: 768px; background-position-y: 45px;}
	#board .content {padding-top: 40px;}
	#board h1 {font-size: 28px;}
	#board h2 {font-size: 16px; display: block;}

	#boardView .title {padding-top: 12px;}
	#boardView .title h1 {font-size: 14px; }
	#boardView .title h4 {font-size: 12px;}
	#boardView .title h3 {font-size: 14px; padding-top: 8px;}
	#boardView .title h3 span {font-size: 12px;}
	#boardView .list-head {font-size: 14px;}
}

#error {text-align: center;}
#error h1 {font-size: 52px; font-weight: 700; color: #FFFFFF; margin-top: 90px;}
#error h2 {font-size: 28px; font-weight: 700; color: #FFFFFF; margin-top: 30px;}
#error p {font-size: 20px; color: #FFFFFF; margin-top: 80px; padding-bottom: 200px;}

.tableWrap {border: 1px solid #E2E2E2; background-color: #ffffff;}
.tableWrap table {text-align: center; border-collapse:separate; border-spacing:0 8px; table-layout: fixed;}
.tableWrap tbody tr {border-color: #DFE4E8;}
.tableWrap tbody tr.checked {border-color: #161616;}
.tableWrap tbody tr:hover {background-color: #F4F8FA;}
.tableWrap tbody a:hover {text-decoration: underline;}
.tableWrap tbody .link:hover {cursor: pointer;}
.tableWrap th {padding: 32px 0 12px; font-weight: 700;}
.tableWrap td {padding: 17px 0; border-top: 1px solid; border-bottom: 1px solid; text-overflow: ellipsis; border-color: inherit; text-overflow:ellipsis; overflow: hidden; white-space: nowrap;}
.tableWrap td:first-child {border-color: inherit;}
.tableWrap td:last-child {border-right: 1px solid; border-color: inherit;}
.tableWrap .icon {width: 24px; padding: 3px;}
.tableWrap .tCheck {width: 70px;}
.tableWrap .tIndex {width: 80px;}
/* .tableWrap .tMemo */
.tableWrap .tKind {width: 20%;}
.tableWrap .tName {width: 15%;}
.tableWrap .tDate {width: 130px;}
.tableWrap .cName {width: 30%;}
.tableWrap .cConfig {width: 140px;}
.tableWrap .cNum {width: 20%;}
.tableWrap .cHitrate {margin: 0 16px;}
.tableWrap .onlytext td {padding: 18px 0;}
.tableWrap .onlytext tbody tr {cursor: default;}
.tableWrap .onlytext tbody tr:hover {background-color: transparent;}
.tableWrap .tdTitle {text-align: left;}
.tableWrap.parallel {margin-bottom: 64px;}
.tableWrap .sub-row {display: none; font-size: 0; margin-top: 4px;}
.tableWrap .sub-row span {font-size: 12px; color: #919191;}
.tableWrap .sub-row span:last-child {float: right; padding-right: 8px;}
.beforeBorder1 {position: relative;}
.beforeBorder1::before {content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background-color: #293742;}

.board-nav {text-align: center; margin-top: 32px; font-size: 0;}
.board-nav a {display: inline-block; margin: 0 8px; width: 20px; height: 20px; line-height: 20px; color: #919191; vertical-align: middle;}
.board-nav .current {color: inherit;}
.board-nav .prev {background: url("../image/ic_prev.png")no-repeat center/contain;}
.board-nav .next {background: url("../image/ic_next.png")no-repeat center/contain;}
.board-search {text-align: center; margin-top: 20px; font-size: 0; margin-bottom: 80px; padding: 0 10px;}
.board-search .search_keyword {width: 320px; height: 32px; margin: 0 16px; font-size: 14px; font-weight: 500; line-height: 31px; box-sizing: border-box; border: 1px solid #DFE4E8; vertical-align: top; padding-left: 8px;}
.board-search .search-btn {width: 90px; height: 32px; color: #ffffff; text-align: center; font-size: 14px; font-weight: 500; line-height: 31px; border: 1px solid #161616; background-color: #293742; cursor: pointer; box-sizing: border-box; vertical-align: top;}
.showM {display: none;}

@media screen and (max-width: 1280px) {
	.hideT {display: none;}
	.tableWrap .sub-row {display: block;}
	.tableWrap .tdTitle {padding-left: 20px;}
	.beforeBorder2 {position: relative;}
	.beforeBorder2::before {content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background-color: #293742;}
	.tableWrap td {padding: 9px 0;}
}
@media screen and (max-width: 768px) {
	.hideTM {display: none;}
	.tableWrap.parallel {margin-bottom: 0;}
	.board-search .selectBtn {display: none;}
	.board-search .search_keyword {width: 70%; margin: 0 5% 0 0;}
	.board-search .search-btn {width: 25%;}
	.board-nav {margin-top: 16px;}
	.board-search {margin-bottom: 40px;}
}
@media screen and (max-width: 480px) {
	.tableWrap table {border-spacing: 0 5px;}
	.hideM {display: none;}
	.showM {display: block;}
	.hiddenM th {display: none; padding: 4px 0;}
	.tableWrap .tdTitle {padding-right: 20px; border-right: 1px solid #DFE4E8;}
}
#taskPage {margin-bottom: 60px;}
#taskPage .taskTitle {font-size: 28px; font-weight: 700; line-height: 70px; text-align: center; color: #FFFFFF;}
#taskPage #bgFront {position: fixed; z-index: -1;}
#taskPage .container > .content {background-color: #FFFFFF; margin-top: 70px; padding-bottom: 60px;}
#taskPage .task1 {background-image: url("../image/bg_task1.jpg");}
#taskPage .task2 {background-image: url("../image/bg_task2.jpg");}
#taskPage .task3 {background-image: url("../image/bg_task3.jpg");}
#taskPage .task4 {background-image: url("../image/bg_task4.jpg");}
@media screen and (max-width: 480px) {
	#taskPage .taskTitle {font-size: 20px; line-height: 45px;}
	#taskPage .container > .content {background-color: #FFFFFF; margin-top: 70px; padding-bottom: 60px; margin-bottom: 80px;}
}
/* privacy */
#privacy .content {padding: 96px 0;}
#privacy h3 {padding-bottom: 5%; font-size: 52px; font-weight: 700;}
.memberLaw {margin-top:3%;}
.memberLaw p{font-size: 18px; line-height: 130%;}
.memberLaw .lawMenu {border:2px solid #BE272D; padding:2% 0; margin:3% 0; width:auto; height:auto; display:block; overflow:hidden;}
.memberLaw .lawMenu .tapLaw {float:left; width:50%; box-sizing:border-box; padding:0 2%;}
.memberLaw .lawMenu .tapLaw li {line-height:190%;}
.memberLaw dl dt {margin-top:5%; font-size: 18px; font-weight: 700;}
.memberLaw dl dd {padding:2% 0; line-height:140%; font-size: 18px;}
.memberLaw dl .mgt {padding-top:0;}
.memberLaw dl dd ol > li {list-style-type:decimal; margin:1% 0 0 2%; line-height:140%;}
.memberLaw dl dd ul > li {list-style-type:square; margin:1% 0 1% 2%; line-height:140%;}
.memberLaw dl dd .lst_no > li {list-style:none; margin-left:0;}
.memberLaw dl dd table {margin-top:2%; width:100%;}
.memberLaw dl dd thead th {border-top:1px solid #BE272D; border-bottom:1px solid #e5e5e5; color:#BE272D; padding:15px 0; text-align:center;}
.memberLaw dl dd tbody th {text-align:center; border-bottom:1px solid #000;}
.memberLaw dl dd tbody td {border-bottom:1px solid #E2E2E2; padding:15px 0; text-align:center;}

@media screen and (max-width: 1280px) {
	.memberLaw p{font-size: 16px;}
	.memberLaw dl dt {font-size: 16px;}
	.memberLaw dl dd{font-size: 16px;}
}
@media screen and (max-width: 768px) {
	#privacy .content {padding-top: 95px;}
}
@media screen and (max-width: 480px) {
	.memberLaw p{font-size: 14px;}
	.memberLaw dl dt {font-size: 14px;}
	.memberLaw dl dd{font-size: 14px;}
	#privacy h3 {font-size: 28px;}
}

#login {background: url("../image/bg_login.jpg")no-repeat center/cover; height: 100%; box-sizing: border-box;}
#login .content {width: 100%; height: 100%; position: relative;}
.loginWrap {width: 100%; height: 100%; max-width: 480px; max-height: 480px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: rgba(0,0,0,0.7); padding: 60px; box-sizing: border-box;}
.loginWrap h1 {font-size: 24px; font-weight: 700; color: #FFFFFF;}
.loginWrap h1 span {font-size: inherit; color: inherit; float: right;}
.loginWrap .loginForm {padding-top: 60px;}
.loginWrap .loginText {width: 100%; height: 50px; line-height: 20px; border: none; padding: 8px; box-sizing: border-box;}
.loginWrap .bt-submit {width: 96px; height: 96px; float: right; margin-top: 30px; color: #FFFFFF; font-weight: 700;}
.loginWrap .m1 {margin-top: 10px;}
@media screen and (max-width: 480px) {
	.loginWrap {padding: 30px;}
	.loginWrap h1 {font-size: 18px;}
}


/* 2019-12-02 추가 */
#inquiry {background: url("../image/bg_inquiry.jpg")no-repeat right 96px/contain;}
#inquiry .content {padding: 56px 0 80px;}
#inquiry h1 {font-size: 52px; color: #FFFFFF; font-weight: 700; margin-bottom: 20px;}
#inquiry h2 {font-size: 24px; color: #E2E2E2; margin-bottom: 150px; display: inline-block; padding-bottom: 4px; line-height: 130%;}
#inquiry h2 strong {color: #BE272D; font-size: inherit;}
#inquiry h3 {font-size: 28px; font-weight: 700; color: #FFFFFF; padding-top: 130px;     line-height: 130%;}
#inquiry h4 {font-size: 20px; font-weight: 700; color: #FFFFFF; padding-top: 32px; padding-bottom: 8px; border-bottom: 1px solid #FFFFFF; margin-bottom: 60px;}
#inquiry h4 span {font-size: 16px; float: right; color: inherit;}
#inquiry .lnb {background-color: #202A31; padding: 3px 0 3px 180px;}
#inquiry .lnb > ul li {display: inline-block; padding: 7px 0;}
#inquiry .lnb > ul a {display: block; padding: 0 32px; line-height: 32px; color: #FFFFFF; border-radius: 16px;}
#inquiry .lnb .selectBtn {display: none; color: #FFFFFF; border-color: #BE272D; margin: 7px 20px; border-radius: 16px; background: url("../image/bt_select_w.png")no-repeat 95px center/22px, linear-gradient( to right, #BE272D, #CB2C3E);}
#inquiry .lnb .selectBox {border-radius: 16px; top: 32px;}
#inquiry .listTit {display: inline-block; width: 65%; width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis;}
#inquiryView .title {background: url("../image/bg_inquiry.jpg")no-repeat right/cover; height: 262px; box-sizing: border-box; padding-top: 40px; position: relative;}
#inquiryView .title .desc {position: absolute; left: 0; bottom: 24px; box-sizing: border-box; padding: inherit; width: 100%;}
#inquiryView .title h1 {font-size: 28px; font-weight: 700; color: #FFFFFF; line-height: 130%;}
#inquiryView .title h4 {font-size: 18px; font-weight: 700; color: #FFFFFF;}
#inquiryView .title h3 {font-size: 20px; font-weight: 700; color: #FFFFFF; padding-top: 32px; padding-bottom: 8px; border-bottom: 1px solid #FFFFFF;}
#inquiryView .title h3 span {font-size: 16px; color: #FFFFFF; float: right;}
#inquiryView .content {padding-top: 60px;}
#inquiryView table {text-align: left; border-bottom: 16px solid #F8F8F8; margin-bottom: 32px;}
#inquiryView table caption {display: table-caption; text-align: center; font-size: 18px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid #919191;}
#inquiryView table tr {border-bottom: 1px solid #E2E2E2;}
#inquiryView table th {width: 80px; padding: 10px 0; font-weight: 700; vertical-align: top;}
#inquiryView table td {padding: 10px 0;}

#inquiryView .bt-wrap {text-align: right; padding-bottom: 120px;}
#inquiryView .bt-list {display: inline-block; width: 200px; line-height: 40px; font-weight: 700; text-align: center; color: #FFFFFF;background-color: #293742;}

@media screen and (max-width: 1900px) {
	#inquiry {background-size: 1900px;}
}
@media screen and (max-width: 1280px) {
	#inquiry {background-size: 1280px;}
	#inquiry .content {padding-top: 46px;}
	#inquiry h1 {font-size: 40px;}
	#inquiry h2 {font-size: 20px; margin-bottom: 32px;}
	#inquiry .lnb {text-align: right; padding-left: 0;}
	#inquiry .lnb > ul {display: none;}
	#inquiry .lnb .selectBtn {display: inline-block; text-align: left;}

	#inquiryView .title {padding-top: 25px;}
	#inquiryView .title h1 {font-size: 24px;}
	#inquiryView .title h4 {font-size: 16px;}
	#inquiryView .title h3 {font-size: 16px; padding-top: 16px;}
	#inquiryView .title h3 span {font-size: 14px;}
}
@media screen and (max-width: 768px) {
	#inquiry {background-size: 1000px;}
	#inquiry h3 {padding-top: 20px;}
}
@media screen and (max-width: 480px) {
	#inquiry {background-size: 768px; background-position-y: 45px;}
	#inquiry .content {padding-top: 40px;}
	#inquiry h1 {font-size: 28px;}
	#inquiry h2 {font-size: 16px; display: block;}

	#inquiryView .title {padding-top: 12px;}
	#inquiryView .title h1 {font-size: 14px; }
	#inquiryView .title h4 {font-size: 12px;}
	#inquiryView .title h3 {font-size: 14px; padding-top: 8px;}
	#inquiryView .title h3 span {font-size: 12px;}
}
.ic-lock::before {content: ""; display: inline-block; width: 16px; height: 16px; background: url("../image/ic_lock_16px.png")no-repeat center/contain; margin-right: 8px;}
.hasReply::before {content: "답변완료"; font-size: 10px; font-weight: 300; padding: 4px; color: #FFF; background-color: #BE272D; margin-left: 8px; font-family: sans-serif;}
.noneReply::before {content: "답변대기"; font-size: 10px; font-weight: 300; padding: 4px; color: #FFF; background-color: #919191; margin-left: 8px; font-family: sans-serif;}
#modal-inquiry-pass {position: fixed; top: 30%; left: 50%; transform: translateX(-50%); max-width: 320px; width: 100%; box-sizing: border-box; padding: 62px 12px 32px; background-color: rgba(17, 22, 26, 0.95); display: none;}
#modal-inquiry-pass .bt-close {position: absolute; right: 16px; top: 21px; width: 20px; height: 20px; background: url("../image/bt_close.png")no-repeat center/contain;}
#modal-inquiry-pass .bt-submit {display: block; width: 100%; border: none; line-height: 40px; background: linear-gradient( to right, #BE272D, #CB2C3E); color: #FFFFFF;
    font-weight: 700;}
#modal-inquiry-pass .field {background-color: #FFFFFF; text-align: center; margin-bottom: 16px;}
#modal-inquiry-pass .field h3 {color: #242424; font-size: 18px; font-weight: 700; padding-top: 28px;}
#modal-inquiry-pass .field .inquiryPass {text-align: center; width: 160px; margin: 32px auto 52px; padding: 10px; border: 1px solid #E2E2E2; font-size: 16px; color: #242424;}

@media screen and (max-width: 768px) {
	.ic-lock::before {width: 14px; height: 14px;}
}