@charset="utf-8";


 #sub_wrapper { position: relative;}


@media only screen  and (max-width:980px){  

}

@media only screen  and (max-width:480px){  

}


/************ contents */
.contents { margin:80px auto;   }

@media only screen  and (max-width:980px){  
    .contents { margin:40px auto;   }
}
@media only screen  and (max-width:480px){  
    .contents { margin:20px auto;   }
}



/*  */
.menu_wrap {border-bottom:1px solid #eee; width:100%;  }
.menu_wrap section { margin:0 auto; padding:0%; display: flex; max-width:1000px; }
.menu_wrap section a { display: inline-block; flex:1; text-align: center; transition: .3s; padding:2% 1%;  }
.menu_wrap section a:hover { background-color:#e2dbd6;  transition: .3s;}




/************ title */
#about_wrapper .title { background-image: url('../../images/about-tit.jpg'); width:100%;  }
#product_wrapper .title { background-color: #111;
     /* background-image: url('../../images/product-tit.jpg');*/
     width:100%;  }
#customer_wrapper .title { background-image: url('../../images/customer-tit.jpg'); width:100%;  }
.title { width:100%;  text-align: center; padding:8% 0; position:relative; overflow: hidden; }
.title div { position:absolute; background-size: 100%;  }

#product_wrapper .title div {  background-image: url('../../images/p-tit-bg.png'); width:30%; padding-bottom: 27%; animation: upDown 2s ease-out  alternate; animation-fill-mode: both ;  transition:  all ;  }
.title section {  color:#fff; padding:5% 0 0 0; font-size:2.5em; font-weight:500;} 
.title span { width:.7%; padding-bottom:.7%; background-color: #e2dbd6; display: inline-block; border-radius: 50%;  min-width:8px; min-height:8px; animation: dotFlash 1s ease-in-out infinite alternate; }
 
  

article { max-width:1400px; margin:0 auto; }
.sub .tab { overflow: hidden; display: flex; text-align: center; justify-content: center; text-transform: uppercase; margin:3% auto;} 
.sub .tab a { flex:1;  color:#111; padding:10px; border:1px solid #111; max-width:200px; border-radius: 50px; margin:10px; position: relative;}
.sub .tab a span { background-image: url('../../images/logo_b.png');   display: inline-block;  background-size:contain; width:25%; padding-bottom:25px;  } 


@media only screen  and (max-width:980px){   
}
@media only screen  and (max-width:480px){   
    #product_wrapper .title div {   width:50%; padding-bottom: 45%;   }
    .title { padding:23% 0; }
    .title section {  position:absolute; top:50%; font-size:2em;  } 
}



/* ABOUT */
.our_message { text-align: center;}
.our_message  h3 { color:#0f56a8; }
.our_message  h3,  .our_message  h4 { font-size:3em; font-weight:800; font-style: italic; line-height:1.3em;}
.our_message .msg1 { margin:4% 0; font-size:1.1em;  font-weight:500;}
.our_message .msg2 { font-weight:400; max-width:860px; margin:0 auto; font-size:1em; line-height:1.7em; }
.our_message .msg2 span { display: block; margin:3% 0;}
.our_message .msg2 span:first-child { background-image: url('../../images/about-a.jpg'); padding :8px; background-size: contain; }
.our_message .msg2 span:last-child { background-image: url('../../images/about-b.jpg'); padding :8px; background-size: contain; }

.our_message .msg3 { width:100%; display: block; padding:20%; background-image: url('../../images/about-01.jpg'); }
.our_message .msg4 { text-align: left; }
.our_message .msg4 ul { margin:10% auto;  width:100%; display: block; overflow: hidden;}
.our_message .msg4 ul li { float:left; width:50%; }
.our_message .msg4 ul li span { display: block; width:8px; height:8px; background-color: #0f56a8; border-radius: 50px; }
.our_message .msg4 ul li p { max-width:600px;}
.our_message .msg4 ul li p:nth-child(2) { font-weight:700; font-size:2em; }
.our_message .msg4 ul li p:nth-child(3) { line-height:1.8em; margin-top:5%; }
.our_message .msg4 ul li:first-child { padding:0 5% 0 0;}
.our_message .msg4 ul li:last-child { padding:12%;}
.our_message .msg4 ul:nth-child(1) li:last-child { background-image: url('../../images/about-02.jpg'); }
.our_message .msg4 ul:nth-child(2) li:last-child { background-image: url('../../images/about-03.jpg'); }


.ccl { position: absolute; display: block; background-color: #f3f6fb; z-index: -1; border-radius: 50%;}
.ccl1 { left:3%; top:40%; width:25%; padding-bottom:25%;  }
.ccl2 { right:5%; top:15%; width:15%; padding-bottom:15%;  }
.dtd { width:.8%; padding-bottom:.8%; min-width:8px; min-height:8px; background-color: #0f56a8; display: inline-block; border-radius: 50%; margin-left:1px;}
.our_message .dtd {  background-color: #222;  }
 
.our_wiwi { text-align: center;  position: relative; }
.our_wiwi  h3 { font-size:3em; }
.our_wiwi  h3 b { color:#0f56a8;   }
.our_wiwi  h3,  .our_wiwi  h3 b {  font-weight:800; font-style: italic; line-height:1.4em;}
.our_wiwi .wii1 { margin:3% 0; font-size:1.4em;  font-weight:300; line-height:1.8em; }
.our_wiwi .wii1 b { font-weight:500;}

.our_wiwi .wii2 { overflow: hidden; border-top:2px solid #222; }
.our_wiwi .wii2 > div { width:50%; float:left; }
.our_wiwi .wii2 .img_box { background-image: url('../../images/about-04.jpg');  padding-bottom: 30%; background-size: 90%; }
.our_wiwi .wii2 .txt_box { padding:2%;}
.our_wiwi .wii2 .txt_box ul li { font-size:.9em;  float:none; text-align:left; display: flex; padding:1.6%; border-bottom:1px solid #222; }
.our_wiwi .wii2 .txt_box ul li:last-child {border:0px; }  
.our_wiwi .wii2 .txt_box ul li span { flex:1; font-weight:400; color:#0f56a8; }
.our_wiwi .wii2 .txt_box ul li p { flex:4;  }

.our_wiwi .wii2 .txt_box a { background-image: url('../../images/ci.png'); display: block; width:50%; color:#fff; font-size:.8em;  padding: 2% 2% 2% 25%; background-size: 45%;  background-position: 10% center; border:1px solid #fff; background-color: #000; margin-top:8px; transition: all .3s;}
.our_wiwi .wii2 .txt_box a:hover { background-color: #0f56a8;  transition: all .2s;}
.our_banner { width:100%; padding-bottom:30%; position:relative; background-image: url('../../images/about-05.jpg'); }


@media only screen  and (max-width:640px){       
    .our_message  h3,  .our_message  h4, .our_wiwi  h3 {  font-size:2.6em;  }
    .ccl1 { left:-10%; top:48%; width:45%; padding-bottom:45%;  }
    .ccl2 { right:5%; top:20%; width:25%; padding-bottom:25%;  }
    
    .our_wiwi .wii1 { font-size:1.2em;  }
    .our_wiwi .wii2 > div { width:100%; float:none; }
    .our_wiwi .wii2 .img_box { padding-bottom: 50%; background-size: 100%; background-position: center bottom; }
    .our_banner { padding-bottom:50%;  }
    .our_wiwi .wii2 .txt_box ul li { padding:2.2%; font-size:.95em; }
    .our_wiwi .wii2 .txt_box a {   width:100%;   padding: 3% 3% 3% 25%; background-size: 25%;  background-position: 30% center; border:1px solid #fff;   margin-top:15px;  }
}


@media only screen  and (max-width:480px){     
    .our_message  h3,  .our_message  h4 { font-size:2.3em; }

    .our_message .msg4 ul li span { width:6px; height:6px; }
    .our_message .msg4 ul li p:nth-child(2) { font-weight:700; font-size:1.8em; }
    .our_message .msg4 ul li { float:none; width:100%; }
    .our_message .msg4 ul li:first-child { padding:0 5% 0 0; margin-top:5%;}
    .our_message .msg4 ul li:last-child { padding:20%; margin:3% 0 0;}
    
    .ccl1 { left:-10%; top:40%; width:45%; padding-bottom:45%;  }
    .ccl2 { right:5%; top:15%; width:25%; padding-bottom:25%;  }

}















/* products-list */
.th-list { width:100%; display: flex; flex-wrap:wrap;  justify-content: center; }
.th-list > ul { flex:1; max-width:22%; flex-basis:22%;  text-align: center;  margin-bottom:5%; } 
.th-list > ul > li { float:none; margin:10px; font-weight:500; position: relative; }
.th-list > ul > li:first-child img {  border:1px solid #222; }
.th-list > ul > li > a img:first-child { width:100%; padding:5%; transition: all .3s;   }


.best { width:17%;  max-width:60px;  background-image: url('../../images/best.png'); padding-bottom:17%; background-size: 100%; position: absolute; top:3%; left:3%;
transform: rotate(-30deg);}
.new { width:17%;  max-width:60px;  background-image: url('../../images/new.png'); padding-bottom:17%; background-size: 100%; position: absolute; top:3%; left:3%;
    transform: rotate(-30deg) }

@media only screen  and (max-width:980px){  
    .th-list > ul { max-width:32%; flex-basis:32%; }
}

@media only screen  and (max-width:640px){  
     
}


@media only screen  and (max-width:480px){  
    .th-list > ul { max-width:49%; flex-basis:49%; }

}



/* products-details */
.t_sh380 { background-image: url('../../images/sh380.png'); }
.t_sh350 { background-image: url('../../images/sh350g+m.png'); }
.t_sh320 { background-image: url('../../images/sh320-2.png'); }
.t_dp20 { background-image: url('../../images/dp20.gif'); }
.t_wearable { background-image: url('../../images/wearable.gif'); padding-bottom:30%!important;  }
.mark { background-image: url('../../images/logo_b.png'); padding:40px; background-size: contain;  }

.summary { display:flex; margin:50px auto; max-width:1300px;   overflow: hidden;}
.summary > div { margin:0 auto; flex-basis:50%; max-width:50%;}
.summary .img_box > div{ position: relative; } 
.summary .img_box > div img { width:70%; margin:0 auto;}
.summary .img_box > div span {  width:100%; display: block; text-align: center; font-weight:500;  } 
.summary .img_box > div .video_wrap { width:90%; height:auto; margin:3% auto 0; position:relative; background-color: #000; overflow: hidden; padding:5% 0; display: block;}
.summary .img_box > div .video_wrap video { width:100%; margin:5% auto 0;  }
.summary .txt_box { padding-top:3%; }
.summary .txt_box ul { overflow: hidden; }
.summary .txt_box ul li { float:none; }
.summary .txt_box ul li:nth-child(1) { margin-bottom:5px; font-weight:400; font-size:1.1em;  }
.summary .txt_box ul li:nth-child(2) { font-size:4em; font-weight:700; margin-bottom:5px; }
.summary .txt_box ul li:nth-child(3) { font-size:1.4em; font-weight:400; }
.summary .img_btn { position:relative; display: flex; max-width:500px; max-height:100px; margin-top:10%; }
.summary .img_btn  .nav_btn { flex:1; flex-basis:24%; max-width:24%; cursor: pointer; padding:3% 7%; border:1px solid #eee;   }
.summary .img_btn  .nav_btn img  {  width:100%; transition: all .2s;  } 
.summary .img_btn  .nav_btn:hover img { opacity: .3; transition: all .2s; }



.tables { display: flex; flex-wrap:wrap;  justify-content: center; align-items: center;}
.tables > div  { flex-basis:50%; }
.tables .txt_box {  width:80%;   }
.tables .txt_box span  { display: block; font-size:.9em; margin-top:15px; color:#0f56a8; font-weight:400;  }
.tables .txt_box ul { font-size:.95em; border:1px solid #dee6ed; }
.tables .txt_box ul li {  display: flex; float:none; }
.tables .txt_box ul li p {  flex:1; padding:1.5% 2.5%; }
.tables .txt_box ul li p:first-child { background-color: #dee6ed ; border-bottom:1px solid #fff; font-weight:400; }
.tables .txt_box ul li p:last-child { border-bottom:1px solid #dee6ed;  }
.tables .txt_box ul li:last-child p:first-child { border-color: #dee6ed; }
.tables .txt_box ul li:last-child p:last-child { border:0px; } 
.tables .img_box { background-size: contain; padding-bottom:50%;}

/*  */
.feature-a { display: flex; flex-wrap:wrap; justify-content: center; margin:0 auto;  max-width:1000px; width:95%;}
.feature-a ul { border:1px solid #0f56a8; flex-basis:33%; max-width:33%; position:relative; padding:5% 1%;  margin-top:8%; border-right:0px; }

.feature-a ul:nth-child(3n) { border-right:1px solid #0f56a8; }
.feature-a ul:last-child { border-right:1px solid #0f56a8; }
.feature-a ul li { float:none; text-align: center; }
.feature-a ul li:nth-child(1) { background-color: #0f56a8; border-radius: 50%; color:#fff; display: block; text-align: center; width:40px; height:40px; line-height:2.2em; margin:0 auto; position:absolute; top:0; left:50%;   transform: translate(-50%, -50%);  } 
.feature-a ul li:nth-child(2) { font-weight:500; font-size:1.2em;  color:#0f56a8; } 
.feature-a ul li:nth-child(3) {  margin:20px auto; background-size: 30%; padding-bottom:40%;  } 
.feature-a ul li:nth-child(4) {  } 

.feature-anone {  max-width:100%; }
.feature-anone ul {flex-basis:25%; max-width:25%;  }

.fe-light { background-image: url('../../images/i-light.png');}
.fe-led { background-image: url('../../images/i-led.png');}
.fe-lcd { background-image: url('../../images/i-lcd.png');}
.fe-time { background-image: url('../../images/i-time.png');}
.fe-waterproof { background-image: url('../../images/i-waterproof.png');}
.fe-headset { background-image: url('../../images/i-headset.png');}
.fe-option { background-image: url('../../images/i-option.png');}
.fe-group { background-image: url('../../images/i-group.png');}
.fe-combine { background-image: url('../../images/i-combine.png');}
.fe-8call { background-image: url('../../images/i-8call.png');}
.fe-extend { background-image: url('../../images/i-extend.png');}
.fe-connect { background-image: url('../../images/i-connect.png');}
.fe-3call { background-image: url('../../images/i-3call.png');}
.fe-lan { background-image: url('../../images/i-lan.png');}

/*  */
.feature-b { overflow: hidden;  margin:6% auto 0;}
.feature-b ul { overflow: hidden; display: flex; align-items: center; }
.feature-b ul li { position:relative; }
.feature-b ul li .fe-bluetooth{  background-image: url('../../images/i-bluetooth.png'); background-size: 10%; background-position: 55% center; }
.feature-b ul li p { margin:3% 0; line-height:1.8em; }
.feature-b ul li p span { width:3px; height:3px; background-color: #333; border-radius: 50%; display: inline-block; margin:3px 5px;  }
.feature-b ul li h4, .feature-b ul li p { max-width:600px; width:100%;  }
.feature-b ul li.txt_box {  flex:1; padding:3%;  }
.feature-b ul li.img_box {  flex:1.3; background-size: contain;  padding-bottom:33%;}

.feature-b ul:nth-child(even) { }
.feature-b ul:nth-child(even) li.img_box { order: 2; }
.feature-b ul:nth-child(even) li.txt_box { order: 1; text-align: right;  }
.feature-b ul:nth-child(even) li.txt_box h4, .feature-b ul:nth-child(even) li.txt_box p { float:right;    }

.fe-mic {  background-image: url('../../images/fe-mic.png');}
.fe-noise {  background-image: url('../../images/fe-noise.png');}
.fe-function {  background-image: url('../../images/fe-function.png');}
.fe-bluetooth {  background-image: url('../../images/i-bluetooth.png');}



.used { background-color: #f9f9f9; text-align: center; overflow: hidden; padding:5%; } 
.used p { max-width:900px; margin:0 auto; font-weight:500; line-height: 1.6em;   }
.used span { font-weight:400; font-size:1.3em; }
.used ul { display: flex; flex-wrap:wrap; margin:6% 0; justify-content: center;} 
.used ul li {  flex:1; font-weight:500; max-width:16%; }
.used ul li div { width:50%; padding:2%; padding-bottom:50%; margin:0 auto; border-radius:50%; border:1px solid #222; background-size: 70%; margin-bottom:15px; }
.us-sports { background-image: url('../../images/i-sports.png');}
.us-drone { background-image: url('../../images/i-drone.png');}
.us-broadcast { background-image: url('../../images/i-broadcast.png');}
.us-industry { background-image: url('../../images/i-industry.png');}
.us-army { background-image: url('../../images/i-army.png');}
.us-tour { background-image: url('../../images/i-tour.png');}
.us-hospital { background-image: url('../../images/i-hospital.png');}
.us-hotel { background-image: url('../../images/i-hotel.png');}
.us-store { background-image: url('../../images/i-store.png');}
.us-food { background-image: url('../../images/i-food.png');}
.us-edu { background-image: url('../../images/i-edu.png');}
.us-vip { background-image: url('../../images/i-vip.png');}


.system { text-align: center; padding:5%; overflow: hidden; }
.system h4 { padding:3%;  }
.sh380system { background-color: #dfe8ed; background-size:auto;  padding-bottom: 50px;  }
.sh380system section { width:100%;  background-image: url('../../images/sh380system.png'); background-size: contain; padding-bottom: 50%;   }
.sh380system ul { display: flex; flex-wrap:wrap; text-align: left; max-width:1400px; margin:2% auto 0;}
.sh380system ul li { flex-basis:50%; max-width:50%; padding:5px; font-weight:400; font-size:1em; }
.sh380system ul li::before { content: ''; width:3px; height:3px; background-color: #000; display: inline-block; margin:5px;  border-radius:50%;  }

.dp20system { padding-bottom: 50px; }
.dp20system section { width:100%;  background-image: url('../../images/dp20system.png'); background-size: 100%; padding-bottom: 50%;   position: relative;  }
.dp20system section p { position:absolute; right:6%; font-size:1.3em; font-weight:400; padding:1%; border-radius: 50%; background-color: #111; color:#fff;  }
.dp20system section p:nth-child(1) { top:23%; }
.dp20system section p:nth-child(2)  { top:50%; }
.dp20system section p:nth-child(3)  { top:77%; }





.unit { overflow: hidden; text-align: center; margin:8% 0 0; }
.unit section {  padding:8% 2%;}
.unit section h4 {  padding:0 0 2%;}
.dp20unit { background-color: #dfe8ed; }
.dp20unit ul { display: flex; }
.dp20unit ul li { margin:1%; flex:1;  }
.dp20unit ul li div { background-color: #fff; border:1px solid #ddd; }
.dp20unit ul li img { width:100%; }
.dp20unit ul li:first-child div img { width:68%;}



.set { margin:5% 0 0; border-top:1px solid #111;  border-bottom:1px solid #ddd; }
.set section { padding:0 0 2% 0;}
.set section h4 { display: block; margin:0 auto; text-align: center; font-size:1.5em; background-color: #111; color:#fff; width:100%; max-width:500px; border-radius: 0 0 50px 50px; padding:10px; }
.set img { width:100%; }
.wearable_set { border:0px!important; }

@media only screen  and (max-width:980px){   
    .summary { flex-direction: column;}
    .summary > div {flex-basis:100%; max-width:100%;}
    .summary .txt_box { order: 2; text-align: center;  margin-top:30px; }
    .summary .img_box { order: 1; }
}

@media only screen  and (max-width:680px){ 
    .dp20system section p { right:3%; padding: 2.5%; font-size:1em;   }   
}


@media only screen  and (max-width:480px){   
    /*  */ 
    .tables > div  { flex-basis:100%;  }
    .tables .img_box { padding-bottom:80%; margin:15% 0;}
    .tables .txt_box { max-width:95%; }
    /*  */
    .used { padding:15% 3%; } 
    .used h4 { font-size:1.5em; } 
    .used p {   line-height: 1.8em;  }
    .used span { font-weight:400; font-size:1.1em; }
    .used ul { display: flex; flex-wrap:wrap; margin:7% 0;} 
    .used ul li {  flex:1; font-weight:500;  flex-basis:30%; margin:3% auto; }
    .used ul li div { width:70%; padding:2%; padding-bottom:70%; margin:0 auto 5%; border-radius:50%; border:1px solid #222; background-size: 70%; }
 
    .used2 ul { justify-content: center;}
    .used2 ul li { flex-basis:33%; max-width:33%; margin:2%;}
    /*  */ 
    .feature-a ul {  flex-basis:50%; max-width:50%;  padding:5% 1%;  margin-top:8%; } 
    .feature-a ul:nth-child(2n) { border-right:1px solid #0f56a8; }
    .feature-a ul:nth-child(3) { border-right:0px; }
    .feature-a ul li:nth-child(1) { width:30px; height:30px; line-height:2.5em; } 
    .feature-a ul li:nth-child(2) {  font-size:1.4em; margin-top:10px; } 
    .feature-a ul li:nth-child(3) {  margin:15px auto; } 

    /*  */ 
    .feature-b h4, .unit section h4  {  font-size:1.5em!important; } 
    .feature-b ul {  flex-wrap:wrap;  margin:12% 0 0;} 
    .feature-b ul li .fe-bluetooth{   background-size: 10%; background-position: 45% center; }
    .feature-b ul li p { margin:3% 0; line-height:1.8em; }
    .feature-b ul li p span { width:3px; height:3px; background-color: #333; border-radius: 50%; display: inline-block; margin:3px 5px;  }
    .feature-b ul li h4, .feature-b ul li p { max-width:600px; width:100%;  }
    .feature-b ul li.txt_box {  flex:1; padding:5%; flex-basis:100%;  }
    .feature-b ul li.img_box {  flex:1;  flex-basis:100%;  background-size: 100%;  padding-bottom:50%;} 
    .feature-b ul:nth-child(even) li.img_box { order: 1; }
    .feature-b ul:nth-child(even) li.txt_box { order: 2; text-align: left;  }
    .feature-b ul:nth-child(even) li.txt_box h4, .feature-b ul:nth-child(even) li.txt_box p { float:left;    }

    .system h4 { font-size:1.5em; } 
    .sh380system section {  background-size: 100%; padding-bottom: 60%;   } 
    .sh380system ul { margin:5% 0 0;}
    .sh380system ul li { flex-basis:100%; max-width:100%;  padding:3px; font-weight:400; }
    .sh380system ul li::before { margin:3px;   }

    
    .dp20system section p { right:1%; padding: 2%; font-size:.9em;   } 
    .dp20system section p:nth-child(1) { top:15%; }
    .dp20system section p:nth-child(2)  { top:45%; }
    .dp20system section p:nth-child(3)  { top:75%; }

    .set section h4 {  font-size:1.2em; color:#fff; width:80%;   padding:5px; }
    .set section img { margin:3% 0;}
}






/* 악세사리 */
.light_btn {  cursor: pointer; }

.light_box_wrap section { overflow: visible!important; }
.light_box { background-color: rgba(000, 000, 000, .5); width:100%; height:100%; z-index: 9999; position: absolute !important; top:0; left:0; margin: 0 !important; }
.light_box section { position: relative; } 
.light_box section .light_container { background-color: #fff; position:fixed; top:55%; left:50%; width:95%; max-width:1200px; transform: translate(-50%, -50%);  }

.light_container { position: relative; width:100%; padding:2%; }
.light_contents { display: flex; justify-content: center; align-items: center; }

.light_contents > div { flex:1; flex-basis:50%; max-width:50%; }
.light_contents .light_img { width:100%; position: relative;  }
.light_contents .light_img > img { width:100%; }  
.light_contents .light_txt { text-align: left; padding:0 3%; }
.light_contents .light_txt .tit_box {  }
.light_contents .light_txt .tit_box li { float:none; }
.light_contents .light_txt .tit_box li:nth-child(1) { }
.light_contents .light_txt .tit_box li:nth-child(2) { font-size:2.6em; font-weight:700; }
.light_contents .light_txt .tit_box li:nth-child(3) { font-size:1.6em;  font-weight:500;   }
.light_contents .light_txt .tit_box li b { margin-right:5px; }
.light_contents .light_txt .sum_box { margin:30px 0;  }
.light_contents .light_txt .sum_box li { float:none; padding:5px 0; }
.light_contents .light_txt .sum_box li b { font-weight:500; margin-right:15px; }


.slick-arrow {position: absolute; z-index: 1; font-size:0em;  border:solid;display: block;  border-color: #eee;  width:7%; height:8%;  } 
.slick-arrow:hover {  border-color: #000;   }
.slick-prev {  top:45%; left:2%; border-width:0 0 2px 2px !important; transform:rotate(45deg); } 
.slick-next { top:43%; right:2%;  border-width:2px 2px 0 0!important; transform:rotate(45deg); }

@media only screen  and (max-width:640px){  
    .light_container .mark { padding:25px; }
    .light_contents > div { flex-basis:100%; max-width:100%; }
    .light_contents { flex-direction: column; align-items: flex-start; } 
    .light_contents .light_img { width:100%;}
}





.cls_btn { z-index:999;  position: absolute;  font-size:3em;  background-color:transparent;  cursor: pointer; position: absolute; right:1.5%; top:0px; }
.cls_btn {width:40px; height: 40px;}
.cls_btn:before, .cls_btn:after {position: absolute;left: 15px;content:' ';height: 40px;width: 2px;background-color: #000;}
.cls_btn:before {transform: rotate(45deg);}
.cls_btn:after {transform: rotate(-45deg);} 

 








/* soft ware */
.soft_box { width:100%;  text-align: center; padding:80px 0 20px; } 
.soft_box .tit_box { overflow: hidden;}
.soft_box .tit_box p { font-size:.95em; margin-top:15px;}
.soft_box .tit_box h3 { font-size:3.2em; font-weight:800; } 
.soft_box .tit_box h3 span { width:.8%; padding-bottom:.8%; border-radius:50%; background-color: #222; display: inline-block; } 
.soft_box .tit_box h4 { font-size:1em; overflow: visible;} 
.soft_box .tit_box h4 span {  background-image: url('../../images/logo_b.png'); width:80px; display: inline-block; background-size: contain; padding-bottom:50px; background-position: 2px 8px; } 

.soft_box .os_box { width:100%; max-width:700px; margin:2% auto; overflow: hidden; }
.soft_box .os_box a { width:46%; margin:2%; background-color: #222; color:#fff; padding:1.5%; border-radius: 15px;  display: block; float:left; font-size:.85em; text-align: left;  padding-left:70px; background-position: 20px center; transition: all .2s; border: 1px solid #222; background-size: 10%; }
.soft_box .os_box a:hover { background-color: #fff; transition: all .2s;  background-image: url('../../images/down_btn.png'); color:#222; border: 1px solid #222;  }
.soft_box .os_box .macos { background-image: url('../../images/macos.png');   }
.soft_box .os_box .windowsos { background-image: url('../../images/windows.png');  }

.update_summary { overflow: hidden;}

.update_summary .img_box { width:40%; float:left;}
.update_summary .img_box img { float:right; width:70%; margin-top:50px;} 

.update_summary .txt_box { width:60%; float:right; padding:3%; background-color: #f8f8f8;  }
.update_summary .txt_box p { font-size:1.1em; font-weight:500; margin-bottom:20px; }
.update_summary .txt_box ul { margin-left:3%;}
.update_summary .txt_box ul li { float:none; padding-left:30px; text-indent: -20px; padding:5px 0; }
.update_summary .txt_box ul li span { display:inline-block; width:7px; height:7px; border:1px solid #222; margin-right:10px;} 

@media only screen  and (max-width:640px){   
    .update_summary .img_box { width:100%; float:none;}
    .update_summary .img_box img { float:none; width:80%; margin-top:0px; margin:0 auto; display: block;} 
    
    .update_summary .txt_box { width:100%; float:none; padding:6%;   }
}


@media only screen  and (max-width:480px){    
    .soft_box { width:100%;  text-align: center; padding:120px 0 20px; } 
    .soft_box .tit_box h3 { font-size:2.7em; } 
    .soft_box .tit_box h4 { font-size:1em; } 
    .soft_box .tit_box p { font-size:1em; margin-top:15px; width:80%; margin:10px auto;}

    .soft_box .os_box a { width:75%; margin:2%; margin:15px auto;  background-color: #222; color:#fff; padding:1.5%; border-radius: 15px;  display: block; float:none; font-size:.85em; text-align: left;  padding-left:70px;  } 
    .soft_box .os_box .macos { background-image: url('../../images/macos.png'); background-position: 20px center; background-size: 11%;}
    .soft_box .os_box .windowsos { background-image: url('../../images/windows.png'); background-position: 20px center; background-size: 9%;}
    }



























































.as_wrap { background-image: url('../../images/logo_s.png'); background-size:70%; padding-top:30px; background-position: center 18%; }
.as_wrap .as {  width:100%; max-width:1000px; margin:0 auto; }
.as_wrap .as .as_outbox { border:2px solid #0f56a8; background-color: #fff; width:100%; border-radius:50px; position: relative; padding-bottom:7%; }
.as_wrap .as .as_outbox > p { position:absolute; transform: translate(-50%, -50%); left:50%;  }
.as_wrap .as .as_outbox > p:first-child {top:0;  display: block; background-color: #fff; z-index: 1; padding: 1.5% 3%;   border-radius: 50px;  font-weight:600; color:#0f56a8; font-size:1.7em; line-height:1em; }
.as_wrap .as .as_outbox > p:last-child {top:98%; background-image: url('../../images/logo_b.png');  width:15%; padding-bottom:6%; z-index: 1; background-color: #fff; background-size: contain; }
.as_wrap .as .as_outbox .as_inbox { background-color: #0f56a8; border-radius: 50px; overflow: hidden; width:90%; margin:0 auto; margin-top:5%; }
.as_wrap .as .as_outbox .as_inbox ul { display: flex;   }
.as_wrap .as .as_outbox .as_inbox ul li {  flex:1; flex-basis:33.33%; max-width:33.33%;  padding:3%;  }
.as_wrap .as .as_outbox .as_inbox ul li div { width:60%; margin:0 auto; padding-bottom:60%; border-radius: 50%; background-size: 60%; background-color: #fff; }
.as_wrap .as .as_outbox .as_inbox ul li div.as1 { background-image: url('../../images/as1.png');}
.as_wrap .as .as_outbox .as_inbox ul li div.as2 { background-image: url('../../images/as2.png');}
.as_wrap .as .as_outbox .as_inbox ul li div.as3 { background-image: url('../../images/as3.png');}
.as_wrap .as .as_outbox .as_inbox ul li p { color:#fff; text-align: center; font-weight:100; font-size:.9em;}
.as_wrap .as .as_outbox .as_inbox ul li p span { display: block; font-weight:400; margin:10px 0; font-size:1.2em; }
.as_wrap .as .as_outbox .as_inbox ul li b { display: block;  font-size:.9em; margin-top:5px; font-weight:100;}


.as_wrap .ar { overflow: hidden;  max-width:1000px; margin:10% auto 0;}
.as_wrap .ar h3 { text-align: center; font-weight:600; }
.as_wrap .ar div { overflow: hidden; padding:5% 0; display: flex;  border-bottom:1px solid #555;}
.as_wrap .ar div:last-child { border:0px;}
.as_wrap .ar div h4 { font-weight:300; flex:1;  }
.as_wrap .ar div h4 span { display: block; font-weight:400;  }
.as_wrap .ar div ul { flex:4;  }
.as_wrap .ar div ul li { padding:10px 3%; }
.as_wrap .ar div ul li p  { font-size:1.1em; font-weight:400; margin-bottom:10px; text-indent: -15px;}
.as_wrap .ar div ul li p::before { content:'';width:4px; height:4px;  margin:5px; background-color: #000; display: inline-block; border-radius: 50%; }
.as_wrap .ar div ul li span { display: block; margin:10px 0; }

@media only screen  and (max-width:480px){   
    .as_wrap {  background-position: center 30%; } 
    .as_wrap .as .as_outbox {  padding-bottom:11%; }
    .as_wrap .as .as_outbox .as_inbox {  margin-top:10%; padding:5%; }
    .as_wrap .as .as_outbox .as_inbox ul { flex-direction: column;  }
    .as_wrap .as .as_outbox .as_inbox ul li {  flex:1; flex-basis:100%; max-width:100%; padding:5%;    }
    .as_wrap .as .as_outbox .as_inbox ul li div { width:30%;  padding-bottom:30%;   background-size: 60%;  }
    .as_wrap .as .as_outbox > p:last-child {top:99%;  width:20%; padding-bottom:10%;   }
    .as_wrap .ar div { flex-direction: column;}
    .as_wrap .ar div h4 { font-size:1.5em;  }
    .as_wrap .ar div h4 span { display: inline;  }
}