@charset "UTF-8";
/*Left pointing*/
.triangle-left {
  width: 5%;
  height: 0;
  padding-top: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-left:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: -500px;
  border-top: 500px solid transparent;
  border-bottom: 500px solid transparent;
  border-right: 600px solid #0F2B3F;
}

/*Right pointing*/
.triangle-right {
  width: 0;
  height: 0;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  overflow: hidden;
}

.triangle-right:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: -500px;
  margin-left: -600px;
  border-top: 500px solid transparent;
  border-bottom: 500px solid transparent;
  border-left: 600px solid #0F2B3F;
}

/*三角形*/
.triangle-t {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 15px solid #005AB5;
  display: inline-block;
}

.triangle-r {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #005AB5;
  display: inline-block;
}

.triangle-b {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 15px solid #005AB5;
  display: inline-block;
}

.triangle-l {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #005AB5;
  display: inline-block;
}

/*圓形*/
.circular-small {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
}

.circular-normal {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}

.circular-large {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: inline-block;
}

.landscape {
  border-radius: 50%;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

/*圓形*/
.div-landscape {
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}

.div-landscape > img {
  position: absolute;
  left: -50%;
}