@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 13px; color:#000; overflow-x: hidden;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"Pretendard", "Noto Sans KR", "Malgun Gothic", "Dotum", sans-serif;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* { margin:0; padding:0; border:0; outline:0; -webkit-text-size-adjust:none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

.container { max-width: 1440px; width:100%; height: 100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 15px;}
.container:after,
.contents-box::after,
.box-wrap::after{content:""; display:block; clear:both;}

#m-hd{position:fixed; top:0; width:100%; padding:0; height:95px; background: #fff; z-index: 9500; transition-duration: 0.2s}

#m-hd:after{content:""; display:block; clear:both}
#m-hd #m-logo{position: absolute; top:50%; left:60px; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 9000; }
#m-hd #m-logo img.sub{display: none;}
#m-hd.sub-hd{background:transparent; border-bottom:1px solid rgba(255, 255, 255, 0.14) }
#m-hd.sub-hd #m-logo img.main,
#m-hd:hover.sub-hd #m-logo img.main,
#m-hd:hover.sub-hd #m-logo img.sub{display: none;}
#m-hd.sub-hd #m-logo img.sub,
#m-hd:hover.sub-hd #m-logo img.main{display: block;}
#m-hd:hover.sub-hd{background: #fff;  }
#m-hd #mobile-menu.active span{background-color: #000;}

#admin-join{position: fixed; right:0; top:120px; z-index: 9999;}
#admin-join a{display:block; padding:15px; color:#fff;}
#admin-join .logout{background:#000}
#admin-join .admin-icon{background:#ff3746}
#m-hd #m-nav {text-align: center;}
#m-hd #m-nav::after{content:""; display:block; clear:both}

#m-hd #m-gnb{display:inline-block;}
#m-hd #m-gnb > li{float:left; text-align:center; margin-right:60px}
#m-hd #m-gnb > li:last-child{margin-right: 0;}
#m-hd #m-gnb > li > a{font-size:18px; font-weight:500; margin:0 auto; display:block; color:#000; box-sizing:border-box;position:relative; line-height:95px; position: relative;}

.etc-nav {display:flex; align-items: center; position: absolute; top: 50%; right: 60px; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 9000;}
.etc-nav .stay-update{display:inline-block; width:132px; text-align: center; height:44px; line-height: 44px; color:#fff;  background:#cd1e1a; border-radius: 22px; font-size:14px;}
.lang-site{width:80px; margin-left:40px;position: relative;}
.site-active{position:relative; color:#000; font-size:17px; text-align: left; cursor:pointer;}
.site-active i{font-size:18px; margin-right:10px }
.site-active .arrow{width:14px; height: 2px; position: absolute; right:0; top:10px}
.site-active .arrow::before{content:""; display:block; width:9px; height:2px; background:#000; position: absolute; transform: rotate(45deg); left:0;}
.site-active .arrow::after{content:""; display:block; width:9px; height:2px; background:#000; position: absolute; transform: rotate(-45deg); right:0;}
#lang-nav{position:absolute; width:100%; top:30px; right:0; z-index: 9500; box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.09); border-radius: 10px;background:#fff; padding:5px 0; display:none;}

#lang-nav li a{font-size:15px; font-weight: 500; color:#a2a2a2; display:block; padding:5px 0;}

#m-hd.sub-hd #m-gnb > li > a{color:#fff; }
#m-hd.sub-hd:hover #m-gnb > li > a{color:#000; }
#m-hd.sub-hd:hover{border-bottom:0;}

#m-hd.hd-fixed{background:#fff !important; box-shadow: 0 0 13px 3px rgba(0, 0, 0, 8%); border-bottom:0;}
#m-hd.hd-fixed #m-logo img.main{display: block;}
#m-hd.hd-fixed #m-logo img.sub{display: none;}
#m-hd.hd-fixed #m-gnb > li > a{color:#000 !important;}
#m-hd.hd-fixed .site-active{color:#000 !important;}
#m-hd.hd-fixed .site-active .arrow::before{background:#000 !important;;}
#m-hd.hd-fixed .site-active .arrow::after{background:#000 !important;;}
#m-hd.hd-fixed #lang-nav{background:#fff; border:1px solid #eee;}

#m-hd.sub-hd .site-active{color:#fff;}
#m-hd.sub-hd .site-active .arrow::before{background:#fff;}
#m-hd.sub-hd .site-active .arrow::after{background:#fff; }
#m-hd.sub-hd:hover .site-active{color:#000;}
#m-hd.sub-hd:hover .site-active .arrow::before{background:#000;}
#m-hd.sub-hd:hover .site-active .arrow::after{background:#000; }


/*megadrop*/
#megadrop{position:absolute;border-top:1px solid #ddd; border-bottom:1px solid #ddd; width:100%; left:0; display:none; text-align: center;  z-index: 9999; background:#fff;}
#m-hd #m-gnb > li:hover > a::after{content:""; display:block; position: absolute; bottom:0; width:100%; height:4px; background:#cd1e1a}
#m-hd #m-gnb > li:hover #megadrop{display:inline-block; }

#m-hd #m-gnb .lnb{ display:inline-block;}
#m-hd #m-gnb .lnb li{float:left; margin-right:50px }
#m-hd #m-gnb .lnb li:last-child{margin-right:0px }
#m-hd #m-gnb .lnb li a{display:block; padding:11px 0; font-size:15px; color:#6f6f6f;  font-weight: 500;}
#m-hd #m-gnb .lnb li a:hover{color:#cd1e1a}
#m-hd #m-gnb .lnb li a p{margin-top:7px;}


#all-menu{display:none;}
#mobile-btn{display:none ;position:absolute; right: 15px; cursor: pointer;}

/*main-banner*/
#main-banner {position: relative; overflow: hidden; width:100%; }
#main-banner::after {content:""; display:block; clear:both}
#main-banner .banner-img{width:100%; overflow: hidden;}

#main-banner .swiper-slide{position:relative;}
#main-banner .swiper-wrapper > div{height:100vh; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color:#f5f5f7;}

#main-banner .swiper-slide .img-box{width:50%; text-align: center;}
/* #main-banner .swiper-wrapper .bg01{background-image:url("../img/sl_bg01.png");}
#main-banner .swiper-wrapper .bg02{background-image:url("../img/sl_bg02.png");}
#main-banner .swiper-wrapper .bg03{background-image:url("../img/sl_bg01.png");} */

#main-banner .swiper-wrapper .banner-contents{display: flex; height: 100%; align-items:center; }
#main-banner .swiper-wrapper .banner-contents .inner{width:50%; padding-right:80px}
#main-banner .swiper-wrapper .banner-contents h3,
#main-banner .swiper-wrapper .banner-contents h5,
#main-banner .swiper-wrapper .banner-contents p{font-family: "Poppins", "Pretendard", sans-serif;}
#main-banner .swiper-wrapper .banner-contents h3{font-size:50px; font-weight: 600; line-height: 1.2; margin:0 0 23px;}
#main-banner .swiper-wrapper .banner-contents h5{font-size:25px; margin-bottom:25px; color:#cd1e1a}
#main-banner .swiper-wrapper .banner-contents p{font-size:18px; color:#898989; line-height: 1.7; word-break: keep-all;}
#main-banner .swiper-wrapper .banner-contents a{display:block; width:185px; text-align: center; background:#394148; color:#fff; font-size:16px; font-weight: 600; height: 52px ; line-height: 52px; border-radius: 26px; margin-top:38px;}
#main-banner .swiper-wrapper .banner-contents a:hover{background:#cd1e1a;}

#main-banner .swiper-wrapper .bg01 .banner-contents h3{color:#000;}
#main-banner .swiper-wrapper .bg02 .banner-contents h3{color:#000;}
#main-banner .swiper-wrapper .bg03 .banner-contents h3{color:#000;}


#main-banner .swiper-button-prev,
#main-banner .swiper-button-next{width:auto;background-image: none;}
#main-banner .swiper-button-prev{left:60px;}
#main-banner .swiper-button-next{right:60px}
#main-banner .swiper-button-prev:after,
#main-banner .swiper-button-next:after{display:none;}


.sl-arrow{ width:23px; height:42px; position:relative;}
.sl-arrow::before{content:""; display:block; width:30px; height:3px; background:#000; -webkit-transform:rotate(45deg); transform:rotate(45deg); position: absolute; top:10px; }
.sl-arrow::after{content:""; display:block; width:30px; height:3px; background:#000; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); position: absolute; bottom:9px; }
.sl-arrow.sl::before{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); margin-left:-6px;}
.sl-arrow.sl::after{-webkit-transform:rotate(45deg); transform:rotate(45deg); margin-left:-6px;}

#main-banner .swiper-pagination{position:relative; font-size:0; text-align: center;}
#main-banner .pagination-box{position: absolute; width:100%; bottom:80px; text-align: center; }
#main-banner .pagination-box::after{content:""; display:block; clear:both;}

.pagination-area{display:flex; align-items: center; position: relative;}
#main-banner .pagination-num {width:54px;}
#main-banner .pagination-num .swiper-pagination-bullet { background: transparent; display:none; font-size:19px; color:#000; font-weight: 600;}
#main-banner .pagination-num .swiper-pagination-bullet-active {display:block;}
#main-banner .pagination-num .swiper-pagination-bullet-active:before{content:""; position:absolute; top:50%; left:50%; margin:6px 0 0 0; width:4px; height:4px; margin-left:-2px;  border-radius: 50%; background:#000;}
#main-banner .pagination-num .swiper-pagination-bullet-active::after{content:"4"; position:absolute; top:0; right:0; font-size:19px; color:#000;}

#main-banner .pagination-txt{position:absolute; right:0; bottom:10px;}
#main-banner .pagination-txt .swiper-pagination-bullet {display: inline-block; border-radius: 0; background:#000; left:0; opacity:1; margin-right:45px; width:auto; height: 0;}
#main-banner .pagination-txt .swiper-pagination-bullet:last-child {margin-right:0;}
#main-banner .pagination-txt .swiper-pagination-bullet-active{ opacity: 1; }

#main-banner .pagination-box.black .pagination-num .swiper-pagination-bullet {color:#000; }
#main-banner .pagination-box.black .pagination-num .swiper-pagination-bullet-active:before{background:#000;}
#main-banner .pagination-box.black .pagination-txt{ background:rgba(0, 0, 0, 0.3);}
#main-banner .pagination-box.black .pagination-txt .swiper-pagination-bullet {background:#000;}

.pagination-box .pagination-txt{display:flex; align-items: center;}
.pagination-box .pagination-txt span{position:relative;}

.pagination-box .pagination-txt span:nth-child(1)::before,
.pagination-box .pagination-txt span:nth-child(2)::before,
.pagination-box .pagination-txt span:nth-child(3)::before,
.pagination-box .pagination-txt span:nth-child(4)::before{display:block; font-size:18px; color:#000; font-weight: 700; text-align:center; border-bottom:3px solid #000; width:100%; padding-bottom:10px; opacity: 0.3}

.pagination-box .pagination-txt span:nth-child(1)::before{content:"Mobile ID"}
.pagination-box .pagination-txt span:nth-child(2)::before{content:"Smart-X Manager Enterprise"}
.pagination-box .pagination-txt span:nth-child(3)::before{content:"DNX Controller Series"}
.pagination-box .pagination-txt span:nth-child(4)::before{content:"Rack Mount Pack"}

#main-banner .pagination-txt .swiper-pagination-bullet-active::before{color:#000; border-color:#000; opacity: 1; }


/*index*/
#wrap{position: relative}
.main-section{padding:60px 0;}
.main-tit-box{margin-bottom:40px; }
.main-tit-box h3{ font-family: "Poppins", sans-serif; font-size:70px; line-height: 0.8; margin-bottom:30px}
.main-tit-box h4{ font-family: "Poppins", sans-serif; font-size:34px;}
.main-tit-box p{font-size:24px; line-height: 1.4;}
.main-tit-box p span{display:block}

.index .main-section.section01{margin-top:120px;}
.index .section01 .pro-nav{text-align: right; margin-bottom:20px}
.index .section01 .contents-nav{display: inline-block; max-width: 720px; width:100%;}
.index .section01 .contents-nav li{float:left; margin-right:35px; font-size:18px; font-weight: 700; color:#c1c1c1; position:relative; cursor: pointer; }
.index .section01 .contents-nav li.on{color:#394148;}
.index .section01 .contents-nav li.on::after{content:""; display:block; width:100%; height:3px; background:#394148; position: absolute; bottom:-7px; left:0;}
.index .section01 .contents-nav li:last-child{margin-right:0;}
.index .section01 .contents-wrap > div{display:none;}
.index .section01 .contents-wrap > div.active{display:block;}
.index .section01 .pro-contents .contents-box{display:flex; align-items: center;}
.index .section01 .pro-contents .contents-box > div{width:50%;}
.index .section01 .pro-contents .txt-box{padding-left:45px;}
.index .section01 .pro-contents .txt-box h3{font-size:40px; font-weight: 600}
.index .section01 .pro-contents .txt-box h5{font-size:22px; color:#cd1e1a; font-weight: 600; margin-top:43px; }
.index .section01 .pro-contents .txt-box p{font-size:17px; color:#94938e; line-height: 1.6; word-break: keep-all; margin:27px 0 67px;}
.index .section01 .pro-contents .txt-box a{display:block; width:168px; text-align: center; font-size:16px; color:#fff; height:52px; line-height: 52px; border-radius: 26px; background:#394148; font-weight: 600;}
.index .section01 .pro-contents .txt-box a:hover{background:#cd1e1a;}
.index .section01 .pro-contents .img-box{text-align: center; padding-right:60px; max-height:470px; line-height: 470px}
.index .section01 .pro-contents .img-box img{vertical-align: middle;}

.index .main-section.section02{padding-top:0;}
.index .section02 .main-tit-box{transform: translateY(100%);}
.index .section02 .contents-box{margin: -38px;}
.index .section02 .box-list{float:left; width:33.333333%;padding:0 38px;}
.index .section02 .box-list .box{margin-bottom:80px;}
.index .section02 .box-list .box:last-child{margin-bottom:0;}
.index .section02 .box-list.list01{margin-top:240px}
.index .section02 .box-list.list03{margin-top:60px}
.index .section02 .box-list .box .img-box img{border-radius: 20px;}
.index .section02 .box-list .box .txt-box{margin-top:25px}
.index .section02 .box-list .box .txt-box h5{font-size:20px; font-weight: 600;}
.index .section02 .box-list .box .txt-box p{font-size:17px; font-weight: 400; color:#adadad; line-height: 1.6; margin: 20px 0;}
.index .section02 .box-list .box .txt-box a{font-size:17px; }

.index .section03 .main-tit-box h4{text-align: center;}

.index .main-section.section04{padding-bottom:100px}
.index .section04 .main-tit-box{margin-bottom:0;}
.index .section04 .main-tit-box h4{margin-bottom:15px}
.index .section04 .box-wrap > div{float:left; width:50%;}
.index .section04 .box-wrap .box01{padding-right:45px; }
.index .section04 .box-wrap .box02{padding-left:45px; }

.index .section04 .fields{position:relative;}
.index .section04 .fields li{display:flex; align-items:center; padding-bottom:12px;}
.index .section04 .fields li:last-child{padding-bottom:0;}
.index .section04 .fields .lbl{width:200px;font-size:15px; cursor:text}
.index .section04 .fields .desc{width:100%;}
.index .section04 .fields .input{background:#f1f1f1; padding:15px 20px; box-sizing:border-box; width:100%}
.index .section04 .fields .half_input_area{display:flex; align-items: center;}
.index .section04 .fields .input.full{width:100%}
.index .section04 .fields .input.half{width:49%;}
.index .section04 .fields .input.half_first{margin-right:2%;}
.index .section04 .fields .btn-group{margin-top:20px; display:flex; align-items:center; position:relative;}
.index .section04 .fields .btn-group span{font-size:16px; color:#999;}
.index .section04 .fields .btn-group a{font-size:16px; color:#000;}
.index .section04 .fields .btn-group a:hover{text-decoration:underline}
.index .section04 input[id="agree-check"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #bbb; cursor: pointer;margin: 0 5px 0 0;}
.index .section04 input[id="agree-check"]:checked + label {border-color:#000; background:url('../img/agree_check.png') no-repeat center center;}
.index .section04 input[id="agree-check"] {display: none;}
.index .section04 .fields .btn-submit{font-family: "Pretendard", sans-serif; background:#394148; color:#fff; font-size:16px; font-weight: 500; height: 45px; line-height: 45px; border:none; outline:none; position:absolute; right:0; width:160px; text-align: center;}



/*footer*/
#footer{background:#272727; padding:20px 0;}
#footer .ft-top{border-bottom:1px solid #363636; padding:20px 0;}
#footer .ft-top > div{float:left; width:50%; }
#footer .ft-top .ft-cnt{font-size:15px; color:#fff; line-height: 1.7;}
#footer .ft-top .ft-logo{text-align: right;}
#footer .ft-top .ft-logo .sns-btn{display: inline-block; margin-bottom:15px }
#footer .ft-top .ft-logo .sns-btn li{float:left; margin-right:8px;}
#footer .ft-top .ft-logo .sns-btn li:first-child{margin-right:14px}
#footer .ft-top .ft-logo .sns-btn li:last-child{margin-right:0;}
#footer .ft-top .ft-logo .sns-btn li i{font-size:30px; color:#8b8b8b;}
#footer .ft-bottom{padding:20px 0;}
#footer .ft-bottom > div{float:left; width:50%; }
#footer .ft-bottom .copyright{font-size:15px; color:#fff;}
#footer .ft-bottom .ft-link{text-align: right; }
#footer .ft-bottom .ft-link a{font-size:16px; color:#fff; font-weight: 700;}


/*sub-visual*/
#sub-visual{position:relative; background-position: center center; background-repeat: no-repeat; background-size:cover; height:100vh;}
#sub-visual.bg1{background-image: url('../img/sub_visual01.png')}
#sub-visual.bg3{background-image: url('../img/sub_visual03.png')}
#sub-visual.bg4{background-image: url('../img/sub_visual04.png')}
#sub-visual .inner{position: absolute; top:50%; transform: translateY(-50%);}
#sub-visual .visual-title{font-size:70px; font-weight: 700; color:#fff; word-break: keep-all;}
#sub-visual .page-location{margin-top:20px; }
#sub-visual .page-location li{float:left; margin-right:54px; position: relative; }
#sub-visual .page-location li:last-child{margin-right:0; }
#sub-visual .page-location li *{font-size:17px; color:#fff;}
#sub-visual .page-location li .arrow{display:block; position:absolute; transform: rotate(45deg); right:-30px; top:6px; width:7px; height:7px;  border-top:2px solid #fff; border-right: 2px solid #fff;}
#sub-visual .page-location li.page-title{font-size:17px; color:#cd1e1a}

#sub-wrap{position: relative; padding:60px 0;}
.sub-section{padding:60px 0;}
.sub-contents-tit{text-align: center; margin-bottom:40px;}
.sub-contents-tit h5{font-size:40px; }

.sub02 .sub-section.section01{padding-bottom:120px}
/* .sub02 .section01{text-align: center;}
.sub02 .section01 h5{font-size:28px; line-height: 1.5; width:60%; margin:0 auto; word-break: keep-all;}
.sub02 .section01 h5 span{display:block}
.sub02 .section01 p{font-size:18px; line-height: 1.7; width:60%; margin:40px auto 0; word-break:keep-all; font-weight: 300; color:#555;} */
.sub02 .section01 h5{font-size:20px; line-height: 1.5; word-break: keep-all;}
.sub02 .section01 h5 span{display:block}
.sub02 .section01 p{font-size:18px; line-height: 1.7; margin-top:40px; word-break:keep-all; font-weight: 300; color:#555;}

.sub02 .sub-section.section02{background:#f5f5f7; padding:110px 0; }
.sub02 .section02 .contents-box > div{float:left;}
.sub02 .section02 .sub-contents-tit{width:18%; text-align: left;}
.sub02 .section02 .sub-contents-tit h5{margin-top:20px; font-size:30px; font-weight: 800;}
.sub02 .section02 .contents {width:82%}
.sub02 .section02 .contents ul{display: flex; flex-wrap: wrap;}
.sub02 .section02 .contents ul li{width:25%; padding:20px 15px 20px 20px; font-size:19px; position:relative; font-weight: 500; color:#484848; }
.sub02 .section02 .contents ul li::before{content:""; display:block; position:absolute; width:6px; height:6px; background:#cd1e1a; top:28px; left:0; }

.sub02 .sub-section.section03{padding:120px 0; background:#181818;}
.sub02 .section03 .sub-contents-tit h5{color:#fff;}
.sub02 .section03 .pro-list {margin:0 -15px;}
.sub02 .section03 .pro-list li{float:left; width:33.333333%; padding:0 15px; margin-top:60px;  }
.sub02 .section03 .pro-list li:nth-child(1),
.sub02 .section03 .pro-list li:nth-child(2),
.sub02 .section03 .pro-list li:nth-child(3){margin-top:0;}
.sub02 .section03 .pro-list .inner{background:#fff; border-radius: 20px; text-align: center; padding:40px; }
.sub02 .section03 .pro-list .img-box{max-height: 160px; height: 50vw; display:flex; align-items: center; justify-content: center;}
.sub02 .section03 .pro-list .img-box img{max-height: 150px; }
.sub02 .section03 .pro-list p{font-size:19px; font-weight: 700; margin:30px 0;}
.sub02 .section03 .pro-list a{display:block; width:100%; max-width: 160px; margin:0 auto; padding:14px 0; text-align:center; color:#fff;  background:#b9b9b9; border-radius: 28px; font-size:15px; font-weight: 600; transition-duration: 0.2s}
.sub02 .section03 .pro-list a:hover{background:#cd1e1a; }



.sub02 .sub-section.section04{padding:120px 0;}
.sub02 .section04 ul {margin:-15px;}
.sub02 .section04 ul li{float:left; width:25%; padding:15px; }
.sub02 .section04 ul li .inner{height: 50vw; max-height: 230px; background-position:center center ; background-repeat:no-repeat; position: relative; border-radius: 20px}
.sub02 .section04 .txt-wrap{height: 63px; background:rgba(0, 0, 0, 0.65); position:absolute; bottom:0; width:100%; border-radius: 0 0 20px 20px}
.sub02 .section04 .txt-wrap p{font-size:19px;font-weight:600; color:#fff ;  padding:0 30px; line-height: 63px}

.sub0201 .section04 ul li.contents01 .inner{background-image: url('../img/ex_data.png')}
.sub0201 .section04 ul li.contents02 .inner{background-image: url('../img/ex_hosp.png')}
.sub0201 .section04 ul li.contents03 .inner{background-image: url('../img/ex_hotel.png')}
.sub0201 .section04 ul li.contents04 .inner{background-image: url('../img/ex_res.png')}
.sub0201 .section04 ul li.contents05 .inner{background-image: url('../img/ex_pro.png')}
.sub0201 .section04 ul li.contents06 .inner{background-image: url('../img/ex_bank.png')}
.sub0201 .section04 ul li.contents07 .inner{background-image: url('../img/ex_sch.png')}
.sub0201 .section04 ul li.contents08 .inner{background-image: url('../img/ex_off.png')}
.sub0201 .section04 ul li.contents09 .inner{background-image: url('../img/ex_elec.png')}
.sub0201 .section04 ul li.contents10 .inner{background-image: url('../img/ex_com.png')}
.sub0201 .section04 ul li.contents11 .inner{background-image: url('../img/ex_road.png')}

.sub0202 .section04 ul li.contents01 .inner{background-image: url('../img/ex_off.png')}
.sub0202 .section04 ul li.contents02 .inner{background-image: url('../img/ex_pub.png')}
.sub0202 .section04 ul li.contents03 .inner{background-image: url('../img/ex_bank.png')}
.sub0202 .section04 ul li.contents04 .inner{background-image: url('../img/ex_hosp.png')}
.sub0202 .section04 ul li.contents05 .inner{background-image: url('../img/ex_sch.png')}
.sub0202 .section04 ul li.contents06 .inner{background-image: url('../img/ex_pro.png')}
.sub0202 .section04 ul li.contents07 .inner{background-image: url('../img/ex_res.png')}
.sub0202 .section04 ul li.contents08 .inner{background-image: url('../img/ex_hotel.png')}

.sub0203 .section04 ul li.contents01 .inner{background-image: url('../img/ex_off.png')}
.sub0203 .section04 ul li.contents02 .inner{background-image: url('../img/ex_pub.png')}
.sub0203 .section04 ul li.contents03 .inner{background-image: url('../img/ex_res.png')}
.sub0203 .section04 ul li.contents04 .inner{background-image: url('../img/ex_data.png')}
.sub0203 .section04 ul li.contents05 .inner{background-image: url('../img/ex_bank.png')}
.sub0203 .section04 ul li.contents06 .inner{background-image: url('../img/ex_pro.png')}
.sub0203 .section04 ul li.contents07 .inner{background-image: url('../img/ex_elec.png')}
.sub0203 .section04 ul li.contents08 .inner{background-image: url('../img/ex_road.png')}

.sub0204 .section04 ul li.contents01 .inner{background-image: url('../img/ex_off.png')}
.sub0204 .section04 ul li.contents02 .inner{background-image: url('../img/ex_pub.png')}
.sub0204 .section04 ul li.contents03 .inner{background-image: url('../img/ex_hosp.png')}
.sub0204 .section04 ul li.contents04 .inner{background-image: url('../img/ex_hotel.png')}
.sub0204 .section04 ul li.contents05 .inner{background-image: url('../img/ex_sch.png')}
.sub0204 .section04 ul li.contents06 .inner{background-image: url('../img/ex_pro.png')}
.sub0204 .section04 ul li.contents07 .inner{background-image: url('../img/ex_res.png')}
.sub0204 .section04 ul li.contents08 .inner{background-image: url('../img/ex_bank.png')}

.sub0205 .section04 ul li.contents01 .inner{background-image: url('../img/ex_off.png')}
.sub0205 .section04 ul li.contents02 .inner{background-image: url('../img/ex_pub.png')}
.sub0205 .section04 ul li.contents03 .inner{background-image: url('../img/ex_hosp.png')}
.sub0205 .section04 ul li.contents04 .inner{background-image: url('../img/ex_hotel.png')}
.sub0205 .section04 ul li.contents05 .inner{background-image: url('../img/ex_sch.png')}
.sub0205 .section04 ul li.contents06 .inner{background-image: url('../img/ex_pro.png')}
.sub0205 .section04 ul li.contents07 .inner{background-image: url('../img/ex_res.png')}
.sub0205 .section04 ul li.contents08 .inner{background-image: url('../img/ex_bank.png')}

.sub0206 .section04 ul li.contents01 .inner{background-image: url('../img/ex_hosp.png')}

.sub0207 .section04 ul li.contents01 .inner{background-image: url('../img/ex_sch.png')}
.sub0207 .section04 ul li.contents02 .inner{background-image: url('../img/ex_gym.png')}
.sub0207 .section04 ul li.contents03 .inner{background-image: url('../img/ex_off2.png')}
.sub0207 .section04 ul li.contents04 .inner{background-image: url('../img/ex_acc.png')}

.sub0401 .section01 .contents-box{display:table; width:100%;}
.sub0401 .section01 .contents-box > div{display:table-cell; vertical-align: middle}
.sub0401 .txt-box{width:55%; text-align: right;}
.sub0401 .txt-box .inner{display:inline-block; max-width: 805px; padding-right:90px; }

.sub0401 .img-box{width:45%; background:url('../img/sub04_01_img01.png') no-repeat center center / cover; }

.sub0401 .txt-box .slogan {margin-bottom:30px}
.sub0401 .txt-box .slogan h3{font-size:45px; font-family: "Poppins", sans-serif; line-height: 1.2; text-align: left;}

.sub0401 .txt-box p:first-child{margin-top:0;}
.sub0401 .txt-box p{font-size:18px; margin-top:50px; line-height: 1.7; font-weight: 300; word-break:keep-all; text-align: left;}
.sub0401 .txt-box p b{font-size:20px; margin-bottom:8px; display:block;}

.sub0402 .info{text-align: center; margin-bottom:50px;}
.sub0402 .info p{font-size:22px; font-weight: 600;}
.sub0402 ul {display:inline-block; margin-top:50px}
.sub0402 ul li{float:left; margin-right:30px; font-size:17px; color:#ababab}
.sub0402 ul li:last-child{margin-right:0;}