@charset "utf-8"; /* 초기화 */ html, body{margin:0;padding:0} body{font-size:15px;} h1, h2, h3, h4, h5, h6, form, fieldset, img{margin:0;padding:0;border:0} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;margin:0;padding:0} ul, li{margin:0;padding:0;list-style:none} legend{position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img{vertical-align:middle;font-size:13px;transition:0.5s} input[type='submit'], input[type='button'], input[type='reset'], button{cursor:pointer;padding:0 20px;letter-spacing:-1px;font-weight:bold;height:32px;box-shadow:1px 1px 3px rgba(0,0,0,.3);} input[type="text"], input[type="password"]{height:30px;line-height:30px;font-size:15px;padding:0 5px;border:1px solid #bebebe;transition:0.3s} input[type="text"]:focus, input[type="password"]:focus{border-color:#fff;box-shadow:0px 0px 3px #000;background:#eff} select{line-height:30px;height:30px;font-size:15px} textarea{font-size:15px;padding:5px;vertical-align:middle} p{margin:0;padding:0;word-break:break-all} hr{display:none} pre{overflow-x:scroll;font-size:1.1em} a{color:inherit;text-decoration:none} a:hover{text-decoration:underline} a[class*="btn"]{display:inline-block;text-align:center;box-shadow:1px 1px 3px rgba(0,0,0,.3);} img{max-width:100%;max-height:100%;} /* font-size */ @media (max-width:479px){html{font-size:15px;}} @media (min-width:480px) and (max-width:519px){html{font-size:15px;}} @media (min-width:520px) and (max-width:559px){html{font-size:16px;}} @media (min-width:560px) and (max-width:599px){html{font-size:17px;}} @media (min-width:600px) and (max-width:639px){html{font-size:18px;}} @media (min-width:640px) and (max-width:679px){html{font-size:19px;}} @media (min-width:680px) and (max-width:719px){html{font-size:20px;}} @media (min-width:720px) and (max-width:759px){html{font-size:21px;}} @media (min-width:760px) and (max-width:799px){html{font-size:22px;}} @media (min-width:800px) and (max-width:839px){html{font-size:23px;}} @media (min-width:840px) and (max-width:879px){html{font-size:24px;}} @media (min-width:880px){html{font-size:25px;}} /* class */ span.middle{display:inline-block;height:100%;width:0;font-size:0;vertical-align:middle; &+div, &+ul, &+span, &+p{display:inline-block;vertical-align:middle;} } .al_l{text-align:left;} .al_c{text-align:center;} .al_r{text-align:right;} .fl{float:left;} .cycle(@size,@bg,@color,@border){display:inline-block;width:@size;height:@size;border-radius:100%;box-sizing:border-box;background:@bg;color:@color;border:@border;line-height:@size;text-align:center;} .toggle_menu(@w,@h,@margin,@top,@bg){position:relative; &>span{display:inline-block;width:@w;height:@h;background:@bg;border-radius:2px;position:relative;top:0;transition:.3s;top:@top;} &>span:after, &>span:before{display:inline-block;width:@w;height:@h;background:@bg;border-radius:2px;content:'';position:absolute;left:0;transition:.3s} &>span:after{top:@margin} &>span:before{top:-@margin} &.over{background:@bg;} &.over>span{background:none} &.over>span:after{top:0px;transform:rotate3d(0,0,1,-45deg);background:#fff;} &.over>span:before{top:0px;transform:rotate3d(0,0,1,45deg);background:#fff;} } /* pc start */ @media all and (min-width:1200px){ .mobile{display:none;} /* layout */ #header{position:relative;z-index:100; &>div{width:1200px;margin:0 auto;position:relative; #logo{display:inline-block;line-height:120px;} #util{position:absolute;right:0;top:0;padding:15px; a{font-size:12px;font-weight:bold;color:#0b3259;font-weight:bold;margin:0 15px;} a.over{text-decoration:underline;} } } #gnb{height:62px;background:rgba(11,50,89,.69);color:#fff;min-width:1200px; &>ul{text-align:center;margin:0 auto;width:1200px; &>li{display:inline-block;position:relative; &>a{font-size:17px;font-weight:bold;color:#fff;display:block;padding:0 80px;line-height:62px;text-decoration:none;letter-spacing:-1px;} &>ul{display:none;position:absolute;left:0;width:100%;line-height:60px;text-indent:30px;background:rgba(11,50,89,.69);text-align:left; a{display:block;color:#fff;text-decoration:none;transition:.3s; &:hover{background:#fff;color:#0b3259;} } } } } } } #visual{ &>div{background:url(../img/img-main-visu.png) no-repeat center top;margin-top:-150px;padding-top:150px;text-align:center;height:460px; &>div{font-size:16px;color:#4e4b4b;line-height:28px; p{padding:30px 0;} } } &.t2{ } } #visual-sub{background:url(../img/img-main-visu.png) no-repeat center top;margin-top:-150px;padding-top:150px;text-align:center; &>div{background:url(../img/img-sub-visu.png) no-repeat center center;background-size:cover;height:308px; &>div{font-size:17px;color:#0b3259;text-align:left;padding-left:600px;} strong{font-size:50px;line-height:80px;display:block;} } &.type2{ &>div{background:url(../img/img-sub-visu2.jpg) no-repeat center center;background-size:cover;height:308px;text-shadow:3px 3px 3px rgba(0,0,0,.75); &>div{color:#fff;} } } } #footer{background:#fff;min-width:1200px;border-top:1px solid #ddd; &>div{margin:0 auto;width:1200px;box-sizing:border-box;position:relative;height:140px;padding-left:250px; &>div{width:100%;line-height:30px;} .footer_logo{position:absolute;left:20px;top:0;display:inline-block;line-height:140px;} .info{font-size:14px;color:#333333; p{display:inline-block;vertical-align:middle; &~p{margin-left:50px;} img{padding:0 20px;} strong{display:block;} } } .copyright{font-size:12px;color:#385977;} .gobiz{position:absolute;right:0;top:20px;} } } #main_content{background:url(../img/bg-main-content.png) no-repeat center center;min-width:1200px;padding:409px 0 50px;margin-top:-150px; &>div.transparent{width:1200px;margin:0 auto;position:relative;height:0; article{position:absolute;color:#fff;background:rgba(0,0,0,.6);text-align:center;opacity:0;transition:.3s; &:hover{opacity:1;} a{display:block;height:100%;text-decoration:none;} &.t1{top:-225px;left:0;height:200px;line-height:200px;width:165px;} &.t2{top:-240px;left:250px;height:200px;line-height:200px;width:310px;} &.t3{top:-350px;left:680px;height:180px;line-height:180px;width:210px;} &.t4{top:-350px;left:950px;height:180px;line-height:180px;width:200px;} } } &>div.box{width:1200px;margin:0 auto;background:rgba(255,255,255,0.7);height:240px;box-sizing:border-box;padding:0 20px; &>article{display:inline-block;width:25%;height:100%;text-align:center;position:relative; ul{width:100%;cursor:pointer;position:relative; &:before{content:"";opacity:0;position:absolute;left:0;top:-20px;width:100%;height:100%;background:#000;transition:.3s;padding:20px 0;} &:hover:before{opacity:0.3;} li.number{position:absolute;left:10px;} li.icon{padding:0 0 20px; img{max-height:77px;max-width:100px;} } li.title{font-size:17px;color:rgba(0,0,0,6); strong{display:block;font-size:v18px;color:#333333;padding:10px 0;} } } } } } #sub_content{overflow:hidden; #snb{height:60px;line-height:60px;border-bottom:1px solid #ddd; ul{width:1200px;margin:0 auto;font-size:15px;color:#999999;display:table;text-align:center;} li{display:table-cell;width:10%; a{text-decoration:none;display:block;font-weight:bold; &.over, &:hover{color:#0b3259;border-bottom:2px solid #0b3259;box-sizing:border-box;} } } } #content{width:1200px;margin:0 auto;box-sizing:border-box;padding:60px 0 200px; .content-type1{padding:0 45px;} &>div>header{font-size:26px;line-height:45px;color:#333;position:relative; h3{font-size:42px;margin-bottom:30px;} strong{color:#0555af;} p+span{width:120px;height:2px;background:#000;display:block;margin:35px 0;} &>img.t1{position:absolute;right:0;top:-30px;} &>img.t2{position:absolute;right:-150px;top:-80px;max-height:1000%;z-index:-1;} &>img.t3{position:absolute;right:80px;top:-30px;} &>img.t4{position:absolute;right:-170px;top:0;} } .intro{ article{font-size:18px;line-height:32px; p.sign{text-align:right;margin-top:50px;line-height:36px;font-size:18px;font-weight:bold;padding-right:300px; img{margin-top:-10px;} } .table{margin-top:50px;padding-top:250px;position:relative; &>img{position:absolute;left:0;top:0;width:100%;} .tr{background:#14326b;line-height:40px; &>div{box-sizing:border-box;padding:10px 20px; &.lbl{color:#fff;width:20%;} &.desc{background:#fff;letter-spacing:-1px;border-right:2px solid #ddd;width:80%;} } } } .slogan{font-size:30px;color:#14326b;background:url(../img/logo-bg.png) no-repeat left center;line-height:120px;margin:80px 0;text-align:center;font-weight:bold;} ul{height:190px;box-sizing:border-box; li.window_width{position:absolute;left:0;width:100%;height:190px;background:#000;background:#e6eff5;z-index:-1;} li{display:inline-block;text-align:center;} .number{line-height:190px;width:10%;} .icon{width:20%;line-height:50px; strong{display:block;} } .text{width:70%;text-align:left;font-size:16px;line-height:30px;box-sizing:border-box;padding:0 30px;} } } } .history{ article{position:relative; ul{margin-bottom:25px; li{display:inline-block;vertical-align:top; &.year{font-size:22px;font-weight:bold;color:#0f3f75;background:url(../img/icon-list1.png) no-repeat left center;padding-left:20px;} &.desc{line-height:28px;font-size:18px; span{display:inline-block;vertical-align:top;} span.month{font-weight:bold;padding:0 10px;} } } } &>img{position:absolute;bottom:0;left:470px;z-index:-1;} } } .patent{ article{margin-top:100px; &.t1{ ul{width:25%;display:inline-block;font-size:18px;font-weight:bold;line-height:24px;text-align:center;vertical-align:top; img{box-shadow:5px 5px 10px rgba(0,0,0,.3);margin-bottom:20px;} } &>div{text-align:center;background:#e6eff5;height:160px;border:1px solid #004e8f;font-size:20px;color:#004e8f;line-height:28px;position:relative;margin-top:70px; strong{display:block;font-size:24px;color:#000;padding-bottom:15px;} &>span.top{position:absolute;top:-33px;left:50%;margin-left:-14px;} } } &.t2{position:relative; &>h3{font-size:30px;height:120px;color:#004e8f;background:url(../img/logo-bg.png) no-repeat left top;padding-top:60px;padding-left:215px;box-sizing:border-box;} &>p{font-size:20px;line-height:36px;padding-left:20px;background:url(../img/icon-list1.png) no-repeat left 11px;font-weight:bold;} &>img{position:absolute;top:0;right:-150px;z-index:-1;opacity:.5;} &>ul{margin:100px 0;text-align:center;text-align:center; li{display:inline-block;margin:15px 30px;} } } } } .location{ article{ &>iframe{margin-bottom:20px;} &>ul{ li{display:inline-block;vertical-align:top;line-height:35px; &.type{font-size:20px;color:#004e8f;padding-left:30px;font-weight:bold; &.t1{background:url(../img/icon-bus.png) no-repeat left center;} &.t2{background:url(../img/icon-subway.png) no-repeat left center;} } &.desc{margin-left:10px;font-size:18px;color:#666; &>p>span{background:#00aeef;color:#fff;font-weight:bold;padding:3px;} } } &.address{font-size:20px;margin-bottom:20px; li{display:block;} } } } } .content-type2{padding:0 0 200px; &>section>ul.tab{line-height:60px;font-size:25px;margin-bottom:50px; &>li{display:inline-block;width:25%; a{display:block;background:#e5e5e5;color:#666;transition:0.3s;padding:0 60px;border-left:1px solid #fff;text-align:center;text-decoration:none; &.over{background:#004e8f;color:#fff;} } } } &>section{ &>header{line-height:60px; h3{font-size:50px;color:#004e8f;} p{font-size:35px;color:#999;font-weight:bold;} span.line{display:block;width:100%;height:1px;width:100%;position:absolute;left:0;background:#004e8f;margin-top:14.5px;} span.icon{display:inline-block;background:#fff;position:relative;z-index:10;} } .intro{padding:50px 0;clear:both; p{font-size:20px;line-height:35px;color:#333;letter-spacing:-1px;text-align:justify; strong{display:block;font-size:30px;padding-bottom:10px;} } &>img{float:right;padding-left:15px;max-width:50%; &.fn{float:none;max-width:100%;padding:30px 0;} } } .content{clear:both; h3{background:#999;color:#fff;font-size:25px;text-align:center;line-height:40px;margin-bottom:20px;} &>div{line-height:35px;margin-bottom:20px; &>strong{display:block;padding-left:20px;background:url(../img/icon-list2.png) no-repeat left 16px;font-size:25px;line-height:40px;margin-top:10px;color:#404040; &.t2{background:none;padding:0;font-size:30px;color:#000} } &>p{font-size:18px;color:#666;padding-left:20px;letter-spacing:-1px; &.flex{ span{display:inline-block;vertical-align:top;padding-right:10px;} } } &>img{float:right;max-width:30%;} } } .dp{ div{display:inline-block;vertical-align:top; &.t1{width:54.6%;box-sizing:border-box;padding-right:5px;} &.t2{width:45.4%;} p{font-size:25px;color:#fff;text-align:center;line-height:35px;background:#ccc;margin-bottom:5px;font-weight:bold;letter-spacing:-1px;} img{width:100%;} } } } &.ecdis{ img.t1{max-width:25%;} img.t2{margin-top:-10px;max-width:45%;} .content.t2{margin-top:50px;} } &.vts{ .content{ &.system{margin-bottom:100px;} ul{width:25%;display:inline-block;position:relative;text-align:center;vertical-align:top;margin-top:50px; .number{.cycle(50px,#0072bc,#fff,none);position:absolute;left:50%;margin-left:-25px;top:-25px;z-index:10;font-weight:bold;} .text{.cycle(250px,#fff,#666,2px solid #0072bc);padding:0 50px;font-size:18px;border-width:3px 1px 1px 3px; &>span{line-height:30px;} } } &.vts{ &>div{display:inline-block;width:50%;box-sizing:border-box;vertical-align:top; &.img_wrap{padding-right:50px; &>img{max-width:100%;width:100%;float:none;} } strong.t3{background:none;font-size:20px;} } } } } &.training{ &>section{margin-bottom:100px;} p.t2{padding-top:5px;padding-bottom:5px;} p.t3{padding-bottom:40px;} .shs{ .content{ &>div{display:inline-block;width:67.5%;box-sizing:border-box;vertical-align:top; &.img_wrap{padding-right:40px;width:32.5%; &>img{max-width:100%;width:100%;float:none;margin-bottom:10px;} } } } .shs{padding:50px 0; img{width:100%;} } } .ers{ .content{ &>div{display:inline-block;width:55%;box-sizing:border-box;vertical-align:top; &.img_wrap{padding-left:40px;width:45%; &>img{max-width:100%;width:100%;float:none;margin-bottom:20px;} } &.wh{width:auto;display:block; p{padding-bottom:30px;} p.img_wrap{width:50%;display:inline-block;padding:0 5px 10px;box-sizing:border-box;text-align:center;} img{width:100%;max-width:100%;margin-bottom:10px;} } } } } .hvs{ .intro{ p.img_wrap{margin:30px 0;letter-spacing:-999px; img{width:32%;border:1px solid #ddd;margin-right:20px;} } } .content{ p.img_wrap{padding:0;margin:30px 0;letter-spacing:-999px; &>img{padding:0 10px;width:~'calc(50% - 20px)'} } } } .lchs{ .intro{ p{line-height:50px;font-size:25px;} &>img{max-width:40%;padding-left:30px;} p.img_wrap{padding:0;margin:30px 0;letter-spacing:-999px; &>img{padding:0 10px;width:~'calc(50% - 20px)'} } } .content.lchs{ &>div{display:inline-block;width:50%;box-sizing:border-box;vertical-align:top; &.img_wrap{padding-right:20px; img{max-width:100%;width:100%;margin-bottom:30px;} } } } } } &.seems{ .intro{position:relative; p.img_wrap{letter-spacing:-999px;padding:30px 0; img{display:inline-block;margin-right:24px;width:32%;} } ul{text-align:center;position:absolute;width:100%;left:0;margin-top:-200px; li:not(.arrow){display:inline-block;width:140px;color:#fff;line-height:50px;font-weight:bold;position:relative;margin:0 46px;background:#00aeef; span{position:absolute;top:50%;height:4px;background:#929497;margin-top:-2px;display:inline-block;width:80px;left:100%;margin-left:3px; img{position:absolute;right:-5px;top:-8px;max-height:inherit;max-width:inherit;} } } li.arrow{width:78%;left:11%;margin-top:4px;border:4px solid #929497;height:50px;border-top:none;position:absolute; img{position:absolute;left:-8px;top:-5px;transform:rotate(-90deg)} } } } .content{ .effect{position:relative; ul{letter-spacing:-999px; li{display:inline-block;width:25%;text-align:center;vertical-align:bottom;} } img.arrow1{position:absolute;left:50%;margin-left:-300px;width:50%;max-width:50%;margin-top:10px;} h3.t2{background:#0072be;border-radius:3px;margin-top:100px;} } .procces{margin-top:100px;position:relative; &>div{text-align:center; &>div{position:relative; &.t1{width:50%;display:inline-block;vertical-align:bottom;} &.t2{position:absolute;width:100%;left:0;z-index:10;margin-top:-50px;} } } .arrow2{position:absolute;left:50%;bottom:0;margin-left:-315px;margin-bottom:260px;transform:rotate(90deg)} } .character{margin-top:100px; strong{line-height:50px;} } p.img_wrap{letter-spacing:-999px;margin-top:10px; img{width:48%;margin:0 1%;} } } } } } } div.table{width:100%;border-top:2px solid #0e669f;display:table; .colg{display:table-column-group; &>div{display:table-column; &.lbl{width:20%;} &.desc{width:80%;} } } .tr{line-height:40px;display:table-row; &>div{display:inline-block;padding:0 20px;vertical-align:top;display:table-cell;border-bottom:1px solid #ddd; &.lbl{width:20%;} &.desc{width:80%;} } } } } /* end pc */ /* mobile start */ @media all and (max-width:1199px){ .pc{display:none;} /* layout */ #header{position:fixed;z-index:100;width:100%;top:0;left:0;background:rgba(255,255,255,.7); &>div{position:relative; #logo{display:inline-block;line-height:70px;height:70px; img{height:50px;margin-left:10px;} } #util{position:absolute;right:0;top:0;line-height:70px; a{.cycle(30px,#fff,#004e8f,1px solid #004e8f);margin:0 3px;font-size:13px; &>img{max-height:50%;} } a.toggle{.toggle_menu(15px,3px,5px,-3px,#004e8f);} } } #gnb{position:absolute;left:0;width:100%;background:#fff;color:#004e8f;border:none;display:none; &>ul{ &>li{display:block;position:relative; &>a{font-size:15px;font-weight:bold;color:#004e8f;display:block;text-indent:10px;line-height:40px;text-decoration:none;letter-spacing:-1px;border-bottom:1px dotted #666;transition:.3s; &.over{background:#004e8f;color:#fff;text-align:center;} } &>ul{display:none;text-indent:30px;font-size:12px; a{display:block;color:#004e8f;line-height:30px;border-bottom:1px dotted #ddd;} } } } } } #footer{background:#f5f5f5;border-top:2px solid #004e8f;padding:10px;text-align:center; &>div.box{box-sizing:border-box;position:relative; &>div{line-height:30px;} .footer_logo{text-align:center;} .info{font-size:14px;color:#333332; p{vertical-align:middle;margin-bottom:5px;display:inline-block;margin-left:20px; img{padding-right:10px;} strong{display:block;} } } .copyright{font-size:12px;color:#385977;} } } #visual{ &>div{background:url(../img/img-main-visu.png) no-repeat center top;background-size:cover;margin-top:-70px;padding:140px 10px 0 10px;text-align:center;height:50vw; &>div{font-size:0.64rem;color:#4e4b4b;line-height:1rem;width:100%; img{width:50%;} p{padding-top:1.2rem;letter-spacing:-1px;} } } } #main_content{background:url(../img/bg-main-content.png) no-repeat center top;background-size:100% auto;padding:0.4rem; &>div.transparent{position:relative;height:10vw;z-index:10; article{display:inline-block;color:#000;background:rgba(0,0,0,.3);text-align:center;opacity:0.1;transition:.3s;font-size:0.5vw;vertical-align:top;width:10vw;height:10vw;line-height:10vw;border-radius:10vw; &:hover{opacity:1;color:#fff;} &.t1{margin-top:7vw;margin-left:17vw;} &.t2{margin-top:7vw;margin-left:6vw;} &.t3{margin-top:2vw;margin-left:10vw;} &.t4{margin-top:2vw;margin-left:3vw;} a{display:block;height:100%;text-decoration:none;} } } &>div.box{background:rgba(255,255,255,0.7);margin:10px; &>article{display:inline-block;width:25%;height:100%;text-align:center;position:relative;vertical-align:top; ul{width:100%;margin:0.8rem 0;cursor:pointer;position:relative; &:before{content:"";opacity:0;position:absolute;left:0;width:100%;height:100%;background:#000;transition:.3s;} &:hover:before{opacity:0.3;} li.number{position:absolute;left:0.4rem;width:20%; img{width:100%;} } li.icon{ img{width:50%;} } li.title{font-size:0.68rem;color:rgba(0,0,0,6); strong{display:block;font-size:0.72rem;color:#333333;padding:0.4rem 0;} } } } } } #visual-sub{background:url(../img/img-main-visu.png) no-repeat center top;margin-top:-70px;padding-top:140px;text-align:center; &>div{background:url(../img/img-sub-visu.png) no-repeat center center;background-size:cover;height:25vw;text-shadow:1px 1px 3px rgba(0,0,0,.75);font-weight:bold; &>div{font-size:0.7rem;color:#fff;text-align:center;} strong{font-size:2rem;line-height:3.2rem;display:block;} } &.type2>div{background:url(../img/img-sub-visu2.jpg) no-repeat center center;background-size:cover;} } #sub_content{overflow:hidden; #snb{line-height:40px;text-align:center;font-size:15px; li{ a{text-decoration:none;display:block;font-weight:bold;border-bottom:1px solid #0b3259; &.over, &:hover{color:#fff;background:#0b3259;} } } } #content{padding:1.2rem 10px; &>div>header{font-size:1rem;line-height:1.8rem;color:#333;position:relative; h3{font-size:1.38rem;margin-bottom:1.2rem;} strong{color:#0555af;} p+span{width:120px;height:2px;background:#000;display:block;margin:1.6rem 0;} &>img.t1{position:absolute;right:0;top:0;} &>img.t2{position:absolute;right:0;top:0;} &>img.t3{position:absolute;right:0;top:0;} &>img.t4{position:absolute;right:0;top:0;z-index:-1;} } .intro{ article{font-size:0.72rem;line-height:1.28rem; p.sign{text-align:right;margin-top:2rem;line-height:1.44rem;font-size:0.72rem;font-weight:bold;padding-right:0; img{margin-top:-0.4rem;} } .table{margin-top:2rem; .table>img{width:100%;} .tr{background:#14326b;line-height:2rem; &>div{box-sizing:border-box;} .lbl{color:#fff;width:25%;} .desc{background:#fff;width:75%;letter-spacing:-1px;border-right:2px solid #ddd;} } } .slogan{font-size:1.2rem;color:#14326b;background:url(../img/logo-bg.png) no-repeat center center;background-size:auto 4.8rem;text-align:center;font-weight:bold;line-height:120px;height:120px;margin:4rem 0;letter-spacing:-1px;} ul{height:7.6rem;box-sizing:border-box; li.window_width{position:absolute;width:100%;left:0;height:7.6rem;background:#000;background:#e6eff5;z-index:-1;} li{display:inline-block;text-align:center;} .number{line-height:7.6rem;width:10%;} .icon{width:20%;line-height:2rem; strong{display:block;} } .text{width:70%;text-align:left;font-size:0.64rem;line-height:1.2rem;box-sizing:border-box;padding:0 1.2rem;} } } } .history{ article{position:relative; ul{margin-bottom:1rem; li{vertical-align:top; &.year{font-size:0.88rem;font-weight:bold;color:#0f3f75;background:url(../img/icon-list1.png) no-repeat left center;padding-left:20px;margin-bottom:10px;} &.desc{line-height:1.12rem;font-size:0.72rem; span{display:inline-block;width:90%;vertical-align:top;box-sizing:border-box;} span.month{width:9%;font-weight:bold;padding:0 0.4rem;text-align:center;} } } } &>img{position:absolute;bottom:0;left:470px;} } } .patent{ article{margin-top:2rem; &.t1{ ul{width:25%;display:inline-block;vertical-align:top;font-size:0.72rem;font-weight:bold;line-height:1rem;text-align:center; img{box-shadow:5px 5px 10px rgba(0,0,0,.3);margin-bottom:0.8rem;} } &>div{text-align:center;background:#e6eff5;height:160px;border:1px solid #004e8f;font-size:0.8rem;color:#004e8f;line-height:1.12rem;position:relative;margin-top:2.8rem; strong{display:block;font-size:1rem;color:#000;padding-bottom:15px;} &>span.top{position:absolute;top:-33px;left:50%;margin-left:-0.56rem;} } } &.t2{position:relative; &>h3{font-size:1.2rem;height:4.8rem;line-height:4.8rem;color:#004e8f;background:url(../img/logo-bg.png) no-repeat center top;background-size:auto 4.8rem;box-sizing:border-box;text-align:center;} &>p{font-size:0.8rem;line-height:1.44rem;padding-left:1rem;background:url(../img/icon-list1.png) no-repeat left 0.25rem;background-size:0.85rem;font-weight:bold;} &>img{position:absolute;top:4.8rem;right:-6rem;z-index:-1;opacity:.5;max-width:70%;} &>ul{margin:2rem 0;text-align:center;text-align:center; li{display:inline-block;margin:0.6rem 1.2rem;} } } } } .location{ article{ &>iframe{margin-bottom:0.8rem;height:30vw;} &>ul{margin-bottom:20px; li{vertical-align:top;line-height:1.4rem; &.type{font-size:0.8rem;color:#004e8f;padding-left:1.2rem;font-weight:bold;margin-bottom:0.4rem; &.t1{background:url(../img/icon-bus.png) no-repeat left center;background-size:auto 1rem;} &.t2{background:url(../img/icon-subway.png) no-repeat left center;background-size:auto 1rem;} } &.desc{margin-left:0.4rem;font-size:0.72rem;color:#666; &>p>span{background:#00aeef;color:#fff;font-weight:bold;padding:3px;} } } } } } .content-type2{ &>section>ul.tab{line-height:2.4rem;font-size:1rem;margin-bottom:2rem; &>li{display:inline-block;width:25%; a{display:block;background:#e5e5e5;color:#666;transition:0.3s;border-left:1px solid #fff;text-align:center;text-decoration:none; &.over{background:#004e8f;color:#fff;} } } } &>section{ &>header{line-height:2.4rem;border-bottom:1px solid #004e8f;padding-bottom:10px; h3{font-size:2rem;color:#004e8f;} p{font-size:1.6rem;color:#999;font-weight:bold;line-height:1.6rem} span{display:none;} } .intro{padding:2rem 0;clear:both; p{font-size:0.8rem;line-height:1.4rem;color:#333;letter-spacing:-1px;text-align:justify; strong{display:block;font-size:1.2rem;padding-bottom:10px;} } &>img{width:100%;padding-bottom:0.6rem; &.fn{float:none;max-width:100%;padding:1.2rem 0;} } } .content{clear:both; h3{background:#999;color:#fff;font-size:1rem;text-align:center;line-height:1.6rem;margin-bottom:0.8rem;padding:0 2rem;} &>div{line-height:1.4rem;margin-bottom:0.8rem; &>strong{display:block;padding-left:0.8rem;background:url(../img/icon-list2.png) no-repeat left 0.6rem;background-size:0.4rem;font-size:1rem;line-height:1.6rem;margin-top:0.4rem;color:#404040; &.t2{background:none;padding:0;font-size:1.2rem;color:#000} } &>p{font-size:0.72rem;color:#666;padding-left:0.8rem;letter-spacing:-1px; &.flex{ span{display:inline-block;vertical-align:top;padding-right:0.4rem;} } } &>img{float:right;max-width:50%;} } } .dp{ div{display:inline-block;vertical-align:top; &.t1{width:55%;box-sizing:border-box;padding-right:5px;} &.t2{width:45%;} p{font-size:1rem;color:#fff;text-align:center;line-height:1.4rem;background:#ccc;margin-bottom:5px;font-weight:bold;letter-spacing:-1px;} img{width:100%;height:50vw} } } } &.ecdis{ img.t1{max-width:50%;} img.t2{margin-top:-0.4rem;max-width:100%;width:100%;} .content.t2{margin-top:2rem;} } &.vts{ .content{ &.system{margin-bottom:2rem;} ul{width:50%;display:inline-block;position:relative;text-align:center;vertical-align:top;margin-top:2rem; .number{.cycle(10vw,#0072bc,#fff,none);position:absolute;left:50%;margin-left:-5vw;top:-5vw;z-index:10;font-weight:bold;} .text{.cycle(40vw,#fff,#666,2px solid #0072bc);padding:0 1rem;font-size:0.72rem;border-width:3px 1px 1px 3px; &>span{line-height:1.2rem;} } } &.vts{ &>div{ &.img_wrap{margin-top:4rem;&>img{max-width:100%;width:100%;float:none;}} strong.t3{background:none;font-size:0.8rem;} } } } } &.training{ &>section{margin-bottom:2rem;} p.t2{padding-top:5px;padding-bottom:5px;} p.t3{padding-bottom:40px;} .shs{ .content{ &>div{ &.img_wrap{margin-bottom:0.4rem;letter-spacing:-999px; &>img{width:32%;float:none;margin-right:0.5%;} } } } .shs{padding:2rem 0; img{width:100%;} } } .ers{ .content{ &>div{ &.img_wrap{margin-bottom:4rem;letter-spacing:-999px; &>img{width:49%;float:none;margin-right:1%;height:30vw;} } &.wh{width:auto;display:block; p{padding-bottom:30px;} p.img_wrap{width:50%;display:inline-block;padding:0 5px 0.4rem;box-sizing:border-box;text-align:center;} img{width:100%;max-width:100%;margin-bottom:0.4rem;} } } } } .hvs{ .intro{ p.img_wrap{margin:1.2rem 0;letter-spacing:-999px; img{width:32%;border:1px solid #ddd;margin-right:0.8rem;} } } .content{ p.img_wrap{padding:0;margin:1.2rem 0;letter-spacing:-999px; &>img{padding:0 0.4rem;width:~'calc(50% - 20px)'} } } } .lchs{ .intro{ p{line-height:2rem;font-size:1rem;} &>img{max-width:100%;width:100%;} p.img_wrap{padding:0;margin:1rem 0;letter-spacing:-999px; &>img{padding:0 5px;width:~'calc(50% - 10px)'} } } .content.lchs{ &>div{display:inline-block;width:50%;box-sizing:border-box;vertical-align:top; &.img_wrap{padding-right:20px; img{max-width:100%;width:100%;margin-bottom:1.2rem;} } } } } } &.seems{ .intro{position:relative; p.img_wrap{padding:1.2rem 0; img{width:100%;margin-bottom:2rem;} } ul{text-align:center;padding-left:30%;position:relative; li:not(.arrow){color:#fff;line-height:2rem;font-weight:bold;position:relative;margin-bottom:46px;background:#00aeef; span{position:absolute;left:50%;width:4px;background:#929497;margin-top:-2px;display:inline-block;height:40px;top:100%;margin:3px 0; img{position:absolute;bottom:-5px;left:0;transform:rotate(90deg);height:12px;width:18px;max-width:100%;max-height:100%;} } } li.arrow{height:88%;width:26%;left:0;top:1rem;border:4px solid #929497;border-right:none;position:absolute; img{position:absolute;top:-10px;right:-5px;} } } } .content{ .effect{position:relative; ul{letter-spacing:-999px; li{display:inline-block;width:50%;text-align:center;vertical-align:bottom;margin-bottom:1rem; img{width:90%;} } } img.arrow1{position:absolute;left:50%;margin-left:-25vw;width:50vw;max-width:50vw;margin-top:0.4rem;} h3.t2{background:#0072be;border-radius:3px;margin-top:4rem;} } .procces{margin-top:2rem;position:relative; &>div{text-align:center; &>div{position:relative; &.t1{width:100%; img{margin-bottom:4rem;} } &.t2{position:absolute;width:100%;left:0;z-index:10;top:50%;text-align:left; img{width:30vw;transform:rotate(-90deg)} } } } .arrow2{position:absolute;left:50%;top:50%;margin-top:-2rem;margin-left:-25vw;transform:rotate(180deg);width:50vw;} } .character{margin-top:2rem; strong{line-height:2rem;} } p.img_wrap{letter-spacing:-999px;margin-top:0.4rem; img{width:100%;margin:1% 0;} } } } } } } div.table{width:100%;border-top:2px solid #0e669f; .tr{line-height:1.6rem;border-bottom:1px solid #ddd; &>div{display:inline-block;vertical-align:top;padding:10px 15px;box-sizing:border-box; &.lbl{width:30%;} &.desc{width:70%;} } } } } /* end mobile */ /* mobile mini start */ @media all and (max-width:767px){ #visual>div>div{font-size:0.64rem;color:#4e4b4b;line-height:1.2rem;} #visual>div>div>img{width:75%;} #footer{text-align:left; .info p{display:block !important;width:auto;marign-left:0px;} } #main_content>div.box{margin-top:24vw; &>article{width:50%;} } #sub_content>#content{ .intro article{ .slogan{font-size:0.85rem;} &>ul{height:15rem; &>li.window_width{height:15rem;} li{display:inline-block;text-align:center; img{max-width:75%;} } .number{width:20%;line-height:15rem;} .icon{width:30%;} .text{width:50%;} } } .content-type2{ &>section{ &>header{ p{font-size:1.2rem;} } } &.training{ .lchs{ .content.lchs{ &>div{display:block;width:100%; &.img_wrap{padding-right:0px; img{max-width:100%;width:100%;margin-bottom:1.2rem;} } } } } } } } }/* mobile mini end */