html {scroll-behavior:smooth;}

#wrap { width:100%; display:inline-block;  }


#header {background-color:#fff; /* position:fixed; */ padding:20px 2%; margin:0 auto;  box-sizing:border-box; height:90px;    width:100%; max-width:1300px;  z-index:9999999; display:flex; justify-content :space-between; align-items:center; }
#header h1.pc_h1   { width:285px;   }
#header h1.pc_h1 img  {width:100%;  }
#header h1.m_h1   { width:130px;   }
#header h1.m_h1 img  {width:100%;  }

#header ul.top_nav {width:calc(100% - 285px);  display:flex; justify-content:flex-end}
#header ul.top_nav li  {padding:8px 1.4vw; text-align:center; display:flex; align-items:center; position:relative; }
#header ul.top_nav li img {display:none}
#header ul.top_nav li:last-child {padding-right:0}
#header ul.top_nav li a {font-size:1.2rem; letter-spacing:0; line-height:1.1em; color:#444 ; font-weight:600; position:Relative; z-index:9}
#header ul.top_nav li.ov a { color:#fff !important; font-weight:600; }
#header ul.top_nav li.ov img {display:block; position:absolute; top:2px; left:0; width:100%; height:100%}
#header ul.top_nav li:last-child {padding:0;  margin-left:1.6vw }

#header ul.top_nav li a.target_link { width:110px; box-sizing:border-box; line-height:40px;  border:1px solid #87b644; display:inline-block;   color:#fff !important; font-weight:500; font-size:1rem; border-radius:5px; letter-spacing:-.2px; background:url('/common/img/bti_bt_bg.png') repeat-x; background-size:cover
-webkit-animation: blink 3.0s linear infinite; 
}
 
@keyframes blink {
       /*0% 부터 100% 까지*/ 
        /* 0% { background-color:#18b442;}
        50% {background-color:#0e7b2b; }
         100% {background-color:#18b442; } */
       /*from부터 to 까지         
        from {color:#00a0e9;}
        to {color:#000;} 
        */
        }
 


#header .mypage { width:10%; max-width:130px;   text-align:center; }
#header .mypage .one {width:46px; height:46px; background-color:#333; border-radius:50%; display:inline-block; text-align:center; position:relative} 
#header .mypage .one img {position:absolute; bottom:3px; left:50%; transform: translate(-50%, 0); }  


#header .mypage ul { width:100%; position:relative;  } 

#header .mypage ul li {display: inline-block; position:relative; width:100%; }

#header .mypage ul li a {color:red; }
#header .mypage ul li ul {width:100%;   display:none; position: absolute;  right:0; top:50px; z-index:99999999999999999999; font-size:0; line-height:0; box-sizing:border-box;}

#header .mypage ul li ul li {   text-align:Center; display:inline-block;  width:100%; padding:3px; box-sizing:border-box; color:#fff; font-size:.97rem; line-height:1.3em;    background-color:#333;}
#header .mypage ul li ul li:nth-child(2) {padding-top:20px; border-radius:5px 5px 0 0}
#header .mypage ul li ul li:last-child {padding-bottom:20px; border-radius:0 0 5px 5px}
#header .mypage ul li ul li  a {color:#fff !important}



#header .mypage ul li ul li.tri {background:none;  padding:0; height:12px;}
#header .mypage ul li ul li.tri  span {width: 0px; height: 0px;  border-top:12px solid none; 
  border-bottom:12px solid #333;
  border-right: 12px solid transparent;
  border-left: 12px solid  transparent; position:absolute; top:0; left:50%; margin-left:-12px;}

 @media all and (max-width:1400px){
     
     #header ul.top_nav li a.target_link {font-size:1rem}
    }


 @media all and (min-width:1000px){
    #header h1.pc_h1   {display:inline-block }
    #header h1.m_h1   {display:none  }
 
    .ham_menu {display:none}
    .m_logo {display:none}
 }

 @media all and (max-width:1000px){
  #header {justify-content:flex-start; border-bottom:1px solid #ddd}
  #header {height:70px}

    #header h1.pc_h1   {display:none }
    #header h1.m_h1   {display:inline-block  }
 	.m_logo {font-size:.97rem; font-weight:600; color:#555}
	.m_logo > a{color:#555 !important; position: relative; margin-left:2vw; padding-left:2vw;}
	.m_logo > a:after{content:''; display:inline-block; width:2px; height:20px; background:#ddd; position: absolute; top:2px; left:0;}
 
    #header .mypage {display:none }
    #header ul.top_nav {display:none}
	#header h1   {width:250px}
	#header {padding:15px 4%}
  }


 @media all and (max-width:350px) {
 .m_logo {display:none}

}

a.fixed_top {  position:fixed; right:35px; bottom:40px; z-index:999 }
a.fixed_top img {width:61px}


footer {width:100%; box-sizing:border-box; padding:30px 3%; font-size:0.90rem; line-height:1.4em;  font-weight:400; color:rgba(255,255,255,.7);  background-color:#333; position:relative; }
footer .footer_in {display:flex; align-items:center; width:100%; max-width:1200px; margin:0 auto;}
footer .footer_in p.footer_logo {width:100px;}
footer .footer_in div {margin-left:50px}
footer .footer_in div  a {color:rgba(255,255,255,.7) !important; font-weight:500; font-size:.95rem}

footer .footer_sns  { margin-left:auto; display:flex; }
footer .footer_sns li {width:35px; margin-right:5px;}
footer .footer_sns li img {width:100%;}


@media all and (min-width:768px){
   a.fixed_top.type2 { bottom:110px; display:block }
 }
 
 @media all and (max-width:768px){
   a.fixed_top {  right:20px; bottom:20px;  }
   a.fixed_top img {width:50px }
   a.fixed_top.type2 { bottom:75px; display:block }
    

   footer {text-align:left; font-size:.90rem;  z-index:9999999999999  }
   footer .footer_in p.footer_logo {width:100%; text-align:center; }
   footer .footer_in {flex-wrap:wrap;}
   footer .footer_in div { width:100%; text-align:center; margin-top:10px;    margin-left:0}
   footer .footer_sns  {width:100%; margin-top:10px; justify-content:center;  box-sizing:border-box;}
   footer .footer_sns li {margin-right:5px}

 }


 
 
.cloud_img { -webkit-animation: slide-right 7s ease-in-out infinite;
      animation: slide-right 7s ease-in-out infinite; }

.cloud_img2 { -webkit-animation: slide-left 7s ease-in-out infinite;
      animation: slide-left 7s ease-in-out infinite; }
 
 @-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
 50% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
	}

 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
 50% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
	}

 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}



@media all and (min-width:768px){
       .right_wing {position:fixed; top:15%; right:20px; width:90px; z-index:999999999}  
 
	 }
 @media all and (max-width:768px){
      .right_wing {position:fixed; bottom:80px; right:15px; width:60px; z-index:999999999 }  
      
	 }

.right_wing img {width:100%}