/* general setting */
.occasion a {color:inherit;}
.occasion a:hover img,.occasion a.button:hover {opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in;}
.occasion .btn, .occasion a.btn {display: inline-block;background-color:#ffcc00;color:#000;font-size:14px;font-weight:bold;line-height:2;letter-spacing:0.3px;padding:5px 25px;margin-bottom: 0;border: 1px solid #c5c5c5;border-radius:6px;border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);vertical-align: middle;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);}
.occasion .btn:hover, .occasion a.btn:hover {opacity:0.7;background:#ffcc00;}
.occasion strong {font-weight:bold;}
.occasion b {font-weight:normal;}

/* occasion-social-link */
#occasion-social-link {display: -moz-flex;display: -webkit-flex;display: flex;justify-content: flex-end;-moz-justify-content: flex-end;-webkit-justify-content: flex-end;padding: 15px 10px;}
#occasion-social-link #fpt-link {-moz-flex: 1;-webkit-flex: 1;flex: 1;}

/* header */
#graduation_header {
  padding: 0;
  background-image: url('/themes/occasion/graduation/images/graduate_header_new.jpg'); 
  width: 100%;
  height: 280px;
  background-repeat: no-repeat;
  background-position: top center;
}
#graduation_header>a {display: 	block; height: 100%;}
#v2 #graduation_header {width: 100%;height:366px;max-height: initial;background-size: inherit;background-repeat: no-repeat;background-position: center;}
@media (max-width: 750px) {
  #v3 #header {-webkit-order: -1;order: -1;height: initial;max-height: initial;background-image: none;}
  #v3 #header>a {display: block;}
  #v3 #header>a>img {width: 100%;}
}

/*about*/
#about-graduation {text-align: center;font-size: 16px;line-height: 1.5;padding: 20px 0px;letter-spacing: 2px;display: none;font-weight: bold;}
#v3 .v3-only {display: block;}

/*content*/
.graduation_content {
  background-image: url(https://www.tintint.com/themes/occasion/graduation/images/graduate_content_bg_top.gif), url(https://www.tintint.com/themes/occasion/graduation/images/graduate_content_bg.gif);
  background-repeat: no-repeat no-repeat, no-repeat repeat;
  background-position: top center, center;
  background-size: contain;
  /* max-width: 915px; */
  margin: auto;
  width: 100%;
}
.subject {position: relative;border: 1px solid transparent;}
.subject-title {position: absolute;left: 35px;top: 20px;width: 280px;z-index: 1;overflow: hidden;}
.subjet-content {margin: 70px 35px 25px;padding-top: 15px;position: relative;}
.subjet-content.bg-fdf7ed {background-color: #fdf7ed;}
.subjet-content ul.info {font-size:0px;text-align: center;}
.subjet-content .info li {padding: 15px;width: 50%;display: inline-block;margin: auto;text-align: left;}
.subjet-content .info li>a {display: inline-block;    vertical-align: top;}
.subjet-content .info li>a>* {vertical-align: top;}
.subjet-content .info li>a>img {display: inline-block;height: 150px;}
.subjet-content .graduation_list2_text {
  display: inline-block;
  /* width: calc(100% - 155px);
  padding-left: 10px; */
}
.graduation_list2_text .topic {font-size: 15px;font-weight: bold;line-height: 1.5;display: block;margin-bottom: 5px;}
.graduation_list2_text .sub-topic {display: block;margin-bottom: 10px;line-height: 1.5;height: 65px;font-size: 14px;}
@media (max-width: 930px) {
	#v3 .subjet-content .info li {width: 100%;}
	#v3 #graduation.occasion .info .btn {float: right;}
}
@media (max-width: 750px) {
	#v3 .subject-title {
		left: 5px;
	}
    #v3 .subjet-content{
    	    margin-left: 10px;
    margin-right: 10px;
    }
}
@media (max-width: 500px) {
	#v3 #infomation .subjet-content .info li {text-align: center;}
	#v3 #infomation .subjet-content .info li>a {text-align: center;}
	#v3 .subjet-content .info .graduation_list2_text {width:100%;text-align: left;}
	#v3 .subjet-content .info .graduation_list2_text>a {display: inline-block;width: 100%;text-align: center;}
	#v3 #infomation .info .graduation_list2_text .topic {text-align:center;}
	#v3 #graduation.occasion .info .btn {float: none;}
}

/*whisper*/
.graduates-whisper {width: calc(100% - 320px);margin:20px 0px;}
.graduates-whisper .img-xs {vertical-align: top;display: inline-block;}
.graduates-whisper .whisper-text {display: inline-block;vertical-align: top;width: calc(100% - 60px);text-align: justify;}
.graduates-whisper .highlight {background: #ffea00;color: #232323;vertical-align: top;line-height: 1.5em;font-size: 13px;font-weight: normal;}
.graduates-col .highlight {background: #ffea00;color: #232323;vertical-align: top;line-height: 1.5em;font-size: 13px;font-weight: normal;}
.whisper-text p {font-weight: bold;}
#graduates-whispers .subjet-content {text-align: center;}
.subjet-content .whisper-side-image {position: absolute;right: -35px;top: 0px;}
@media (max-width: 750px) {
	#v3 .subjet-content .whisper-side-image { position: relative;right:0px;width: 100%;max-width: 356px;}
	#v3 .graduates-whisper {width: 100%;}
}

/*memory*/
.subject-title.border-dot {left: 45px;width: 250px;}
.subject-title.border-dot>img {margin-left: -14px;margin-top: -1px;}
.subject .border-dot+.subjet-content {border: 2px dotted #201e1e;}
.graduation_pro:after {content: "";clear:both;display: block;}
.graduation_pro_box {width: calc(50% - 30px);display: inline-block;vertical-align: top;margin: 15px;}
.graduation_pro_box .side-box {width: calc(100% - 193px);max-width: 44%;}
.graduation_pro_box img:not(.img-xs) {margin-bottom: 20px;width: 100%;max-width: 364px;}
.graduation_pro_imp {background: #ffea00;text-align: center;font-weight: bold;padding: 15px 10px;    width: 120px;}
.graduation_pro_box>ul {width: 56%; min-width: 193px;}
.graduation_pro_box li,
.graduation_pro_ul li {background: url(/themes/occasion/graduation/images/graduate_content_list.gif) no-repeat left top;width: 193px;height: 26px;padding-left: 25px;font-size: 12px;}
.graduation_pro_box h2 {font-size: 20px;font-weight: bold;color: #232323;letter-spacing: 0.1em;padding-bottom: 25px;}
.graduation_pro_whisper_text {width: calc(100% - 60px);min-height: 75px;display: inline-block;vertical-align: top;text-align: justify;}
/*.occasion .graduation_pro_box .btn*/
#graduation.occasion .btn { /*override*/width: 100%;max-width: 360px;margin: 0px;background-color: #ffea00;border: 3px solid #ffea00;border-radius: 10px;box-shadow: inset 0px 0px 0px 2px white;}
.separate-line {margin: 25px 2%;border-bottom: 2px dotted #cdcdcd;width: 96%;}
@media (max-width: 768px){
  #v3 .graduation_pro_imp {display: inline-block;vertical-align: top;width: 100%;padding: 5px;max-width: 200px;display: block;margin: auto;}
}
@media (max-width: 750px) {
  #v3 .subject-title.border-dot {left: 15px;}
  #v3 .graduation_pro_box {margin: 10px;width: calc(50% - 20px);}
  #v3 .graduation_pro_box .side-box { width: 100%;max-width: initial;float: none;text-align: center;}
  #v3 .graduation_pro_imp {display: inline-block;vertical-align: top;width: 100%;padding: 5px;max-width: 200px;display: block;margin: auto;}
  #v3 .graduation_pro_imp br {display: none;}
  #v3 .graduation_pro_box>ul {float: none;margin: auto;width: auto;min-width: initial;}
  #v3 .graduation_pro_box>ul>li {margin:auto;}
}
@media (max-width: 560px) {
  #v3 .graduation_pro_box {float:none;width: calc(100% - 30px);text-align: center;}
}

/*special-yearbook*/
#special-yearbook .subject-title>img{margin-left: -3px;}
#special-yearbook .subjet-content .info li>a>img {height:140px;}
#special-yearbook .subjet-content .graduation_list2_text {width: calc(100% - 215px);padding-left: 8px;}
@media (max-width: 500px) {
  #v3 #special-yearbook .subjet-content .info li>a>* {width:50%;}
  #v3 #special-yearbook .subjet-content .info li>a>img {height:auto;}
  #v3 .graduation_list2_text .sub-topic {height: initial;}
}

/*pd*/
#graduation-pd .subjet-content>img {width: 	100%;}
.maparea {position: absolute;top: 0px;width: 100%;height: 100%;}
.maparea>div{position: relative;width: 100%;height: calc(100% - 15px);top: 15px;}
.maparea>div>div {position:absolute;}
.maparea>div>div>a{display: block;height: 100%;}
#graduation-pd ul {width: 100%;padding: 0px 20px;}
#graduation-pd li {float: left;text-align: center;}
#graduation-pd li.pd-01 {width:14%;}
#graduation-pd li.pd-02 {width:16%;}
#graduation-pd li.pd-03 {width:19%;}
#graduation-pd li.pd-04 {width:18%;}
#graduation-pd li.pd-05 {width:17%;}
#graduation-pd li.pd-06 {width:16%;}
@media (max-width: 750px) {
  #v3 #graduation-pd ul {padding: 0px 10px;}
}

/*books browse*/
@media (max-width:750px){
  #graduation .graduation_center .span2{
    width:160px;
  }
  #graduation .graduation_books_position{
    right:50px;
  }
}

/*more*/
.more{width: 100%;text-align: right;padding: 20px 40px 30px 0;}
.more .highlight  {background: #ffea00;color: #232323;vertical-align: top;line-height: 1.5em;font-weight: normal;font-size: 14px;padding: 5px 10px;}

/*** article part ***/
/*graduation board*/
.graduation-article {padding-top: 50px;display: inline-block;width: calc(100% - 250px);max-width: 606px;}
.graduation-article .subject-title {position: static;margin-left: 35px;}
.graduation-article .subjet-content {margin-top: 0px;padding-top: 0px;}
.graduation_content .subjet-content h1 {font-size: 22px;font-weight: bold;padding-bottom: 30px;letter-spacing: 0.05em;}
.graduation_content .subjet-content .article_img {border: 7px solid #fff;margin: 15px 0;width: 	100%;}
#graduation-sidebar-list {padding: 90px 10px 10px;display: inline-block;vertical-align: top;min-width: 245px;width: calc(100% - 610px);}
#graduation-sidebar-list .sidebar-item {background-color: #fefefe;box-shadow: 1px 1px 5px 1px #ccc;border-radius: 2px;max-width: 225px;padding: 8px;margin: auto;}
.sidebar-item>a {padding: 10px;display: block;border: 1px solid gray;}
.sidebar-item>a>div{line-height: 16px;padding-bottom: 8px;}
.sidebar-item img {width: 100%;}
.sidebar-item p {font-size: 12px;}
.sidebar_banner_text.more {text-align: center;padding: 20px;}
@media (max-width: 750px) {
  #v3 .graduation-article {width: 100%;max-width: initial;}
  #v3 .graduation-article .mobile-hide {display: none;}
  #v3 #graduation-sidebar-list {padding-top: 0px;}
}

.graduation_book_line{
  height:5px;
  background-color:#7c4824;
  margin-top:-20px;
  margin-bottom:10px;
  box-shadow:0px 5px 5px rgba(0,0,0,0.2)
}

.graduation_books_title{
  align-items:center;
  font-size:18px;
  font-weight:bold;
}

.graduation_books_btn{
  display:inline-block;
  background-color: rgba(0,0,0,0.5);
  color:#FFF;
  padding:2px 12px;
  border-radius: 20px;
  margin-top:6px;
  font-size:13px;
}

#graduation_books_browse{
  margin:50px 0 40px 0;
}

#graduation_books_browse a{
  color:#FFF;
}

.graduation_books_bg{
  background-image: url("/themes/occasion/graduation/images/graduate_books_bg.jpg");
}

#graduation_books_browse .span2{
  margin-bottom:30px;
}

.graduation_center{
  text-align:center;
}

.graduation_books_position{
  position:absolute;
  right:0;
  bottom:-10px;
}

.graduation_books_more {
  justify-content: flex-end;
  color:#000;
}

.owl-stage {
  display: flex;
  position: relative;
}
.owl-nav.disabled {
  display: none;
}
.owl-nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  margin-top: 1rem;
}
.owl-nav svg {
  width: 20px;
  height: 20px;
}
.owl-nav .disabled svg {
color: #7C4824;
opacity: .65;
}
.owl-prev:not(.disabled), .owl-next:not(.disabled) {
  cursor: pointer;
}
.owl-prev, .owl-next {
 padding: 0.5rem;
}
.recommand-text-box {
  background: rgba(255, 255, 255, 0.56);
}
#pd-comparison .slider-right {
  right: 120px;
}
#pd-comparison .slider-left {
  left: 120px;
}
@media (max-width: 750px) {
  #pd-comparison .slider-right {
  right: 35px;
  }
  #pd-comparison .slider-left {
    left: 35px;
  }
}
.btn-outline-light {
  --bs-btn-bg: rgba(255, 255, 255, 0.56);
}
#graduation_banner .owl-dots {
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  width: 100%;
  z-index: 2;
  bottom: 20px;
}

#graduation_banner .owl-dots .owl-dot>span {
  width: 13px;
  height: 13px;
  background-color: #fff;
  opacity: .72;
  display: inline-block;
  border-radius: 50%;
  margin: 0px 15px;
  cursor: pointer;
}

#graduation_banner .owl-dots .owl-dot.active>span {
  background-color: rgba(123, 100, 83, 1);
}
.pd-intro-list img {
  width: 24px;
  height: 24px;
}
#pd-comparison .owl-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(11, auto);
}
#pd-comparison .owl-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 12;
}
#pd-comparison .pd-box {
  grid-row: 1 / 12;
  grid-template-rows: subgrid;
  --bs-border-color: #EFEFEF;
  /*margin-right: 1px;*/
}