.fc_pointer {color:#1F88E5; } .content_wrap{width:100%; min-width:320px; max-width:1200px; margin:0 auto;} .page_title{width:100%; margin-bottom:70px;} .page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;} .page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;} .page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; } .blue{color:#0030ff !important;} .business_type4 {width:100%; max-width:1200px; margin:0 auto;} .business_type4:after{ content:""; display:block; clear:both;} .business_type4 .business_info { position:relative; width:100%; height:400px; margin:150px auto; background:none;} .business_type4 .business_info:after{ content:""; display:block; clear:both;} .business_type4 .business_info:first-child {margin-top:0px;} .business_type4 .business_info .img_left { position:absolute; left:0; top:0; width:650px; height:400px; background:blue; } .business_type4 .business_info .img_left img{ width:100%; height:100%;} .business_type4 .business_info .img_right { position:absolute; right:0; top:0; width:650px; height:400px; background:blue; } .business_type4 .business_info .img_right img{ width:100%; height:100%;} .business_type4 .business_info .con_box { position: absolute; right:0; top:25%; width:65%; height:350px; background:rgba(255,255,255,1); box-shadow:10px 10px 5px rgba(0,0,0,0.04); } .business_type4 .business_info .con_box .txt_area {padding:10%; } .business_type4 .business_info .con_box .txt_area:before { display: block; content: ''; position: absolute; left: -80px; top:23%; width:20%; height:1px; background:#000;} .business_type4 .business_info .con_box .txt_area em { position:relative; display:block; vertical-align:middle; color:#ddd; font-size:3em;} .business_type4 .business_info .con_box .txt_area strong {display:block; color:#333; font-size:1.8em; font-weight: 400; line-height:1.5em; margin:30px 0 20px 0;} .business_type4 .business_info .con_box .txt_area p.box_txt {display:block; color:#555; font-size:1em; font-weight: 300; text-align:justify; } .business_type4 .business_info .type_other { position: absolute; left: 0; top:25%; width:55%; height:350px; background:rgba(255,255,255,1); box-shadow:10px 10px 5px rgba(0,0,0,0.04); } .business_type4 .business_info .type_other .txt_area:before {display:none;} .business_type4 .business_info .type_other .txt_area:after { display: block; content: ''; position: absolute; right:-80px; top:23%; width:20%; height:1px; background:#000; } @media screen and (max-width:992px){ .content_wrap{width:100%;} .page_title{margin-bottom:50px;} .page_title h1{font-size:2em;} .page_title h2{font-size:1em;} .s_tit{font-size:1.2em;} } @media screen and (max-width:768px){ .business_type4 .business_info { height:auto; margin:50px auto;} .business_type4 .business_info .img_left { position:relative; width:100%; height:auto; background:#000; } .business_type4 .business_info .img_left img{ height:auto;} .business_type4 .business_info .img_right { position:relative; width:100%; height:auto; background:#000; } .business_type4 .business_info .img_right img{ height:auto;} .business_type4 .business_info .con_box { position:relative; width:90%; left:50%; top:-50px; margin-left:-45%; height:auto; } .business_type4 .business_info .con_box .txt_area:before { display: none;} .business_type4 .business_info .type_other .txt_area:after {display:none;} .business_type4 .business_info .con_box .txt_area{padding:15px;} .business_type4 .business_info .con_box .txt_area strong{font-size:1.2em;} } .reserv_bt_div{margin:50px auto 30px; text-align:center; } .reserv_bt_s{display:inline-block; margin:0 3px; width:300px; height:50px; line-height:50px; color:#fff; background-color:#293d6b; text-align:center; font-size:1.15em; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .reserv_bt_s:hover{background-color:#D79400;} .reserv_bt_sa{display:inline-block; margin:0 3px; width:300px; height:50px; line-height:50px; color:#fff; background-color:#000; text-align:center; font-size:1.15em; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .reserv_bt_sa:hover{background-color:#D79400;} /*오시는길*/ .map_wrap{ width:100%; max-width:1300px; margin:0 auto; margin-bottom:0px;} .map_wrap .map_info {width:100%; margin-top:40px;} .map_wrap .map_info .con_box {margin-bottom:30px;} .map_wrap .map_info .con_box>h2 {font-size:1.5em; margin-bottom:10px;} .map_wrap .map_info table {width:100%; border-top:1px solid #000;} .map_wrap .map_info table th {padding:0; margin:0; width:20%; text-align:center; font-size:1.2em; color:#000; vertical-align:middle; font-weight:normal; background:#f5f5f5; border-bottom:1px solid #EEE;} .map_wrap .map_info table td {width:80%; text-align:left; font-size:1.2em; color:#888; vertical-align:top; padding:10px 0 10px 15px; border-bottom:1px solid #EEE;} .map_wrap .map_info table td > a {color:#666;} .map_wrap .map_info table td > a:hover {color:#000;} .fc_pointer {color:#1F88E5; } .content_wrap{width:100%; min-width:320px; max-width:1200px; margin:0 auto;} .page_title{width:100%; margin-bottom:70px;} .page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;} .page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;} .page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; } .company_type1 {width:100%; margin:0 auto; } .company_type1:after{content:""; clear:both; display:block;} .company_type1 .ceo_img {position: relative; float:right; width:300px; text-align:right; padding-left:30px;} .company_type1 .ceo_img img {width:100%; height:auto; } .company_type1 .ceo_area{ float:left; width:70%;} .company_type1 .ceo_area .ceo_tit { position:relative; float:left; width:100%; font-size:1.8em; line-height:1.4em; letter-spacing:-0.05em; } .company_type1 .ceo_area .ceo_txt { float:right; width:100%; padding-top:50px; } .company_type1 .ceo_area .ceo_txt p { line-height:1.5em;font-size:1.2em; color: #000; word-break: keep-all; } .company_type1 .ceo_area .ceo_txt span.ceo_sign{ display:block; font-size:2.5em; color:#000; margin-top:50px; font-family: 'iceJaram-Rg';} .s_tit {width:100%; height:30px; line-height:30px; text-align:left; border-left:5px solid #000; margin:50px auto; margin-bottom:10px; font-size:1.5em; text-indent:10;} .tbla{width:100%; border-collapse: collapse; margin:0 auto; border:1px solid #ddd; border-bottom:0px;} .tbla tr th{width:20%; height:45px; padding:15px 0; text-align:center; border-bottom:1px solid #666; font-size:1em;} .tbla tr td{width:80%; border-bottom:1px solid #ddd; padding-left:15px; height:45px; text-align:left;} @media screen and (max-width:992px){ .content_wrap{width:96%;} .page_title{margin-bottom:50px;} .page_title h1{font-size:2em;} .page_title h2{font-size:1em;} .s_tit{font-size:1.2em;} .company_type1 .ceo_img {width:100%; text-align:center; margin-bottom:30px; padding-left:0; } .company_type1 .ceo_img img{width:100%;} .company_type1 .ceo_area{ float:none; width:95%; margin:0 auto; } .company_type1 .ceo_area .ceo_tit { font-size:1.8em; text-align:center;} .company_type1 .ceo_area .ceo_txt{padding-top:10px;} .tbla tr th{width:30%; font-size:0.9em;} .tbla tr td{width:70%; font-size:0.9em;} } .history_top { width:220px; height:220px; padding-top:107px; margin:70px auto; line-height:22px; font-size:2em;font-family: 'GmarketSansMedium'; text-align:center; color:#fff; background:#f5515a; border-radius: 50%; } .timeline {box-sizing: border-box; } .timeline:before {box-sizing: border-box; } .timeline * {box-sizing: border-box; } .timeline *:before {box-sizing: border-box; } .timeline { position: relative; font-size: 1em; width: 100%; height: 100%; margin:50px auto; overflow-y: hidden; overflow-x: hidden;} .timeline .timeline-block {margin-top:-4px;} .timeline .timeline-icon {position:absolute; width: 12px; height: 12px; left: 50%; margin-left: -6px; margin-top:4px; border: 3px solid #4e9cdd; border-radius: 100%; background-color: #fff; text-align: center; } .timeline .timeline-icon.timeline-icon-hide-border { border: 0; } .timeline .timeline-icon.timeline-icon-hide-border i.fa, .timeline .timeline-icon.timeline-icon-hide-border img { margin-left: 0; margin-top: 0;} .timeline .timeline-icon i.fa, .timeline .timeline-icon img { display: inline-block; width: 32px; height: 32px; margin-left: -4px; margin-top: -4px; vertical-align: bottom; line-height: 32px; text-align: center; font-size: 30px; } .timeline .timeline-icon img { border-radius: 100%; } .timeline .timeline-content { position: relative; width: 46%; padding-bottom:50px; line-height: 40px; } .timeline .timeline-content .bar_count { font-size:1.6em; font-family: 'GmarketSansMedium';color:#028458; margin-bottom:10px;} .timeline .timeline-content ul li{ font-size:1.2em;height:2.8em;} .timeline .timeline-content ul li img{width:100%; height:100px; margin-top:20px; background:red;} .timeline::before { position: absolute; width: 1px; height: 100%; top:0px; left: 50%; margin-left: -1px; background-color: #eee; content: ""; }/* Half of width */ .timeline.timeline-alternating .timeline-block:nth-of-type(2n+1) .timeline-content{text-align:right} .timeline::before {top:0px; left: 5%; } .timeline .timeline-icon {left: 5%; } .timeline .timeline-content {width: 90%; left:10%;} .timeline.timeline-alternating .timeline-block:nth-of-type(2n+1) .timeline-content{text-align:left} .timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-content { left:10%; } @media screen and (max-width:767px){ .timeline::before {top:0px; left: 5%; } .timeline .timeline-icon {left: 5%; } .timeline .timeline-content {width: 90%; left:10%;} .timeline.timeline-alternating .timeline-block:nth-of-type(2n+1) .timeline-content{text-align:left} .timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-content { left:10%; } } /* 그누보드 내용관리등 에디터로 입력할 경우 여기서부터 */ .fc_ver2_pointer {color:#C53428; } .daon_content_wrap{width:100%; min-width:320px; max-width:1500px; margin:0 auto;} .daon_ver2_page_title{width:100%; text-align:center; margin-bottom:70px;} .daon_ver2_page_title h1{width:100%; font-size:2.5em; font-weight:600;} .daon_ver2_page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;} .daon_ver2_page_title h2{width:100%; font-size:1.2em; color:#666; margin-top:20px; } .daon_ver2_sub_type1 {width:100%; } .daon_ver2_sub_type1:after{ content:""; display:block; clear:both;} .daon_ver2_sub_type1 .special_area {width:100%; padding:40px 0px; } .daon_ver2_sub_type1 .special_area:first-child {padding-top:0;} .daon_ver2_sub_type1 .special_area ul {min-height:450px; } .daon_ver2_sub_type1 .special_area ul li{ position:relative; width:100%; min-height:450px; overflow:hidden; } .daon_ver2_sub_type1 .special_area ul li:last-child {margin-bottom:0;} .daon_ver2_sub_type1 .special_area ul li div{overflow:hidden; box-sizing:border-box;} .daon_ver2_sub_type1 .special_area ul li .special_img{width:48%; top:0; right:0; position:absolute; } .daon_ver2_sub_type1 .special_area ul li .special_img img {width:100%; } .daon_ver2_sub_type1 .special_area ul li:nth-of-type(odd) .special_img{right:unset; left:0;} .daon_ver2_sub_type1 .special_area ul li:nth-of-type(odd) .special_info{text-align:left; } .daon_ver2_sub_type1 .special_area ul li:nth-of-type(odd) .special_info{float:right; right:0; width:50%; padding-right:0; padding-left:2%; background-color:rgba(255,255,255,.95); transition: 0.5s all ease;} .daon_ver2_sub_type1 .special_area ul li .special_info{position:relative; width:50%; display:table; min-height:415px; padding-right:2%; background-color:rgba(255,255,255,.95); transition: 0.5s all ease;} .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt {display:table-cell; vertical-align:middle; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl{width:100%; margin:0; padding:0; overflow:hidden; background-color:none; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl dt em{display:block; margin:0; padding:0; font-size:3em; line-height:2em; font-weight:600; font-style:normal; color:#aaa; letter-spacing:0.15em;} .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl dt.special_tit{font-size:1.85em; font-weight:600; margin:5px 0 20px 0; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl dt.special_tit2{font-size:1.6em; font-weight:500; margin:5px 0 20px 0; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl dt.special_tit3{font-size:1.2em; font-weight:400; margin:5px 0 20px 0; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt dl dd{position:relative;font-size:1.1em; color:#777; line-height:1.6em; word-break:keep-all;} .daon_ver2_sub_type1 table.special_tbl{width:100%; border-collapse:separate; border-spacing:0px; border-top:1px solid #002b5c; border-left:1px solid #eee; margin-top:20px; } .daon_ver2_sub_type1 table.special_tbl th{ width:20%; text-align:center; color:#333; font-size:0.9em; font-weight:500; padding:8px 15px; border-bottom:1px solid #eee; border-right:1px solid #eee; background-color:#f8f8f8;} .daon_ver2_sub_type1 table.special_tbl td{ width:80%; text-align:left; font-size:0.9em; padding:8px 20px; border-bottom:1px solid #eee; border-right:1px solid #eee;} @media screen and (max-width:1240px){ .daon_ver2_sub_type1 .special_area ul li .special_img{width:47%; } .daon_ver2_sub_type1 .special_area ul li {min-height:auto; } .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt {vertical-align:top;} } @media screen and (max-width:992px){ .daon_content_wrap{padding:0 2%;} .daon_ver2_page_title{margin-bottom:50px;} .daon_ver2_page_title h1{font-size:1.85em;} .daon_ver2_page_title h2{font-size:1em;} .daon_s_tit{font-size:1.2em;} .daon_ver2_sub_type1 .special_area ul li .special_img{position:relative; width:100%; } .daon_ver2_sub_type1 .special_area ul li:nth-of-type(odd) .special_info{ float:none; width:94%; margin:0 auto; padding:0 5%; background-color:rgba(255,255,255,1);} .daon_ver2_sub_type1 .special_area ul li .special_info{top:-50px; float:none; width:94%; min-height:auto; margin:0 auto; padding:0 5%; background-color:rgba(255,255,255,1);} .daon_ver2_sub_type1 .special_area ul li .special_info div.special_txt {float:left; width:100%; margin-top:30px; text-align:center; } } /* 여기까지 코드를 복사하여 공통 css파일 최하단에 추가합니다. */ .subPg{ font-size: 1.2em; line-height: 1.5em; color: #000; word-break: keep-all;} .subPg h3{ display: block; position: relative; font-size:1.5em; color: #333; font-weight: bold; padding-left:40px; margin:20px 0 15px;} .subPg h3:before { position: absolute; display:block; content: ""; top:50%; left:0px; width: 15px; height: 15px; margin:-10px 0 0 0; border-top:5px solid #ca2c1b; border-left:5px solid #ca2c1b;} .subPg h3:after{ position: absolute; display:block; content: ""; top:50%; left:7px; width: 15px; height: 15px; margin:-3px 0 0 0 ; background: #305fa2;} @media screen and (max-width:768px){ .subPg h3{font-size:1.2em; padding-left:30px;} } #performance .licenselst{ position: relative; padding:50px; margin-bottom:30px; border:1px solid #ccc; overflow: hidden;} #performance .licenselst h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold;} #performance .licenselst hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #performance .licenselst ul{ display: block;} #performance .licenselst ul li{ display: inline-block; width:33%; height:auto; font-size: 14px; color: #333; line-height: 1.6em; font-weight: 400; letter-spacing: -0.02em;} #performance .licenselst ul li:before { display: inline-block; content: ""; width: 4px; height: 4px; vertical-align: middle; margin-right: 5px; background: #cf0000;} #performance .licenselst .linkWrp{ display: block; margin:30px 0 10px;} #performance .licenselst .linkWrp a{ display: inline-block; text-decoration: none; font-size: 14px; color: #fff; font-weight: bold; text-align: center; padding: 20px 70px; margin-right:20px; background: #293d6b; border: 1px solid #1a2b53;} #performance .licenselst .linkWrp a:hover{ color: #1a2b53; background: #fff;} #performance > dl{} #performance > dl dd{ display: flex; flex-wrap: wrap; justify-content:space-between; padding:50px; margin-bottom:30px; border:1px solid #ccc; overflow: hidden;} #performance > dl dd div.pic{width:25%; height: auto;} #performance > dl dd div.pic img{display: block; width:100%; height: auto;} #performance > dl dd div.txt{width:70%; height: auto;} #performance > dl dd div.txt h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold;} #performance > dl dd div.txt hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} @media screen and (max-width:992px){ #performance .licenselst ul li{width:48%; } #performance .licenselst .linkWrp{ display:flex; flex-wrap: wrap; justify-content: space-between;} #performance .licenselst .linkWrp a{ width:48%; margin-right:0px; padding: 20px 10px;} } @media screen and (max-width:768px){ #performance .licenselst ul li{width:100%;} #performance .licenselst .linkWrp a{width:100%; margin-bottom:15px;} #performance .licenselst{padding:20px;} #performance > dl dd{ padding:20px; margin-bottom:20px;} #performance > dl dd span{ display: block; position: absolute; top:25px; left:-30px; font-size: 10em; color: #ddd; font-weight: bold; letter-spacing: -3px; opacity: 0.2; z-index:0;} #performance > dl dd div.pic{width:100%; height: auto; margin-bottom:15px;} #performance > dl dd div.txt{width:100%; height: auto;} #performance > dl dd div h4{ font-size:1.5em; color: #293d6b; font-weight: bold;} } #iotSystem{} #iotSystem > div{margin-bottom: 100px;} #iotSystem .rader01{ display: flex; flex-wrap: wrap; justify-content: space-between;} #iotSystem .rader01 div.pic{width:100%; margin-bottom:25px;} #iotSystem .rader01 div.pic img{display: block; width:100%; height: auto;} #iotSystem .rader01 div.txt{ width:100%; margin-bottom:25px; } #iotSystem .rader01 div.txt > p{ font-size:1.1em; text-align: justify; margin-bottom: 25px;} #iotSystem .rader01 dl{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader01 dl dd{ width:24%; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #iotSystem .rader01 dl dd h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #iotSystem .rader01 dl dd hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #iotSystem .rader02 dl{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader02 dl dd{ width:49%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:15px; overflow: hidden;} #iotSystem .rader02 dl dd div.pic{width:40%; height: auto;} #iotSystem .rader02 dl dd div.txt img{display: block; float: left; margin:0 15px 15px 0; width:40%; height: auto;} #iotSystem .rader02 dl dd div.txt{width:100%; height: auto; text-align: justify;} #iotSystem .rader02 dl dd div.txt h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold;} #iotSystem .rader01 dl dd div.txt hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #iotSystem .rader03 dl{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader03 dl dd{ width:49.5%; display: flex; flex-wrap: wrap; justify-content: space-between; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #iotSystem .rader03 dl dd h4{ display: block; width: 100%; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #iotSystem .rader03 dl dd hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #iotSystem .rader03 dl dd p{ display: block; margin-bottom: 10px;} #iotSystem .rader03 dl dd p b{ display: block;} #iotSystem .rader04{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader04 div.pic{width:45%;} #iotSystem .rader04 div.pic img{display: block; width:100%; height:auto;} #iotSystem .rader04 div.txt{width:50%;} #iotSystem .rader04 div.txt p{ display: block; font-size:1.1em; text-align: justify; margin-bottom: 30px;} #iotSystem .rader04 div.txt dl{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader04 div.txt dl dd{ width:32%; display: flex; flex-wrap: wrap; justify-content: space-between; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #iotSystem .rader04 div.txt dl dd h4{ display: block; width:100%; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #iotSystem .rader04 div.txt dl dd hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #iotSystem .rader05{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader05 div.pic{width:100%; margin-bottom: 20px;} #iotSystem .rader05 div.pic img{display: block; width:100%; height:auto;} #iotSystem .rader05 div.txt{width:100%;} #iotSystem .rader05 div.txt p{ display: block; font-size:1.1em; text-align: justify; margin-bottom: 25px;} #iotSystem .rader05 div.txt dl{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader05 div.txt dl dd{ width:49%; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #iotSystem .rader05 div.txt dl dd h4{ display: block; width:100%; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #iotSystem .rader05 div.txt dl dd hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #iotSystem .rader05 div.txt dl dd ul{ display: block;} #iotSystem .rader05 div.txt dl dd ul li{ display: block; margin-bottom: 15px;} #iotSystem .rader05 div.txt dl dd ul li:before { display: inline-block; content: ""; width: 4px; height: 4px; vertical-align: middle; margin-right: 5px; background: #cf0000;} #iotSystem .rader06{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #iotSystem .rader06 div.pic{width:45%;} #iotSystem .rader06 div.pic img{display: block; width:100%; height:auto;} #iotSystem .rader06 div.txt{ width:50%; font-size:1.1em; text-align: justify; margin-bottom: 20px;} @media screen and (max-width:768px){ #iotSystem{} #iotSystem > div{margin-bottom: 50px;} #iotSystem .rader01 div.txt > p{font-size:1em;} #iotSystem .rader01 dl dd{ width:49%; padding:12px; margin-bottom:10px;} #iotSystem .rader02 dl dd{ width:100%; margin-bottom:15px;} #iotSystem .rader02 dl dd div.pic{width:100%; height: auto;} #iotSystem .rader02 dl dd div.txt img{display: block; float:none; margin:0 0px 15px 0; width:100%; height: auto;} #iotSystem .rader02 dl dd div.txt{width:100%; height: auto; text-align: justify; margin-bottom:30px;} #iotSystem .rader02 dl dd div.txt h4{ text-align: center;} #iotSystem .rader03 dl dd{ width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #iotSystem .rader04 div.pic, #iotSystem .rader04 div.txt{width:100%;} #iotSystem .rader04 div.pic{margin-bottom:15px;} #iotSystem .rader04 div.txt p{ font-size:1em; margin-bottom: 20px;} #iotSystem .rader04 div.txt dl dd{ width:100%; margin-bottom:15px;;} #iotSystem .rader05 div.txt p{ font-size:1em;} #iotSystem .rader05 div.txt dl dd{ width:100%; padding:12px;} #iotSystem .rader06 div.pic, #iotSystem .rader06 div.txt{width:100%; font-size:1em;} #iotSystem .rader06 div.pic img{display: block; width:100%; height:auto; margin-bottom: 15px;} } #aiDeeplearning{} #aiDeeplearning > div{margin-bottom: 100px;} #aiDeeplearning .ai01 > p{ font-size:1.1em; text-align: justify; letter-spacing: -0.5px; margin-bottom: 25px;} #aiDeeplearning .ai01 dl{ display: flex; flex-wrap: wrap; justify-content: space-between;} #aiDeeplearning .ai01 dl dd{ width:49%; margin-bottom:35px;} #aiDeeplearning .ai01 dl dd h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center; margin-bottom: 15px;} #aiDeeplearning .ai01 dl dd img{ display: block; width:100%; height: auto; margin-bottom:15px;} #aiDeeplearning .ai02 > p{ font-size:1.1em; text-align: justify; letter-spacing: -0.5px; margin-bottom: 25px;} #aiDeeplearning .ai02 > p b{display: block;} #aiDeeplearning .ai02 dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:50px 0 50px;} #aiDeeplearning .ai02 dl dd{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #aiDeeplearning .ai02 dl dd div.pic{ width:62%; height: auto;} #aiDeeplearning .ai02 dl dd div.txt{ position: relative; width:35%; height: auto; padding:50px 15px 15px; background: #0d111d; overflow: hidden;} #aiDeeplearning .ai02 dl dd div.txt span{ position: absolute; top:30px; left:-15px; font-size:90px; font-weight: bold; color: #fff; text-align: justify; opacity:0.1;} #aiDeeplearning .ai02 dl dd div.txt h4{ display: block; font-size:1.5em; color: #fff; font-weight: bold;} #aiDeeplearning .ai02 dl dd div.txt hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #aiDeeplearning .ai02 dl dd div.txt p{color: #fff;} #aiDeeplearning .ai03{display: flex; flex-wrap: wrap; justify-content: space-between;} #aiDeeplearning .ai03 > p{ display: block; width:100%; font-size: 1.1em; margin:0 0 15px;} #aiDeeplearning .ai03 div.pic{ width:100%; height: auto; margin-bottom:25px;} #aiDeeplearning .ai03 div.pic img{display: block; width:100%; height: auto;} #aiDeeplearning .ai03 div.txt{ position: relative; width:100%; height: auto;} #aiDeeplearning .ai03 div.txt > h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #aiDeeplearning .ai03 div.txt p{margin-bottom: 15px; text-align: center;} #aiDeeplearning .ai03 div.txt dl{display: flex; flex-wrap: wrap; justify-content: space-between;} #aiDeeplearning .ai03 div.txt dl dd{ width:32%; height: auto; border:1px solid #ccc;} #aiDeeplearning .ai03 div.txt dl dd.blue{ background: #293d6b;} #aiDeeplearning .ai03 div.txt dl dd.blue h4, #aiDeeplearning .ai03 div.txt dl dd.blue h5, #aiDeeplearning .ai03 div.txt dl dd.blue p{color: #fff;} #aiDeeplearning .ai03 div.txt dl dd h4{ display: block; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #aiDeeplearning .ai03 div.txt dl dd h5{ display: block; font-size:1.2em; color: #333; font-weight: bold; text-align: center; margin-bottom: 15px;} #aiDeeplearning .ai03 div.txt dl dd h5 span{ display: block; font-size:0.7em; line-height: 16px;} #aiDeeplearning .ai03 div.txt dl dd hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:5px auto; background: #ccc} #aiDeeplearning .ai03 div.txt dl dd img{display: block; width:100%; height: auto;} #aiDeeplearning .ai03 div.txt dl dd p{ display: block; padding:10px; text-align: justify;} #aiDeeplearning .ai04{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%;} #aiDeeplearning .ai04 div.pic{width:45%;} #aiDeeplearning .ai04 div.pic img{display: block; width:100%; height:auto;} #aiDeeplearning .ai04 div.txt{width:50%;} #aiDeeplearning .ai04 div.txt h4{ display: block; width:100%; font-size:1.5em; color: #293d6b; font-weight: bold; } #aiDeeplearning .ai04 div.txt hr{ display: block; width:100%; height: 1px; border:0px solid #ccc; margin:15px auto; background: #ccc} #aiDeeplearning .ai04 div.txt p{ display: block; font-size:1.1em; text-align: justify; margin-bottom: 30px;} @media screen and (max-width:768px){ #aiDeeplearning .ai01 dl{} #aiDeeplearning .ai01 dl dd{ width:100%; margin-bottom:25px;} #aiDeeplearning .ai02 dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:50px 0 50px;} #aiDeeplearning .ai02 dl dd{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; padding:12px; margin-bottom:15px; border:1px solid #ccc; overflow: hidden;} #aiDeeplearning .ai02 dl dd div.pic{ width:100%; height: auto; margin-bottom:15px;} #aiDeeplearning .ai02 dl dd div.txt{ width:100%; height: auto; padding:15px 15px 15px;} #aiDeeplearning .ai02 dl dd div.txt span{ position:relative; display: inline-block; top:0px; left:0px; font-size:1em; opacity:0.2;} #aiDeeplearning .ai02 dl dd div.txt h4{display:block; font-size:1.2em;} #aiDeeplearning .ai02 dl dd div.txt hr{margin:10px auto;} #aiDeeplearning .ai02 dl dd div.txt p{text-align: justify;} #aiDeeplearning .ai03 div.txt dl dd{ width:100%; margin-bottom: 15px;} #aiDeeplearning .ai04{} #aiDeeplearning .ai04 div.pic{width:100%; margin-bottom:15px;} #aiDeeplearning .ai04 div.pic img{display: block; width:100%; height:auto;} #aiDeeplearning .ai04 div.txt{width:100%;} #aiDeeplearning .ai04 div.txt h4{ display: block; width:100%; font-size:1.5em; color: #293d6b; font-weight: bold; text-align: center;} #aiDeeplearning .ai04 div.txt p{text-align: justify;} }