@charset "utf-8";
/* MAIN CSS */

#OT_M_product_list > li, 
.OT_M_product_wrap , 
.OT_M_product_box ,
#OT_M_icons_list li ,
.OTM_SVB_btn > span  {
	transition: all 0.2s ease-in ;
    -webkit-transition: all 0.2s ease-in ;
    -moz-transition: all 0.2s ease-in ;
    -ms-transition: all 0.2s ease-in ;
    -o-transition: all 0.2s ease-in }



/* MAIN NOTICE */
#OT_M_notice_wrap {width:100% ; margin:30px auto}
#OT_M_notice {margin:auto ; width:96% ; overflow:hidden ; position:relative}
#OT_M_notice_title {font-size:18px ; line-height:24px ; color:#066eb9 ; font-weight:bold ; padding-bottom:10px ; border-bottom:solid 2px #066eb9}
#OT_M_notice_more {
	display:block ; width:20px ; height:20px ; overflow:hidden ; text-indent:-9999px ; position:absolute ; right:0px ; top:5px ;
	background:url(../OT_img/MB_notice_more.png) no-repeat center center}

.sound {width:0px ; height:0px ; line-height:0px ; overflow:hidden ; text-indent:-9999px ; display:inline-block}

#OT_M_notice_list {width:100% ; overflow:hidden}
#OT_M_notice_list li { border-bottom:solid 1px #d7d7d7}
#OT_M_notice_list li > a {display:block ; overflow:hidden ; padding:8px 5px}
.OT_M_notice_subject , .OT_M_notice_ctns , .OT_M_notice_date {font-weight:normal ; line-height:22px}
.OT_M_notice_ctns {display:none}
.OT_M_notice_date  {float:right ; font-size:14px ; width:80px}
#OT_M_notice_list li:hover .OT_M_notice_subject{color:#000000}



/* MAIN PRODUCT */
#OT_M_product_wrap , #OT_M_product {width:100% ; overflow:hidden}
#OT_M_product_wrap { margin-bottom:40px}
#OT_M_product_title , #OT_M_product_txt { display:none }
#OT_M_product_list {width:100% ; overflow:hidden ; text-align:center}
#OT_M_product_list > li , .OT_M_Pli_wrap {width:330px ; height:240px ; overflow:hidden}
#OT_M_product_list > li { margin:5px ; display:inline-block ; background-repeat:no-repeat ; background-position:center center ; background-size:100% 100% }
#OT_M_product_list1 {background-image:url(../OT_img/M_product_bg1.jpg)}
#OT_M_product_list2 {background-image:url(../OT_img/M_product_bg2.jpg)}
#OT_M_product_list3 {background-image:url(../OT_img/M_product_bg3.jpg)}
#OT_M_product_list4 {background-image:url(../OT_img/M_product_bg4.jpg)}
#OT_M_product_list5 {background-image:url(../OT_img/M_product_bg5.jpg)}
#OT_M_product_list6 {background-image:url(../OT_img/M_product_bg6.jpg)}

.OT_M_Pli_wrap {display:block ; background-color:rgba(0,0,0,0.4)}

#OT_M_product_list > li:hover { background-size:110% 110% }
#OT_M_product_list > li:hover .OT_M_Pli_wrap {background-color:rgba(0,0,0,0.5)}
#OT_M_product_list > li:hover .OT_M_product_box { background-color:rgba(0,0,0,0.7) }

.OT_M_Pli_wrap > p { display:none }
.OT_M_Pli_wrap > strong {display:block ; padding-top:30px ; font-size:22px ; line-height:30px ; color:#ffffff ; font-weight:bold ; padding-bottom:15px}

.OT_M_product_box {
	width:290px ; height:140px ; padding-top:10px ; box-sizing:border-box ; border:solid 1px #ffffff ; margin:auto ; overflow:hidden ;
	border:solid 1px rgba(256,256,256,0.3) ; border-top:solid 3px #007eef ;
    background-color:#444444 ; background-color:rgba(0,0,0,0.3) }
.OT_M_product_box a {display:block ; font-size:16px ; line-height:20px ; padding:9px 0px ; text-align:center ; color:#ffffff ; color:rgba(256,256,256,0.8)}	
.OT_M_product_box a:hover {color:#ffffff}
 
#OT_M_product_box2 a {padding:5px 0px} 

#OT_M_product_box4 li {width:48% ; display:inline-block} 



/* MAIN ICONS */
#OT_M_icons , #OT_M_icons_list {width:100% ; overflow:hidden ; text-align:center ; margin:auto}
#OT_M_icons {padding:20px 0px ; background:url(../OT_img/M_icons_bg.jpg) no-repeat center bottom ; background-size:cover}
#OT_M_icons_list li , #OT_M_icons_list a {width:130px ; height:130px ; display:block}
#OT_M_icons_list li {display:inline-block ; overflow:hidden ; border-radius:150px}
#OT_M_icons_list li:hover { background-color:#007eef }
#OT_M_icons_list a {background-image:url(../OT_img/M_icons_line.png) ; background-repeat:no-repeat}
#OT_M_icons_list span {display:block ; text-align:center ; font-size:16px ; font-weight:bold ; color:#ffffff ; vertical-align:top ; padding-top:90px}
#OT_M_icons_list1 > a { background-position:-5px -10px}
#OT_M_icons_list2 > a { background-position:-145px -10px}
#OT_M_icons_list3 > a { background-position:-285px -10px}
#OT_M_icons_list4 > a { background-position:-425px -10px}
#OT_M_icons_list5 > a { background-position:-565px -10px}
#OT_M_icons_list6 > a { background-position:-705px -10px}
#OT_M_icons_list7 > a { background-position:-845px -10px}

 

/* MAIN VISUAL */
#OT_main_visual , #OT_main_visual .flexslider , #OT_main_visual .slides , #OT_main_visual .slides > li {width:100% ; height:400px}
#OT_main_visual {  
    overflow:hidden ;
	background-image:url(../OT_img/M_visual01_mb.jpg) ; background-position:center center ; background-repeat:no-repeat ; 
	background-size:cover }

#OT_main_visual .flexslider { background:none } 

#main_visual1  , #main_visual2 , #main_visual3 , #main_visual4 , #main_visual5 , #main_visual6  { background-repeat:no-repeat ; background-position:center center ; background-size:cover }
 
#main_visual1  { background-image:url(../OT_img/M_visual01_mb.jpg) }
#main_visual2  { background-image:url(../OT_img/M_visual02_mb.jpg) }
#main_visual3  { background-image:url(../OT_img/M_visual03_mb.jpg) }
#main_visual4  { background-image:url(../OT_img/M_visual04_mb.jpg) }
#main_visual5  { background-image:url(../OT_img/M_visual05_mb.jpg) }
#main_visual6  { background-image:url(../OT_img/M_visual06_mb.jpg) }
 
 
#OT_main_visual .flex-control-nav {top:180px}
#OT_main_visual .flex-direction-nav .flex-prev ,
#OT_main_visual .flex-direction-nav .flex-next { 
    width:40px ; height:40px ;
    background-image:url(../OT_img/M_visual_arrow.png) ; background-repeat:no-repeat}
#OT_main_visual .flex-direction-nav .flex-prev { background-position:0px 0px }
#OT_main_visual .flex-direction-nav .flex-next { background-position:-40px 0px }
#OT_main_visual .flexslider:hover .flex-direction-nav .flex-prev:hover	{ background-position:0px -40px }
#OT_main_visual .flexslider:hover .flex-direction-nav .flex-next:hover	{ background-position:-40px -40px }
 
#visual_navi , #visual_navi > li , #visual_navi > li > a {margin:0px ; padding:0px ; height:auto ; display:block ; border:0px}
#OT_main_visual .flex-control-nav {width:100% ; overflow:hidden ; top:auto ; bottom:0px } 
#visual_navi > li {float:left ; width:25%}
#visual_navi > li:first-child {width:100%}
#visual_navi > li > a { 
  padding:10px 5px ; border-top:solid 1px #000000 ; 
  border-radius:0px ; width:auto ; font-size:14px ; line-height:19px ;  text-align:center ; color:#ffffff ; text-indent:0px}
#visual_navi > li > a.flex-active {border-top:solid 1px #007eef }

.OTM_SV_box {display:block ; height:320px ; overflow:hidden ; position:relative }
.OTM_SVB_sg , .OTM_SVB_txt ,  .OTM_SVB_sg > span {text-align:center ; color:#ffffff ; font-family:'Malgun Gothic' ; letter-spacing:-1px}
.OTM_SVB_sg , .OTM_SVB_txt {display:block ;  padding:0px 60px ; word-break:keep-all ; }
.OTM_SVB_sg , .OTM_SVB_sg > span {font-size:28px ; line-height:34px ; font-weight:normal}
.OTM_SVB_sg > span {font-weight:bold}
.OTM_SVB_sg  { padding-top:160px }
.OTM_SVB_txt {line-height:22px ; padding-top:20px}
.OTM_SVB_btn {display:none}

#visual_navi > li > a {word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis}



/* POPUP */
#OT_popup , .OT_popup_box { position:fixed }
#OT_popup , #OT_popup form { background-color:rgba(0,0,0,0.5) }
#OT_popup {
    display:block ; overflow:hidden ; left:0 ; top:0 ; z-index:9999 ; 
    width:100% ; height:100vh 
}
.OT_popup_box { width:90% ; max-width:500px ; left:50% ; top:20px ; transform: translateX(-50%)}
#OT_popup img , #OT_popup form { border-radius:4px  }
#OT_popup img { width:100% ; margin-bottom:0.3rem  }
#OT_popup form { display:block ; overflow:hidden }
#OT_popup * { vertical-align: middle }
#OT_popup form { text-align:center ; padding:8px 2px ; box-sizing:border-box ; position:relative }
#OT_popup form label { font-size:14px ; line-height:16px ; color:#ffffff  }

.popup_close.btn , .popup_close.btn  > b ,
.popup_close.btn > b::after , .popup_close.btn > b::before { display:block ; overflow:hidden }
.popup_close.btn , .popup_close.btn > b { width:24px ; height:24px } 
.popup_close.btn > b { position:relative ; font-size:0 ; color:transparent ; opacity:0.7 ; transition:0.3s all }
.popup_close.btn:hover > b { opacity:1 }
.popup_close.btn > b::after , .popup_close.btn > b::before { 
    position: absolute ; left:50% ; top:50% ; content:"" ; 
    width:20px ; height:2px ; background-color:#ffffff ; border-radius:10px }
.popup_close.btn > b::after { transform:translate(-50%,-50%) rotate(-45deg)}
.popup_close.btn > b::before { transform:translate(-50%,-50%) rotate(45deg)}

.popup_close.btn { position:absolute ; right:5px ; top:50% ; transform: translateY(-50%)}


 


/* PC **********************************************************************/
@media all and (min-width:1100px){ 

    /* MAIN VISUAL */
    #OT_main_visual {height:900px ; background-size:auto}



    /* MAIN NOTICE */
    #OT_M_notice_wrap {
        width:1094px ; overflow:hidden ; margin:auto ; padding:0px ; 
        position:absolute ; top:700px ; left:50% ; margin-left:-550px ;
        background-color:#000000 ; background-color:rgba(0,0,0,0.7) ; border:solid 3px #007eef ; border-radius:200px}
    #OT_M_notice {width:1000px ; margin:auto ; padding:15px 0px ; height:120px ; display:block ; overflow:hidden}
    #OT_M_notice_title {
        float:left ; width:130px ; padding-right:15px ; padding-top:5px ; letter-spacing:-0.5px ;
        font-size:24px ; line-height:30px ; font-weight:600 ; color:#007eef ; border:0px ;  
        word-break:keep-all ; text-align:right}

    #OT_M_notice_list  {float:right ; width:855px ; height:120px ; background:url(../OT_img/M_notice_bar.png) no-repeat left center ; padding:0px} 

    #OT_M_notice_more {width:60px ; height:20px ; background:url(../OT_img/M_notice_more.png) no-repeat center center ; top:60px ; left:70px}

    #OT_M_notice_list li {
        float:left ; display:block ; width:33.33% ; height:110px ; margin:0px ; padding:0px ; padding-top:10px ; border:0px ;
        background:url(../OT_img/M_notice_bar.png) no-repeat right center}
    #OT_M_notice_list li:last-child { background:none}
    #OT_M_notice_list li > a {display:block ; padding:0px 15px}
    .OT_M_notice_subject , .OT_M_notice_ctns , .OT_M_notice_date {display:block}
    .OT_M_notice_subject { 
        width:100% ; margin-bottom:5px ;
        font-size:18px ; color:#ffffff ; line-height:20px ; font-weight:bold ; 
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis}
    .OT_M_notice_ctns , .OT_M_notice_date {color:#ffffff ; color:rgba(256,256,256,0.8) ; float:none}
    .OT_M_notice_ctns {font-size:16px ; line-height:24px ; height:50px ; overflow:hidden } 

    #OT_M_notice_list li:hover .OT_M_notice_ctns ,
    #OT_M_notice_list li:hover .OT_M_notice_subject{color:#ffffff ; text-decoration:underline}



    /* MAIN PRODUCT */
    #OT_M_product_list > li , .OT_M_Pli_wrap {width:360px}
    #OT_M_product_wrap { height:750px ; padding:0px ; margin:0px ; background:url(../OT_img/M_bg_gray.jpg) no-repeat left center}
    #OT_M_product_title , #OT_M_product_txt { display:block ; text-align:center }
    #OT_M_product_title , #OT_M_product_title > b {font-size:40px ; font-weight:bold ; text-align:center ; line-height:50px ; color:#000000}
    #OT_M_product_title > b { color:#0f64b0 }
    #OT_M_product_title  {margin-bottom:50px ; padding-top:70px}
    #OT_M_product_txt { font-size:14px ; line-height:20px ; margin-bottom:30px } 

    #OT_M_product_list {width:1110px ; margin:auto ; overflow:hidden}
    #OT_M_product_list > li { display:block ; float:left }

    .OT_M_Pli_wrap > strong {padding-top:20px ; padding-bottom:0px}
    .OT_M_Pli_wrap > p { display:block ; padding-bottom:10px ; font-size:11px ; line-height:20px ; text-align:centr ; color:#ffffff ; color:rgba(256,256,256,0.5) }



    /* MAIN ICONS */
    #OT_M_icons {padding:50px 0px}
    #OT_M_icons_list {width:1100px ; margin:auto ; overflow:hidden}
    #OT_M_icons_list li , #OT_M_icons_list a {display:block ; width:140px ; height:140px}
    #OT_M_icons_list li {float:left ; margin:0px ; margin-right:20px ; background-color:#007eef ; background-color:rgba(0,126,236,0.6)}
    #OT_M_icons_list span {padding-top:105px}
    #OT_M_icons_list1 > a { background-position:-0px 0px}
    #OT_M_icons_list2 > a { background-position:-140px 0px}
    #OT_M_icons_list3 > a { background-position:-280px 0px}
    #OT_M_icons_list4 > a { background-position:-420px 0px}
    #OT_M_icons_list5 > a { background-position:-560px 0px}
    #OT_M_icons_list6 > a { background-position:-700px 0px}
    #OT_M_icons_list7 > a { background-position:-840px 0px}
    #OT_M_icons_list li:last-child { margin-right:0px}




    /* MAIN VISUAL SLIDE */
    #OT_main_visual , #OT_main_visual .flexslider , #OT_main_visual .slides , #OT_main_visual .slides > li {height:900px}
    #OT_main_visual { background-image:url(../OT_img/M_visual01.jpg) }

    #main_visual1  { background-image:url(../OT_img/M_visual01.jpg) }
    #main_visual2  { background-image:url(../OT_img/M_visual02.jpg) }
    #main_visual3  { background-image:url(../OT_img/M_visual03.jpg) }
    #main_visual4  { background-image:url(../OT_img/M_visual04.jpg) }
    #main_visual5  { background-image:url(../OT_img/M_visual05.jpg) }
    #main_visual6  { background-image:url(../OT_img/M_visual06.jpg) }



    #OT_main_visual .flex-direction-nav { top:380px }

    #OT_main_visual #visual_navi { text-align:center}
    #visual_navi > li:first-child  ,
    #visual_navi > li {display:inline-block ; width:30px ; float:none}
    #visual_navi > li > a {
        display:block ; padding:0px ; overflow:hidden ; text-indent:-9999px ; width:15px ; height:15px ; border:0px ; border-radius:10px ;
        background-color:#ccccccc ; background-color:rgba(256,256,256,0.2) }
    #OT_main_visual .flex-control-nav {bottom:220px}
    #visual_navi > li > a.flex-active {border:0px ; background-color:#ffffff ; background-color:rgba(256,256,256,0.8) }

    .OTM_SV_box {height:350px ; padding-top:300px ; } /* background:url(../OT_img/M_visual_line.png) no-repeat 50% 100px */
    #main_visual1 .OTM_SV_box {height:300px ; padding-top:350px}

    .OTM_SVB_sg , .OTM_SVB_txt { padding:0px}
    .OTM_SVB_sg , .OTM_SVB_sg > span {
        font-size:50px ; line-height:70px ; letter-spacing:-3px ;
        text-shadow:0px 0px 5px rgba(0,0,0,0.5)
            }  
    .OTM_SVB_txt {font-size:20px ; line-height:30px ; padding-top:40px}

    #main_visual1 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn1.png)}
    #main_visual2 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn2.png)}
    #main_visual3 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn3.png)}
    #main_visual4 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn4.png)}
    #main_visual5 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn5.png)}
    #main_visual6 .OTM_SVB_btn {background-image:url(../OT_img/M_visual_btn6.png)} 

    .OTM_SVB_btn {display:block ; width:100% ; padding-top:40px ; height:60px ; background-repeat:no-repeat ; background-position:bottom center ; text-align:center}
    .OTM_SVB_btn > span { 
        display:inline-block ; line-height:60px ;
        border:solid 3px #ffffff ; padding:0px 30px ; padding-right:50px ; padding-bottom:4px ; border-radius:60px ; 
        background:url(../OT_img/M_visual_btn_arrow.png) no-repeat right center rgba(0,0,0,0.3)}
    .OTM_SVB_btn > span:hover {border-color:#007eef ; background-color:#007eef}
    .OTM_SVB_btn , .OTM_SVB_btn > span , .OTM_SVB_btn > span > b  {font-size:26px ; line-height:60px ; color:#ffffff ; text-align:center ; letter-spacing:-1px} 
    
    
    
    /* POPUP */
    #OT_popup , .OT_popup_box { width:500px }
    #OT_popup img { margin-bottom:0 }
    #OT_popup { border-radius:4px ; left:20px ; top:120px ; height:auto }
    .OT_popup_box { position:relative ; left:0 ; top:0 ; transform:none }
    #OT_popup form { 
        position:absolute ; right:20px ; bottom:22px ;
        width:200px ; padding:5px 0px ; text-align:left ; background:none  } 
    .popup_close.btn { right:0 }
 
}