@charset "utf-8";

/* controller common */
.controller{--ctl-title:#252525; --ctl-brand2:#23a97b; --ctl-border:#e1e1e1; --ctl-border-d:#bcbcbc; --ctl-gray:#f5f5f5; --ctl-light:#8ada6b1a; --ctl-line:#98e05f; --ctl-black30:#1717174d; --ctl-grad:linear-gradient(216.87deg, #98e05f 13.78%, #3abc8f 86.66%); --ctl-h:33rem; --ctl-l:26rem; --ctl-xl:22rem; --ctl-lg:20rem; --ctl-md:18rem; --ctl-b:17rem; --ctl-s:16rem; --ctl-xs:14rem; --ctl-xs-lh:1.286; --ctl-sec:100rem; --ctl-gap:70rem; --ctl-gap2:30rem; font-family:var(--font-k); color:var(--c-bs); word-break:keep-all;}
.controller p{word-break:keep-all;}
.controller .sub-title.sub-title--controller{padding-bottom:42rem;}
.controller .sub-title--controller h3{color:var(--ctl-title);}
.controller .product-tab + *{margin-top:0;}
.ctl-tit{font-size:var(--ctl-h); font-weight:700; line-height:1.455; color:var(--ctl-title);}
.ctl-tit--center{text-align:center;}
.ctl-desc{font-size:var(--ctl-b); line-height:1.53; color:var(--c-bs);}
.ctl-desc--center{text-align:center;}

/* intro top */
.ctl-intro{display:flex; flex-direction:column; align-items:center; padding:var(--ctl-sec) 0; text-align:center;}
.ctl-intro__lead{font-size:var(--ctl-l); font-weight:700; line-height:1.346; color:var(--ctl-title);}
.ctl-intro__name{display:inline-block; font-size:var(--ctl-h); font-weight:700; line-height:1.455; background:var(--ctl-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.ctl-intro__desc{margin-top:25rem; font-size:var(--ctl-xl); font-weight:700; line-height:1.364; color:var(--ctl-title);}
.ctl-intro__badge{margin-top:14rem; padding:8rem 20rem; border-radius:20rem; background:var(--ctl-grad); font-size:var(--ctl-s); font-weight:600; line-height:1.44; color:#fff;}
.ctl-intro__cert{position:relative; width:445rem; aspect-ratio:445/480; margin-top:25rem;}
.ctl-intro__shadow{position:absolute; left:-2.47%; bottom:-2.29%; width:104.94%; height:46.25%;}
.ctl-intro__frame{position:absolute; left:10%; top:0; z-index:1; overflow:hidden; width:80%; height:100%; box-sizing:border-box; border:4.5rem solid var(--ctl-border); border-radius:11rem; background:#fff;}
.ctl-intro__frame img{position:absolute; left:0; top:-2%; display:block; width:100%; height:104.93%; object-fit:cover;}

/* character */
.ctl-character{padding-top:20rem;}
.ctl-character__box{position:relative; overflow:hidden; height:770rem; margin-top:var(--ctl-gap2); padding-top:99rem; border-radius:20rem; background:var(--ctl-gray);}
.ctl-character__arc{position:absolute; left:50%; top:0; width:1100rem; height:auto; transform:translateX(-50%);}
.ctl-character__head{position:relative; text-align:center;}
.ctl-character__list{display:flex; flex-direction:column; align-items:center; gap:8rem; margin-top:24rem;}
.ctl-character__list li{display:flex; align-items:center; gap:8rem; font-size:var(--ctl-b); line-height:1.53; color:var(--c-bs);}
.ctl-character__list img{width:17rem; height:auto;}
.ctl-character__item{position:absolute; display:flex; align-items:center;}
.ctl-character__item--left{left:0; top:325rem; flex-direction:row-reverse; justify-content:flex-end;}
.ctl-character__item--right{left:942rem; top:325rem;}
.ctl-character__item--center{left:50%; top:429rem; flex-direction:column; transform:translateX(-50%);}
.ctl-circle{display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; gap:8rem; width:160rem; height:160rem; box-sizing:border-box; border:2rem solid var(--ctl-line); border-radius:100rem; background:#fff;}
.ctl-circle__ic{position:relative; display:flex; align-items:center; justify-content:center; height:47rem;}
.ctl-circle__ic img{display:block; height:auto;}
.ctl-circle__ic--01 img{width:36rem;}
.ctl-circle__ic--02 img{width:44rem;}
.ctl-circle__ic--03 img:first-child{width:35rem;}
.ctl-circle__ic--03 img + img{position:absolute; right:-6rem; bottom:0; width:19rem;}
.ctl-circle__label{font-size:var(--ctl-b); font-weight:600; line-height:1.53; color:var(--ctl-title);}
.ctl-character__bar{display:block; flex-shrink:0; width:60rem; height:auto;}
.ctl-character__bar--v{display:flex; align-items:center; justify-content:center; width:6rem; height:60rem;}
.ctl-character__bar--v img{flex-shrink:0; width:60rem; height:auto; transform:rotate(-90deg);}
.ctl-character__txt{width:208rem; font-size:var(--ctl-b); line-height:1.53; color:var(--c-bs);}
.ctl-character__item--left .ctl-character__txt{margin-right:30rem; text-align:right;}
.ctl-character__item--right .ctl-character__txt{margin-left:30rem; text-align:left;}
.ctl-character__item--center .ctl-character__txt{width:400rem; margin-top:30rem; text-align:center;}

/* function */
.ctl-func{padding:var(--ctl-sec) 0 120rem;}
.ctl-func__diagram{position:relative; height:930rem; margin-top:31rem;}
.ctl-func__cabinet{position:absolute; left:508rem; top:90rem; width:384rem; height:auto;}
.ctl-func__cards{position:absolute; left:0; top:234rem; display:flex; flex-direction:column; align-items:flex-start; gap:6rem; width:439rem;}
.ctl-fcard{display:flex; align-items:center; gap:20rem; width:100%; box-sizing:border-box; padding:0 25rem; min-height:150rem; border:3rem solid var(--ctl-line); border-radius:10rem; background:var(--ctl-light);}
.ctl-fcard__img{flex-shrink:0; width:100rem; height:auto;}
.ctl-fcard__body{display:flex; flex-direction:column; align-items:flex-start;}
.ctl-fcard__tit{font-size:var(--ctl-md); font-weight:600; line-height:1.5; color:var(--ctl-title);}
.ctl-fcard__desc{font-size:var(--ctl-s); line-height:1.44; color:var(--c-bs);}
.ctl-fcard__list{display:grid; grid-template-columns:repeat(2, auto); gap:6rem 14rem; margin-top:6rem;}
.ctl-fcard__list li{display:flex; align-items:center; gap:4rem; font-size:var(--ctl-xs); line-height:var(--ctl-xs-lh); color:var(--c-bs);}
.ctl-fcard__list img{width:16rem; height:auto;}
.ctl-func__monitor{position:absolute; left:961rem; top:229rem; display:flex; flex-direction:column; align-items:center; gap:22rem; width:439rem; box-sizing:border-box; padding:42rem; border:5rem solid var(--ctl-line); border-radius:10rem; background:var(--ctl-light);}
.ctl-func__monitor strong{font-size:var(--ctl-xl); font-weight:700; line-height:1.364; color:var(--ctl-brand2);}
.ctl-func__monitor img{width:100%; height:auto;}
.ctl-func__deco{position:absolute; display:block; height:auto;}
.ctl-func__deco--lte{left:921rem; top:588rem; width:287rem;}
.ctl-func__deco--iot{left:439rem; top:242rem; width:226rem;}
.ctl-func__deco--sensor{left:439rem; top:319rem; width:338rem;}
.ctl-func__deco--seismic{left:439rem; top:621rem; width:262rem;}
.ctl-func__deco--dot{width:12rem;}
.ctl-func__deco--dot1{left:659rem; top:236rem;}
.ctl-func__deco--dot2{left:771rem; top:313rem;}
.ctl-func__deco--dot3{left:694rem; top:813rem;}
.ctl-func__lte{position:absolute; left:993rem; top:726rem; font-size:var(--ctl-s); font-weight:600; line-height:1.44; color:var(--ctl-title);}

/* certify */
.ctl-certify__line{display:block; width:100%; height:1rem;}
.ctl-certify__head{display:flex; flex-direction:column; align-items:center; gap:10rem; margin-top:calc(var(--ctl-sec) * 0.8);}
.ctl-certify__list{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:42rem; margin-top:42rem;}
.ctl-certify__card{display:flex; flex-direction:column; align-items:stretch;}
.ctl-certify__box{display:flex; align-items:center; justify-content:center; overflow:hidden; aspect-ratio:159/200; box-sizing:border-box; border:4rem solid var(--ctl-border); border-radius:10rem; background:#fff;}
.ctl-certify__box img{display:block; width:100%; height:100%; object-fit:cover;}
.ctl-certify__box img.ctl-certify__img--contain{object-fit:contain;}
.ctl-certify__box img.ctl-certify__img--inset{width:85.87%; height:auto; object-fit:contain;}
.ctl-certify__name{margin-top:16rem; font-size:var(--ctl-b); font-weight:600; line-height:1.53; color:var(--ctl-title); text-align:center;}

/* system */
.ctl-sys{padding-top:var(--ctl-sec);}
.ctl-sys__head{display:flex; flex-direction:column; align-items:center; gap:10rem;}
.ctl-sys__group{margin-top:var(--ctl-gap);}
.ctl-sys__sub{font-size:var(--ctl-xl); font-weight:700; line-height:1.364; color:var(--ctl-title); text-align:center;}
.ctl-sys__web{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:42rem; margin-top:var(--ctl-gap2);}
.ctl-wcard{display:flex; flex-direction:column; align-items:center; aspect-ratio:679/520; box-sizing:border-box; padding:103rem 100rem 0; border:1px solid var(--ctl-border); border-radius:20rem;}
.ctl-tablet{position:relative; width:100%; max-width:479rem; aspect-ratio:958/587;}
.ctl-tablet__screen{position:absolute; z-index:1; top:5.66%; right:3.47%; bottom:5.35%; left:3.47%; overflow:hidden; border-radius:5rem; background:#f7f7f7;}
.ctl-tablet__screen img{display:block; width:100%; height:100%; object-fit:cover;}
.ctl-tablet__screen--contain{background:#2b2f4a;}
.ctl-tablet__screen--contain img{object-fit:contain;}
.ctl-tablet__frame{position:absolute; left:0; top:0; width:100%; height:100%;}
.ctl-cap{margin-top:30rem; font-size:var(--ctl-md); font-weight:600; line-height:1.5; color:var(--ctl-title); text-align:center;}
.ctl-cap--web{margin-top:45rem;}
.ctl-cap--mobile{margin-top:24rem;}
.ctl-sys__mobile{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:24rem; margin-top:var(--ctl-gap2);}
.ctl-mcard{display:flex; flex-direction:column; align-items:center; box-sizing:border-box; padding:60rem 16rem 40rem; border:1px solid var(--ctl-border); border-radius:20rem;}
.ctl-phone{position:relative; width:100%; max-width:225rem; aspect-ratio:225/420;}
.ctl-phone__screen{position:absolute; left:4.04%; top:1.19%; display:flex; justify-content:center; overflow:hidden; width:92.59%; height:97.42%; border-radius:33rem; background:#1b242f;}
.ctl-phone__screen img{display:block; width:91.6%; height:100%; object-fit:cover;}
.ctl-phone__frame{position:absolute; left:0.33%; top:0; z-index:1; width:99.61%; height:99.83%;}

/* benefit */
.ctl-benefit{padding:80rem 0 100rem;}
.ctl-benefit__list{margin-top:28rem; border-top:1px solid var(--ctl-border);}
.ctl-benefit__row{display:flex; align-items:center; gap:60rem; padding:30rem 0;}
.ctl-benefit__row + .ctl-benefit__row{border-top:1px solid var(--ctl-border);}
.ctl-benefit__img{flex-shrink:0; width:438rem; height:auto; aspect-ratio:438/280; object-fit:cover; border-radius:20rem;}
.ctl-benefit__tit{font-size:var(--ctl-lg); font-weight:600; line-height:1.45; color:var(--ctl-title);}
.ctl-benefit__items{margin-top:16rem;}
.ctl-benefit__items > li{position:relative; padding-left:12rem; font-size:var(--ctl-b); font-weight:600; line-height:1.53; color:var(--ctl-title);}
.ctl-benefit__items > li + li{margin-top:10rem;}
.ctl-benefit__items > li::before{content:""; position:absolute; left:0; top:0; width:4rem; height:26rem; background:url(../img/sub/controller/ic-dot.svg) no-repeat 50% 50%; background-size:4rem auto;}
.ctl-benefit__sub{display:flex; flex-direction:column; align-items:flex-start; gap:4rem; margin-top:4rem;}
.ctl-benefit__sub li{position:relative; font-size:var(--ctl-s); font-weight:400; line-height:1.44; color:var(--c-bs);}
.ctl-benefit__sub--dash{gap:6rem;}
.ctl-benefit__sub--dash li{padding-left:15rem;}
.ctl-benefit__sub--inline{flex-direction:row; flex-wrap:wrap; gap:4rem 16rem;}
.ctl-benefit__sub--dash li::before{content:""; position:absolute; left:0; top:50%; width:6rem; height:1px; background:var(--ctl-black30);}

/* spec */
.ctl-spec{padding-top:20rem;}
.ctl-spec__scroll{margin-top:22rem;}
.ctl-spec__table{width:100%; table-layout:fixed; border-collapse:collapse; border-top:1px solid var(--ctl-title);}
.ctl-spec__table th{padding:12rem 15rem; border-right:1px solid var(--ctl-border); border-bottom:1px solid var(--ctl-border); background:var(--ctl-gray); font-size:var(--ctl-s); font-weight:600; line-height:1.44; color:var(--ctl-title); text-align:center;}
.ctl-spec__table td{padding:15rem; border-right:1px solid var(--ctl-border); border-bottom:1px solid var(--ctl-border); font-size:var(--ctl-s); line-height:1.44; color:var(--c-bs); text-align:center; word-break:keep-all;}
.ctl-spec__table th:last-child,
.ctl-spec__table td:last-child{border-right:0;}
.ctl-spec__table a{font-weight:600; color:var(--ctl-brand2); text-decoration:underline;}
.ctl-spec__table caption{display:none;}
.ctl-spec__col--no{width:100rem;}
.ctl-spec__col--id,
.ctl-spec__col--model{width:350rem;}
.ctl-spec__note{margin-top:22rem; font-size:var(--ctl-s); line-height:1.5; color:var(--c-bs);}

@media (hover: hover){
	.ctl-spec__table a:hover{color:var(--c-01);}
}

@media (max-width:1200px){
	.controller{--ctl-md:19rem; --ctl-b:18rem; --ctl-s:18rem; --ctl-xs:17.5rem;}
	.controller .product-tab li > *{font-size:19rem;}
}

@media (max-width:1024px){
	.controller{--ctl-h:28rem; --ctl-l:22rem; --ctl-xl:20rem; --ctl-lg:19rem; --ctl-md:19rem; --ctl-b:18rem; --ctl-s:18rem; --ctl-xs:17.5rem; --ctl-sec:70rem; --ctl-gap:50rem; --ctl-gap2:24rem;}
	.controller .sub-title.sub-title--controller{padding-bottom:30rem;}
	.controller .product-tab{gap:8rem;}
	.controller .product-tab li{width:calc(33.333% - 6rem); height:54rem;}
	.controller .product-tab li + li{margin-left:0;}
	.ctl-intro__cert{width:375rem;}
	.ctl-character{padding-top:0;}
	.ctl-character__box{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; height:auto; padding:50rem 30rem;}
	.ctl-character__arc{display:none;}
	.ctl-character__head{width:100%;}
	.ctl-character__item{position:static; flex-direction:column; width:calc(33.333% - 10rem); margin-top:40rem; transform:none;}
	.ctl-character__item--left{flex-direction:column;}
	.ctl-character__item--center{transform:none;}
	.ctl-character__bar{display:none;}
	.ctl-character__item .ctl-character__txt,
	.ctl-character__item--center .ctl-character__txt{width:100%; margin:16rem 0 0; text-align:center;}
	.ctl-func{padding-bottom:80rem;}
	.ctl-func__diagram{display:flex; flex-direction:column; align-items:center; gap:30rem; height:auto;}
	.ctl-func__cards{position:static; width:100%; max-width:560rem;}
	.ctl-func__cabinet{position:static; order:1; width:260rem;}
	.ctl-func__monitor{position:static; order:2; width:100%; max-width:560rem;}
	.ctl-func__deco,
	.ctl-func__lte{display:none;}
	.ctl-certify__list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24rem;}
	.ctl-sys__web{gap:24rem;}
	.ctl-wcard{aspect-ratio:auto; padding:50rem 30rem 40rem;}
	.ctl-cap--web{margin-top:24rem;}
	.ctl-sys__mobile{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16rem;}
	.ctl-mcard{padding:40rem 12rem 30rem;}
	.ctl-benefit{padding:50rem 0 70rem;}
	.ctl-benefit__row{gap:30rem; padding:24rem 0;}
	.ctl-benefit__img{width:320rem;}
	.ctl-spec{padding-top:0;}
}

@media (max-width:860px){
	.controller{--ctl-h:24rem; --ctl-l:20rem; --ctl-xl:18rem; --ctl-lg:17rem; --ctl-md:15rem; --ctl-b:15rem; --ctl-s:14rem; --ctl-xs:12rem; --ctl-xs-lh:1.5; --ctl-sec:56rem; --ctl-gap:40rem; --ctl-gap2:20rem;}
	.controller .sub-title.sub-title--controller{padding-bottom:24rem;}
	.controller .product-tab li{height:48rem;}
	.ctl-intro__cert{width:325rem;}
	.ctl-intro__desc{margin-top:16rem;}
	.ctl-character__box{flex-direction:column; flex-wrap:nowrap; padding:40rem 20rem;}
	.ctl-character__item{width:100%; margin-top:32rem;}
	.ctl-character__head .ctl-tit br{display:none;}
	.ctl-character__list{align-items:flex-start;}
	.ctl-character__list li{align-items:flex-start; text-align:left;}
	.ctl-func__cards,
	.ctl-func__monitor{max-width:none;}
	.ctl-func__cabinet{width:200rem;}
	.ctl-func{padding-bottom:60rem;}
	.ctl-certify__list{margin-top:28rem;}
	.ctl-sys__web{grid-template-columns:minmax(0, 1fr);}
	.ctl-wcard{padding:36rem 24rem 30rem;}
	.ctl-cap{margin-top:20rem;}
	.ctl-benefit__row{flex-direction:column; align-items:stretch; gap:20rem; padding:24rem 0;}
	.ctl-benefit__img{width:100%;}
	.ctl-spec__scroll{overflow-x:auto;}
	.ctl-spec__table{min-width:640rem;}
	.ctl-spec__col--no{width:60rem;}
	.ctl-spec__col--id,
	.ctl-spec__col--model{width:160rem;}
	.ctl-spec__table th,
	.ctl-spec__table td{padding:12rem 8rem;}
}

@media (max-width:680px){
	.controller{--ctl-lg:19rem; --ctl-md:18rem; --ctl-b:17.5rem; --ctl-s:17.5rem; --ctl-xs:17.5rem;}
	.controller .product-tab li > *{font-size:17.5rem;}
}

@media (max-width:540px){
	.controller{--ctl-h:20rem; --ctl-l:17rem; --ctl-xl:16rem; --ctl-lg:16rem; --ctl-md:14rem; --ctl-b:14rem; --ctl-s:13rem; --ctl-xs:12rem; --ctl-sec:48rem; --ctl-gap:32rem; --ctl-gap2:16rem;}
	.controller .sub-title.sub-title--controller{padding-bottom:20rem;}
	.controller .product-tab{flex-wrap:nowrap; gap:6rem;}
	.controller .product-tab li{width:auto; flex:1; height:44rem;}
	.controller .product-tab li > *{font-size:13rem;}
	.ctl-intro__cert{width:275rem;}
	.ctl-intro__badge{padding:6rem 16rem;}
	.ctl-character__box{padding:32rem 16rem;}
	.ctl-circle{width:140rem; height:140rem;}
	.ctl-fcard{gap:12rem; padding:12rem 14rem;}
	.ctl-fcard__img{width:72rem;}
	.ctl-fcard__list{grid-template-columns:minmax(0, 1fr);}
	.ctl-func__monitor{padding:24rem 20rem;}
	.ctl-func__cabinet{width:160rem;}
	.ctl-certify__list{gap:12rem;}
	.ctl-certify__name{margin-top:10rem;}
	.ctl-wcard{padding:24rem 14rem 24rem; border-radius:14rem;}
	.ctl-sys__web{gap:16rem;}
	.ctl-sys__mobile{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12rem;}
	.ctl-mcard{padding:28rem 10rem 24rem; border-radius:14rem;}
	.ctl-benefit__img{border-radius:12rem;}
	.ctl-spec__table{min-width:520rem;}
	.ctl-spec__col--no{width:50rem;}
	.ctl-spec__col--id,
	.ctl-spec__col--model{width:130rem;}
}

/* english */
#en .controller .product-tab li > *{box-sizing:border-box; padding:0 10rem; line-height:1.2;}
#en .ctl-intro__desc,
#en .ctl-character__txt,
#en .ctl-fcard__tit,
#en .ctl-cap{text-wrap:balance;}
#en .ctl-circle__label{padding:0 8rem; line-height:1.3; text-align:center;}
#en .ctl-fcard__list{grid-template-columns:minmax(0, 1fr);}
#en .ctl-func__monitor strong{font-size:var(--ctl-lg); text-align:center;}
#en .ctl-benefit__tit{line-height:1.35;}

@media (min-width:1025px){
	#en .ctl-fcard{padding:0 16rem; gap:14rem;}
	#en .ctl-fcard__tit{font-size:calc(var(--ctl-md) - 1rem); line-height:1.35;}
	#en .ctl-fcard__desc{font-size:calc(var(--ctl-s) - 2rem); line-height:1.4;}
	#en .ctl-fcard__list{gap:4rem; margin-top:5rem;}
	#en .ctl-fcard__list li{font-size:calc(var(--ctl-xs) - 1rem); line-height:1.3;}
}