@charset "utf-8";
html{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
*,*::before,*::after,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
body{font-family:Roboto,Arial,sans-serif;background-color:rgb(246, 246, 250);color: rgb(0, 0, 0);}
article,aside,footer,header,nav,section,main{display:block;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote::before,blockquote::after,q::before,q::after{content:'';}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;background-color:transparent;color:rgb(36, 36, 36);}
a:visited{color:inherit;}
a:hover,a:focus{text-decoration:none;outline:none;}
a:active{outline:none;}
img{display:block;max-width:100%;height:auto;border:none;vertical-align:middle;}
svg{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;border:none;outline:none;}


.header{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 8px 0 4px;width: 100%;position: fixed;top: 0;height: 50px;-webkit-transition: all 0.3s;transition: all 0.3s;z-index: 999;background: rgb(255, 255, 255);border-bottom: 1px solid rgb(234, 239, 240);}
.header .logo{height: 100%;position: relative;width: 86px;padding: 6px 0 0 2px;margin-left: 0;margin-top: 0;margin-right: 8px;margin-bottom: 0;}
.headcont{position: absolute;top: 0;right: 0;color: rgb(142, 142, 147);}

main{position: relative;margin-top: 70px;}
.container{position: relative;padding: 0 6px;max-width: 1200px;margin: 0 auto;}

h1{text-align: center;display: block;position: relative;font-size: 1.5rem;margin: 1rem auto;}
h1 span{position: absolute;font-size: 65%;margin-left: .5rem;color: rgb(255, 0, 0);}
H2{font-size: 20px;text-indent: 16px;-webkit-box-shadow: inset 0 0 0 1.5px;box-shadow: inset 0 0 0 1.5px;background-color: rgb(232, 232, 232);color: rgb(46, 47, 49);letter-spacing: .1em;}

.list{line-height: 3rem;font-size: 1rem;background: rgb(255, 255, 255);margin-bottom: 12px;}
.list-title{line-height: 3rem;font-size: 1rem;}
.listing{display: -webkit-box;display: -ms-flexbox;display: flex;max-width: 100%;text-align: center;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.listing h3{display: inline-block;-webkit-box-flex: 0;-ms-flex: 0 0 33.3333%;flex: 0 0 33.3333%;font-size: 12px;line-height: 36px;letter-spacing: .1em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.listing h3:hover{background-color: rgb(255, 223, 229);}
.listing a{color: rgb(46, 47, 49);display: block;-webkit-box-shadow: inset 0 0 0 1px;box-shadow: inset 0 0 0 1px;}

.footer{background: rgb(34, 34, 34);color: rgb(250, 250, 250);padding: 21px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;}
.footer .content{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.footer .content img{text-align: center;width: 126px;background: rgb(236, 236, 236);border-radius: 9px;padding: 6px 12px;}

.footer .content p{text-align: center;width: 100%;max-width: 500px;padding: 15px;}
.links{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;list-style: none;}
.links li{margin: 15px;}
.links a{color: rgb(251, 251, 251);}
.footer .copyright{text-align: center;padding-top: 20px;width: 100%;border-top: 1px solid rgb(85, 85, 85);}

.message{background: rgb(248, 248, 255);border-radius: 3px;-webkit-box-shadow: 0 0 15px rgb(204, 204, 204);box-shadow: 0 0 15px rgb(204, 204, 204);border: 2px solid RGB(255, 255, 255);padding: 10px;}
.msg_list{padding: 6px;border: 1px solid #ccc;}
.msg_reply,.reply_answer{border: 1px solid rgb(204, 204, 204);margin: 8px auto;padding: 8px;}

.mac_msg_r{padding: 10px;border-top: 1px solid;} 

.gbook_form textarea{padding: 3px;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;min-height: 200px;border: 1px solid RGB(225, 225, 0);background: RGB(245, 255, 250);overflow: auto;margin: 10px auto;}

.msg_code{display: -webkit-box;display: -ms-flexbox;display: flex;height: 60px;max-width: 100%;-ms-flex-wrap: wrap;flex-wrap: wrap;text-align: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;line-height: 40px;}
.msg_code input{width: 100px;height: 40px;border: 1px solid;}

.remaining-w{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;}
.gbook_submit.submit_btn{display: block;margin: 10px auto;height: 40px;padding: 0 1rem;background-color: rgb(215, 215, 215);border: 1px solid;}

@media only screen and (min-width:500px){
.listing h3{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;}
}

@media only screen and (min-width:800px){
.listing h3{-webkit-box-flex: 0;-ms-flex: 0 0 16.6667%;flex: 0 0 16.6667%;}
}

@media only screen and (min-width:1024px){
.listing h3{-webkit-box-flex: 0;-ms-flex: 0 0 12.5%;flex: 0 0 12.5%;}
}