@media screen and (min-width: 320px) {
	.col-1 {
		margin-top: 0;
	}
	.col-1 .content{
		position: relative;
	}
	.col-1 .content .pride{
		width: 5rem;
		position: absolute;
		top: .5rem;
		left: .5rem;
	}
	.col-1 .content p{
		border: 1px solid white;
		padding: .3rem;
		position: absolute;
		bottom: .5rem;
		right: .5rem;
		color: white;
	}
	.col-2 .content, .col-4 .content{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.col-2 .box, .col-4 .box{
		border: 2px solid #3f3f3f;
		padding: 2rem;
		aspect-ratio: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.col-2 .content p, .col-4 .content p{
		text-align: center;
	}

	.col-3 .content{
		display: flex;
		width: 100%;
		overflow: scroll;
	}

	.col-3 .box{
		flex: none;
		width: 42%;
	}
	.col-3 .box p{
		text-align: center;
	}
	.col-3 .box img{
		width: 100%;
	}
	.col-3 .desc{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.col-3 .desc section{
		margin-bottom: 0;
	}
	.col-3 .desc p{
		margin: 0;
	}
	.col-3{
		margin: 0;
		padding: 1rem;
		background: #fcfcfc;
	}
	.col-3 .desc{
		margin-bottom: .9rem;
	}
	.col-3 .box section{
		position: relative;
	}
	.col-3 .box .play{
		width: 1.2rem;
		position: absolute;
		right: .5rem;
		bottom: .5rem;
	}
	.col-5 .desc img{
		width: 100%;
	}
	.col-5 .fishbone{
		margin: 3rem 0;
	}
	.col-5 .fishbone .up{
		border-bottom: 2px solid #3f3f3f;
	}
	.col-5 .fishbone section{
		margin-bottom: 0;
	}
	.col-5 .fishbone .up, .col-5 .fishbone .down{
		display: flex;
		justify-content: space-around;
	}
	.col-5 .fishbone section{
		position: relative;
	}
	.col-5 .fishbone i{
		display: block;
		width: 4rem;
		height: 4rem;
		border-left: 2px solid #3f3f3f;
	}
	.col-5 .fishbone .up i{
		transform-origin: bottom left;
		transform: rotate(30deg);
	}
	.col-5 .fishbone .down i{
		transform-origin: top left;
		transform: rotate(-30deg);
	}
	.col-5 .fishbone span{
		position: absolute;
		left: 0;
		border-bottom: 2px solid #3f3f3f;
	}
	.col-5 .fishbone .up span{
		top: -1.5rem;
	}
	.col-5 .fishbone .down span{
		bottom: -1.5rem;
	}
	.col-4 .content{
		justify-content: space-around;
	}
	.col-4 .box{
		border: none;
	}
	.col-1 img {
		width: 100%;
	}
	section{
		margin-bottom: .9rem;
	}
	.col-2 .box{
		margin-bottom: .5rem;
	}
	.col-2 .box, .col-4 .box{
		width: 49%;
		padding: 1rem;
	}
	.col-2 .box:nth-child(n+3) {
		margin-bottom: 0;
	}
	.col-2 .content p:last-child{
		margin-top: .5rem;
	}
	.col-2 .content img{
		width: 2.2em;
	}
	.col-5 .fishbone i{
		width: 3rem;
		height: 3rem;
		margin-right: 3.3rem;
	}
	.col-5 .fishbone .down section{
		margin-left: 1rem;
	}
	.col-4 .box{
		width: 35%;
	}
}

@media screen and (min-width: 800px) {
	section{
		margin-bottom: 1rem;
	}
	main .col-1 .container{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.col-1 .video:hover {
		cursor: pointer;
	}
	.col-1 .content img:last-child{
		width: 7rem;
		top: 1rem;
		left: 1rem;
	}
	.col-1 .desc{
		width: 24rem;
	}
	.col-1, .col-3, .col-5{
		background: #f8f8f8;
	}
	.col-2 {
		padding: 1rem 0;
	}
	.col-2 .box {
		width: 24%;
		padding: 2rem;
		margin-bottom: 0;
	}
	.col-2 .content img{
		width: 2.5em;
	}
	.col-2 .content p:last-child, .col-4 .content p:last-child{
		margin-top: 1rem;
	}
	.col-3, .col-5 {
		padding: 1.5rem 0;
	}
	.col-3 .box{
		width: 30%;
	}
	.col-3 .desc{
		margin-bottom: 1rem;
	}
	.col-3 .box section{
		overflow: hidden;
		cursor: pointer;
	}
	.col-3 .box img{
		transition: transform 200ms ease-in;
	}
	.col-3 .box img:hover{
		transform: scale(1.2);
	}
	.col-3 .box .play{
		width: 1.5rem;
		right: 1rem;
		bottom: 1rem;
	}
	.col-4 .box {
		padding: 0;
		width: 16%;
	}
	.col-5 .fishbone i{
		width: 4rem;
		height: 4rem;
		margin-right: 5rem;
	}
	.col-5 .fishbone .down section{
		margin-left: 5rem;
	}
}