@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

#wrap {padding-bottom:175px;}
#footer_container {position:absolute; bottom:0; left:0; right:0;}
@media all and (max-width:640px){
	#wrap {padding-bottom:8.75rem;}
}

.no_data {width:auto !important; float:none !important; text-align:center !important; font-size:20px; padding:100px 0 !important;}

em.txt-point,
strong.txt-point {font-weight:600; text-decoration:underline; color:#000;}
em.txt-point {color:#f26b21;}

.bg-gray {background:#f9f9fb;}

.fixedBox {max-width:1400px; margin:0 auto;}
@media all and (max-width:1440px) {
	.fixedBox {padding-left:20px; padding-right:20px;}
}
@media all and (max-width:640px) {
	.fixedBox {width: 100%; padding-left:1rem; padding-right:1rem;}
}

.wideBox {max-width: 1760px; margin-left:auto}


@media all and (min-width:1025px) {
	.not-pc, .only-ta, .only-mo {display:none !important;}
}
@media all and (max-width:1024px) and (min-width:641px) {
	.only-pc, .not-ta, .only-mo {display:none !important;}
}
@media all and (max-width:640px) {
	.only-pc, .only-ta, .not-mo {display:none !important;}
}

#conts h2 {font-size: 40px; color: #333; font-weight: 600; padding: 5px 0;}
#conts h2:before {content: '';width: 26px;height: 25px;margin-right: 13px;display: inline-block;background: url('/en/img/sub/bullet_h2.gif') 0 0 no-repeat;}
#conts h3 {font-size: 38px; color: #202da2; font-weight: 600; padding: 30px 0;}
@media all and (max-width:640px) {
	#conts h2 {font-size: 1.9rem;}
	#conts h3 {font-size: 1.9rem; padding: 1.5rem 0;}
}

@media all and (max-width:416px) {
	#conts h2 {padding:0.25rem 0;}
	#conts h2:before {-webkit-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7);-o-transform: scale(0.7);transform: scale(0.7);-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;margin-right: 0;}
}

.pageInfoWrap {display:block; position:relative; padding:0; text-align:center; overflow:hidden;}
.pageInfoWrap .page-title {padding:90px 0 60px; max-width:90%; margin:63px auto 0;position: relative;}
.pageInfoWrap .page-title:before {content: '';width: 1px;height: 69px;background: #000;position: absolute;left: 50%;top: 0;}
.pageInfoWrap .page-title p {font-size:50px;}
.pageInfoWrap .page-title strong {font-weight:800; line-height:1.4;}
.pageInfoWrap .page-title .exp {display: inline-block; font-size: 28px; color: #999; margin-top: 30px; line-height: 140%; letter-spacing: -0.5pt;}
.pageInfoWrap .page-title .exp span {/* font-weight: 600; */ color: #333;}
.pageInfoWrap .page-visual {display:block; position:relative; background:no-repeat 50% 50%; background-size:cover; height:620px;overflow: hidden;}
.pageInfoWrap .page-visual::before {content:""; display:block; position:absolute; transform:translateY(100%); -webkit-transform:translateY(100%); transition:.7s all; -webkit-transition:.7s all;}
.load-active .pageInfoWrap .page-visual::before {transform:translateY(0%); -webkit-transform:translateY(0%);}

.pageInfoWrap.type-solution .page-title {padding-bottom:60px;}
.pageInfoWrap.type-solution .page-visual {height:300px;}

/** Visual Setting **/
.pageInfoWrap .page-visual .visual-img {animation:visualScale 3s; height: 620px;}
@keyframes visualScale {
	from {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
	}
	to {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.pageInfoWrap .page-visual[data-page="About us"] .visual-img {background:url('/en/img/visual/bak_vis_0101000000.jpg') 50% 50%; background-size:auto 100%;}
.pageInfoWrap .page-visual[data-page="Business"] .visual-img {background:url('/en/img/visual/bak_vis_0201000000.jpg') 50% 50%; background-size:auto 100%;}
.pageInfoWrap .page-visual[data-page="Product"] .visual-img {background:url('/en/img/visual/bak_vis_0301000000.jpg') 50% 50%; background-size:auto 100%;}

.pageInfoWrap .page-visual .txt {display:block; position:absolute; width: 1600px; top:71%; left: 50%;text-align:left; color:#fff; transform:translate(-50%,-45%); -webkit-transform:translate(-50%,-45%); z-index:1;text-shadow: rgb(0 0 0 / 30%) 0 0 24px;}
.pageInfoWrap .page-visual .txt strong {display:block; font-size:70px; line-height:1.2; font-family:'NEXONFootballGotBol'; animation:visualTxt 1s}
.pageInfoWrap .page-visual .txt span {display:inline-block; font-size:32px; margin-top:-3px; line-height:1.2; font-weight:100; animation:visualTxt 1s ease-in-out 0.3s 1 alternate; text-shadow: rgb(0 0 0 / 83%) 0 0 24px;
}
.pageInfoWrap .page-visual .txt span >span {font-weight: 400;}

@keyframes visualTxt {
	from {
		opacity: 0;transform:translateY(20px);
	}
	to {
		opacity: 1;transform:translateY(0);
	}
}

@media all and (max-width:1620px) {
	.pageInfoWrap .page-visual .txt {width: 95%;}
}

@media all and (max-width:1024px) {
	.pageInfoWrap .page-title {padding-bottom: 70px;}
	.pageInfoWrap .page-visual, .pageInfoWrap .page-visual .visual-img {height: 450px;}
	.pageInfoWrap .page-visual .txt strong {font-size: 60px;}
	.pageInfoWrap .page-visual .txt span, .pageInfoWrap .page-title .exp, .pageInfoWrap .page-title span {font-size: 28px;}
}

@media all and (max-width:768px) {
	.pageInfoWrap .page-visual, .pageInfoWrap .page-visual .visual-img {height: 360px;}
	.pageInfoWrap .page-title .exp, .pageInfoWrap .page-title span {font-size: 24px;}
}

@media all and (max-width:640px) {
	.pageInfoWrap .page-title {padding: 4.5rem 0; padding-bottom:1.7rem; margin-top: 2rem;}
	.pageInfoWrap .page-title strong, .pageInfoWrap .page-title p {font-size:2.2rem;}
	.pageInfoWrap .page-title .exp {font-size: 1.1rem; margin-top: 1rem;}
	.pageInfoWrap .page-title span {padding-top:.75rem; font-size:1.1rem;}
	.pageInfoWrap .page-visual {height:10rem !important;}
	.pageInfoWrap .page-visual .txt {top: 78%; display: none;}
	.pageInfoWrap .page-visual .txt strong {font-size: 1.5rem; line-height: 0;}
	.pageInfoWrap .page-visual .txt span {font-size: 0.9rem;margin-top: 0.4rem;}
	
	.pageInfoWrap.type-solution .page-title {padding-bottom:3rem;}
	.pageInfoWrap.type-solution .page-visual {height:15rem !important;}
	.pageInfoWrap.type-solution .page-visual[data-page="solution"] {height:10rem !important;}
	
	.pageInfoWrap .page-visual .visual-img {height: 11rem;}
	.pageInfoWrap .page-title:before {height: 3.45rem;}
}

.tab_depth03 {text-align:center;}
.tab_depth03 li {display:inline-block; vertical-align:middle; padding:0 48px;}
.tab_depth03 a {display:block; position:relative; line-height:88px; height:88px; text-align:center; font-size:21px; color:#999999; font-weight:800; z-index:0;}
.tab_depth03 a.on {color:#000;}
.tab_depth03 a.on::before {content:""; display:block; position:absolute; left:0; right:0; top:50%; margin-top:.5em; height:3px; background:#f26b21;}


.tab-nav {display:block; position:relative; margin-bottom:46px;}
.tab-nav::after {content:""; display:block; clear:both;}
.tab-nav button {display:block; position:relative; height:110px; text-align:center; font-size:24px; color:#575757; font-weight:800;}
.tab-nav button::after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:10px; background:#e6e6e6;}
.tab-nav button.on {font-size:28px; color:#000000;}
.tab-nav button.on::after {background:#f26b21;}

.tab-nav.cnt-5 button {width:20%; float:left;}
.tab-nav.cnt-4 button {width:25%; float:left;}
.tab-nav.cnt-3 button {width:33.33%; float:left;}
.tab-nav.cnt-2 button {width:50%; float:left;}

.tab-content {display:none;}

@media all and (max-width:640px) {
	.tab-nav {margin-bottom:2.3rem;}
	.tab-nav button {height:5.5rem; font-size:1.2rem; letter-spacing:-0.1em; word-break:keep-all;}
	.tab-nav button.on {font-size:1.3rem;}
	.tab-nav button::after {height:.5rem;}
	
	.tab_depth03 li {padding:0 2.4rem;}
	.tab_depth03 a {height:4.4rem; font-size:1rem; line-height:4.4rem;}
}


/*****************************************************************
	서브페이지 디자인 
-----------------------------------------------------------------
- 기본 서브페이지 관련된 디자인 속성 정의
*****************************************************************/

.pageTextBox {text-align:left; padding:50px 0; font-size:24px; color:#333; line-height:2.3; word-break:keep-all;letter-spacing: -0.5pt;}
.pageTextBox[data-page="Business"] {padding-top: 0;}
.pageTextBox strong {color:#000; font-weight:800;}
@media all and (max-width:1024px) {
	.pageTextBox {padding:50px 0; font-size:22px;}
}
@media all and (max-width:640px) {
	.pageTextBox {padding:2rem 0 1rem; font-size:1.1rem;}
}

/* .iconBox {text-align:center; font-size:18px; line-height:1.5; color:#333333;}
.iconBox li {padding-top:34px; padding-bottom:34px;}
.iconBox .thumb {display:block;}
.iconBox strong {display:block; padding:30px 0; color:#000; font-weight:600; font-size:30px; letter-spacing:-0.01em;}
.iconBox span {display:block; word-break:keep-all;}
@media all and (max-width:1024px) {
	.iconBox {font-size:15px;}
	.iconBox strong {padding:20px 0; font-size:25px;}
}
@media all and (max-width:640px) {
	.iconBox {font-size:1rem; padding-bottom:2rem;}
	.iconBox li {padding-top:1.7rem; padding-bottom:1.7rem;}
	.iconBox strong {padding:1.5rem 0; font-size:1.3rem;}
	.iconBox .thumb img {width:9.5rem;}
} */

.grayBox {padding:30px 18px; background:#f8f8f8;}
.grayBox + .grayBox {margin-top:20px;}
@media all and (max-width:640px) {
	.grayBox {padding:1.5rem 1rem;}
	.grayBox + .grayBox {margin-top:1rem;}
}

.titBox {display:table; width:100%; table-layout:fixed;}
.titBox > * {display:table-cell; vertical-align:middle; padding:10px; line-height:1.5;}
.titBox > dt {width:180px; text-align:center; font-size:19px; color:#000; font-weight:600;}
.titBox > dd {}
@media all and (max-width:640px) {
	.titBox {display:block;}
	.titBox > * {display:block; position:relative;}
	.titBox > dt {font-size:1.1rem; text-align:left; width:auto; padding:0;}
	.titBox > dt > br {display:none;}
	.titBox > dd {padding:1rem 0 0; font-size:1rem;}
	
	.titBox > dd .list-u {margin-left:.5rem;}
}


.welfareItem {display:table; width:100%; table-layout:fixed; border-bottom:1px solid #e7e7e7;}
.welfareItem > * {display:table-cell; vertical-align:middle; line-height:1.8;}
.welfareItem dt {padding:30px 0 30px 25px; text-align:center; padding-left:25px; width:250px;}
.welfareItem dd {width:310px; font-size:21px; padding-right:30px;}
.welfareItem dd strong {color:#000000; font-weight:800;}
.welfareItem dd span {display:block; max-width:650px; word-break:keep-all;}
.welfareItem dd + dd {width:auto; font-size:17px; color:#333333; font-weight:400; word-break:keep-all;}

@media all and (max-width:1024px) {
	.welfareItem {display:block; width:auto; position:relative; padding:30px 0 30px 200px; min-height:170px;}
	.welfareItem > * {display:block;}
	.welfareItem dt {position:absolute; width:200px; top:0; left:0; padding:0; padding:0;}
}
@media all and (max-width:640px) {
	.welfareItem {padding:2rem 0 2rem 9rem; min-height:8.5rem;}
	.welfareItem dt {top:1rem; width:9rem;}
	.welfareItem dd {font-size:1.1rem; padding-right:0; padding-bottom:1rem;}
	.welfareItem dd + dd {font-size:.95rem; padding-right:0; padding-bottom:0;}
	
}

.default-table,
.respons-table {width:100%; table-layout:fixed; color:#333; line-height:1.5; font-size:20px; letter-spacing:-0.02em; margin-bottom:25px;}
.default-table th,
.default-table td,
.respons-table th,
.respons-table td {border:1px solid #dbdbdb; vertical-align:middle; word-break:keep-all; background:#ffffff;}
.default-table td {padding:15px;}
.respons-table td {padding:40px 30px;}
.default-table thead > tr:first-child > *,
.default-table tbody > tr:first-child > *,
.respons-table thead > tr:first-child > *,
.respons-table tbody > tr:first-child > * {border-top:2px solid #000;}
.default-table thead + tbody > tr:first-child > *,
.respons-table thead + tbody > tr:first-child > * {border-top-width:0;}
.default-table th,
.respons-table th {font-weight:normal; font-size:22px;background-color: #f7f7f7;}
.default-table thead th,
.respons-table thead th {padding:20px 0; color:#fff; background-color: #282828; font-weight:600; font-size:23px;letter-spacing: 0;line-height: 120%;}
.default-table td[headers *= "_depart"],
.respons-table td[headers *= "_depart"] {text-align:center;}
.default-table td[headers *= "_depart"] span,
.respons-table td[headers *= "_depart"] span {display:block;}
.default-table td strong, .respons-table td strong {font-weight: 600;}

.default-table td.pad {padding:30px 40px;}

* + .default-table,
* + .respons-table {margin-top:30px;}

@media all and (max-width:900px) {
	.respons-table[page-data="y-MobileMonitorSDK"],
	.respons-table[page-data="y-MobileMonitorSDK"] > *,
	.respons-table[page-data="y-MobileMonitorSDK"] > * > tr,
	.respons-table[page-data="y-MobileMonitorSDK"] > * > tr > *,
	.respons-table[page-data="y-MobileMonitorSDK"] > * > tr:first-child > th,
	.respons-table[page-data="y-MobileMonitorSDK"] > * > tr:first-child > td {display:block; border:none;}
	
	.respons-table[page-data="y-MobileMonitorSDK"] tr {display:block; border:1px solid #dbdbdb; padding: 20px;}
	.respons-table[page-data="y-MobileMonitorSDK"] tbody th {text-align:left; padding: 20px;}
	.respons-table[page-data="y-MobileMonitorSDK"] tbody th br, .respons-table[page-data="y-MobileMonitorSDK"] tbody td br {display: none;}
	.respons-table[page-data="y-MobileMonitorSDK"] th {font-weight:600;}
	.respons-table[page-data="y-MobileMonitorSDK"] thead {display: none;}
	.respons-table[page-data="y-MobileMonitorSDK"] tbody td {text-align: left;padding: 20px 20px 10px !important;}
	.respons-table[page-data="y-MobileMonitorSDK"] tbody tr + tr {margin-top:20px;}
}

@media all and (max-width:640px) {
	.respons-table {font-size:1rem; margin-bottom:1.25rem;}
	.respons-table,
	.respons-table > *,
	.respons-table > * > tr,
	.respons-table > * > tr > *,
	.respons-table > * > tr:first-child > th,
	.respons-table > * > tr:first-child > td {display:block; border:none;}
	
	.respons-table tr {display:block; border:1px solid #dbdbdb; padding:1rem;}
	.respons-table tbody th {text-align:left; font-size:1.1rem; padding: 1rem;}
	.respons-table tbody th br {display: none;}
	.respons-table tbody td {padding:1rem 0 !important; font-size:1rem;}
	.respons-table tbody tr + tr {margin-top:1rem;}
	
	.default-table {font-size:1rem; margin-bottom:1.25rem;}
	.default-table thead th,
	.default-table tbody th,
	.default-table tbody td {padding:1rem .5rem;}
	.default-table thead th,
	.default-table tbody th {font-size:1.1rem;}
	.default-table tbody td {font-size:1rem;}
	
	* + .default-table,
	* + .respons-table {margin-top:1rem;}
	
	.default-table td.pad {padding:1.5rem 2rem;}
	
	.default-table th,.respons-table th {font-weight:600;}
}

.progress-circle {display:block; position:relative; clear:both;}
.progress-circle::after {content:""; display:block; clear:both;}
.progress-circle > li {display:block; float:left; width:23%; position:relative; z-index:0;}
.progress-circle > li + li {margin-left:2.66%;}
.progress-circle > li + li::after {content:""; display:block; position:absolute; top:50%; margin-top:-12px; left:-31px; width:31px; height:24px; background:url('/portal/img/sub/ico_content_0105_arrow.png') no-repeat 0 0; background-size:contain; z-index:-2;}
.progress-circle .item {display:block; position:relative; margin:0 auto; max-width:192px; height:192px; background:#f26b21; border-radius:9em; z-index:-1;}
.progress-circle .item em {display:block; position:absolute; left:0; right:0; top:40px; text-align:center;}
.progress-circle .item em img {}
.progress-circle .item span {display:block; position:absolute; color:#fff; font-size:19px; left:0; right:0; bottom:45px; text-align:center;}

@media all and (max-width:640px) {
	.progress-circle .item {max-width:100%; width:9.6rem; height:9.6rem;}
	.progress-circle .item em {top:2rem;}
	.progress-circle .item em img {height:3.75rem;}
	.progress-circle .item span {font-size:1rem; bottom:2.25rem;}
	.progress-circle > li + li::after {display:none;}
	
}


.list-u > li {display:block; position:relative; line-height:1.6; padding-left:10px;}
.list-u > li::before {content:""; display:block; position:absolute; width:3px; height:3px; background:#000; border-radius:100%; left:0; top:.8em; margin-top:-1px;}
.list-u > li + li {margin-top:25px;}

.list-o {counter-reset:index;}
.list-o > li {display:block; position:relative; line-height:1.6; padding-left:30px;}
.list-o > li::before {counter-increment:index; content:counter(index); display:block; position:absolute; width:1.6em; height:1.6em; background:#000; border-radius:100%; font-size:15px; color:#fff; text-align:center; line-height:1.6em; left:0; top:0;}
.list-o > li + li {margin-top:10px;}

p.list-u {display:block; position:relative; line-height:1.6; padding-left:10px; font-size:17px;}
p.list-u::before {content:""; display:block; position:absolute; width:3px; height:3px; background:#000; border-radius:100%; left:0; top:.8em; margin-top:-1px;}
p.list-u + p.list-u {margin-top:5px;}
p.icon-tit + p.list-u {margin-top:-5px !important;}

@media all and (max-width:640px) {
	.list-u > li {padding-left:.5rem;}
	.list-u > li::before {width:.15rem; height:.15rem;}
	.list-u > li + li {margin-top:.7rem;}
	
	.list-o > li {padding-left:2rem;}
	.list-o > li::before {font-size:.85rem;}
	.list-o > li + li {margin-top:.5rem;}
		
	p.list-u {padding-left:.5rem; font-size:1rem;}
	p.list-u::before {width:.15rem; height:.15rem;}
	p.list-u + p.list-u {margin-top:.25rem;}
	p.icon-tit + p.list-u {margin-top:-.25rem !important;}
}

.banner-list {display:block; position:relative; overflow:hidden; border:1px solid #dbdbdb; border-top-color:#000000;}
.banner-list::before,
.banner-list::after {content:""; display:block; position:absolute; top:0; bottom:0; width:25%; border:1px solid #dbdbdb; border-bottom-width:0; border-top-width:0; z-index:1;}
.banner-list::before {left:25%;}
.banner-list::after {right:25%; border-left-width:0;}
.banner-list li {display:block; position:relative; width:25%; float:left; text-align:center; padding:18px 0; border-bottom:1px solid #dbdbdb; margin-bottom:-1px; z-index:0;}

@media all and (max-width:640px) {
	.banner-list li {width:33.33%;}
	.banner-list::before {width:auto; left:33.33%; right:33.33%;}
	.banner-list::after {display:none;}
	
}

.ex-item {display:block; margin:6px; border:1px solid #dddddd; background:#fff; text-align:center; padding:40px 20px; min-height: 300px;}
.ex-item .tit {display:block; padding:20px 0 15px; color:#000; font-weight:600; font-size:18px;}
.ex-item .txt {display:inline-block; width:470px; max-width:80%; word-break:keep-all; font-size:17px; color:#333333; line-height:1.6;}

@media all and (max-width:640px) {
	.ex-item {margin:0rem; padding:2rem 1rem; height:auto !important; min-height:0 !important;}
	.ex-item .icon img {height:3.95rem;}
	.ex-item .tit {padding:1rem 0 .75rem; font-size:1.1rem;}
	.ex-item .txt {max-width:90%; font-size:1rem;}
}

.service-button-area {display:block; padding-top:40px;}

@media all and (max-width:640px) {
	.service-button-area {padding-top:2rem;}
}

.btnArea .btn-basic {display: block;border: 1px solid #999;height: 96px;width: 49.5%;float: left;font-size: 20px;text-align: center;padding: 31px 15px;color: #000;}
.btnArea .btn-basic:first-of-type {margin-right: 1%;}
.btnArea .btn-basic:hover {background-color: #0170ff; color: #fff;}
.btnArea .btn-basic span {position: relative;display: inline-block; padding-left: 64px;line-height: 31px;}
.btnArea .btn-basic:first-of-type span:before {width: 35px; height: 23px; top: 6px; background: url('/en/img/sub/spr_ico_btn.png') 0 -5px;}
.btnArea .btn-basic:first-of-type:hover span:before {background-position: 0 28px;}
.btnArea .btn-basic span:before {content: '';position: absolute;left: 0;top: -1px; width: 36px;height: 35px;background: url('/en/img/sub/spr_ico_btn.png') -64px 0; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.btnArea .btn-basic:hover span:before {background-position: -64px 33px;}

@media all and (max-width:768px) {
	.btnArea {margin-top: 40px !important;}
	.btnArea .btn-basic {text-align: left; padding-left: 30px;}
	.btnArea .btn-basic span {padding-left: 50px;}
}
@media all and (max-width:640px) {
	.btnArea {margin-top: 2rem !important;}
	.btnArea .btn-basic {margin-right: 0; width: 100%; padding: 1.55rem 0.75rem 1.55rem 1.5rem;height: 4.8rem;font-size: 1rem;}
	.btnArea .btn-basic span {padding-left: 3rem; line-height: 1.55rem;}
	.btnArea .btn-basic span:before { top: 50% !important;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
	.btnArea .btn-basic:not(:last-of-type) {margin-bottom: 0.5rem;}
}
@media all and (max-width:416px) {
	.btnArea .btn-basic span {padding-left: 3.5rem;}
	.btnArea .btn-basic span:before {width: -webkit-transform: scale(0.7);-moz-transform: scale(0.7) translateY(-23%);-ms-transform: scale(0.7) translateY(-23%);-o-transform: scale(0.7) translateY(-23%);transform: scale(0.7) translateY(-23%);-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;top: 23% !important;}
}
@media all and (max-width:320px) {
	 .btnArea .btn-basic span {padding-left: 4rem;}
}

/*****************************************************************
	솔루션 메인 페이지
-----------------------------------------------------------------


******************************************************************/




/*****************************************************************
	솔루션 상세 페이지
-----------------------------------------------------------------


******************************************************************/

/** 공통 스타일 **/

.solutionTopBox {display:block; position:relative; margin-top:-80px; margin-bottom:80px;}
.solutionTopBox dt {display:block; position:relative; background:#fff; text-align:center; color:#000000;}
.solutionTopBox dt p {display:block; padding:20px 0;}
.solutionTopBox dt strong {display:inline-block; font-size:25px; font-weight:800; vertical-align:middle; padding:0 5px; word-break:keep-all; line-height:1.5;font-family: 'Roboto', "Nanum Gothic", "Noto Sans KR", "Malgun gothic", 맑은고딕, sans-serif;}
.solutionTopBox dt span {display:inline-block; font-size:18px; padding:0 5px; vertical-align:middle; word-break:keep-all; line-height:1.5;}
.solutionTopBox dt .ctl {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.solutionTopBox dt .ctl > a {display:block; position:absolute; top:0; bottom:0; width:80px; overflow:hidden; text-indent:-999px; text-align:left; background:url('/portal/img/sub/spr_solution_control.png') no-repeat 0 0;}
.solutionTopBox dt .ctl > a:hover {background-image:url('/portal/img/sub/spr_solution_control_on.png');}
.solutionTopBox dt .ctl .list {left:0; background-position:left 25px top 50%;}
.solutionTopBox dt .ctl .prev {right:80px; background-position:right -45px  top 50%;}
.solutionTopBox dt .ctl .next {right:0px; background-position:right 33px  top 50%;}
.solutionTopBox dd {background:#20202c; padding:40px 0; color:#cdcdd5; font-size:18px; line-height:1.7;}
.solutionTopBox dd .desc {display:table; width:90%; table-layout:fixed; min-height:150px;}
.solutionTopBox dd .desc > * {display:table-cell; vertical-align:middle; word-break:keep-all;}
.solutionTopBox dd .desc .thumb {width:320px; text-align:center; padding-left:20px;}
.solutionTopBox dd .desc strong {font-weight: 600;color: #fff;}

@media all and (max-width:1024px) {
	.solutionTopBox dt .ctl .list {display:none;}
	.solutionTopBox dt .ctl .prev {right:auto; left:0;}
	.solutionTopBox dt {padding:0 80px;}
	.solutionTopBox dd .desc .thumb {width:30%; padding:0 20px;}
}
@media all and (max-width:640px) {
	.solutionTopBox {margin-top:-4rem; margin-bottom:4rem;}
	.solutionTopBox dt {padding:0 4rem;}
	.solutionTopBox dt p {padding:1rem 0;}
	.solutionTopBox dt strong {font-size:1.3rem; padding:0 .25rem;}
	.solutionTopBox dt span {font-size:.95rem; padding:0 .25rem;}
	.solutionTopBox dt .ctl > a {width:4rem; background-size:9.2rem auto;}
	.solutionTopBox dt .ctl .list {background-position:left 1.25rem top 50%;}
	.solutionTopBox dt .ctl .prev {background-position:right -2.25rem  top 50%;}
	.solutionTopBox dt .ctl .next {background-position:right 1.65rem  top 50%;}
	.solutionTopBox dd {padding:2rem; font-size:1.1rem;}
	.solutionTopBox dd .desc {display:block; width:auto; padding:0; min-height:0px;}
	.solutionTopBox dd .desc > * {display:block;}
	.solutionTopBox dd .desc .thumb {width:auto; text-align:center; padding:0 1rem;}
	.solutionTopBox dd .desc .thumb img {max-width:5.6rem;}
	.solutionTopBox dd .desc .txt {padding:1rem 0 0 0;}
}

.solution-content {padding-bottom:60px; box-sizing:border-box; position:relative;}
.solution-content > dl {display:block; position:Relative; max-width:1400px; margin:0 auto; padding-left:316px;}
.solution-content > dt,
.solution-content > dl > dt {display:block; position:absolute; top:0; left:0; width:250px; font-size:24px; color:#000; font-weight:600; word-break:keep-all;}
.solution-content > dt::before,
.solution-content > dl > dt::before {content:""; display:block; position:absolute; left:130px; right:0; height:2px; background:#000; top:.7em;}
.solution-content > dt span,
.solution-content > dl > dt span {display:block; position:relative; line-height:1.4; max-width:130px;}
.solution-content > dd {margin-left:316px;}
.solution-content.bg-gray {padding-top:60px; margin-bottom:60px;}
.solution-content.bg-gray > dl > dt {top:60px;}

.solution-content p {font-size:17px; line-height:1.6;}
.solution-content p + p {margin-top:30px;}
.solution-content p.small {font-size:16px;}
.solution-content p + .small {margin-top:16px;}

dl.solution-content {padding-bottom:75px;}
dl.solution-content + dl.solution-content {border-top:1px solid #e7e7e7; padding-top:75px;}
dl.solution-content + dl.solution-content > dt {top:75px;}

@media all and (max-width:1440px) {
	.solution-content {padding-left:20px; padding-right:20px;}
	.solution-content > dl {padding-left:210px;}
	.solution-content > dl > dt  {width:190px;}
	.solution-content > dl > dt span {max-width:150px;}
	.solution-content > dt::before,
	.solution-content > dl > dt::before {left:150px;}
	
	.solution-content > dd {margin-left:190px;}
	.solution-content > dt {width:190px;}
	.solution-content > dt span {max-width:150px;}
}
@media all and (max-width:1150px) {
	.solution-content > dl {padding-left:0;}
	.solution-content > dt,
	.solution-content > dl > dt  {position:Relative; top:auto; left:auto; width:auto; margin-bottom:30px;}
	.solution-content.bg-gray > dl > dt {top:auto;}
	
	.solution-content > dt::before,
	.solution-content > dl > dt::before {left:1em;}
	
	.solution-content > dd {margin-left:0px;}
	
	.solution-content > dt span,
	.solution-content > dl > dt span {width:auto; display:inline-block; max-width:100%; padding-right:2em; background:#fff;}
	.solution-content.bg-gray > dt span,
	.solution-content.bg-gray > dl > dt span {background:#f9f9fb;}
	
	.fixedBox .solution-content {padding-left:0 !important; padding-right:0 !important;}
	dl.solution-content + dl.solution-content > dt {top:auto;}
}
@media all and (max-width:640px) {
	.solution-content {padding-bottom:3rem; padding-left:1rem; padding-right:1rem;}
	.solution-content > dt,
	.solution-content > dl > dt {width:auto; margin-bottom:1.5rem; font-size:1.2rem;}
	
	
	.solution-content.bg-gray {padding-top:3rem; margin-bottom:3rem;}
	
	dl.solution-content {padding-bottom:2.5rem;}
	dl.solution-content + dl.solution-content {padding-top:2.5rem;}
	dl.solution-content + dl.solution-content > dt {top:auto;}
	
	.solution-content p {font-size:1rem;}
	.solution-content p + p {margin-top:1.5rem;}
	
	.solution-content p.small {font-size:.9rem;}
	.solution-content p + .small {margin-top:.8rem;}
}


.solution-main {display:block; text-align:center; border:1px solid #dddddd; margin-bottom:130px;}
.solution-main dt {border-bottom:1px solid #dddddd; padding:25px 0 20px;}
.solution-main dt .page-title {padding-bottom:0 !important;}
.solution-main dt .page-title span {padding-top:5px !important;}
.solution-main dd {padding:60px 20px; text-align:center;}

@media all and (max-width:640px) {
	.solution-main {margin-bottom:6.5rem;}
	.solution-main dt {padding:1.25rem 0 1rem;}
	.solution-main dt .page-title span {padding-top:.25rem !important;}
	.solution-main dd {padding:3rem 1rem;}
}

.spec-item {display:block; position:relative; border:1px solid #dddddd;}
.spec-item .tit {display:block; position:relative; padding:28px 10px 18px; text-align:center; font-size:19px; font-weight:600; line-height:1.4;}
.spec-item .tit.multiple {padding:13px 10px 7px}
.spec-item .tit.multiple span >span {letter-spacing: -0.6pt;}
.spec-item .tit >a {pointer-events: none;cursor: default;color:#000;}
.spec-item .icon {text-align:center; display:block; position:relative;}
.spec-item .icon::before {content:""; display:block; position:absolute; top:50%; left:0; right:0; height:1px; background:#eeeeee; z-index:0;}
.spec-item .icon img {position:relative; z-index:1;}
.spec-item .con {padding:15px 10px; color:#333; font-size:17px;/* position: relative;display: block; */}
.spec-item .con li {display:block; position:relative; padding-left:15px; line-height:1.4; word-break:keep-all;}
.spec-item .con li::before {content:""; display:block; position:absolute; left:0; top:.7em; margin-top:-1px; width:3px; height:3px; border-radius:100%; background:#000;}
.spec-item .con li + li {margin-top:1em;}
.spec-item .con li strong {font-weight:600;}
.spec-item .con li em {color:#f26b21;}

@media all and (max-width:640px) {
	.spec-item {height:auto !important;}
	.spec-item .tit {padding:1.4rem .5rem .9rem !important; font-size:1.1rem;text-align: left;}
	.spec-item .tit span, .spec-item .tit div {display: inline-block;vertical-align: middle;padding-left: 0.5rem;}
	.spec-item .tit >a {pointer-events: auto;cursor: pointer;display: block;position: relative;}
	.spec-item .tit >a::after {content: '';background:url('/portal/img/sub/icon_spec_open.png') no-repeat;background-size: contain;width: 25px;height: 13px;position: absolute;right: 0.7rem;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
	.spec-item .tit >a.open::after {background:url('/portal/img/sub/icon_spec_close.png') no-repeat;background-size: contain;}
	.spec-item .tit img, .spec-item .icon img {max-width:4.2rem;}
	.spec-item .con {padding: 0 1rem;font-size:1rem;max-height:0;overflow: hidden;transition: .3s all ease-in-out;-webkit-transition: .3s all ease-in-out;}
	.spec-item .con ul {visibility: hidden; opacity: 0;transition: .3s all ease-in-out;-webkit-transition: .3s all ease-in-out;}
	.spec-item .con.open {padding:1rem;max-height: 100%;}
	.spec-item .con.open ul {opacity: 1;visibility: visible;}
	.spec-item .con li {padding-left:.8rem;}
}

/* 솔루션 레퍼런스 */
.reference-list {display:block; position:relative; overflow:hidden;border: none;}
.reference-list li {display:block; position:relative; width:20%;float:left; text-align:center;z-index:0;}
.reference-list li >div {border:1px solid #dbdbdb;margin: 5px;}

@media all and (max-width:1024px) {
	.reference-list li {width: 25%;}
}
@media all and (max-width:768px) {
	.reference-list li {width:33.33%;}
}


/* history */
.fixedBox .history-type {background: url('/en/img/sub/txt_history.png') left 80px no-repeat;}
.history-type * {float: left;}
.history-type >ul >li, .history-type .cont >ul >li {margin-top: 50px;}
.history-type .year {font-size: 60px; font-family: 'roboto', 'Poppins'; color: #202da2;padding: 35px; width: 200px; letter-spacing: -1pt;}
.history-type .month {color: #af876c; font-size: 36px; width: 130px; height: 130px; border:solid 2px #af876c;text-align: center; line-height: 130px; margin-right: 30px;}
.history-type .list {width:calc(100% - 360px);}
.history-type .list.single {margin: 50px 0 30px;}
.history-type .list.double {margin: 30px 0 12px;}
.history-type .list li {font-size: 25px; position: relative; padding: 0 0 30px 15px; line-height: 150%; letter-spacing: -0.5pt; color: #333;}
.history-type .list li:before {content: ''; width: 4px; height: 4px; background-color: #7d7d7d;position: absolute;left: 0;top: 16px;}
.history-type .list li span {color: #999;}
.history-type >ul {float: left; margin-left: 326px; padding: 30px 0 210px;}
/* .wideBox .history-type {background: url('/en/img/sub/bg_history.jpg') right 42px no-repeat;} */
/* .history-part2 {width: 940px;}
.wideBox .history-type, .history-part2 {margin-top: -150px;}
.history-type .history-part2 .list {width: 580px;} */

.historyPack.photo-type {max-width: 1920px; margin: 0 auto;}
.historyPack.photo-type .history-type .img.ta {display: none;}
.historyPack.photo-type .history-type >div {float: left;}
.historyPack.photo-type .history-type .img {margin-top: -80px; float: right;}
.historyPack.photo-type .history-type .cont {width: 54.3%; margin:-130px 0 0 5.7%;}
.historyPack.photo-type .history-type .list {width: calc(100% - 400px);}
.historyPack.photo-type .history-type .img {width: 40%;}
.historyPack.photo-type .history-type >li {padding-left: 6%;}
/* .historyPack.photo-type .history-type .list {width: 620px;} */

.historyPack.photo-type .history-type.reverse .cont {margin-top: 90px; width: 57.3%;}
.historyPack.photo-type .history-type.reverse .list {width: calc(100% - 360px);}
.historyPack.photo-type .history-type.reverse .img {margin-top: 340px;}
.historyPack.photo-type .history-type.reverse .img {width: 27%; float: left;}

@media all and (max-width:1440px){
	.fixedBox .history-type {background-image: none;}
	.history-type >ul {margin-left: 0; padding-bottom: 60px;}
	.history-type .list {width:calc(100% - 360px);}
	
	.historyPack.photo-type {max-width: 1400px; margin: 0 auto;}
	.historyPack.photo-type .history-type .cont, .historyPack.photo-type .history-type.reverse .cont {width: calc(100% - 43px); margin-left:16px;}
	.historyPack.photo-type .history-type .cont, .historyPack.photo-type .history-type .img {float: none;}
	.historyPack.photo-type .history-type .img {padding: 0 20px; width: 100%; margin-top: 0;}
	.historyPack.photo-type .history-type .img.pc {display: none;}
	.historyPack.photo-type .history-type .img.ta {display: block;}
	.historyPack.photo-type .history-type .img img {width: 1400px;}
	.historyPack.photo-type .history-type .list {width:calc(100% - 360px);}
	
	.historyPack.photo-type .history-type.reverse .cont {margin-top: 60px;}
	.historyPack.photo-type .history-type.reverse .img {margin-top: 0; padding: 0 20px; width: 100%;}
}
@media all and (max-width:768px) {
	.history-type * {display: inline-block; width: 100%;}
	.history-type .year {display: block; text-align: center; width: 100%;}
	.history-type .year.empty {display: none;}
	.history-type .month {width: 18%; height: 80px; line-height: 80px;}
	.history-type >ul {margin-bottom: 0;}
	.history-type >ul >li, .history-type .cont >ul >li, .historyPack.photo-type .history-type.reverse .cont {margin-top: 0;}
	.history-type .list, .historyPack.photo-type .history-type .list, .historyPack.photo-type .history-type.reverse .list {width: 71%;}
	.history-type .list, .history-type .list.single, .history-type .list.double {margin: 30px 0;}
	.historyPack.photo-type {padding-left: 1rem; padding-right: 1rem;}
	.historyPack.photo-type, .historyPack.photo-type .history-type .cont, .historyPack.photo-type .history-type.reverse .cont {width: 100%; margin-left: 0;}
	.historyPack.photo-type .history-type .img.pc, .historyPack.photo-type .history-type .img.ta {display: none;}
	.historyPack.photo-type .history-type .cont {margin-top: -40px;}
}
@media all and (max-width:640px) {
	.history-type .year {font-size: 3rem; padding:  1.75rem;}
	.history-type .month {height: 4rem; line-height: 4rem; font-size: 1.8rem; margin-right: 3%;}
	.history-type .list, .historyPack.photo-type .history-type .list, .historyPack.photo-type .history-type.reverse .list {width: 79%;}
	.history-type .list, .history-type .list.single, .history-type .list.double {margin: 0.5rem 0 2.5rem;}
	.history-type .list li {font-size: 1.2rem;padding: 0 0 1.5rem 0.75rem;}
	.history-type .list li:before {width: 0.2rem; height: 0.2rem; top: 0.8rem;}
}

/* contact us */
.contactus {margin-top: 100px;overflow: hidden;}
.contactus li {float: left; width: 47.5%; border: 1px solid #999; padding: 28px 67px 49px;}
.contactus li:hover, .contactus li:focus, .contactus li:active {background-color: #2c324b; -webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-ms-transition: background-color .5s;
-o-transition: background-color .5s;
transition: background-color .5s;}
.contactus li:hover *, .contactus li:focus *, .contactus li:active * {color: #fff !important;}
.contactus li:first-of-type {margin-right: 5%;}
.contactus li h2 {font-size: 40px; padding: 32px 0 !important; color: #333; font-weight: normal !important;}
.contactus li h2:before, .contactus li h2:after {display: none !important;}
.contactus li:hover  h2, .contactus li:focus h2, .contactus li:active h2 {font-weight: 600 !important;}
.contactus li p {font-size: 26px; padding: 10px 0;}
.contactus li, .contactus li a {color: #333;}
.contactus li a[href^="mailto:"]:hover, .contactus li a[href^="tel:"]:hover {color: #fe6326 !important}
.contactus li a:not([href^="mailto:"]):hover {cursor: default;}
.contactus .product {margin-right: 20px; /* background: url('/en/img/sub/ico_inquiry_1.png') 86% 69% no-repeat; */position: relative;}
.contactus .product .ani {width: 108px; height: 82px; position: absolute; right: 10%;top: 51%;}
.contactus .product .ani .ico-notebook {display: inline-block;width: 108px; height: 74px; background: url('/en/img/sub/ico_notebook.png'); }
.contactus .product .ani .ico-cube {display: inline-block;width: 36px; height: 39px; background: url('/en/img/sub/ico_cube.png');position: absolute;right: 36px;}
.contactus .product .ani .ico-cube.first {top: 18px;}
.contactus .product .ani .ico-cube.second {top: -9px;}
.contactus .product .ani .ico-cube.last {top: -9px;}
.contactus li:hover .ico-cube.first, .contactus li:focus .ico-cube.first, .contactus li:active .ico-cube.first { animation:icoCube01 2s infinite;background-image: url('/en/img/sub/ico_cube_on.png');}
.contactus li:hover .ico-cube.second, .contactus li:focus .ico-cube.second, .contactus li:active .ico-cube.second {animation:icoCube02 2s infinite; animation-delay: 2s;}
.contactus li:hover .ico-cube.last, .contactus li:focus .ico-cube.last, .contactus li:active .ico-cube.last {animation:icoCube02 2s infinite;}
.contactus .technical {/* background: url('/en/img/sub/ico_inquiry_2.png') 86% 69% no-repeat; */position: relative;}
.contactus .technical .ani {width: 96px; height: 103px; position: absolute; right: 7%;top: 45%;}
.contactus .technical .ani .ico-person {display: inline-block;width: 77px; height: 102px; background: url('/en/img/sub/ico_person.png');}
.contactus .technical .ani .ico-gear.first {display: inline-block;width: 59px; height: 59px; background: url('/en/img/sub/ico_gear_1.png'); position: absolute; left: -20px; top: -1px;}
.contactus .technical .ani .ico-gear.second {display: inline-block;width: 33px; height: 33px; background: url('/en/img/sub/ico_gear_2.png'); position: absolute; left: 12px; bottom: 13px;}
.contactus li:hover .ico-gear.first, .contactus li:focus .ico-gear.first, .contactus li:active .ico-gear.first {animation:icoGear01 6s infinite; background-image: url('/en/img/sub/ico_gear_1_on.png') !important;}
.contactus li:hover .ico-gear.second, .contactus li:focus .ico-gear.second, .contactus li:active .ico-gear.second {animation:icoGear02 5s infinite;}

@keyframes icoGear01 {
	from {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		transform: rotate(-360deg)
	}
}
@keyframes icoGear02 {
	from {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes icoCube01 {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes icoCube02 {
	0% {
		opacity: 1;
		-webkit-transform: translateY(-10px);
		-moz-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-o-transform: translateY(-10px);
	}
	25% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	75% {
		opacity: 1;
		-webkit-transform: translateY(28px);
		-moz-transform: translateY(28px);
		-ms-transform: translateY(28px);
		-o-transform: translateY(28px);
		transform: translateY(28px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
		-moz-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-o-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

.adressInfoBox {padding: 50px 0 0;}
.adressInfoBox >div {border-bottom: 1px solid #ddd; padding: 30px 0 40px;}
.adressInfoBox address:not(:last-of-type) {margin-bottom: 50px;}
.adressInfoBox address * {font-size: 24px; color: #999;}
.adressInfoBox address p {padding: 10px 0; line-height: 150%;}
.adressInfoBox address span:first-of-type {margin-right: 50px;}
.adressInfoBox address em {color: #555;}

@media all and (max-width:1468px) {
	.fixedBox iframe {width: 100%; height: 500px;}
	.contactus .product .ani {right: 8%;top: 51%;}
	.contactus .technical .ani {right: 5%;top: 45%;}
}
@media all and (max-width:1264px) {
	.contactus li {width: 49%; padding: 28px 47px 49px;}
	.contactus li:first-of-type {margin-right: 2%;}
	.contactus .product, .contactus .technical {background-position: 93% 69%}
	.contactus .product .ani {right: 5%;top: 51%;}
	.contactus .technical .ani {right: 2%;top: 45%;}
}
@media all and (max-width:1064px) {
	.contactus li {width: 100%; padding: 8px ​47px 49p;}
	.contactus li:first-of-type {margin-bottom: 20px;}
	.contactus li p {display:inline}
	.contactus li p:first-of-type {margin-right: 50px;}
	.contactus .product .ani {right: 4%;top: 38%;}
	.contactus .technical .ani {right: 3%;top: 31%;}
}
@media all and (max-width:862px) {
	.contactus li p {display:block}
	.contactus .product .ani {right: 4%;top: 48%;}
	.contactus .technical .ani {right: 3%;top: 41%;}
}
@media all and (max-width:768px){
	.contactus li a:not([href^="mailto:"]):hover {cursor: pointer;color: #fe6326;}
}
@media all and (max-width:640px) {
	.fixedBox iframe {height: 20rem;}
	.contactus {margin-top: 2rem;}
	.contactus li {padding: 1.4rem 2.35rem 2.45rem;}
	.contactus li:first-of-type {margin-bottom: 1rem;}
	.contactus li h2 {font-size: 2rem !important;padding: 1.6rem 0 !important;}
	.contactus li p {font-size:  1.3rem; padding: 0.5rem 0;}
	.contactus li p:first-of-type {margin-right: 2.5rem;}
	.adressInfoBox {padding: 2.5rem 0 0;}
	.adressInfoBox >div {padding: 1.5rem 0 2rem;}
	.adressInfoBox address:not(:last-of-type) {margin-bottom: 2.5rem;}
	.adressInfoBox address p {padding: 0.5rem 0; line-height: 150%;}
	.adressInfoBox address * {font-size: 1.2rem;}
	.adressInfoBox address span {display: block; padding: 0.5rem 0;}
}
@media all and (max-width:475px) {
	.contactus .product .ani, .contactus .technical .ani {display: none;}
}

/* business */
.businessArea {position: relative;}
.business-category {height: 832px;background: url('/en/img/sub/logo_business.png') 50% 46% no-repeat;}
.business-category >li {position: absolute;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);}
.business-category >li:first-of-type {left: 50%;top: 0;}
.business-category >li:nth-of-type(2) {left: calc(50% - 235px);top: 140px;}
.business-category >li:nth-of-type(3) {left: calc(50% - 235px);top: 412px;}
.business-category >li:nth-of-type(4) {left: calc(50%); top: 551px;}
.business-category >li:nth-of-type(5) {left: calc(50% + 235px);top: 412px;}
.business-category >li:nth-of-type(6) {left: calc(50% + 235px);top: 140px;}
.business-category >li:nth-of-type(even) >a {background: url('/en/img/sub/bg_polygon_even.png'); color: #2c324b;}
.business-category >li:nth-of-type(odd) >a {background: url('/en/img/sub/bg_polygon_odd.png'); color: #fff;}
.business-category >li >a {display: block;width: 297px;height: 257px;position: relative;}
.business-category >li >a:hover span {font-weight: 600;font-size: 34px;} 
.business-category >li >a span {display: block;position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); width: 100%; text-align: center;-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;font-size: 32px;}
.business-category >li >a:hover span:after {content: 'click';width: 80px;display: block;margin: 0 auto;font-size: 18px;font-weight: normal;padding: 5px 0;background: #fe6326;color: #fff;border-radius: 15px 0 15px 0;margin-top: 23px;}
.business-category p {display: none;}

.category-exp {display: none;overflow: hidden;}
.category-exp.active, .category-exp .exp.active {display: block;}

.category-exp {position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%); z-index: 90;}
.category-exp .exp {display: none;-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);width: 1000px;height: 808px;background: #2c324b url('/en/img/sub/bg_business.png') 50% 50% no-repeat;color: #fff;position: relative; padding: 128px 237px;}
.category-exp .exp:before {content: ''; width: 1200px; height: 1400px; background: url('/en/img/sub/bg_polygon_light.png') 40% 55% no-repeat;position: absolute;left: -5%;top: -31%;animation:rotate-light 12s infinite reverse;z-index: -1;}
.category-exp div[class^=category_] {display: none;}
/* .category-exp .exp:after {content: ''; width: 1200px; height: 1200px; background: url('/en/img/sub/bg_polygon_light.png') 40% 55% no-repeat;position: absolute;left: -5%;top: -31%;animation:rotate-light 14s infinite reverse;animation-delay:1s;opacity: 0.5;z-index: -1;} */
@keyframes rotate-light {
	0%{
		-webkit-transform:scale(1) rotate(0) translate(10px,-20px);-ms-transform:scale(1) rotate(0) translate(10px,-20px);transform:scale(1) rotate(0) translate(10px,-20px);
	
	}
	75%{
		-webkit-transform:scale(1.7) rotate(1turn) translate(-10px,20px);-ms-transform:scale(1.7) rotate(1turn) translate(-10px,20px);transform:scale(1.7) rotate(1turn) translate(-10px,20px);
	}
}

.category-exp .cont {z-index: 99; text-align: center;}
.category-exp .cont .category {font-size: 18px;color: #6afcdb;}
.category-exp .cont .category span {display: block; font-size: 80px;font-weight: 600; -webkit-text-stroke: 1px #6afcdb;-webkit-text-fill-color: transparent;-webkit-animation: fill 0.5s infinite alternate; margin-top: 10px;}
.category-exp .cont h2 {font-size: 50px !important; font-weight: 600; padding: 50px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1);color: #fff !important;}
.category-exp .cont h2:before {display: none !important;}
.category-exp .cont h2 + p {font-size: 28px; padding-top: 50px; line-height: 150%;font-weight: 100;}
.category-exp .btn-close {width: 78px;height: 90px;background: url('/en/img/sub/btn_close.png') 0 0 no-repeat;bottom: 80px;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);position: absolute;-webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.category-exp .btn-close:hover {background: url('/en/img/sub/btn_close_on.png') 0 0 no-repeat;}

.category-exp .ctrl > * {display: inline-block;position: absolute;top: 50%;margin: 0;vertical-align: middle;width: 28px;height: 75px;background: url(/en/img/sub/spr_business_control.png) no-repeat 0 0;overflow: hidden;text-indent: -999px;}
.category-exp .btn-prev {left: 97px; -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);background-position: 0 -97px;}
.category-exp .btn-next {right: 99px;right: 97px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);background-position: -58px -97px;}
.category-exp .btn-prev:hover, .category-exp .btn-prev:focus, .category-exp .btn-prev:active {background-position: 0 0 !important;}
.category-exp .btn-next:hover, .category-exp .btn-prev:focus, .category-exp .btn-prev:active {background-position: -58px 0;}

@media all and (max-width:820px) {
	.category-exp .btn-prev {left: 14%;}
	.category-exp .btn-next {right: 14%;}
}
@media all and (max-width:767px) {
	.business-category {height: auto; background-image: none;}
	.business-category >li {position: relative; transform: none; left: 0 !important; top: auto !important; margin-bottom: 20px;}
	.business-category >li >a {background-image:none !important; background-color: #2c324b !important; color: #fff !important; width: 100%;height: 107px;-webkit-border-radius: 20px 20px 0 0;
	-moz-border-radius: 20px 20px 0 0;border-radius: 20px 20px 0 0;}
	.business-category >li >a:hover span {font-weight: normal;font-size: 34px;}
	.business-category >li >a span br {display: none;}
	.business-category p {display: block; background-color: #e7e8ec;border: 2px solid #2c324b;margin-top: -3px; -webkit-border-radius: 0 0 20px 20px;-moz-border-radius: 0 0 20px 20px;border-radius: 0 0 20px 20px;padding: 30px 30px 40px 40px; font-size: 22px; color: #333;line-height: 150%;}
	.business-category p br {display: none;}
}
@media all and (max-width:640px) {
	.business-category {margin-top: 2rem;}
	.business-category >li {margin-bottom: 1rem;}
	.business-category >li >a {height: 4rem;border-radius: 1rem 1rem 0 0;}
	.business-category >li >a span, .business-category >li >a:hover span {font-size: 1.7rem;}
	.business-category >li >a:hover span:after {display: none;}
	.business-category p {padding: 1.5rem 1.5rem 2rem 2rem;border-radius: 0 0 1rem 1rem; font-size: 1.1rem;}
}

/* product */
.service {padding: 30px 0 100px;}
@media all and (max-width:640px) {
	.service {padding:1.5rem 0 4rem;}
}

/* y-SmartDeep */
.fixedBox[data-page="y-SmartDeep"] .only-pc {margin-left: -78px;}

/* y-Certi */
.fixedBox[data-page="y-Certi"] .only-pc {margin-left: -71px;}

/*y-SecuKeypad */
.product-image {margin-top: 50px;width: 100%; background: #19316c url('/en/img/sub/bg_product_image_keypad.png') 50% bottom no-repeat;display: block;}
.product-image .inner {width: 1400px;margin: 0 auto;padding: 60px 0;}
@media all and (max-width:1400px) {
	.product-image .inner {width: 100%;}
}
@media all and (max-width:640px) {
	.product-image {margin-top: 1.5rem;text-align: center;}
	.product-image .inner {padding: 2rem 0;}
	.product-image img {max-width:90% !important}
}

/* y-SmartCMS */
.fixedBox[data-page="y-SmartCMS"] .only-pc {margin-top: -89px;}