03-Dooosan-반응형

HTML

<div id="content">
	<div class="content_cover">
		<ul class="cf">
			<li>
				<a href="#" data-text="계열사">
					<img src="./images/ico_int_1.png" alt="" class="leave" />
					<img src="./images/ico_int_1_on.gif" alt="" class="hover" />
				</a>
			</li>
			<li>
				<a href="#" data-text="두산뉴스룸">
					<img src="./images/ico_int_2.png" alt="" class="leave" />
					<img src="./images/ico_int_2_on.gif" alt="" class="hover" />
				</a>
			</li>
			<li>
				<a href="#" data-text="브랜드 활약상">
					<img src="./images/ico_int_3.png" alt="" class="leave" />
					<img src="./images/ico_int_3_on.gif" alt="" class="hover" />
				</a>
			</li>
			<li>
				<a href="#" data-text="사업장 위치">
					<img src="./images/ico_int_4.png" alt="" class="leave" />
					<img src="./images/ico_int_4_on.gif" alt="" class="hover" />
				</a>
			</li>
		</ul>
	</div>
	<!-- .content_cover -->
</div>
<!-- #content -->
<div id="media_center">
	<div class="media_cover">
		<h1 class="title">미디어센터</h1>
		<ul class="cf">
			<li>
				<a href="#">
					<img src="./images/0dc4e114-18c5-4730-a6f5-b562cf92c806.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] 두산인프라코어, 드론측량부터 장비 운용까지...</p>
					<img src="./images/ico_over_arrow.png" alt="" class="arrow" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/7fe5a7e3-f03e-42bd-9ab6-952c0708aab0.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] 두산중공업, 시노펙스와 손잡고 친환경 수처리</p>
					<img src="./images/ico_over_arrow.png" alt="" class="arrow" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/8cfd1b42-e65e-4f32-b7ad-0cbe695e741c.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] 두산,'파워젠 인터내셔널 2019' 참가</p>
					<img src="./images/ico_over_arrow.png" alt="" class="arrow" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/18dfd093-6a9d-48f6-9da4-f9af62fcd702.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] 두산밥캣, 미국 미네소타에 글로벌 협업센터 설립...</p>
					<img src="./images/ico_over_arrow.png" alt="" class="arrow" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/47950c97-c3d7-45ff-be02-410a04d16d65.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] 두산, 인도네이사 현지에서 단독으로'두산테크데스크'</p>
					<img src="./images/ico_over_arrow.png" alt="" class="arrow" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/be2914e1-6eb0-4041-a39b-7be3052ec239.jpg" alt="" class="c_img" />
					<p class="text">[보도자료] (주)두산, 3개 은행과 함께 동반성장펀드 조성</p>
					<div class="arrow">
						<img src="./images/ico_over_arrow.png" alt="" />
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!-- .media_cover -->
</div>
<!-- #media_center -->
<div id="find">
	<div class="find_cover cf">
		<div class="find_left fl">
			<h1 class="what_find">무엇을 찾으시나요?</h1>
			<form action="#" method="post">
				<input type="text" name="search" id="search" value="" placeholder="검색어를 입력하세요." />
				<a href="#">
					<img src="./images/btn_search_arrow_black.png" alt="" />
				</a>
			</form>
		</div>
		<div class="find_right fl">
			<div class="right_cover">
				<ul>
					<li><a href="#">두산의 활약상</a></li>
					<li><a href="#">CI</a></li>
					<li><a href="#">사업영역</a></li>
					<li><a href="#">두산연강재단</a></li>
					<li><a href="#">굴착기</a></li>
					<li><a href="#">두산인프라코어</a></li>
					<li><a href="#">사회책임경영</a></li>
					<li><a href="#">주가정보</a></li>
					<li><a href="#">두산뉴스룸</a></li>
					<li><a href="#">인재상</a></li>
					<li><a href="#">채용공고</a></li>
					<li><a href="#">두산 스토리</a></li>
					<li><a href="#">두산모빌리티이노베이션</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- .find_cover -->
</div>
<!-- #find -->
<div id="footer">
	<div class="footer_cover cf">
		<div class="foot_left">
			<h1 class="f_logo cf">
				<img src="./images/logo_gnb.png" alt="" />
				<img src="./images/ico_youtube.png" alt="" class="on" />
				<span>&copy; 2019 (주)두산중공업</span>
			</h1>
		</div>
		<div class="foot_center">
			<ul class="cf">
				<li><a href="#">Contact is</a></li>
				<li><a href="#">사업장 위치</a></li>
				<li><a href="#">법적고지</a></li>
				<li><a href="#">이용약관</a></li>
				<li><a href="#">개인정보처리방침</a></li>
				<li><a href="#">사이트맵</a></li>
			</ul>
		</div>
		<div class="foot_right">
			<img src="./images/ico_youtube.png" alt="" />
		</div>
	</div>
	<!-- .footer_cover -->
</div>
<!-- #footer -->

@media screen and (max-width: 1500px) {
	.find_cover {
		width: 90%;
		padding: 0;
	}
}
/* 1400px */
@media screen and (max-width: 1400px) {
	#header .header_cover {
		width: 90%;
	}

	.full_menu .full_cover {
		width: 90%;
	}

	.media_cover {
		width: 90%;
	}

	#content .content_cover {
		width: 90%;
	}

	.find_cover {
		width: 90%;
		padding: 0;
	}

	.footer_cover {
		width: 90%;
	}

	.find_cover .find_left form #search {
		width: 90%;
		margin: 0 0 0 5%;
	}

	.find_cover .find_left .what_find {
		margin-left: 5%;
	}

	.find_cover .find_left form a {
		right: 50px;
	}
}
/* 1330px */
@media screen and (max-width: 1330px) {
	#header {
		height: auto;
	}
	.full_menu {
		display: none;
	}

	.header_cover .logo {
		float: none;
		margin: 0 auto;
		padding: 20px 0;
	}

	.header_cover .logo a img {
		padding: 0;
	}

	.header_cover .nav {
		display: none;
	}
	.header_cover .logo + .mo {
		display: block;
	}

	.header_cover .gnb {
		display: none;
	}

	.slide_cover ul li a p.img_text {
		width: auto;
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 18px;
		text-align: center;
		word-break: keep-all;
	}

	.slide_btn {
		left: 50%;
		bottom: 20px;
		transform: translate(-50%, -50%);
	}

	.slide_cover ul li a .box {
		left: 15%;
		bottom: 13%;
		height: 100px;
	}

	.slide_cover ul li a .box.on {
		width: 100px;
	}

	.slide_cover ul li a h1.img_logo {
		width: auto;
		font-size: 30px;
		left: 5%;
	}

	.slide_cover ul li a h1.img_logo.on {
		top: 5%;
	}

	.slide_cover ul li a img.pc {
		display: none;
	}

	.slide_cover ul li a img.mo {
		display: block;
	}

	#find {
		height: auto;
	}

	.find_cover {
		padding: 0;
	}

	.find_cover .fl {
		float: none;
		width: 100%;
		height: auto;
		margin-top: 50px;
	}

	.find_cover .find_left .what_find {
		padding: 30px 0 0 30px;
		box-sizing: border-box;
	}

	.find_cover .find_left form #search {
		width: 90%;
		margin-left: 5%;
	}

	.find_cover .find_left form a {
		right: 8%;
	}

	.find_cover .find_right {
		float: none;
		width: 100%;
	}

	.footer_cover .foot_left {
		float: none;
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}

	.footer_cover .foot_center {
		float: none;
		width: 100%;
	}

	.footer_cover .foot_right {
		float: none;
		width: 10%;
	}

	.footer_cover .foot_left img {
		float: none;
		display: inline-block;
		width: 10%;
	}

	.footer_cover .foot_left img.on {
		display: inline-block;
		width: 8%;
		margin-left: 10px;
	}

	.footer_cover .foot_left span {
		display: none;
	}

	.footer_cover .foot_right {
		display: none;
	}
}

@media screen and (max-width: 1200px) {
	.media_cover ul {
		margin-top: 50px;
	}

	.media_cover ul li {
		width: 49.5%;
		margin: 0;
		height: 200px;
	}

	.media_cover ul li:nth-child(3n + 1) {
		margin: 0;
	}

	.media_cover ul li:nth-child(2n) {
		margin-left: 1%;
		margin-top: 1%;
	}

	.media_cover ul li:nth-child(2n + 1) {
		margin-top: 1%;
	}

	.media_cover ul li a .text {
		font-size: 14px;
	}

	.media_cover .title {
		font-size: 24px;
	}

	#content .content_cover ul li {
		width: 50%;
		line-height: normal;
		height: auto;
		margin-top: 20px;
	}

	#content .content_cover ul li a {
		color: transparent;
		height: auto;
		line-height: normal;
	}

	#content .content_cover ul li a img {
		position: static;
		transform: none;
	}

	#content .content_cover ul li a:after {
		content: attr(data-text);
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #000;
	}
}