@font-face {
  font-family: 'Kanit';
  src: url('Kanit/Kanit-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BreeSerif';
  src: url('BreeSerif/BreeSerif-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sarabun';
  src: url('Sarabun/Sarabun-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

:root {
  --brown-color:brown;
  --primary-color:#047aed;
  --pink-color: #dc5c8c;
  --violet-color: #413680;
  --violet-color-2: #554a8e;
  --violet-color-3: #4B0082;
  --violet-color-4: #f0ebf8;
  --violet-color-5: #675e99;
--grey-color: #333;
}

a {
  text-decoration: none;
  color: var(--pink-color);
}

a:hover {
  text-decoration: underline;
}

.account_type{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 50px;
}

.activity-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  column-gap: 30px;
}

.activity-inner img {
  width:100%;
}



a.list_of_database {
  text-decoration: none;
  color:var(--violet-color)
}

a.tooltip, a.no_link {
  text-decoration: none;
}
a.tooltip:hover {
  position: relative;
}
a.tooltip span {
  display: none;
}
a.tooltip:hover span {
  border: #666 1px solid;
  border-radius: 5px;
  padding: 20px;
  display: block;
  z-index: 100;
  background: #fff;
  left: 0px;
  margin: 15px;
  width: 500px;
  position: absolute;
  bottom: 15px;
  text-decoration: none;
  color:var(--pink-color);
}

.activity_and_announcement {
  display: grid;
  grid-template-columns: 2fr 1fr;
   align-items: start;
   margin-top: 20px;
   column-gap: 40px;
   row-gap: 20px;
}

.activity_each img {
  border-radius: 8px;
}

.admin_login {
  margin:20px 0;
}

.admin_login input[type='text'],
.admin_login input[type='password']{
  border:0;
  border-bottom:1px solid var(--violet-color);
  width:100%;
  padding:3px;
  font-size:16px;
  margin: 10px 0;
  color: var(--violet-color);
}

.admin_login input[type='text']:focus,
.admin_login input[type='password']:focus{
  outline: none;
}

.all_content {
  display:grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 30px;
}

.all_publishing {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-gap: 20px;
  text-align: center;

}

.all_recommend_all {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 50px;
}

.all_recommend_column, .all_tic_column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 40px;
}

.all_tic_all {
  display: grid;
  grid-template-columns: 4fr 1fr;
  column-gap: 50px;
}

.amt {
  background-color: var(--violet-color-2);
  color:#fff;
  margin: 20px 20px 0px 20px;
}

.amt2 {
 background-color: var(--violet-color-2);
 color:#fff;
 padding-left:30px;
 min-height:50px;
 display:grid;
 align-items: center;
 font-weight: 100;
 margin-top:30px;
 border-radius: 10px;
}

.announce-section {
  border: 1px var(--violet-color) solid;
  padding:20px;
border-radius: 8px;
}

.announcement {
  padding: 5px 30px 0 50px;
 margin-left: 10px;
 padding-bottom: 20px;
}
.announce-title {
 text-align: center;
}

.big_red {
  color:red;
  font-size:50px;
  font-weight:bold;
}

.block-border{
	display: block;
}


.blue {
  color:var(--primary-color);
}

body { 
font-family: 'Sarabun', sans-serif;
/* font-family: 'BreeSerif', 'Sarabun', sans-serif; */
color: var(--violet-color);
font-size: large;
line-height: 1.7;

}

.bold {
  font-weight:bold;
}

.box_shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.border1 {
  border:1px; border-style:solid; border-color:grey; padding: 10px;width:150px;
}

.border2 {
  border:1px; border-style:solid; border-color:grey; padding: 10px;width:180px;
}
/* delete border3 because no need to use it anymore 
.border3 {
    background-color: #f8f8f8;
    padding:20px;
    border-radius: 20px;
}
*/
.border4 {
  border:1px solid grey;
  padding:20px;
  border-radius: 10px;
}
.border5 {
  padding:40px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.border6 { 
    border-radius: 5px;
    border: 1px solid var(--violet-color-2) ;
  }

  .border7 {
    border:1px; border-style:solid; border-color:grey; padding: 10px;width:250px;
  }

  .border8 {

    background-color: orange;
  }

  .border9 {
    border:1px solid grey;
    padding:20px;
  }

  .border10 {
    background-color: #ff949c;
    padding:15px;
  }
  .border11 {
    border:1px solid #ccc;
    padding:20px;
    background-color: #f0f0f0;
    height: 475px;
    overflow: scroll;
  }
  .border12 {
    border:2px solid red;
    padding:20px;
    margin-top:20px;
    border-radius: 5px;
  }
  .border13 {
    border:3px solid #4c3c8c;
  padding: 5px;
  height: 350px;
  }
.borrow_and_fine {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 70px;
}

.brown {
  color:var(--brown-color);
}

.btn3{
  display:inline-block;
  padding:10px 30px;
  cursor: pointer;
  background: var(--violet-color);
  color:#fff;
  border:none;
  border-radius: 5px;
  margin-top:10px;
}

.btn-primary {
  background-color: var(--violet-color);
  color:#fff;
}
.button-34 {
	background: #df6091;
	border-radius: 999px;
	box-shadow: #df6091 0 10px 20px -10px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	opacity: 1;
	outline: 0 solid transparent;
	padding: 8px 18px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	width: fit-content;
	word-break: break-word;
	border: 0;
  }
.button-grid-inner button {
  border-radius: 5px;
  border: 1px #808080 solid;
  color: #333;
  padding: 10px 20px;
  transition: transform 80ms ease-in;
  margin-top: 20px;
  margin-right: 10px;
  background-color: #f8f8f8;
  font-size: 1rem;
  font-weight:500;
}

.button-grid-inner button:hover {
  background-color: #dedee0;
}

.button-grid-inner button.active  {
  background-color:var(--violet-color);
  color:#fff;
}

.button-grid-inner button.active:hover:active  {
  color:var(--violet-color);
}

.c1:hover, .c2:hover, .c3:hover, .c4:hover, .c5:hover, .c6:hover, .c7:hover, .c8:hover, .c9:hover, .c10:hover, .c11:hover {
background-color: #E6E6FA;
}

.calendar {
  padding: 5px 30px 0 50px;
  border: 1px solid var(--violet-color-2);
  border-radius: 8px;
  margin-left: 5px;
}

.center {
  text-align:center;
}

.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.two_column, .column1,.column2 {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 20px;;
}

.complaint {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap:10px;
}
 
.complaint-inner {
  padding: 0 10px;
}

.contact_rss {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
}
.container {
  max-width: 1200px;
  width:95%;
  margin: auto;

}

.container2 {
  width: 300px;
  margin: auto;
}

.container3 {
  max-width:950px;
  width:95%;
  margin:auto;
}

.container4 {
  width:600px;
  margin:auto;
}

.container5 {
  max-width: 1300px;
  width:95%;
  margin: auto;

}

.date_and_calendar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 30px;
  grid-gap:20px;
}

.db_list {
  display:grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 10px;
}

.db_list {
  margin-top:20px;
}

.db-list-0 {
  display:grid;
  grid-template-columns: repeat(2,1fr);
}

.db-list-0,.electure-inner {
  margin-top:25px;
}

.db-list-0 p.db a {
  color: var(--violet-color-2);
  line-height: 1.7;
}

.dfont {
  font-size:1.5rem
}

.dfont2 {
  font-size:0.75rem
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.ebook_row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
}

.electure_all {
  display:grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 30px;
}

.electure_inner {
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}

.electure_login {
  margin:20px 0;
  border-radius: 10px;

}

.electure_login input[type='text'],
.electure_login input[type='email'],
.electure_login input[type='password']{
  border:0;
  border-bottom:1px solid var(--violet-color);
  width:100%;
  padding:3px;
  font-size:16px;
  margin: 10px 0;
  color: var(--violet-color);

}

.electure_login input[type='text']:focus,
.electure_login input[type='email']:focus,
.electure_login input[type='password']:focus {
  outline: none;
}

.electure-inner {
  padding: 0 20px;
}

.endnote ,.login,.mendeley,.turnitin,.scival {
  min-height:500px;
  display: grid;
  align-items: center;
}

.faq_question {
  margin: 0px;
  padding: 0px 0px 5px 0px;
  display: inline-block;
  cursor: pointer;
}

.faq_answer_container {
  height: 0px;
  overflow: hidden;
  padding-left: 20px;
  color:brown; 
}

.font_prajad { 
  font-family: 'Prajad';
  color:#675e99;
  font-size: 18px;
  line-height: 1.7;
  }

.footer{
  background-color: var(--violet-color-2);
  border-radius: 7px;
  min-height:265px;
}
.footer-inner {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  color:#fff;
  padding:50px;
  margin-top:10px;
  column-gap:30px;
}

.gdln_all {
  display:grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 30px;
}

.grey {
  color: var(--grey-color);
}

h1 {
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0;
}

h1.search_database {
  margin-top:50px;
}

h2.activity-title {
  text-align: center;
  color:var(--violet-color);
  margin-bottom: 15px;
}

h2.oar-recommend {

  color:var(--violet-color);
  margin-bottom:10px;
  text-align: center;

}

h2.top_link_head {
  padding-top:20px;
}

h3.date {
  text-align: center;
  color:var(--violet-color);
  margin-top: 10px;
}

h2.oar_calendar {
  color:var(--violet-color);
  text-align: center;
  margin-top: 5px;
}

h2.top_link_head {
  padding-top:5px;
  text-align: center;
}

h3.result_database_search {
  margin-top: 20px;
}

h3.dname {
  margin-top: 10px;
}

h3.tic {
  margin-top:30px;
  color:var(--violet-color);
  margin-bottom:10px;
  text-align: center;
}
.head_title {
  display:grid;
  grid-template-columns: 1fr 3fr;
column-gap: 40px;
align-items: center;
}
header {
  display: flex;
  justify-content: space-between;

}

header .logo {
  height: 59px;
  margin: 10px;
}

hr.pink_line {
  width: 40%;
  margin: auto;
  border: 2px solid pink;
}
.icon {
  padding: 0 50px 20px 0;
}

.icon-inner{
  display:grid;
  grid-template-columns: repeat(9,1fr);
  margin-top: 20px;
}

.icon-inner .icon-1,.icon-inner .icon-2,.icon-inner .icon-3
,.icon-inner .icon-4,.icon-inner .icon-5,.icon-inner .icon-6,.icon-inner .icon-7,.icon-inner .icon-8,.icon-inner .icon-9  {
  border-right: 1px var(--violet-color) dashed; 
  color:var(--violet-color);
  text-align: center; 
  font-weight: bold;
  padding: 10px 0;
  text-decoration: none;
  }

  .icon-inner .icon-1  {
    border-left: 1px #808080 dashed;
  }

  .icon-inner .icon-1:hover,.icon-inner .icon-2:hover,.icon-inner .icon-3:hover,.icon-inner .icon-4:hover
  ,.icon-inner .icon-5:hover,.icon-inner .icon-6:hover,.icon-inner .icon-7:hover,.icon-inner .icon-8:hover,.icon-inner .icon-9:hover
  ,.icon-inner .icon-1 a:hover { 
    cursor: pointer;
    background-color: var(--violet-color);
    color:#fff;
  }

img {vertical-align: middle;}

img.how {
  width: 14px;
  padding-bottom:35px;
}

img.information {
  width: 14px;
  padding-bottom:30px;
}

.imgframe
    { background:white;
    padding:12px;
    border:1px solid #999; }

    .imgframe2
    { background:white;
    padding:10px;
    border:1px solid #999; }
    
.indent {
  text-indent:40px;
}

.indent2 {
  text-indent:10px;
}

.block-border{
	display: block;
}
.inline-border{
margin-right:20px;
line-height:2;
padding-left:10px;
padding-right:10px;
border: 1px solid var(--violet-color) ;
border-radius:5px;
} 

.inline-border2{
  margin-right:20px;
  line-height:2;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
  border: 1px solid var(--violet-color) ;
  border-radius:5px;
  }

input[type="search"].search-input  {
  width:150px;
  height:30px;
  border: 1px solid grey ;
  border-radius: 4px;
  margin-top: 15px;
  background-color: white;
  background-image: url('../images/search.png');
  background-position: 5px 5px; 
  background-repeat: no-repeat;
  text-indent:25px;
  }
  
  input[type=radio].toggle {
    display: none;
  }
  input[type=radio].toggle + label {
    cursor: pointer;
    min-width: 10px;
  }
  input[type=radio].toggle + label:hover {
    background: none;
    color: var(--violet-color);
  }
  input[type=radio].toggle + label:after {
    background:var(--violet-color);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
  }
  input[type=radio].toggle.toggle-left + label {
    border-right: 0;
  }
  input[type=radio].toggle.toggle-left + label:after {
    left: 100%;
  }
  input[type=radio].toggle.toggle-right + label {
    margin-left: -5px;
  }
  input[type=radio].toggle.toggle-right + label:after {
    left: -100%;
  }
  input[type=radio].toggle:checked + label {
    cursor: default;
    color:#fff;
    transition: color 200ms;
    background: var(--violet-color);
  }
  input[type=radio].toggle:checked + label:after {
    left: 0;
  }
  
  .iso img {
    width:125px;
    border: 1px solid var(--violet-color);
    margin: 5px;
    padding: 5px;
  }

img.iso_image {
  border: 1px solid #555;
}

.italic {
  font-style: italic;
}

label.btn {
  cursor: pointer;
  display: inline-block;
  border: 0;
  font-weight: bold;
  padding: 10px 20px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  position:absolute;
  right: 10px;
  z-index: 2;
}

label.btn2 {
  border: 2px solid var(--violet-color);
  display: inline-block;
  padding: 3px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
  border-radius: 3px;
  font-size: 0.75rem;
}

.left {
  text-align: left;
}

.line_height {
  line-height: 2;
}

.margin_bottom1 {
  margin-bottom: 10px;
}

.margin_bottom2 {
  margin-bottom: 50px;
}

.margin_bottom3 {
  margin-bottom: 30px;
}

.margin_top {
  margin-top:15px;
}

.margin_top2 {
  margin-top:100px;
}

.margin_top3 {
  margin-top:30px;
}

.meeting_all {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 30px;
}

.meeting_menu nav li {
  font-size:17px;
  padding-bottom:5px;
  margin-bottom:5px;
  border-bottom:1px #ccc solid;
}

.membership {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: 30px;
}
.menu {
  border-right: 4px solid #d2b2e5;
}

.min_height {
  min-height:500px;
}

.min_height2 {
  min-height:500px;
  display: grid;
  align-items: center;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: var(--violet-color);
}

#myBtn2 {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn2:hover {
  background-color: var(--violet-color);
}

.mySlides {display: none;}

.mySlides img {
  border-radius: 8px;
}

.mySlides2 {display:none;}

.navigator {
  margin-top: 15px;
}

.navigator2 {
  display:flex;
  justify-content: space-around;

}

.navigator2 a {
  color:var(--violet-color);
}


.newsletter {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 40px;
}

.no_account, .with_account{
border:var(--violet-color) 1px solid;
}

ol.reserve_room li {
  padding-left: 10px;
}

p.address-title {
  font-weight: 800;
  letter-spacing: 1.2px;
}

p.blocktext {
  text-align:center;
  border-top: var(--violet-color) 1px solid;
  border-bottom: var(--violet-color) 1px solid;
  padding:5px 0;
}

p.db a {
  text-decoration: none;
}

p.tel-contact{
  margin-bottom:5px;
}
p.map {
  margin-top: 20px;
  text-align:center;
}

p.d_detail {
  margin: 10px 0;
  text-indent: 20px;
}

p.browse {
  margin-top:10px;
}

p.detail {
  text-align:center;
}

p.font {
  margin-top:10px;
}

p.see {
  text-align:right;
}

p.see a {
  text-decoration: none;
}

p.see i {
  font-size: 0.75rem;
}

p.term {
  margin-top:10px;
  padding-left:5px;
}

p.warning {
  margin-top:15px 0;
  border-top: var(--violet-color) 1px solid;
  text-indent:20px;
  padding:15px;
}

.padding1{
  padding:0 20px;
}

.padding2{
  padding:0 50px;
}

.padding3 {
  padding:10px;
}

.padding_top {
  margin-top:10px;
}

.padding_left {
  padding-left: 50px;
}
.padding_left2 {
  padding-left: 80px;
}

.padding_left3 {
  padding-left: 30px;
}

.padding_left4 {
  padding-left: 10px;
}
.pink {
  color: var(--pink-color);
}

.place-inner {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.place-1,.place-2,.place-3 {
  text-align: center;
  line-height: 1.6;

  border-left: 1px #808080 dashed;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
}
 .plc {
   font-size: 1.2rem;
 }

 .plum {
   color: #9932cc;
 }

 .pub1,.pub2,.pub3,.pub4,.pub5 {
   border:var(--violet-color) 1px solid;
   padding: 10px;
   margin-top: 20px;
   background-color: #fff;
 }

 .pub1_inner,.pub2_inner,.pub3_inner,.pub4_inner,.pub5_inner {
   min-height: 200px;
   display:grid;
   align-content: center;
 }

 .quality {
  min-height: 500px;
  display:grid;
  align-items: center;
}

.rarebook_all {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 50px;
}

.rarebook_collection {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 30px;
}


.recommend_book_row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
}

.red {
  color:red;
}

.report_cover {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 50px;
  margin-top: 30px;
  min-height: 500px;
}

.report_cover img {
  width:100%;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#responsecontainer {
  margin-top:25px;
}

.responsive {
  width:100%;
}

.responsive1 {
  width:100%;
  max-width:700px;
}

.responsive3 {
  width:100%;
  max-width:900px;
}

.responsive4 {
  width:100%;
  max-width:375px;
}

#responsecontainer a {
text-decoration: none;
line-height: 1.5;
color:var(--violet-color);
}

.right {
  text-align: right;
}

.rss_past_detail ,.rss_upcoming_detail {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px;
}

.search-box {
  display: flex;
}

.search-box input {
  width:100%;
  max-width: 900px;
  height:40px;
  border: 1px solid grey ;
  border-radius: 4px;
  margin: 15px 5px;
  text-indent:5px;
  font-size: 1.2rem;
  }
  
  .search-box button {
    height:40px;
    border-radius: 5px;
    border: 1px var(--violet-color) solid;
    color: #fff;
    padding: 12px 45px;
    transition: transform 80ms ease-in;
    margin-top: 15px;
    margin-right: 10px;
    background-color: var(--violet-color);
    cursor: pointer;
  }

.search-b1 h2,.search-b2 h2,.search-b3 h2,.search-b4 h2,.search-b5 h2,.search-b6 h2 {
  margin-top: 20px;
  color:var(--violet-color-2);
}

.search_items  .button-grid-inner {
  display: grid;
  grid-template-columns: repeat(5,1fr);
}

.search-web, .right_screen {
  display: grid;
  grid-template-columns: 1fr;
}

section.option {
  border:var(--violet-color) 1px solid;
  margin-right:40px;
  margin-top:40px;

}

section.showcase {
  padding: 40px;
  margin-top: 30px;
}

section.news {
  margin-top:30px;
}

.section_head {
  display: grid;
  grid-template-columns: 5fr 1fr;
  column-gap:20px;
  justify-items: center;
  align-items: center;
}

.showcase .search-items, h1.resources {
  color: var(--violet-color);
  text-transform: uppercase;
}

.slick-slide {
  margin: 0px 10px;
}

.slick-slide img {
  height:250px;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-current {
  opacity: 1;
}

.slider {
border: 1px var(--violet-color) solid;
padding: 5px;
}

.slide_and_toplink {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap:20px;
  align-items: stretch;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

span.big_font_letter {
  font-size:1.5rem;  
  cursor:pointer;
  }

.staff_inner {
    display:grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    line-height: 1.7;
    column-gap: 10px;
  }
  
.staff_pic img {
    height:200px;
    margin-top:20px;
  }

table.t1 {
  width: 500px;
  margin-top: 20px;
}

table.t1, tr.t1, th.t1, td.t1 {
    border: 2px solid var(--violet-color);
    border-collapse: collapse;
  }

td.t1,th.t1 {
  padding: 10px 5px;
}

table.t2, tr.t2, th.t2, td.t2 {
  border: 1px solid var(--violet-color);
  border-collapse: collapse;
  padding: 10px;
}

td.t2,th.t2 {
  padding: 10px;
}

table.t3,th.t3,tr.t3,td.t3 {
	border-bottom: 1px solid #333;
  border-collapse: collapse;
	}
  th.t3,tr.t3 {
    padding:20px;
    height: 40px;
  }

table.t4, tr.t4, th.t4, td.t4 {
  border: 1px solid var(--violet-color);
  border-collapse: collapse;
}
  
td.t4,th.t4,tr.t4 {
    padding: 20px;
}

tr.t4 {
  height: 80px;
}

table.t5, tr.t5, th.t5, td.t5 {
  border: 1px solid #333;
  border-collapse: collapse;
  padding: 20px;
}

.taic_books {
  margin-top: 50px;
}

.taic_books_title {
  text-align: center;
  margin-bottom: 10px;
}
.taic_icon {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
}
.taic_icon2 {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
}
.tic_all, .recommend_all {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: 40px;
}

.tel {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 40px;
}
.title {
  border-right: 4px solid pink;
}
.top_link {
  color:var(--violet-color);
  padding: 5px 10px 0 50px;
  margin-left:5px;
  border:1px solid var(--violet-color);
  border-radius: 8px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 10px;
  height: 260px;
overflow: auto;
}
.top_link_inner {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 15px;
}

ul.calendar-inner {
  margin-top:5px;
}

ul.circle {
  list-style: circle;
}

ul.nobullet {
  list-style: none;
}


ul.nobullet {
  margin-left:10px;
  margin:10px;
}

ul.nobullet li {
  line-height: 1.5;
  }

ul.none {
  list-style: none;
}

ul li a, ol li a {
    display: inline-block;
    vertical-align: top;
}

.underline {
  text-decoration: underline;
}

.upcoming_detail,.past_detail, .visitor_detail, .gdln_detail {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.upcoming_inner,.past_inner, .gdln_inner {
  display:grid;
  border: var(--violet-color-5) 1px solid;
  padding: 20px 50px;
  align-self: start;
}

.visitor_inner {
  display:grid;
  align-items: center;
  border: var(--violet-color-5) 1px solid;
  padding: 20px 30px;
  background-color: #f8f8f8;
}

.violet{
  color:var(--violet-color-2);
  text-decoration: underline;
}

.violet2{
  color:var(--violet-color-2);
}

.white {
  color:#fff;
}

@media(max-width:1400px){
  .iso {
    display: none;
  }


}

@media(max-width:1120px){

  .search i {
    position:relative;
    right: 15px;
    top:40px;
  }


}



@media(max-width:1100px){
  input[type="search"].search-input  {
    position:absolute;
    right: 50px;

  }

  .recommend_book_row {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  .account {
    position:relative;
    right: 30px;
    top:50px;
  }
}

@media(max-width:1020px){
  .slide_and_toplink {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap:20px;
  }
  .top_link {
    min-height:350px;
  }

  .activity-inner img {
  width:100%;
  }
  .meeting_all {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .navigator2{
    display: grid;
    grid-template-columns: repeat(3, 2fr);
  }
}



@media(max-width:950px){
  .button-grid-inner {
    display: grid;
    grid-template-columns: repeat(3,2fr);
  }
  .icon-inner{
    display: grid;
    grid-template-columns: repeat(4,2fr);
      }
  .icon-5,.icon-6,.icon-7,.icon-8 {
    margin-top: 20px;
  }
  .icon-5 {
    border-left: 1px #808080 dashed;
  }
  .date_and_calendar {
    display:grid;
    grid-template-columns: 1fr;
  }
  .activity_and_announcement {
    display: grid;
    grid-template-columns: 1fr;

  }

  .db_list {
    display:grid;
    grid-template-columns: 3fr 1fr;
  }
  .all_publishing {
    display: grid;
    grid-template-columns: repeat(3,2fr);
    grid-gap: 20px;
    text-align: center;
  
  }
  .newsletter {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
  }
  .two_column {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;;
  }
  .column1,.column2 {
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;;
  }
  .borrow_and_fine {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 50px;
  }
  .visitor_detail, .gdln_detail  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 30px;
  }
  .account_type{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 50px;
  }
  
}
@media(max-width:750px){
  .oar_r {
    display:grid;
    grid-template-columns: repeat(2,2fr);
    grid-gap:5px;
    font-size: 0.75rem;
    }
    .staff_inner {
      display:grid;
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .footer-inner {
      display:grid;
      grid-template-columns: repeat(2 , 1fr);
      color:#fff;
      padding:50px;
      margin-top:10px;
      column-gap:30px;
      row-gap:30px;
    }
    .navigator2{
      display: grid;
      grid-template-columns: repeat(2, 3fr);
    }
}
@media(max-width:700px){
  .activity-inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap:20px;
text-align: center;
  }
  .activity-inner img {
      width:100%;
  }
  .report_cover {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 50px;
    margin-top: 30px;
    
  }
  .complaint {
    display:grid;
    grid-template-columns: repeat(2,1fr);
  }
  .gdln_all {
    display:grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
}
@media(max-width:600px){

.account {
  position:relative;
  right: 30px;
  top:80px;
}


input[type="search"].search-input  {
  position:relative;
  right: 80px;
  top:50px;
}
.button-grid-inner {
  display: grid;
  grid-template-columns: repeat(2,3fr);
}
.icon-inner{
  display: grid;
  grid-template-columns: repeat(2,4fr);
    }
.icon-3,.icon-4 {
      margin-top: 20px;
    }  
.icon-3,.icon-7 {
      border-left: 1px #808080 dashed;
    }
    .place-inner {
      display: grid;
      grid-template-columns: 1fr;
    }

      section.activity {
        display:grid;
        grid-template-columns: 1fr;

    }

    .activity-inner img {
      width:100%;
    }

    .footer-inner {
      display:grid;
      grid-template-columns: 1fr;
      color:#fff;
      padding:50px;
      margin-top:10px;

    }
    .all_publishing {
      display: grid;
      grid-template-columns: repeat(2,3fr);
      grid-gap: 20px;
      text-align: center;
    
    }
    .upcoming_detail,.past_detail {
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
    }
    .recommend_book_row {
      display: grid;
      grid-template-columns: repeat(2, 3fr);
      column-gap: 20px;
      row-gap: 20px;
    }
    .visitor_detail, .gdln_detail {
      display: grid;
      grid-template-columns:  1fr;
      row-gap: 30px;
    
    }
    .section_head {
      display: grid;
      grid-template-columns: 1fr;
      row-gap:20px;
    
    }
}

@media(max-width:400px){
  .button-grid-inner {
    display: grid;
    grid-template-columns: 1fr;
  } 
  .oar_r {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap:5px;
    font-size: 0.75rem;
    }
  .activity-inner img {
      width:100%;
    }
  .search-box {
      display: grid;
      grid-template-columns: 1fr;
    }
  .search-box input {
      width:100%;
      height:40px;
      border: 1px solid grey ;
      border-radius: 4px;
      text-indent:5px;
      font-size: 1.2rem;
      }
  .search-box button {
      height:40px;
      width: 100%;
      border-radius: 5px;
      border: 1px var(--violet-color) solid;
      color: #fff;
      transition: transform 80ms ease-in;
      margin-top: 5px;
      background-color: var(--violet-color);
      cursor: pointer;
      }   
.top_link {
  min-height:300px;
}

input[type="search"].search-input,.account  {
  position:relative;
  right: 180px;
  top:70px;
}
p.browse {
  margin-top:10px;
}
.db-list-0 {
  display:grid;
  grid-template-columns: 1fr;
}
.navigator{
  margin-top: 100px;
}
.column1,.column2 {
  display:grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;;
}
.navigator2{
  display: grid;
  grid-template-columns: 1fr;
}
.recommend_book_row {
  display: grid;
  grid-template-columns: 1fr;
}
}