section{text-align: center;}
/*top*********************************/
section.top {
    width: 100%;
    position: relative;
    padding-top:100px;
}

/*section.about*********************************/
section.center {
    width: 1200px;
}

section.intro {
    position: relative;
    overflow: hidden;
    margin-top: 100px !important;
}

section.logo{margin-top:50px !important;}

section.intro > .center {
    width: 1200px;
    margin: 0 auto;
}

section.intro>img{
    width: 466px;
    height: 400px;
}

section.intro .txt {
    width: 1200px;
    float: left;
    overflow: hidden;
}

section.intro .txt > h2 {
    float: left;
    /*width: 427px;*/
    font-size: 60px;
    text-align: left;
    line-height: 70px;
    letter-spacing: -1px;
    font-family: 'NanumSquareEB';
    position: relative;
}

section.intro .txt > h2 > span.box {
    width: 13px;
    height: 13px;
    background-color: #3783b6;
    position: absolute;
    bottom: 15px;
    margin-left: 10px;
}

section.intro .txt > p {
    /*width: 760px;*/
    float: right;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    /*margin-bottom: 26px;*/
}

/*.intro_img {
    width: 100%;
    height: 656px;
    position: absolute;
    left: 0;
    bottom: 0;

}*/

/*detail*********************************/
section.detail {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

section.center {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

section.detail>img {
    /*float: left;
    width: 405px;
    height: 561px;
    margin-top: 100px;
    margin-right: 100px;*/
}
section.detail>div.img_box>img:last-of-type{display: block;}
section.detail>div.img_box{width:760px; /*float:right;*/}

section.detail .center2 {
    width: 796px;
    float: left;
}

section.detail .center2 {
    display: none;
    width: 680px;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 100px;
}

section.detail .center2 > h3 {
    font-size: 25px;
    position: relative;
    margin-bottom: 20px;
    font-family: 'NanumSquareEB';
}

section.detail .center2 > h3 div.bar {
    margin-top: 20px;
    width: 50px;
    border-bottom: 3px solid #3783b6;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*분류*/
section.detail .center2 > ul {
    margin-top: 50px;
}
section.detail .center2 > ul > li img{display: none;}

section.detail .center2 > ul > li > ul {
    margin-bottom: 50px;
}

section.detail {
    /*margin-top: 100px;*/
}

section.detail .center2 > ul {
    width: 340px;
    float: left;
}

section.detail .center2 > ul:first-of-type {
    border-right: 1px solid #1a1a1a;
    box-sizing: border-box;
    padding-right: 20px;
}

section.detail .center2 > ul:last-of-type {
    width:320px /*!important*/;
    margin-left:20px;

}

section.detail ul > li {
    position: relative;
    text-align: left;
    padding-top: 20px;
}

section.detail ul > li > p {
    position: relative;
}

section.detail ul > li > p > span {}

section.detail ul > li > p > span:first-of-type {
    font-size: 20px;
    font-family: 'NanumSquareR';
    color: black !important;
    z-index: 1;
    bottom: 0;
}

section.detail ul > li > p > span:last-of-type {
    font-family: 'NanumSquareB';
    font-size: 25px;
    color: #c4c4c4;
    opacity: 0.2;
    bottom: 0;
    left: 0;
    position: absolute;
}

section.detail ul > li > p > span.suspen{
    letter-spacing: -1px;
}

section.detail ul > li >ul>li.device{
    width:320px;
}

section.detail ul > li >ul>li.brake{
    width:320px;
}

/*상세*/
section.detail ul > li {
    overflow: hidden;
}

section.detail ul > li > ul {
    width: 50%;
    float: left;
}

section.detail ul > li > ul > li {
    font-size: 16px;
}

section.detail ul > li > ul:last-child {
    color: #1a1a1a;
}


section.platforms {
    width: 100%;
    background-color: beige;
}

section.platforms > .center {
    width: 1200px;
    margin: 0 auto;
    background-color: lightcyan;
}

section.platforms > .center > div {
    height: 620px;
}

/*swiper slider*/
#container_wr {width:100%;}
#container {width:100%;}

.platforma-wrap {background:#f7f9fc;width:100%;margin:0 auto;height:450px;}
.platforma {width:1200px;margin:0 auto;}
.platforma h1 {font-size:25px;font-family: 'Noto Sans KR', sans-serif;padding-top:50px; margin-bottom: 10px;}
.platforma .left {width:560px;;margin:0;float:left; padding-top:50px !important;}
.platforma .right {margin:0;/*float:right;*/}
.platformb {height:520px;width:1200px;margin:0 auto;}
.platformb h1 {font-size:25px;font-family: 'Noto Sans KR', sans-serif;padding-top:50px; margin-bottom: 10px;}
.platformb .left {margin:0;float:left;margin-top:/*110 131*/px;}
.platformb .right {width:550px;margin:0;float:right; padding-top:50px;}
.platformb .right:last-of-type{display: none;}

.platformc-wrap {background:#f7f9fc;width:100%;margin:0 auto;height:500px;}
.platformc {width:1200px;margin:0 auto;}
.platformc h1 {font-size:25px;font-family: 'Noto Sans KR', sans-serif;padding-top:50px; margin-bottom: 10px;}
.platformc .left {width:560px;margin:0;float:left;}
.platformc .left .swiper-slide:first-of-type>img{margin-top:50px;}
.platformc .left .swiper-slide:last-of-type>img{height:300px;}
.platformc .right {margin:0;/*float:right;*/}
.platformd {height:530px;width:1200px;margin:0 auto /*15*/0px;}
.platformd h1 {font-size:25px;font-family: 'Noto Sans KR', sans-serif;padding-top:50px; margin-bottom: 10px;}
.platformd .left {margin:0;float:left;margin-top:/*110 131*/px;}
.platformd .right {width:487px;margin:0;float:right; padding-top:50px;}
.platformd .right:last-of-type{display: none;}
.platformd .right .swiper-slide:last-of-type>img{height:350px;}
/*.swiper-container01 .swiper-slide {padding:115px 0px 92px;}
.swiper-container02 .swiper-slide {padding:82px 0px 71px;}
.swiper-container03 .swiper-slide {padding:83px 0px 51px;}
.swiper-container04 .swiper-slide {padding:123px 0px 79px;}*/

.swiper-pagination-bullet {width:14px;height:14px;opacity:1;background:#b5b5b5;}
.swiper-pagination-bullet-active {background:#000;}
.text01 {font-family: 'Noto Sans KR', sans-serif;font-size:16px;font-weight:bold;letter-spacing: 1.2px;margin-bottom:15px;}
.text02 {font-family: 'Noto Sans KR', sans-serif;font-size:20px;font-weight:bold;margin-bottom:15px;}
.text03 {font-family: 'Noto Sans KR', sans-serif;font-size:16px;font-weight:normal;line-height:26px;color:#666666;margin-bottom:0px;}
.text04 {font-family: 'Noto Sans KR', sans-serif;font-size:20px;font-weight:normal;margin-bottom:23px;}
.detail br.mobile{display: none;}
section.detail>img:first-of-type{display: none;}

/*tablet&mobile*/
@media screen and (max-width:959px){
    section.intro{margin-top:30px !important;}
    section.intro .txt > h2 {
    font-size:38px;
    line-height:40px;
    width:100%;}
    section.intro .txt > h2 > span.box {
    width: 8px;
    height: 8px;
    background-color: #3783b6;
    position: absolute;
    bottom: 8px;
}
    
    #container_wr {width:100%;}
    .platforma-wrap{width: 100%;}
    .platforma-wrap {height:510px;}
    .platformb{height:490px;}
    .platformc-wrap {height:440px;}
    .platformd{height:400px; margin:0 auto 100px;}
    .swiper-container{width: 235px !important;}
    .swiper-wrapper{}
    .swiper-container01 .swiper-slide {padding:0px 0px 30px; width:235px !important;}
    .swiper-container02 .swiper-slide {padding:0px 0px 30px;}
    .swiper-container03 .swiper-slide {padding:30px 0px 20px;}
    .swiper-container04 .swiper-slide {padding:0px 0px 0px;}
    /*.platforma{width: 100%;}
    .platforma>h1{text-align: center;}
    .platforma .right {margin:0 auto;width: 90%;}
    .platforma .left {margin:0 auto;float:none;width: 90%;}
    .platforma .left img{width: 100%;}*/
    .platforma{width: 90% !important;}
    .platforma h1{text-align: center;}
    .platforma .left {margin:0; width:100%;}
    .platforma .left img{width:100%; text-align: center;}
    .platforma .right {margin:0;float:left;}
    
    .platformb h1 {padding-top:30px;}
    .platformb{width: 90% !important;}
    .platformb h1{text-align: center;}
    .platformb .left {display: none; width: 90%;}
    .platformb .right .swiper-slide img{width: 100%;}
    .platformb .right {margin:0;float:left;width: 100%; display: block;}
    .platformb .right:last-of-type{display:block;}
    
    .platformc h1 {padding-top:30px; margin-bottom: 0;}
    .platformc{width: 90% !important;}
    .platformc h1{text-align: center;}
    .platformc .left {margin:0; width: 100%;}
    .platformc .left img{width:100%;}
    .platformc .right {margin:0;float:left;}
    .platformc .left .swiper-slide:first-of-type>img{margin-top:0px;}
    .platformc .left .swiper-slide:last-of-type>img{height:146.66px;}
    
    .platformd h1 {padding-top:30px;}
    .platformd{width: 90% !important;}
    .platformd h1{text-align: center;}
    .platformd .left {display: none; width: 90%;}
    .platformd .right .swiper-slide img{width: 100%;}
    .platformd .right {margin:0;float:left;width: 100%; display: block;}
    .platformd .right:last-of-type{display:block;}
    .platformd .right .swiper-slide:last-of-type>img{height:178.78px;}
    .text03>br{display: none;}
    
    
    
    section.detail .center2 {
    margin-bottom: 50px;
}

    
    section{width:100%; overflow: hidden; text-align: center;}
    section.top{width: 90%;}
    section.top>img{width: 100%;}
    section.intro{width: 90%;}
    section.intro h2{margin-bottom: 20px;}
    section.intro .txt{width: 100%;}
    section.intro .txt>p{width: 100%;}
    
    section.detail{width: 90%; text-align: center; margin-top:30px;}
    section.detail>img:first-of-type{display: none;}
    section.detail>img:last-of-type{/*display:block;*/ width:100%; height:/*448px*/auto !important;margin-top:0; margin-right: 0; float:none; margin-bottom: 30px;}
    
    
    section.detail > .center > ul{width: 100%; margin-top: 0;}
    section.detail > .center > ul:first-of-type {border-right:0;}
    section.detail p{border-bottom: 1px solid rgba(196, 196, 196,0.2);}
    section.detail p>img{display: block;float:right; margin-top:6px;}
    
    section.detail ul ul{display: none;}
    section.detail ul:hover{cursor: pointer;}
 
    section.detail .center2{width: 100%;}
    section.detail .center2 > ul:first-of-type{padding-right: 0px;}
    section.detail .center2 > ul:last-of-type {width:100%; margin-left:0px;}
    section.detail .center2 > ul > li img{display: block;}
    section.detail .center2 > h3{margin-bottom: 50px;}
    
    
    section.detail ul > li > p > span:first-of-type {
    font-size: 20px;}
    section.detail ul > li > p > span:last-of-type {
    font-size: 25px;}
    section.detail p>img{display: block;float:right; width: 26px;margin-bottom: 2px;}
    .detail br.mobile{display: block;}
    .open {
    transform: rotate(180deg);
    transition: all .25s ease;}
    

}

/*tablet*/
@media screen and (min-width:768px) and (max-width:959px){
    section{width:100%; overflow: hidden;}
    .illustration ul.process_pic{width: ;}
    .illustration ul.process_pic>li{float:left;width: 310px;height: 303px;}
    /*section.detail > .center > div.>img{
    width: 478px;
    height: 350px;}*/
    
    section.detail>div.img_box{width:100% !important;}
    section.detail>div.img_box>img{width:100%;}
}

/*mobile*/
@media screen and (max-width:767px){
    section.intro .txt > h2 > img{width: 100%;height: 100%;}
    section.intro>img{width: 100%;height: 100%;}
    /*section.field{height: 600px;}
    section.field > ul.circles{width: 320px; height: 350px;}*/
    .illustration ul.process_pic>li{width: 100%;}
    .illustration ul.process_pic>li>img:last-of-type{display: none;}
    .illustration ul.process_pic>li:last-of-type>img:last-of-type{display: none;}
    .illustration ul.process_pic>li:last-of-type{margin:0;}
    section.detail>div.img_box{width:100% !important;}
     section.detail>div.img_box>img{width:100%;}
}