Difference between revisions of "Template:CPU CHINA/common CSS"

Revision as of 17:03, 4 October 2021 (view source) Lanchai (Talk | contribs) ← Older edit		Revision as of 07:44, 5 October 2021 (view source) Lanchai (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	@font-face {	+	#contain .left {
−	font-family: MONTSERRAT-BLACK1;	+	position: -webkit-sticky;
−	src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")	+	position: sticky;
−	format("woff");	+	float: left;
		+	width: 25%;
		+	top: 20%;
	}		}
−	@font-face {	+	#contain .left .Frosting {
−	font-family: MONTSERRAT-BLACKITALIC2;	+	position: absolute;
−	src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")	+	top: 0;
−	format("woff");	+	left: 15%;
		+	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
		+	0 0 40px rgba(0, 0, 0, 0.1) inset;
		+	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
		+	0 0 40px rgba(0, 0, 0, 0.1) inset;
		+	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		+	-o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		+	z-index: 2;
	}		}
−	@font-face {	+	#contain .left .catalogue-title {
−	font-family: CABIN-REGULAR;	+	position: absolute;
−	src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")	+	top: 25px;
−	format("woff");	+	left: 20%;
		+	width: 60%;
		+	text-align: center;
		+	color: #202020;
		+	font-size: large;
		+	font-weight: 800;
		+	z-index: 3;
	}		}
−	@font-face {	+	#contain .left .catalogue {
−	font-family: CABIN-ITALIC;	+	position: absolute;
−	src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")	+	padding-left: 14px;
−	format("woff");	+	overflow: hidden;
		+	top: 60px;
		+	width: 65%;
		+	z-index: 3;
	}		}
−	@font-face {	+	#contain .left .catalogue li {
−	font-family: BLACKITALIC;	+	color: #404040;
−	src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff") format("woff");	+	margin: 5% 10%;
		+	text-overflow: ellipsis;
		+	overflow: hidden;
		+	white-space: nowrap;
		+	width: 95%;
		+	list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");
	}		}
−	body {	+	#contain .left .catalogue li:hover {
−	background-color: #fafafa;	+	list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
	}		}
−	* {	+	#contain .left .catalogue .current {
−	box-sizing: border-box;	+	color: #0071ff;
		+	list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
	}		}
−	#contain {	+	#contain .left .catalogue li:hover a {
−	margin-top: -12px;	+	color: #0071ff;
−	padding: 0 3% 10%;	+	text-decoration: none;
−	width: 100%;	+
−	background-color: #fafafa;	+
−	z-index: 1;	+
−	text-align: left;	+
−	box-sizing: border-box;	+
	}		}
−	.background {	+	#contain .left .catalogue li:hover .circle {
−	position: fixed;	+	fill: #0071ff;
−	width: 100%;	+
−	top: 0;	+
−	z-index: -1;	+
−	box-sizing: border-box;	+
	}		}
−	#header #title {	+	#contain #detail {
−	position: fixed;	+	float: right;
−	top: 9vw;	+	position: relative;
−	font-family: "MONTSERRAT-BLACKITALIC2";	+	width: 60%;
−	line-height: normal;	+	margin-right: 8%;
−	font-weight: bolder;	+	padding:5%;
−	font-size: 8vw;	+	border-radius: 8px;
−	color: #fafafa;	+	box-sizing: border-box;
−	z-index: -1;	+	font-size: 1.1em;
		+	font-family: "CABIN-REGULAR";
		+	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	-o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
	}		}
		+	#contain #detail h2 {
		+	padding: 10% 0;
		+	font-family: "MONTSERRAT-BLACKITALIC2";
		+	font-size: 3em;
		+	color: #212121;
		+	text-align: center;
		+	line-height: normal;
		+	}
−	#header #load {	+	#contain #detail h3 {
−	position: fixed;	+	margin: 5% 0;
−	display: flex;	+	font-size: 2em;
−	width: 100%;	+	font-family: "MONTSERRAT-BLACKITALIC2";
−	height: 100%;	+	color: #424242;
−	background-color: white;	+	text-align: center;
−	align-items: center;	+	line-height: normal;
−	justify-content: center;	+
−	z-index: 20;	+
	}		}
−	#header #load img {	+	#contain #detail h4{
−	width: 50vmin;	+	font-size: 1.5em;
	}		}
−	#header #menu {	+	#contain #detail p {
−	z-index: 10;	+	margin: 2% 0;
		+	color: #212121;
		+	line-height: 1.5em;
		+	font-size: 1.1em;
		+	font-family: "CABIN-REGULAR";
	}		}
−	#header #menu #menuBack {	+	/* 图注 */
−	position: fixed;	+	#contain #detail .imgdescribe{
−	width: 100%;	+	font-size: 0.9em;
−	height: 100%;	+	font-weight: bold;
−	box-sizing: border-box;	+
−	z-index: 10;	+
	}		}
−	#header #menu .menu {	+	#contain #detail .center{
−	background: #000000ad;	+	text-align: center;
	}		}
−	#header #menu #logo {	+	/* 引用 */
−	position: fixed;	+	#contain #detail .reference{
−	top: 3vmin;	+	font-size: 0.9em;
−	left: 1vmin;	+	color: #636363;
−	width: 25vmin;	+
−	z-index: 11;	+
	}		}
−	#header #menu #menuImg {	+	#contain #detail ol {
−	position: fixed;	+	list-style: decimal;
−	top: 2vmin;	+
−	right: 1vmin;	+
−	width: 15vmin;	+
−	z-index: 11;	+
	}		}
−	#header #menu .class {	+	#contain #detail ul {
−	position: fixed;	+	list-style: disc;
−	top: 14vmin;	+	}
−	z-index: 11;	+	#contain #detail a{
		+	color: #0071fe;
		+	}
		+	#contain #detail img {
		+	width: 100%;
		+	margin: 5% 0 2%;
		+	}
		+	#contain #detail em{
		+	font-style: italic;
	}		}
−	#header #menu .class li {	+	/* 下载按钮 */
−	padding: 6% 0;	+	#contain #detail #downLoad {
−	margin: 2vmin;	+	margin: 2vw 0;
−	border-radius: 30px;	+	width: 100%;
−	text-align: center;	+	height: 3vw;
−	font-family: "MONTSERRAT-BLACKITALIC2";	+	line-height: 3vw;
−	font-size: 1.5em;	+	border-radius: 30px;
−	font-weight: bolder;	+	background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);
	}		}
−	#header #menu #class-a {	+	#contain #detail #downLoad span{
−	right: 1vmin;	+	margin-left: 1vw;
	}		}
−	#header #menu #class-a li {	+	#contain #detail #downLoad a{
−	width: 30vmin;	+	float: right;
−	background-color: #fafafa;	+	width: 20%;
−	border: #fafafa solid 3px;	+	height: 3vw;
		+	line-height: 3vw;
		+	border: none;
		+	text-align: center;
		+	background-color: #0071ff;
		+	color: #FAFAFA;
		+	font-size: 1.3vw;
		+	font-weight: bold;
		+	border-radius: 30px;
	}		}
−	#header #menu #class-a li:hover {	+	.current {
−	border: #0072fe solid 3px;	+	color: #0071ff;
	}		}
−	#header #menu #class-a .class-a {	+	.section {
−	background-color: #0072fe;	+	margin-top: 30px;
−	border: #0072fe solid 3px;	+
−	color: #fafafa;	+
	}		}
−	#header #menu #class-b {	+	#contain #detail figure{
−	right: 33vmin;	+	margin: 5% 0;
		+	border-radius: 12px;
	}		}
−	#header #menu #class-b li {	+	/* 滚动条宽度 */
−	border: #0072fe solid 2px;	+	#contain #detail figure::-webkit-scrollbar {
−	width: 39vmin;	+	height: 5px;
	}		}
−	#header #menu #class-b li a{	+	/* 滚动条轨道 */
		+	#contain #detail figure::-webkit-scrollbar-track {
		+	background: #FAFAFA;
		+	border-radius: 10px;
		+	}
		+
		+	/* 小滑块 */
		+	#contain #detail figure::-webkit-scrollbar-thumb {
		+	background: #c5daee49;
		+	border-radius: 10px;
		+	width: 5px;
		+	}
		+
		+	#contain #detail figure::-webkit-scrollbar-thumb:hover {
		+	background: #41a0ff;
		+	}
		+
		+	#contain #detail table {
		+	margin: 0;
		+	width: 100%;
		+	border: none;
		+	border-radius: 12px;
		+	font-family: "CABIN-REGULAR";
		+	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	-o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
		+	}
		+
		+	#contain #detail table tr {
		+	text-align: center;
		+	}
		+
		+	#contain #detail table thead tr,
		+	#contain #detail table tbody tr {
		+	height: 50px;
		+	line-height: 50px;
		+	/*background-color: pink;*/
		+	}
		+
		+	#contain #detail table tr td {
		+	/*设置table表格每列底部边框*/
		+	font-size: medium;
		+	border-left: none;
		+	border-right: none;
		+	border-bottom: 1px solid #eaeaea;
		+	}
		+
		+	/*table tr:last-child td:first-child,
		+	table tr:last-child td:nth-child(2),
		+	table tr:last-child td:nth-child(3),
		+	table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/
		+	border-bottom: 2px solid #000;
		+	}*/
		+	#contain #detail table tr th {
		+	padding: 1vw 2vw;
		+	border: none;
		+	background: #0071fe;
		+	font-family: "MONTSERRAT-BLACK1";
		+	font-size: larger;
		+	line-height: 1.5em;
	color: #FAFAFA;		color: #FAFAFA;
		+
	}		}
−	#header #menu #class-b li:active {	+	#contain #detail table tr:first-child th:first-child {
−	background-color: #0000008f;	+	border-top-left-radius: 12px;
	}		}
−	#header #menu #class-b .class-b {	+
−	background-color: #00000047;	+	#contain #detail table tr:first-child th:last-child {
		+	border-top-right-radius: 12px;
	}		}
−	footer {	+	#contain #detail table tr:last-child td:first-child {
−	position: -webkit-sticky;	+	border-bottom-left-radius: 12px;
−	left: 0;	+
−	width: 100%;	+
−	background-color: black;	+
	}		}
−	footer #sponsor {	+	#contain #detail table tr:last-child td:last-child {
−	position: relative;	+	border-bottom-right-radius: 12px;
−	top: -10px;	+	}
−	width: 100%;	+	/* 轮播图 */
−	border-radius: 10px;	+	#contain #detail .rotationChart{
−	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+	margin: 2vw;
−	0 0 40px rgba(0, 0, 0, 0.1) inset;	+	}
−	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+
−	0 0 40px rgba(0, 0, 0, 0.1) inset;	+	#contain #detail .rotationChart img{
−	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;	+	margin: 0;
−	-o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;	+	width: 100%;
−	z-index: 1;	+	border-radius: 20px;
		+	}
		+
		+	#contain #detail .rotationChart #text{
		+	margin: 1vmin 0;
		+	position: relative;
		+	height: 6vmin;
		+	line-height: 6vmin;
		+	text-align: center;
		+	font-weight: bold;
		+	font-family: "BLACKITALIC";
		+	}
		+
		+	#contain #detail .rotationChart button{
		+	background-color: #0071fe;
		+	width: 6vmin;
		+	height: 6vmin;
		+	border:none;
		+	border-radius: 50%;
		+	font-size: 1.5vw;
		+	font-weight: bold;
		+	color: #FAFAFA;
		+
		+	}
		+
		+	#contain #detail .rotationChart button:nth-child(1){
		+	position: absolute;
		+	left: 0;
		+	}
		+
		+	#contain #detail .rotationChart button:nth-child(2){
		+	position: absolute;
		+	right: 0;
		+	}
		+
		+	#contain #detail .rotationChart #briefText{
		+	width: 100%;
		+	padding: 3vmin;
		+	background-color: #EFEFEF;
		+	border-radius: 20px;
		+	}
		+
		+	@media screen and (max-width: 730px) {
		+	#contain .left {
		+	display: none;
		+	}
		+
		+	#contain #detail {
		+	width: 100%;
		+	float: none;
		+	padding: 5%;
		+	box-sizing: border-box;
		+	}
	}		}
−	footer #connect {	+	@media screen and (max-width: 450px){
−	position: relative;	+	#contain #detail h2{
−	top: -30px;	+	font-size: 1.5em;
−	width: 100%;	+	}
−	height: 150px;	+	#contain #detail h3{
−	background-color: black;	+	font-size: 1.2em;
−	border-radius: 10px;	+	}
−	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+	#contain #detail h4{
−	0 0 40px rgba(0, 0, 0, 0.1) inset;	+	font-size: 1.1em;
−	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+	}
−	0 0 40px rgba(0, 0, 0, 0.1) inset;	+	#contain #detail p{
−	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;	+	font-size: 1em;
−	-o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;	+	}
−	z-index: 2;	+	#contain #detail figure{
		+	overflow-x: auto;
		+	}
	}		}

---

Revision as of 07:44, 5 October 2021

1. contain .left {

   position: -webkit-sticky;
   position: sticky;
   float: left;
   width: 25%;
   top: 20%;

}

1. contain .left .Frosting {

   position: absolute;
   top: 0;
   left: 15%;
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   z-index: 2;

}

1. contain .left .catalogue-title {

   position: absolute;
   top: 25px;
   left: 20%;
   width: 60%;
   text-align: center;
   color: #202020;
   font-size: large;
   font-weight: 800;
   z-index: 3;

}

1. contain .left .catalogue {

   position: absolute;
   padding-left: 14px;
   overflow: hidden;
   top: 60px;
   width: 65%;
   z-index: 3;

}

1. contain .left .catalogue li {

   color: #404040;
   margin: 5% 10%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   width: 95%;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");

}

1. contain .left .catalogue li:hover {

   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

1. contain .left .catalogue .current {

   color: #0071ff;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

1. contain .left .catalogue li:hover a {

   color: #0071ff;
   text-decoration: none;

}

1. contain .left .catalogue li:hover .circle {

   fill: #0071ff;

}

1. contain #detail {

   float: right;
   position: relative;
   width: 60%;
   margin-right: 8%;
   padding:5%;
   border-radius: 8px;
   box-sizing: border-box;
   font-size: 1.1em;
   font-family: "CABIN-REGULAR";
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

1. contain #detail h2 {

   padding: 10% 0;
   font-family: "MONTSERRAT-BLACKITALIC2";
   font-size: 3em;
   color: #212121;
   text-align: center;
   line-height: normal;

}

1. contain #detail h3 {

   margin: 5% 0;
   font-size: 2em;
   font-family: "MONTSERRAT-BLACKITALIC2";
   color: #424242;
   text-align: center;
   line-height: normal;

}

1. contain #detail h4{

   font-size: 1.5em;

}

1. contain #detail p {

   margin: 2% 0;
   color: #212121;
   line-height: 1.5em;
   font-size: 1.1em;
   font-family: "CABIN-REGULAR";

}

/* 图注 */

1. contain #detail .imgdescribe{

   font-size: 0.9em;
   font-weight: bold;

}

1. contain #detail .center{

   text-align: center;

}

/* 引用 */

1. contain #detail .reference{

   font-size: 0.9em;
   color: #636363;

}

1. contain #detail ol {

list-style: decimal; }

1. contain #detail ul {

   list-style: disc;

}

1. contain #detail a{

   color: #0071fe;

}

1. contain #detail img {

   width: 100%;
   margin: 5% 0 2%;

}

1. contain #detail em{

   font-style: italic;

}

/* 下载按钮 */

1. contain #detail #downLoad {

   margin: 2vw 0;
   width: 100%;
   height: 3vw;
   line-height: 3vw;
   border-radius: 30px;
   background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);

}

1. contain #detail #downLoad span{

   margin-left: 1vw;

}

1. contain #detail #downLoad a{

   float: right;
   width: 20%;
   height: 3vw;
   line-height: 3vw;
   border: none;
   text-align: center;
   background-color: #0071ff;
   color: #FAFAFA;
   font-size: 1.3vw;
   font-weight: bold;
   border-radius: 30px;

}

.current {

   color: #0071ff;

}

.section {

   margin-top: 30px;

}

1. contain #detail figure{

   margin: 5% 0;
   border-radius: 12px;

}

/* 滚动条宽度 */

1. contain #detail figure::-webkit-scrollbar {

   height: 5px;

}

/* 滚动条轨道 */

1. contain #detail figure::-webkit-scrollbar-track {

   background: #FAFAFA;
   border-radius: 10px;

}

/* 小滑块 */

1. contain #detail figure::-webkit-scrollbar-thumb {

   background: #c5daee49;
   border-radius: 10px;
   width: 5px;

}

1. contain #detail figure::-webkit-scrollbar-thumb:hover {

   background: #41a0ff;

}

1. contain #detail table {

   margin: 0;
   width: 100%;
   border: none;
   border-radius: 12px;
   font-family: "CABIN-REGULAR";
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

1. contain #detail table tr {

   text-align: center;

}

1. contain #detail table thead tr,
2. contain #detail table tbody tr {

   height: 50px;
   line-height: 50px;
   /*background-color: pink;*/

}

1. contain #detail table tr td {

   /*设置table表格每列底部边框*/
   font-size: medium;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #eaeaea;

}

/*table tr:last-child td:first-child, table tr:last-child td:nth-child(2), table tr:last-child td:nth-child(3), table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

   border-bottom: 2px solid #000;

}*/

1. contain #detail table tr th {

   padding: 1vw 2vw;
   border: none;
   background: #0071fe;
   font-family: "MONTSERRAT-BLACK1";
   font-size: larger;
   line-height: 1.5em;
   color: #FAFAFA;

}

1. contain #detail table tr:first-child th:first-child {

   border-top-left-radius: 12px;

}

1. contain #detail table tr:first-child th:last-child {

   border-top-right-radius: 12px;

}

1. contain #detail table tr:last-child td:first-child {

   border-bottom-left-radius: 12px;

}

1. contain #detail table tr:last-child td:last-child {

   border-bottom-right-radius: 12px;

} /* 轮播图 */

1. contain #detail .rotationChart{

   margin: 2vw;

}

1. contain #detail .rotationChart img{

   margin: 0;
   width: 100%;
   border-radius: 20px;

}

1. contain #detail .rotationChart #text{

   margin: 1vmin 0;
   position: relative;
   height: 6vmin;
   line-height: 6vmin;
   text-align: center;
   font-weight: bold;
   font-family: "BLACKITALIC";

}

1. contain #detail .rotationChart button{

   background-color: #0071fe;
   width: 6vmin;
   height: 6vmin;
   border:none;
   border-radius: 50%;
   font-size: 1.5vw;
   font-weight: bold;
   color: #FAFAFA;
   

}

1. contain #detail .rotationChart button:nth-child(1){

   position: absolute;
   left: 0;

}

1. contain #detail .rotationChart button:nth-child(2){

   position: absolute;
   right: 0;

}

1. contain #detail .rotationChart #briefText{

   width: 100%;
   padding: 3vmin;
   background-color: #EFEFEF;   
   border-radius: 20px;

}

@media screen and (max-width: 730px) {

   #contain .left {
       display: none;
   }

   #contain #detail {
       width: 100%;
       float: none;
       padding: 5%;
       box-sizing: border-box;
   }

}

@media screen and (max-width: 450px){

   #contain #detail h2{
       font-size: 1.5em;
   }
   #contain #detail h3{
       font-size: 1.2em;
   }
   #contain #detail h4{
       font-size: 1.1em;
   }
   #contain #detail p{
       font-size: 1em;
   }
   #contain #detail figure{
       overflow-x: auto;
   }

}