@charset "utf-8";
 

.topInfo {width: 100%; height: 606px; background: url(/assets/images/product/ric02/back.png) no-repeat; background-position: center center; background-size: cover}
.topInfo .wrapB {padding-top: 10px;} 
.topInfo .txtImg {position: relative;}
.topInfo .txtImg .c60 {padding-top: 80px;}
.topInfo .txtImg .c60>img {margin-bottom: 10px;}
.topInfo .txtImg .c40 {position: absolute; right: 0; bottom: 0; top: 190px;}
.topInfo .txtImg .c60 p.txtImgTitle {width: 97%;}
.topInfo .txtImg .c60 p.noticeTxt {margin-top: 50px;}

.productImgTxt {}
.productImgTxt .c100 {margin-bottom: 30px;}
.productTxt {float: left; margin: 35px 0 0 30px;}
.productImgTxt .c100:nth-child(3) .productTxt {margin: 13px 0 0 30px; width: 67%;}
.productImgTxt .c100:nth-child(2) .productTxt {margin-top: 25px;}
.productTxt h5 {font-size: 1.3em; margin-bottom: 10px;
    font-weight: 400;}
 
.applyBtn {    background: #00ccff;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 10px;
    display: block;
    float: left;
    font-weight: 300;}
 

#style {    width: 100%;
    float: left;
    margin-top: 110px;} 

#feature {margin-top: 110px; padding: 50px 0}
#feature h3 {font-weight: 400; font-size: 2em;} 

.tab-buttons {}
.tab-buttons span {width: 29%;}

.cs {margin: 30px 0 10px 0; border: 1px solid #d4d4d4; padding: 3%; width: 94%;}
.cs .c65 {width: 59%;}
.cs .c33 {width: 36%;}
.cs .earWrap {float: left; margin-top: 190px;}
.cs span {    color: #999;
    font-size: 0.75em;
    margin-left: 8px;
    float: left;
    line-height: 1.5em;}
.cs ul {}
.cs ul li {float: left; margin-left: 60px; text-align: center;}
.cs ul li:first-child {margin-left: 0;} 
.cs ul li h6 {font-weight: 400;
    font-size: 0.9em;
    margin-top: 5px;}


    #style .blueTxt {margin-bottom: 20px; background: #00a0e9; text-align: center}
    #style .blueTxt li {width: 90%; padding: 5%;height: auto; color: #fff;}
    #style .blueTxt li:nth-child(2){ margin: 10px 0;}
#style .blueTxt h5 {font-weight: 400; margin-bottom: 10px;}
#style .blueTxt p {padding-top: 10px; border-top: 1px solid #fff; }
#style .blueTxt1 {}
#style .blueTxt1 li {}
#style .blueTxt1 h5 {}
#style .blueTxt1 p {width: 94%; margin: 0 auto}
#style .blueTxt1 span {margin-left: 46px; float: left}
#style .blueTxt1 span:nth-child(1) {margin-left: 0;}
#style .blueTxt2 {background: #fff;}
#style .blueTxt2 li {background: #00a0e9; width: 21%;}
#style .blueTxt2 li:nth-child(2) {margin: 0 30px;}


#video {width: 100%; height: auto; margin: 0 auto;}
#video img {height:auto;}
/*.videoTop {position: relative; top: 80px;}*/ 



.ear2 {display: none; float: right;    margin-top: -270px;
    margin-right: -20px;}

 


#function img {    margin: 0 auto;
    display: block;
    margin-top: 35px;}


.productImgTxt .c100:last-child {margin-bottom: 0}
#style .blueTxt2:last-child {margin-bottom: 0}


#style .grayTxt {text-align: center}  
#style .grayTxt1 {margin-top: 50px;}
#style .grayTxt1 li {float: left; margin-left: 12px;}
#style .grayTxt1 li:nth-child(1) {margin-left: 0;}
#style .grayTxt2 {margin-top: 10px;}
#style .grayTxt2 li {background: #d6d6d6; margin-left: 12px; width: 32.3%; padding: 20px 0}
#style .grayTxt2 li:nth-child(1) {margin-left: 0 }
#style .grayTxt2 h5 {margin-bottom: 5px;}
#style .grayTxt2 p {}



/*모바일*/
@media (max-width: 800px) {
    .topInfo {height: 100%; } 
    .topInfo .wrapB {padding-top: 20px;     float: left;
    background: #f8f8f8;
    padding: 0 5%;}  
    .topInfo .txtImg .c40 {top: 20px;}
     
    #style> p {font-size: 1em;} 
    
    .productImgTxt {}
    .productImgTxt .c100 {text-align: center;}
    .productImgTxt .c100 img {float: none; text-align: center;}
    .productTxt {margin: 0; float: none; margin-bottom: 30px;}
    .productTxt h5 {margin-top: 10px;}
    
    .applyBtn {    float: none;
    width: 156px;
    margin: 0 auto;
    margin-top: 10px;}
    
    #style .blueTxt1 span {width: 100%; float: left}
    #style .blueTxt1 span {margin-left: 0;}
 
    .cs .c33 {width: 100%;}
    .cs .c65 {width: 100%;}
    .cs ul {width: 100%; float: none; margin: 0 auto;}
    .cs ul li {margin: 0 0 20px 30px}
    .cs ul li:nth-child(1) {margin: 0 0 20px 0;} 
    .cs .earWrap {margin:180px 0 30px 0}
    .ear2 {    margin-top: -17px;
    margin-left: -90px;}
     
    
    #feature h3 {font-size: 1.3em; font-weight: 500} 
    
    .topInfo .txtImg .c40 img {margin-top: 20px;}
    .topInfo .txtImg .c60 {margin-top: 350px; position: relative; z-index: 1; padding-top: 0} 
    .topInfo .txtImg .c60 p.noticeTxt {margin-top: 20px;}
     
    .productImgTxt .c100:nth-child(3) .productTxt {width: 100%; margin: 0}
    
    /*회색탭*/ 
    .tab-buttons span {width: 33.33333%; padding: 0}
    #function img {width: 100%;}
    #speechProVideo #play, #spatialVideo #play {  width: 100%;  height: 275px; }
    #speechPro .c45 .c666, #spatial .c666 {margin-top: 8px;}
    #speechPro .c45 p, #spatial p {margin-top: 10px;}
     
    .productImgTxt .c100:nth-child(3) p {width: 300px; margin: 0 auto}
    #video {width: 314px;}
    #video img {width: 100%;}
    #style .blueTxt2 li {width: 21%}
    #style .blueTxt2 li:nth-child(2) {margin: 0 24px;}
    
    
    .flexGogo {margin-bottom: 50px}
    #style .grayTxt1 {width: 440px; margin: 0 auto; float: none;}
    #style .grayTxt1 li {margin-left: 5px;} 
    #style .grayTxt1 li:nth-child(3) {margin-left: 0;}
    #style .grayTxt2 li {margin-left: 10px;}
}



/*모바일*/
@media (max-width: 420px) {
    #style .blueTxt2 li {width: 90%;} 
    #style .blueTxt2 li:nth-child(2) {margin: 20px 0;}
    #style .blueTxt1 span {width: 100%; float: left; margin-left: 0;}
    .cs ul {width: 83%; float: none; margin: 0 auto;}
    .cs ul li {margin-left: 0;
    margin-bottom: 20px; }
    .cs ul li:nth-child(3n+2) {margin-left: 10px;margin-right: 10px;} 
    
    .topInfo .txtImg .c60 {margin-top: 100%;}
    .cs .earWrap {margin: 0 0 30px 0}
    
    #feature .c50 {width: 100%; height: 275px;}
    #speechProVideo iframe, #spatialVideo iframe {height: 275px;} 
    #video {width: 100%;}
    #video img {width: 100%;}
    
    .ear2 {float: left; margin-left: 0} 
    
    #style .grayTxt2 li {width: 100%;} 
    #style .grayTxt2 li {margin-left: 0}
    #style .grayTxt2 li:nth-child(2) {margin: 10px 0;}
    #style .grayTxt1 span {width: 100%; float: left; margin-left: 0;}
    #style .grayTxt1 {width: 208px;}
    #style .grayTxt1 li {margin-left: 0}

}