@charset "utf-8";
* {box-sizing:border-box;}
ul:after,
dl:after {content:''; display:block; clear:both;}

/* main */
#main .main_wrap {margin:75px 0 0;}
#main .visual {width:100%; position:relative; z-index:0; background:#eee;}
#main .visual_wrap {width:100%;}
#main .visual li {height:500px; text-align:center; color:#fff; line-height:1.2; text-shadow: 0px 3px 6px rgba(0,0,0,0.6);
	background-position:center center; background-size:cover;}
#main .visual li:after {content:'DONGKANG TECH'; position:absolute; left:33.33%; bottom:-15px; font-size:3.5em; font-weight:600;
	color:rgba(255,255,255,0.1); text-shadow:none; white-space:nowrap;}
#main .visual li div {position:relative; height:100%; border-left:1px solid rgba(255,255,255,0.2); border-right:1px solid rgba(255,255,255,0.2);}
#main .visual li div:before {content:''; display:inline-block; width:1px; height:100%; background:rgba(255,255,255,0.2); position:absolute; top:0; left:33.33%;}
#main .visual li div:after {content:''; display:inline-block; width:1px; height:100%; background:rgba(255,255,255,0.2); position:absolute; top:0; right:33.33%;}
#main .visual li p {font-size:1em; padding:80px 0 0;}
#main .visual li h1 {font-size:2.5em; font-weight:600; padding:20px 0 0; text-transform:capitalize;}
#main .visual li img {margin:80px 0 0; max-width:440px;}
#main .visual .pager {position:absolute; bottom:280px; z-index:98; overflow:hidden; text-align:center; width:100%;}
#main .visual .pager a {display:inline-block; width:40px; height:10px; margin:0 10px 0 0; transform:skew(-45deg); background:#fff;}
#main .visual .pager a.active {width:80px; background:#8288b8;}
#main .visual .pager a:first-child {margin:0 10px 0 -5px;}

#main h1.tit {font-size:2.5em; font-weight:600; color:#212845; text-align:center; padding:60px 0 0;}
#main p.desc {font-size:1em; color:#303030; text-align:center;}
#main a.more {background:#434c95 url('../img/ic_more.png') 95% center no-repeat; color:#fff; display:block;
	width:100%; line-height:40px; text-align:center; margin:20px auto 0;}
#main a.more:hover {background-color:#212845;}

#main .product .info {width:100%; overflow:hidden; height:500px; margin:50px 0 0;}
#main .product .info .info_item {height:50px; transition:0.2s;}
#main .product .info .info_item .tit {width:100%; color:#fff; height:50px; line-height:50px; cursor:pointer; padding:0 3%;
	border-top:1px solid rgba(255,255,255,0.1);}
#main .product .info .info_item:first-child .tit {border-top:none;}
#main .product .info .info_item.active {height:300px;}
#main .product .info .info_item .detail {display:none; width:100%; height:calc(100% - 50px); padding:20px 3%;
	background:url('../img/main_product_bg.jpg') center center no-repeat; background-size:cover;}
#main .product .info .info_item.active .detail {display:inline-block; position:relative;}
#main .product .info .info_item .detail h2 {color:#434c95; font-weight:700; font-size:1.75em;}
#main .product .info .info_item .detail h4 {font-weight:500; color:#202020; font-size:1em;}
#main .product .info .info_item .detail p {color:#666; font-size:0.9em; margin:10px 0 0; max-width:200px; display:inline-block;}
#main .product .info .info_item .detail img {position:absolute; height:60%; bottom:10%; left:45%;}
#main .product .info .info_item .detail a {background:url('../img/ic_more_bk.png') right center no-repeat; padding:0 20px 0 0;
	display:block; font-weight:500; position:absolute; bottom:20px;}

#main .notice ul {margin:40px 0 0;}
#main .notice li {line-height:24px;}
#main .notice li a {color:#666; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; display:inline-block;
	overflow:hidden; width:calc(100% - 70px);}
#main .notice li span.date {float:right; font-size:0.9em; color:#999;}

#main .cs {background:url('../img/main_notice_bg.jpg') center center no-repeat; background-size:cover;
	text-align:center; margin:40px 3% 0; padding:40px 0 0;}
#main .cs h2 {font-size:1.75em; font-weight:600; color:#212845; margin:20px 30px 10px;}
#main .cs dl {margin:10px auto; display:inline-block;}
#main .cs dd {text-align:left;}
#main .cs dd span {width:60px; display:inline-block; font-weight:500;}

#main .links ul {max-width:360px; margin:40px auto 0;}
#main .links li {display:inline-block; width:50%; float:left; text-align:center; margin:20px 0;}
#main .links li:hover img {background:#e0e1ed;}
#main .links li img {width:100%; border-radius:500px; border:1px solid rgba(0,0,0,0.1); width:80px; transition:0.3s;}
#main .links li p {font-weight:500; margin:20px 0 0;}

@media all and (min-width:640px) {
	#main .links ul {max-width:100%;}
	#main .links li {width:25%;}
}

@media all and (min-width:840px) {
	#main .product .info {height:400px; width:100%;}
	#main .product .info .info_item {width:60px; height:100%; float:left;}
	#main .product .info .info_item .tit {width:60px; float:left; height:100%; border-left:1px solid rgba(255,255,255,0.1);
		overflow:hidden; position:relative; line-height:auto; padding:0; border-top:none;}
	#main .product .info .info_item .tit:after {content:''; display:inline-block; width:40px; height:10px; background:#fff;
		transform:skew(-45deg); position:absolute; right:-20px; bottom:40px;}
	#main .product .info .info_item:first-child .tit {border-left:none; border-top:none;}
	#main .product .info .info_item.active {width:calc(100% - 240px); height:100%;}
	#main .product .info .info_item .tit p {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transform-origin:0 0;
		position:absolute; top:30px; left:80px; line-height:100px; white-space:nowrap; font-size:1.25em;}
	#main .product .info .info_item .detail {width:calc(100% - 60px); height:100%; text-align:right;}
	#main .product .info .info_item .detail h2 {font-size:2em;}
	#main .product .info .info_item .detail h4 {font-size:1.25em;}
	#main .product .info .info_item .detail p {font-size:1em;}
	#main .product .info .info_item .detail img {height:60%; top:35%; left:3%;}
	#main .product .info .info_item .detail a {right:3%; bottom:35px;}

	#main .wrap:after {content:''; display:block; clear:both;}

	#main .cs {width:50%; height:360px; display:inline-block; float:left;}
	#main .cs a.more {width:50%; margin:30px auto 0;}

	#main .links {width:38%; margin:20px 3% 0; display:inline-block; float:right;}
	#main .links ul {max-width:100%;}
	#main .links li {width:50%;}
}

@media all and (min-width:1200px) {
	#main {margin:0 0 120px;}
	#main .visual li {height:700px; text-align:left;}
	#main .visual li:after {left:calc(50% + 220px); bottom:-20px; font-size:5em;}
	#main .visual li p {font-size:1.75em; padding:200px 0 0;}
	#main .visual li h1 {font-size:4em;}
	#main .visual li img {position:absolute; left:45%; top:calc(50% - 220px); max-width:840px; margin:0; z-index:10;}
	#main .visual .pager {left:calc(50% - 600px); width:auto;}

	#main h1.tit {font-size:2.75em; text-align:left; padding:80px 0 0; line-height:60px;}
	#main h1.tit.type01 {position:relative; padding-left:70px; overflow:hidden;}
	#main h1.tit.type01:before {content:''; display:inline-block; transform:skew(-45deg); width:50px; height:10px;
		background:#434c95; position:absolute; top:105px; left:-5px;}
	#main p.desc {font-size:1.15em; text-align:left; line-height:30px;}
	#main p.desc.type01 {padding-left:70px;}

	#main .product {position:relative;}
	#main .product .inner {border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); z-index:999;}
	#main .product:before {content:''; display:inline-block; width:calc(50% - 200px); height:220px;
		background:url('../img/main_bg01.jpg'); position:absolute; top:0; right:0;}
	#main .product .info {width:1200px;
		-webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2); box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2);}
	#main .product .info .info_item,
	#main .product .info .info_item .tit {width:100px;}
	#main .product .info .info_item .tit:after {right:-10px;}
	#main .product .info .info_item.active {width:800px;}
	#main .product .info .info_item .detail {width:calc(100% - 100px);}
	#main .product .info .info_item .tit p {left:100px;}

	#main .notice {background:#f0f0f0 url('../img/main_notice_bg.jpg') left center no-repeat; background-size:contain;
		height:360px; margin:-50px 0 0; padding:30px 0 0; position:relative;}
	#main .notice:before {content:''; display:inline-block; width:1px; height:100%; background:rgba(0,0,0,0.1);
		position:absolute; left:calc(50% - 600px); top:0;}
	#main .notice:after {content:''; display:inline-block; width:1px; height:100%; background:rgba(0,0,0,0.1);
		position:absolute; right:calc(50% - 600px); top:0;}
	#main .notice .inner {padding:0 0 0 400px; height:100%;}
	#main .notice .inner:before {content:''; display:inline-block; width:1px; height:100%; background:rgba(0,0,0,0.1);
		position:absolute; left:calc(50% - 200px); top:0;}
	#main .notice ul {width:420px; line-height:50px; position:absolute; top:-150px; right:40px; border-top:1px solid rgba(0,0,0,0.1);}
	#main .notice li {height:50px; line-height:50px; border-bottom:1px solid rgba(0,0,0,0.1); padding:0 20px;}
	#main .notice a.more {width:120px; margin:40px 0 0 50px; background-position:85% center; padding:0 20px 0 0;}

	#main .cs {background:url('../img/main_cs_bg.jpg') center center no-repeat; background-size:cover;
		width:320px; height:480px; position:absolute; left:calc(50% - 560px); top:80px; margin:0;
		-webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2); box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2);}
	#main .cs dl {float:left; padding:0 50px;}
	#main .cs h2 {padding:10px 0 0; border-top:1px solid rgba(0,0,0,0.1);}
	#main .cs a.more {width:130px; line-height:50px; margin:40px 0 0 50px; background-position:85% center; padding:0 20px 0 0;
		position:absolute; right:20px; top:415px;}

	#main .links {padding:20px 0 80px 400px; margin:0; width:100%;}
	#main .links ul {width:800px;}
	#main .links li {width:25%; margin:0;}
}

@media all and (min-width:1320px) {
	#main .main_wrap {margin:0;}
}

#main .product .info .info_item .tit {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#212845+0,293256+100 */
	background: #212845; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #212845 0%, #293256 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #212845 0%,#293256 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #212845 0%,#293256 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212845', endColorstr='#293256',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
#main .product .info .info_item .tit:hover,
#main .product .info .info_item.active .tit {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#212845+0,293256+100 */
	background: #434c95; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #434c95 0%, #293256 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #434c95 0%,#293256 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #434c95 0%,#293256 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434c95', endColorstr='#293256',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}


/* sub - 회사소개 */
.col_pu {color:#434c95;}
.gra {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#212845+0,293256+100 */
	background: #434c95; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #434c95 0%, #293256 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #434c95 0%,#293256 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #434c95 0%,#293256 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434c95', endColorstr='#293256',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.tab01 {border-top:1px solid #444; width:100%; font-size:0.9em;}
.tab01 tr {border-bottom:1px solid #ccc;}
.tab01 th {padding:5px 1%; vertical-align:middle;}
.tab01 td {padding:5px 1%; vertical-align:middle;}
.tab01 small {color:#888; margin-left:5px;}
.tab02 {border-top:1px solid #444; width:100%; font-size:0.9em;}
.tab02 tr {border-bottom:1px solid #ccc;}
.tab02 tr:nth-child(odd) {background:#fafafa;}
.tab02 th {padding:5px 1%; vertical-align:middle; text-align:left; font-weight:500;}
.tab02 td {padding:5px 1%; vertical-align:middle;}
.tab02 small {color:#888; margin-left:5px;}
.img_li li {display:inline-block; float:left; width:48%; margin:0 1% 10px;
	-webkit-box-shadow: 1px 2px 5px 0 rgb(0 0 0 / 10%); box-shadow: 1px 2px 5px 0 rgb(0 0 0 / 10%);}
.img_li li p {text-align:center; font-size:0.9em; padding:10px 1%;}
p.subtit {font-size:1.25em; font-weight:600; color:#434c95;}
.clear {content:''; display:block; clear:both;}
.shadow {-webkit-box-shadow: 1px 2px 5px 0 rgb(0 0 0 / 10%); box-shadow: 1px 2px 5px 0 rgb(0 0 0 / 10%);}

@media all and (min-width:960px) {
	.left_cont {display:inline-block; width:49%; float:left;}
	.right_cont {display:inline-block; width:49%; float:right;}
}

#sub .intro .info01 {position:relative;}
#sub .intro h1 {font-size:1.5em; font-weight:600;}
#sub .intro h1 span {color:#434c95;}
#sub .intro h3 {font-size:1.25em;}
#sub .intro p.eng {color:#fff; padding:20px 3%;}
#sub .intro img {display:none;}

#sub .map .info01 {border:1px solid #dcdcdc; border-bottom:0; padding:90px 3% 30px; background-size:auto 30px;
	background-image:url('../img/logo.png'); background-position:5% 30px; background-repeat:no-repeat; position:relative;}
#sub .map .info01 span {color:#434c95; font-weight:600; margin:0 10px 0 0;}
#sub .map a.btn {background:#434c95; color:#fff; display:block; width:100%; line-height:40px; text-align:center; margin:20px auto 0;}
#sub .map a.btn:hover {background-color:#212845;}

@media all and (min-width:840px) {
	.tab01,
	.tab02 {font-size:1em;}
	.img_li li {width:31.33%;}
	.img_li.item2 li {width:48%;}
	.img_li.item4 li {width:23%;}

	#sub .map .info01 {background-position:3% center; background-size:200px auto; padding:50px calc(6% + 100px) 50px calc(6% + 200px);
		-webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2); box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2);
		z-index:999;}
	#sub .map .info01 ul {border-left:1px solid #e0e0e0; padding:0 0 0 3%;}
	#sub .map .info01 li {display:inline-block; margin:0 10px;}
	#sub .map a.btn {position:absolute; right:3%; top:50%; width:100px; margin:-20px 0 0;}
}

@media all and (min-width:1200px) {
	.img_li li {width:23%;}
	.img_li.item2 li {width:48%;}
	.img_li.item3 li {width:31.33%;}

	#sub .intro h1 {font-size:2em; width:55%;}
	#sub .intro h3 {font-size:1.5em; width:55%;}
	#sub .intro p.eng {max-width:55%;}
	#sub .intro img {position:absolute; right:0; top:0; max-width:45%; height:100%; display:inline-block;}
}


/* sub - 제품소개 */
#sub .product .tab {display:inline-block; width:100%;}
#sub .product .tab li {display:inline-block; width:48%; float:left; margin:0 1% 10px; text-align:center;
	border:1px solid #dcdcdc; color:#999; font-size:0.9em;}
#sub .product .tab li.on {border-color:#434c95; color:#434c95; font-weight:600;}
#sub .product .tab li a {display:inline-block; width:100%; line-height:40px;}

#sub .product .head {position:relative;}
#sub .product .head div {background:#fff;}
#sub .product .head div h1 {font-size:2.25em; font-weight:700; color:#434c95;}
#sub .product .head div h2 {font-size:1.5em;}
#sub .product .head div h2 span.eng {font-size:0.6em; color:#aaa; border-left:1px solid rgba(0,0,0,0.2); padding-left:10px; margin-left:10px;}
#sub .product .head div h5 {color:#fff; padding:10px 3%; margin-bottom:40px;}
#sub .product .head img {width:80%; max-width:600px; display:block; margin-left:auto; margin-right:auto;}
#sub .product .head .model {font-size:0.9em; color:#888; text-align:center;}
#sub .product .head .model span {color:#434c95; font-size:1.1em; font-weight:600; margin-right:5px;}
#sub .product .box {background:#ebecee; padding:150px 0 50px; margin:-150px 0 0;}
#sub .product .box .info01 li {display:inline-block; float:left; width:31.33%; margin:0 1%; text-align:center;
	background-color:rgba(255,255,255,0.6); border:1px solid rgba(0,0,0,0.1); padding:60px 0 10px; font-size:0.9em;
	background-position:center 10px; background-repeat:no-repeat; background-size:40px;}
#sub .product .box .info01 li:nth-child(1) {background-image:url('../img/sub_product_ic01.png');}
#sub .product .box .info01 li:nth-child(2) {background-image:url('../img/sub_product_ic02.png');}
#sub .product .box .info01 li:nth-child(3) {background-image:url('../img/sub_product_ic03.png');}
#sub .product .box .info01.type01 li:nth-child(1) {background-image:url('../img/sub_product_ic04.png');}
#sub .product .box .info01.type01 li:nth-child(2) {background-image:url('../img/sub_product_ic05.png');}
#sub .product .box .info01.type01 li:nth-child(3) {background-image:url('../img/sub_product_ic06.png');}
#sub .product .box .info01 li span {color:#434c95; font-weight:600; margin-right:5px; display:block;}

#sub .product .acc {cursor:pointer; line-height:60px; padding:0 30px; width:100%; height:60px; font-size:1.25em; font-weight:600; background:#fff;
		border:none; border-top:1px solid #dcdcdc; outline:none; text-align:left; position:relative;}
#sub .product .acc:after {font-family:'FontAwesome'; content:'\f107'; position:absolute; right:30px; font-size:16px; top:0; bottom:0; margin:auto;}
#sub .product .acc.on {border-bottom:1px solid #dcdcdc;}
#sub .product .acc.on:before {content:''; display:inline-block; width:5px; height:100%; background:#434c95;
		position:absolute; left:0; top:0;}
#sub .product .acc.on:after {content:'\f106';}
#sub .product .acc:hover {background:#f4f4f8;}
#sub .product .acc.last {border-bottom:1px solid #dcdcdc;}
#sub .product .acc_cont {display:none; padding:30px;}

#sub .product .img {text-align:center;}
#sub .product .img img {max-width:100%;}

@media all and (min-width:768px) {
	#sub .product .tab li {width:31.33%;}
	#sub .product .head div h1 {font-size:2.75em;}
	#sub .product .head div h2 {font-size:1.75em;}
	#sub .product .head div h5 {font-size:1.1em;}
	#sub .product .box .info01 li {font-size:1em;}
	#sub .product .box .info01 li span {display:inline-block;}

	#sub .product .img {text-align:right;}
}

@media all and (min-width:1200px) {
	#sub .product .tab {max-width:80%; margin:0 10%;}
	#sub .product .tab li a {line-height:50px;}

	#sub .product .head div {padding:40px 0 0; display:inline-block; width:60%;
		-webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2); box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.2);}
	#sub .product .head div h1 {padding:0 5%;}
	#sub .product .head div h2 {padding:0 5%;}
	#sub .product .head div h5 {padding:10px 10% 10px 5%; margin-bottom:0;}
	#sub .product .head img {position:absolute; width:46%; top:25px; right:0; margin:0;}
	#sub .product .head .model {position:absolute; bottom:-40px; right:0; display:inline-block;}
}


/*sitemap*/
#sitemap {color:#fff;}
#sitemap h1 {font-size:2.5em; margin:0 0 60px;}
#sitemap li {display:inline-block; vertical-align:top; min-width:200px; margin:0 10px 40px;}
#sitemap li h2 {background:#434c95; line-height:44px; font-size:1.1em; font-weight:600; text-transform:uppercase;}
#sitemap li dl {padding:10px; border:1px solid rgba(255,255,255,0.2); border-top:0; line-height:30px; min-height:180px;}
#sitemap li dl a {text-transform:capitalize;}
#sitemap li dl a:hover {font-weight:600;}


/* footer */
#footer{background:#444444; color:#e2e2e2; font-size:0.9em; text-align:center; padding:40px 0; margin:60px 0 0;}
#footer .pdinner{max-width:1600px}
#footer address{margin-bottom:10px;}
/* #footer div{background:url(../img/foot_logo.png) no-repeat right center;} */
#footer p{font-size:0.85em; clear:both; margin-top:10px;}
#footer p b{font-weight:600;}

#pageup {position:fixed; z-index:999; right:1%; bottom:5%; width:50px; height:50px; background-image:url('../img/Htop.png');background-repeat: no-repeat;  background-position:center center; background-size: 50px 50px; display:none; cursor:pointer; z-index:4000;}

.bottom_li{text-align:center; margin-bottom:20px;}
.bottom_li li{display:inline-block; margin: 0 0.5%;}
.bottom_li li a{color:#ffffff}

@media all and (min-width:1200px) {
}

@media all and (min-width:768px) {
	#footer{padding:40px 0 60px; text-align:left;}
	#footer address{margin-bottom:0px;}
	#footer p{margin-top:10px;}

	.bottom_li{text-align:left;}
	.bottom_li li:first-child{margin-left:0}
}


/* 
	Common Layout CSS _ 15.05.18
*/

/* common */
.wrap{max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative; display:inline-block;}
.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1200px; padding:0 3%; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.tit_h3{font-size:28px;font-weight:400; color:#323232;  position:relative; letter-spacing:-1px}
.tit_h3:after{content:''; width:60px; height:1px; display:block; background:#505050; margin: 0 auto; margin-top:20px;}
.tit_h4{font-size:26px; color:#323232; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#323232; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}


.mEnter{display:block;}
.pEnter{display:inline-block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !important}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.line_link{display:inline-block; color:#ffffff; padding-bottom:5px; border-bottom:3px solid #ffffff; font-size:0.9em}
.arrow_cir_w:after{content:''; width:28px; height:25px; background:url(../img/ic_arrow_w.png) no-repeat center center; background-size:100%; display:inline-block; vertical-align:middle; margin-left:10px;}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:600}
.fss{font-size:0.8em}
.Tblack{color:#323232}
.Tred{color:#e83428}
.upcase{text-transform:uppercase}

.btn_more{display:inline-block; color:#ffffff; background:#1c3f95; padding:6px 20px; border-radius:500px; vertical-align:middle; position:relative; z-index:1}
.btn_more:after{content:'+'; display:inline-block; margin-left:10px; vertical-align:middle}

.btn_more.wt_btn{border:1px solid #dcdcdc; background:none; }

@media all and (min-width:768px) {

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}


.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}

.pb{padding-bottom:40px !important}
.bpb{padding-bottom:60px !important}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 3%}

.half{width:48.5%; float:left;}
.mr{margin-right:3%;}
.btn_more:after{margin-left:20px}
}

@media all and (min-width:1200px) {

body, html{font-size:16px; line-height:1.5}
.mEnter{display:inline-block;}
.pEnter{display:block;}

.txt-m{font-size:30px;}
.txt-l{font-size:40px;}

.tit_h3:after{margin-top:25px;}

.tit_h4{font-size:30px; }

.tit_h5{font-size:20px; }


.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}

.pb{padding-bottom:50px !important}
.bpb{padding-bottom:80px !important}
.pdinner{padding:0 20px}

}

@media all and (min-width:1200px) {

}



/* animation */
.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}

@-webkit-keyframes sub_tt {/* Chrome, Safari, Opera */ 
	0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 1;}
}
@keyframes sub_tt {/* Standard syntax */
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity:1;}
}
@-webkit-keyframes sub_tt {/* Chrome, Safari, Opera */ 
    0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 0;}
}
@keyframes sub_tt {/* Standard syntax */
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity: 1;}
}

.anim01 {animation-name: anim01; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim01 {
	0% {opacity: 0; transform: translateY(-1000px);} 
    60% {opacity: 1; transform: translateY(30px);} 
    80% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 
.anim02 {animation-name: anim02; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim02 {
	0% {opacity: 0; transform: translateY(1000px);} 
    60% {opacity: 1; transform: translateY(-30px);} 
    80% {transform: translateY(10px);} 
    100% {transform: translateY(0); } 
}



/* 서브레이아웃공통 */
.dot_li_wrap {background:#fafafa; padding:20px 0;}
.dot_li{overflow:hidden;}
.dot_li li{position:relative; padding-left:15px; margin-bottom:3px; word-break:break-all}
.dot_li li:before {content:''; display:inline-block; width:4px; height:4px; border-radius:50%; left:0; top:10px; position:absolute; background:#7b7b7b;}
.dot_li li:last-child{margin-bottom:0;}
.dot_li li.ref {font-size:0.9em; color:#666; margin:15px 0; background:#fcfcfc; border:1px dotted #ccc; padding:10px 30px;}
.dot_li li.ref:before {display:none;}
.dot_li li span.label {font-weight:700; margin-right:10px; color:#434c95;}
.num_li li span.label {background:#434c95; color:#fff; display:inline-block; width:20px; line-height:20px;
	text-align:center; border-radius:2px; margin-right:10px; font-size:0.9em;}
.tit_dot{font-size:1.25em; color:#303030; font-weight:600; padding-left:30px; background:url('../img/tit_cir.png') no-repeat left center;}

/* 서브레이아웃 */
#sub_vis {position:relative; padding:30px 0; background-repeat:no-repeat; background-position:center center; background-size:cover !important; color:#fff; text-align:center;}
#sub_vis .tit_h2 {font-weight:600; font-size:1.25em; margin-top:75px; text-shadow: 0px 3px 6px rgba(0,0,0,0.6); text-transform:capitalize;}
#sub_vis .tit_h2 span {display:block;  margin-bottom:10px; font-size:15px; font-weight:800; letter-spacing:-0.1em; text-transform:uppercase; position:relative;}
#sub_vis .tit_h2 b {display:block; line-height:1.2}
#sub_vis .tit_txt {font-size:0.85em; margin-top:10px; color:#fff;}
.menu_wrap {border-bottom:1px solid #e0e0e0; z-index:999;}

@media all and (min-width:768px) {
	#sub_vis {padding:50px 0px;}
	#sub_vis .tit_h2 {font-size:1.5em;}

	#sub_vis p{font-size:18px}
	#sub_vis .tit_h2 span:after {position:absolute; right:0; top:0; margin:0}
}

@media all and (min-width:1200px) {
	#sub_vis {padding:60px 0 120px;}
	#sub_vis .tit_h2 {font-size:2em; line-height:1.8;}
	#sub_vis p {font-size:18px}
	.menu_wrap {margin:-60px auto 0; border-top:none;}
	.menu_wrap .inner {background:rgba(0,0,0,0.7);}
}

@media all and (min-width:1320px) {
	#sub_vis .tit_h2{margin:0;}
}

.sub_tab{display:none}
#sub{margin: 0 auto 80px; position:relative; min-height:400px; padding:50px 0% 0px; overflow:hidden}
#sub:after{content:''; clear:both; display:block}



/* 2depth menu */
#twodepthNav {position:relative; display:none; margin: 0 auto; background:#e7211a}
#twodepthNav ul {overflow:hidden; text-align:center}
#twodepthNav ul li {position:relative; width:16%; display:inline-block; text-align:center; max-width:150px}
#twodepthNav ul li a{color:#ffffff}
#twodepthNav ul.li09 li{width:10.5%;}
#twodepthNav ul li a{display:block; line-height:60px; position:relative}
#twodepthNav ul li a:after{content:''; position:absolute; bottom:0; left:50%; width:0; height:4px; background:#0083ef; transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)}
#twodepthNav ul li:hover a:after{width:60px; margin-left:-30px;}
#twodepthNav ul li a:hover{font-weight:600; transition:0.3s}
#twodepthNav ul li:first-child a:before{width:0}
#twodepthNav ul li.active {background:#ffffff}
#twodepthNav ul li.active a{font-weight:600; color:#323232}
#twodepthNav ul li.active a:after{width:60px; margin-left:-30px;}

#sidemenu {display:none; position:absolute;width:200px;  z-index:9999; top:0px; left:20px} /* 기준 */
#sidemenu h2 {display:block;font-size:1.6em;   text-align:center; line-height:1.2;  color:#fff; min-height:100px; padding:60px 0; /* background:rgba(90,19,40,0.8); */ background:#29343f; position:relative; text-transform:uppercase;  }
#sidemenu h2 span {display:block; font-size:0.9rem; margin-bottom:10px;}

#sidemenu .snblist{border:1px solid #e6e6e6; border-width:0 1px 1px; background:#ffffff;  margin-bottom:30px}
#sidemenu .snblist li a {position:relative; display: block; padding:13px 20px; font-weight:400; border-bottom:1px solid #e6e6e6; color:#323232}
#sidemenu .snblist li:last-child a{border-bottom:0px;}
#sidemenu .snblist li a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;}
#sidemenu .snblist li a:hover {text-indent:5px; 	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; color:#303030; transition:0.3s}
#sidemenu .snblist li.active a {color:#d10000; font-weight:600}
#sidemenu .snblist li a i:after,#sidemenu .snblist li.active a i:after {
	position: absolute;
	top: 16px;
	font-weight:bold;
	right: 10px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-family: FontAwesome;
	content: "\f105";
	font-style:normal;  
	color:#808080
}
#sidemenu .snblist li a:hover i:after{right: 7px;}
#sidemenu .snblist li.active a i:after{color:#d10000}
#sidemenu .snblist li.active a:hover i:after{right:7px;}

#sidemenu .snblist li a i:after {background:rgba(255,255,255,0)}

#sidemenu .snblist li a:hover i:after {
	-webkit-transform: translateY(-50%) translateX(20%);
	-moz-transform: translateY(-50%) translateX(20%);
	-ms-transform: translateY(-50%) translateX(20%);
	-o-transform: translateY(-50%) translateX(20%);
	transform: translateY(0) translateX(20%);
	color:#fff;
	background:rgba(255, 255, 255, 1);
}

#sidemenu .snblist li.select a:hover i:after {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	color:#fff;
	background:rgba(255, 255, 255, 1);
}

#fl_menu{display:none;}
.con{position:relative; min-height:500px;}
.conh3{font-size:1.4em; font-weight:500; color:#000000; text-align:center; text-transform:capitalize;}
.conh3:after{content:''; width:40px; height:1px; background:#000000; display:block; margin:10px auto 30px;}

.path{display:block;}
.path li{font-size:12px; display:inline-block; vertical-align:top;}
.path li:before{content:'\f105'; font-family:'FontAwesome'; display:inline-block; padding:0px 10px}
.path li:first-child:before{display:none;}

@media all and (min-width:768px) {
	#sub{padding:50px 0px 0px}
	.conh3{font-size:2em}
	.conh3:after{margin:20px auto 40px;}

	#twodepthNav {position:relative; display:block;}
}

@media all and (min-width:1200px) {
	.subwrap{margin: 0 auto; position;}
	.sub_tab{display:block;background:#0788c7; padding:10px 0px; text-align:right; color:#ffffff; font-size:0.85em; text-align:right;}
	.sub_tab h3, .sub_tab p{display:inline-block; margin-left:15px; color:#fbdf40; font-weight:bold}
	.sub_tab h3{color:#ffffff}
	.sub_tab h3 span{margin-right:10px; text-transform:uppercase; color:#fbdf40}
	.sub_tab p {border-radius:50px; background:#462e16; padding:5px 10px;}

	#twodepthNav ul.li02 li{width:25%;}

	#sub{position:relative; width:100%; margin:0 auto 80px; min-height:650px; padding:80px 0px 0px}
	.con{width:1160px; margin:0 auto; min-height:800px;}
	.conh3:after{margin:20px auto 60px;}
}

@media all and (min-width:1640px) {
	#sidemenu{display:block}
	#fl_menu{display:block; position:absolute; right:20px; z-index:9999; width:125px; top:0px; height:600px}
	#fl_menu .label{text-align:center; line-height:80px; font-size:18px; font-weight:bold; background:#29343f; color:#fff;}
	#fl_menu ul {text-align:center; padding:10px 0px 30px; background:#ffffff}
	#fl_menu ul li a{font-size:16px; font-weight:600; padding:8px 0px}
	#fl_menu ul li span{display:block}
	#fl_menu .menu{display:block; border:1px solid #dcdcdc}
	#fl_menu .menu img{max-width:60px}
	#fl_menu .menu .menu_item{display:block; background:#ffffff; color:#323232; }
}



/*컬러패스
#sub_drop{position:relative; background:#e7211a;  font-size:0.9em}
#sub_drop .home a{display:block; line-height:45px; padding:0 20px; border-left:1px solid #dcdcdc; border-color:rgba(255,255,255,0.2);}
#sub_drop .home{min-width:46px !Important}
#sub_drop .home img{display:inline-block; vertical-align:middle}
#sub_drop .dropdown{float:left; border-right:1px solid #dcdcdc;border-color:rgba(255,255,255,0.2); position:relative;}
#sub_drop .dropdown.deph02{min-width:35%}
#sub_drop .dropbtn {background:#e7211a;  width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:45px; padding:0 25px 0 10px; cursor:pointer; color:#ffffff;}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:10px; color:#ffffff; font-size:14px; top:0; bottom:0; margin:auto;}

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 10px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #dcdcdc; box-sizing:content-box; left:-1px; width:100%;}
#sub_drop .dropmenu a{display:block; line-height:30px; color:#000000; }
#sub_drop .dropmenu a:hover {color:#e7211a; font-weight:600;}
#sub_drop .dropdown .show {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:768px) {
	#sub_drop .dropbtn{padding:0 25px 0 20px}
	#sub_drop .dropdown ul li{padding:5px 20px; }
	#sub_drop .dropdown{min-width:200px}
	#sub_drop .dropdown.deph02{min-width:200px}
	#sub_drop .dropmenu a{line-height:40px;}
	#sub_drop .home a{line-height:60px;} 
	#sub_drop .dropbtn {line-height:60px}
	#sub_drop .dropbtn:after{right:15px}
}

/*흰색패스*/
#sub_drop{position:relative; border-width:1px 0px; z-index:100}
#sub_drop .home a{display:block; line-height:45px; padding:0 20px;}
#sub_drop .home{min-width:46px !important;}
#sub_drop .home img{display:inline-block; vertical-align:middle}
#sub_drop .dropdown{float:left; border-right:1px solid #dcdcdc; position:relative; z-index:101}
#sub_drop .dropdown.deph02{min-width:35%}
#sub_drop .dropbtn {width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:45px; padding:0 25px 0 10px; cursor:pointer; color:#000000; font-size:14px;}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:10px; color:#000000; font-size:14px; top:0; bottom:0; margin:auto;}

#sub_drop .dropdown ul{z-index:999999;}
#sub_drop .dropdown ul li{padding:5px 10px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #dcdcdc; box-sizing:content-box; left:-1px; width:100%;}
#sub_drop .dropmenu a{display:block; line-height:30px; color:#000000; font-size:14px;}
#sub_drop .dropmenu a:hover {font-weight:600; color:#434c95;}
#sub_drop .dropdown .show {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:768px) {
	#sub_drop .dropbtn{padding:0 25px 0 20px; font-size:16px;}
	#sub_drop .dropdown ul li{padding:5px 20px; }
	#sub_drop .dropdown{min-width:200px}
	#sub_drop .dropdown.deph02{min-width:250px}
	#sub_drop .dropmenu a{line-height:40px; font-size:16px;}
	#sub_drop .home a{line-height:60px;} 
	#sub_drop .dropbtn {line-height:60px;}
	#sub_drop .dropbtn:after{right:15px;}
}

#sub_drop .list {display:none;}

@media all and (min-width:1200px) {
	#sub_drop .dropdown {border-right:1px solid rgba(255,255,255,0.3);}
	#sub_drop .dropdown.home {border-right:none;}
	#sub_drop .dropbtn {color:#fff;}
	#sub_drop .dropbtn:after{color:#fff;}
}

@media all and (min-width:1400px) {
	#sub_drop .list {position:absolute; width:220px; display:block;}
	#sub_drop .list .list_tit {text-align:center; padding:55px 0 0; height:160px; background:#d68466; color:#fff;}
	#sub_drop .list .list_tit .eng {font-size:0.6em; opacity:0.6;}
	#sub_drop .list .list_tit .kor {font-size:1.25em; font-weight:700; margin-top:10px;}
	#sub_drop .list li  {border:1px solid #e0e0e0; border-top:0;}
	#sub_drop .list li.active a {font-weight:700;}
	#sub_drop .list li a {padding:0 20px; font-size:0.9em; line-height:48px; display:inline-block; width:100%; transition:0.2s;}
	#sub_drop .list li a:hover {margin-left:5px;}
}