html, body, ul {
	margin: 0px;
	padding: 0px;
	font-family: 'Montserrat', sans-serif; 
	font-weight: 300;
    line-height: 1.6;

}

.change-lh {
    line-height: 1.38;
}

body {
	/* 반응형으로 바꾼 부분 : width: 1230px; */
	width: 100%;
    
}

ol, ul {
	list-style: none;
}

.home-container {
    margin: 0px auto;
    width: 90%;
}


.header {
	height: 50px;
	padding: 20px 0px 20px 0px;
	width: 100%
}

.header .logo {
	display: block;
	font-size: 24px;  
	font-weight: 600;
	max-width: 70px;
	padding-top: 5px;
	float: left;
}

.header .logo a {
	text-decoration: none;
	color: black;
}

.header .top-nav {
	float: left;
	font-size: 16px;
	font-style: italic;
	line-height: 12px;
	margin-left: 30px;
}

.header .top-nav a {
	text-decoration: none;
	color: grey;
}

.home-header {
	/* 반응형으로 바뀐부분: 삭제
	height: 100px; */
	margin-top: 40px;
	/* 반응형으로 바뀐부분: 추가 */
	display: inline-block;
}

.home-header .nav {
	padding: 30px 0px 0px 0px;
	
}

.home-header ul {
	display: block;

}

.home-header li {
	font-size: 90px;
	font-weight: 300;
	line-height: 90px;
	margin: 0px;
	display: inline-block;
	margin-right: 30px;
	letter-spacing: -2px;
}

.home-header li span {
    font-size: 18px;
    text-decoration: line-through;
    letter-spacing: 0px;
}

.home-header .study {
	margin-right: 80px;
}

.home-header li a {
	text-decoration: none;
	color: black;
}

.home-header li a:hover {
	background-color: #fbef3a;

	/*color: white;*/
}


/*.home-header .works a:hover {
	background-color: #8cb3f3;
	color: white;
}

.home-header .contents a:hover {
	background-color: #a4a6f9;
	color: white;
}

.home-header .fun a:hover {
	background-color: #caa4f9;
	color: white;
}*/

.home-header ul .medium {
	font-size: 28px;
	letter-spacing: 0px;
	margin-right: 100px;
}

.home-header ul .small {
	font-size: 18px;
	letter-spacing: 0px;
	margin-right: 100px;
}

.home-header .nav {
	float: left;
}

.home-header .intro, .home-header .filter, .home-header .go, .filter-next {
	float: left;
}

.home-header .intro p, .home-header .filter p, .home-header .go p, .filter-next p {
	border-left: 2px solid black;
	padding-left: 20px;
	margin-top: 30px;
	/* 반응형으로 바뀐 부분: 삭제
	margin-left: 30px */
}




.home-header .go p {
	margin-left: 0px;
    margin-top: 55px;
}

.home-header .intro p, .home-header .filter p, .home-header .go p, .filter-next p {
	font-size: 14px;
	line-height: 20px;
}

.home-header .intro p span, .home-header .filter p span, .home-header .go p span, .filter-next p span {
	font-weight: 400;
	font-size: 18px;
}

.home-header .intro a, .home-header .filter a, .home-header .go a, .filter-next a {
	color: grey;
	text-decoration: none;

}

.home-content {
	display: block;
	/* 반응형으로 바뀐 부분: 삭제 
	margin-top: 10px;*/
	/* 반응형으로 바뀐 부분: 추가 */
	margin: 0px auto;
	/* 반응형으로 바뀐 부분: 추가 */
	width: 100%;

}

.home-content img {
	/* 반응형으로 바뀐 부분: width: 1230px; */
	width: 100%;
	margin-bottom: -4px;
}

.row {
	/* 반응형으로 바뀐 부분: margin-top: 70px; */
	margin-bottom: 70px;
}



.piece, .piece-last {
	float: left;
	/* 반응형으로 바뀐 부분: width: 390px; */
	width: 30%;
	min-width: 370px;
	height: 475px;
	border-bottom: 2px solid grey;
	/* 반응형으로 바뀐 부분: 추가 */
	margin: 20px 0px 70px 0px;
	display: inline-block;
	
}

.piece-last {
	margin-bottom: 20px;
}

.marg, .marg-2 {
	float: left;
	width: 5%;
	height: 475px;
}

.exp a:hover {
	background-color: #fbef3a;
}

.sc-piece .box a {
	text-decoration: none;
	color: black;
}

.sc-piece .box a:hover {
	background-color: #fbef3a;
}

.piece a, .piece-wide a, .sc-piece-2 a {
	text-decoration: none;
	color: black;
}

.piece a:hover, .piece-wide a:hover .sc-piece-2 a:hover {
	background-color: #fbef3a;
}

.img-01, .img-02, .img-03, .img-05, .img-06, .img-07, .img-08 {
	position: relative;
	background-color: #e8e8e8;
	/* 반응형으로 바뀐 부분: width: 390px; */
	width: 100%;
	height: 300px;
	/* border-bottom: 10px solid #8bf9d9; */	
	background-size: 100%;
	display: inline-block;
	opacity: 0.8;
}

.img-01:hover, .img-02:hover, .img-03:hover, .img-05:hover, .img-06:hover, .img-07:hover, .img-08:hover {
	opacity: 1;
}


.img-04 {
	position: relative;
	background-color: #e8e8e8;
	/* 반응형으로 바뀐 부분: width: 810px; */
	width: 100%;
	height: 300px;
	/* border-bottom: 10px solid #8bf9d9; */
	background: url('/image/doit.jpg');
	background-size: cover;
	opacity: 0.9;
}

.img-04:hover {
	opacity: 1;

}

.img-01 {
	background: url('/image/service.jpg');
	background-size: cover;
}

.img-02 {
	background: url('/image/irp.jpg');
	background-size: cover;
}



.img-03 {
	background: url('/image/typo.jpg');
	background-size: cover;
}


.img-05 {
	background: url('/image/emoji.jpg');
	background-size: cover;
}


.img-06 {
	background: url('/image/food.jpg');
	background-size: cover;
}


.img-07 {
	background: url('/image/dawin.jpg');
	background-size: cover;
}


.img-08 {
	background: url('/image/christmas.jpg');
	background-size: cover;
}


.mark {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	background: url('/image/tag_work.png');
	background-size: 100%;
}

.mark-cont {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	background: url('/image/tag_content.png');
	background-size: 100%;
}

.mark-fun {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	background: url('/image/tag_fun.png');
	background-size: 100%;
}

.piece .categ, .piece-last .categ, .piece-wide .categ, .sc-piece-2 .categ {
	font-size: 16px;
	text-transform: uppercase;
	color: grey;
	margin-left: 10px;
}

.piece .title, .piece-last .title, .piece-wide .title, .sc-piece-2 .title {
	font-size: 24px;
	font-weight: 400;
	margin-left: 10px;
	line-height: 33px;
}

.piece .title, .piece-last .title, .piece-wide .title, .sc-piece-2 .title a {
	text-decoration: none;
	color: black;
}

.sc-piece {
	position: relative;
	background: url('/image/kyobo.jpg');
	width: 100%;
	height: 400px;
	/* 반응형으로 바꾼부분: 삭제;
	width: 1230px; */
	/* border-bottom: 10px solid #8bf9d9; */
	background-size: cover;
	transition: background 300ms ease;
	opacity: 0.8;
}

.sc-piece:hover {
	background-size: cover;
	opacity: 1;

}

.sc-piece-2 {
	
	/* 반응형으로 바뀐 부분: width: 810px; */
	width: 100%;
	height: 475px;
	margin-bottom: 70px;
	border-bottom: 2px solid grey;
	background-size: cover;
	position: relative;
}

.sc-piece .box {
	background-color: white;
	position: relative;
	margin: 60px 50px;
	height: 280px;
	width: 275px;
	top: 60px;

}

.sc-piece p {
	font-size: 40px;
	font-weight: 400;
	padding-left: 30px;
	padding-top: 40px;
	position: relative;
	color: black;
}

.top-img {
	position: relative;
	background: url('/image/doit_ver0.jpg');
	background-size: cover;
	height: 380px;
	/* 반응형으로 바뀐 부분 */
	width: 100%;

}

.top-img .box {
	background-color: white;
	position: relative;
	margin: 50px 50px 50px 75px;
	height: 230px;
	width: 340px;
	top: 76px;

}

.top-img p {
	font-size: 40px;
	font-weight: 400;
	padding-left: 20px;
	padding-top: 40px;
	position: relative;
	color: black;
}

.top-img span {
	font-weight: 300;
	padding-top: 20px;
	font-size: 16px;
	color: grey;
}

.sc-piece .button {
	/*background-color: transparent;
	border: 1px solid grey;
	padding: 10px 24px;*/
	font-size: 14px;
	text-decoration: none;
	position: relative;
	margin-left: 30px;
	color: grey;
}



.footer {
	margin: 0px auto;
	height: 100px;	
}

.footer p {
	text-align: left;
}

.port-content {
	margin-bottom: 40px;
	margin-top: 40px;
	margin-left: 7%;
}


.det-0 {
	margin-left: 10%;
	margin-right: 10%;
	/*float: left;*/
}

.det-1 {
	margin-left: 10%;
	margin-right: 10%;
	/*float: left;*/
}

.det-2 {
	margin-left: 10%;
	margin-right: 10%;
	/*float: left;*/
}

.det-3 {
	margin-left: 10%;
	margin-right: 10%;
	/*float: left;*/
}

.subt {
	font-size: 14px;
	color: grey;
	font-weight: 300;
}

.img-ms1-01, .img-ms1-02-1, .img-ms1-02-2, .img-ms1-02-3, .img-ms1-02-4, .img-ms1-02-5, .img-ms1-02-6, .img-ms1-02-7, .img-cc-lab-01, .img-d4tc-01, .img-cc-lab-02, .img-ms1-03, .img-ms1-03-2d, .img-ms1-03-3d, .img-cc-lab-03, .img-cc-lab-04, .img-ms1-03-interaction, .img-ms1-04-instruction, .img-cc-lab-05, .img-cc-lab-06, .img-cc-lab-07, .img-cc-lab-08, .img-ms1-05, .img-cc-lab-09, .img-ms1-06, .img-ms1-07, .img-ms1-08, .img-ms1-09, .img-ms1-11, .img-js-01, .img-js-02, .img-js-03, .img-js-04 {
	position: relative;
	background-color: #e8e8e8;
	width: 100%;
	height: 300px;	
	background-size: 100%;
	display: inline-block;
	opacity: 0.8;
}

.img-ms1-01:hover, .img-ms1-02:hover, .img-ms1-02-2:hover, .img-ms1-02-3:hover, .img-ms1-02-4:hover, .img-ms1-02-5:hover, .img-ms1-02-6:hover, .img-ms1-02-7:hover, .img-cc-lab-01:hover, .img-d4tc-01:hover, .img-cc-lab-02-1:hover, .img-ms1-03:hover, .img-ms1-03-2d:hover, .img-ms1-03-3d:hover, .img-cc-lab-03:hover, .img-cc-lab-04:hover, .img-ms1-03-interaction:hover, .img-ms1-04-instruction:hover, .img-cc-lab-05:hover, .img-cc-lab-06:hover, .img-cc-lab-07:hover, .img-cc-lab-08:hover, .img-ms1-05:hover, .img-cc-lab-09:hover, .img-ms1-06:hover, .img-ms1-07:hover, .img-ms1-08:hover, .img-ms1-09:hover, .img-ms1-11:hover, .img-js-01:hover, .img-js-02:hover, .img-js-03:hover, .img-js-04:hover {
	opacity: 1;
}

.img-ms1-01 {
	background: url('/image/dream.jpg');
	background-size: cover;
}

.img-ms1-02-1 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day1.jpg');
	background-size: cover;
}

.img-ms1-02-2 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day2.jpg');
	background-size: cover;
}

.img-ms1-02-3 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day3.jpg');
	background-size: cover;
}

.img-ms1-02-4 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day4.jpg');
	background-size: cover;
}

.img-ms1-02-5 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day5.jpg');
	background-size: cover;
}

.img-ms1-02-6 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day6.jpg');
	background-size: cover;
}

.img-ms1-02-7 {
	background: url('/image/ms1-02-7in7/thumb_7in7_day7.jpg');
	background-size: cover;
}

.img-cc-lab-01 {
    background: url('/image/cc-lab/thumb-cc-lab-01.jpg');
    background-size: cover;
}

.img-d4tc-01 {
	background: url('/image/d4tc/thumb-d4tc-01-moana.jpg');
	background-size: cover;
}

.img-cc-lab-02 {
    background: url('/image/cc-lab/thumb-cc-lab-02.jpg');
    background-size: cover;
}

.img-ms1-03 {
    background: url('/image/ms1-03/thumb-ms1-03.jpg');
    background-size: cover;
}

.img-ms1-03-2d {
    background: url('/image/ms1-03/thumb-ms1-03-1.jpg');
    background-size: cover;
}

.img-ms1-03-3d {
    background: url('/image/ms1-03/thumb-ms1-03-2.jpg');
    background-size: cover;
}

.img-cc-lab-03 {
    background: url('/image/cc-lab/thumb-cc-lab-03.jpg');
    background-size: cover;
}

.img-cc-lab-04 {
    background: url('/image/cc-lab/thumb-cc-lab-04.jpg');
    background-size: cover;
}

.img-ms1-03-interaction {
    background: url('/image/ms1-03/thumb-ms1-03-3.jpg');
    background-size: cover;
}

.img-ms1-04-instruction {
    background: url('/image/ms1-04/thumb-ms1-04.jpg');
    background-size: cover;
}

.img-cc-lab-05 {
    background: url('/image/cc-lab/thumb-cc-lab-05.jpg');
    background-size: cover;
}

.img-cc-lab-06 {
    background: url('/image/cc-lab/thumb-cc-lab-06.jpg');
    background-size: cover;
}

.img-cc-lab-07 {
    background: url('/image/cc-lab/thumb-cc-lab-07.jpg');
    background-size: cover;
}

.img-cc-lab-08 {
    background: url('/image/cc-lab/thumb-cc-lab-08.jpg');
    background-size: cover;
}

.img-ms1-05 {
    background: url('/image/ms1-05/thumb-ms1-05.jpg');
    background-size: cover;
}

.img-cc-lab-09 {
    background: url('/image/cc-lab/thumb-cc-lab-09.jpg');
    background-size: cover;
}

.img-ms1-06 {
    background: url('/image/ms1-05/thumb-ms1-06.jpg');
    background-size: cover;
}

.img-ms1-07 {
    background: url('/image/ms1-05/thumb-ms1-07.jpg');
    background-size: cover;
}

.img-ms1-08 {
    background: url('/image/ms1-05/thumb-ms1-08.jpg');
    background-size: cover;
}

.img-ms1-09 {
    background: url('/image/ms1-05/thumb-ms1-09.jpg');
    background-size: cover;
}

.img-ms1-11 {
    background: url('/image/ms1-05/final/thumb-ms1-11.jpg');
    background-size: cover;
}

.img-js-01 {
    background: url('/image/js/thumb-js-01.jpg');
    background-size: cover;
}

.img-js-02 {
    background: url('/image/js/thumb-js-02.jpg');
    background-size: cover;
}

.img-js-03 {
    background: url('/image/js/thumb-js-03.jpg');
    background-size: cover;
}

.img-js-04 {
    background: url('/image/js/thumb-js-04.jpg');
    background-size: cover;
}