프론트엔드/특강
특강7일
김곰댕
2021. 12. 7. 12:52
728x90
<!doctype html>
<html class="no-js" lang="ko">
<head>
<title>조선해양 경량소재 온라인라이브러리 MARIN CONVERGENCE MATERIALS CENTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="description" content="MARIN CONVERGENCE MATERIALS CENTER"/>
<meta name="keywords" content="MARIN CONVERGENCE MATERIALS CENTER"/>
<meta name='viewport' content='user-scalable=yes, width=device-width, target-densitydpi=medium-dpi'/>
<link rel="stylesheet" type="text/css" href="../css/swiper.css"/>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<!-- <link rel="stylesheet" type="text/css" href="../css/contents.css"/> -->
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/jquery-migrate-1.4.1.min.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/placeholders.min.js"></script>
<script src="../js/html5.js"></script>
<script src="../js/modernizr.custom.70111.js"></script>
<script src="../js/prefixfree.dynamic-dom.js"></script>
<script src="../js/jquery-ui.js"></script>
<!-- <script src="../js/script.js"></script> -->
<style>
/*herder*/
#header { height: 113px; background : #191919; position: relative; }
#header .logo{ position: absolute; left:44px; top:36px; width: 297px; height:41px; }
#header .logo a{ display:block; width: 100%; height:100%; background: url(../imgs/logo.png) no-repeat; background-size: 100%; text-indent: -9999px ; font-size: 0; }
.gnbWrap { position: absolute; left: 50%; top: 0; height: 114px; width: 760px; margin-left: -380px; transition: all 0.3s;}
.menu { display: flex; justify-content: center; }
.menu li a{ padding: 0 30px; display: flex; align-items: center; height:114px; font-size:17px ;color : #fff; }
.utility { position: absolute; right: 44px; top:40px; width:40px; height: 40px;}
.tLogin { display: block; width:40px; height: 40px; background: url(../imgs/ic-login.png) no-repeat; text-indent: -9999px; }
.allMenu { display:none; position: absolute; right:20px; top: 26px; width: 25px; height: 40px; }
.allMenu a { display: block; width: 100%; height: 100%; }
.allMenu a i { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 8px; }
.mainSearchArea { padding: 70px 0 78px; width: 50%; margin:0 auto; max-width: 750px; }
.sBox { border: 1px solid #191919; width: 100%; height: 75px; border-radius: 40px; padding: 0 40px; position: relative; display: flex; align-items: center; }
/*display:flex를 하면 자식에 적용*/
.sBox { display: flex; }
.sBox > * { border:none; background:none; }
/* flex에 0을 주고 뒤에 px를 하면 그 px만큼만
flex에 1을 주면 가득 채워줌*/
.sBox select { flex: 0 0 140px; height: 26px; }
.sBox input { flex: 1; height: 40px; padding-left: 10px; }
.sBox button { flex: 0 0 26px; height: 26px; background: url(../imgs/ic-search.png) no-repeat; text-indent: -9999px; }
.baseWidth { width: 1440px; margin: 0 auto; }
.mainCopy { font-family: Montserrat; text-align:center; }
/* line-height:1은 지금 font-size만큼 */
.mainCopy em { font-size: 20px; font-weight: 700; color: #afafaf; line-height: 1; display: block; margin-bottom: 25px; }
.mainCopy strong { font-size: 55px; font-weight: 700; color: #000; line-height: 1; letter-spacing: -0.25px; }
/* justify-content: space-between; : 공간을 알아서 배분함 */
.mList { padding-top: 128px; display: flex; justify-content: space-between; }
.mList > li { width: 448px; }
.mList > li.even { padding-top: 230px; }
/* 추가작업(20211207) */
.mainSlider { margin-top: 40px; padding: 0 0 50px 30px; }
.swiper-slide { width: 60%; }
a.ssLink { display: block; }
a.ssLink img { width: 100%; display: block; }
a.ssLink h3 { margin-top: 18px; font-size: 22px; font-weight: 700; color: #111; font-size: Montserrat; letter-spacing: -0.25px; }
a.ssLink p { color: #515151; line-height: 1.5; letter-spacing: -0.25px; padding-top: 10px; word-break: keep-all; }
/* //추가작업(20211207) */
/* .mList li ul.con li { } : 원래 .con li의 구조 */
.con li { padding-bottom: 95px; }
.con li a{ display: block; }
.con li a img { }
.con li a h3 { margin: 24px 0 0; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.25px; font-family: Montserrat; }
/* word-break: keep-all; : 줄바꿈시에 단어단위로 될 수 있게 */
.con li a p { color: #515151; line-height: 1.5; letter-spacing: -0.25; padding-top: 12px; word-break: keep-all; }
.moreDiv { text-align: center; }
.moreDiv a { font-size: 19px; color: #111; font-weight: 600; font-family: Montserrat; position: relative; display: inline-block; line-height: 1; padding: 9px 75px 15px 0; margin-bottom: 100px; }
/* before : 빈공간? 을 만들어서 동그라미 만든것 */
.moreDiv a:before { content: ""; display: block; width: 38px; height: 38px; border-radius: 20px; background: #e2e5f3; position: absolute; right: 0; top: 0; }
.moreDiv a::after { content: ""; display: block; width: 33px; height: 8px; background: url(../imgs/ic-arrow2.png) no-repeat; position: absolute; right: 23px; top:15px; }
.mView { display: none; }
/* 추가작업(20211207) */
#section2 { background: #f8f8f8; padding: 80px 0; }
/* > div : 바로 아래의 div를 선택 */
#section2 > div { display: flex; justify-content: space-between; }
/* flex-direction: column; 를 사용하면 x,y 축이 바뀜 /. x랑 y가 바껴서 align-items: center가 가로 가운데정렬이 되고 / justify-content: center가 세로 가운데정렬이됨*/
#section2 > div h2 { display: flex; align-items: center; flex-direction: column; justify-content: center;}
#section2 > div h2 em { font-size: 29px; color: #010411; letter-spacing: -0.5px; font-style: normal; font-weight: 500; }
/* line-height: 1.2; / 1.2em / em 은 상대적인거 (font-size인 70px에 상대적으로) */
#section2 > div h2 strong { font-size: 70px; color: #010411; letter-spacing: -0.5px; font-weight: 700; padding: 30px 0 50px; line-height: 1.2; }
#section2 > div h2 strong span { display: block; }
#section2 > div h2 i { font-size: 21px; color: #8b8b8b; letter-spacing: -0.38px; font-style: normal; font-weight: 700; font-family: Montserrat; }
#section2 > div ul { width: 700px; }
#section2 > div ul li { border-top: 1px solid #e2e2e2; }
/* 제일 위에는 border가 필요 없기 때문에 없애줌 */
#section2 > div ul li:nth-child(1) { border-top: none; }
#section2 > div ul li a { padding: 50px 0; display: flex; align-items: center; }
#section2 > div ul li a span:nth-child(1) { padding-left: 14px; flex: 0 0 250px; font-size: 23px; color: #12279e; font-weight: 700; }
#section2 > div ul li a span:nth-child(2) { font-size: 23px; color: #474747; }
#section2 > div ul li a span:nth-child(2) strong { display: block; }
#section2 > div ul li a span:nth-child(2) em { font-size: 19px; }
#section3 { padding: 100px 0 140px; }
#section3 > div h2 { font-size: 40px; font-weight: 500; margin-bottom: 30px; }
#section3 > div div { height: 171px; background: #000 url(../imgs/bg-alrim.jpg) no-repeat right 215px top 0; position: relative; }
#section3 > div div p { height: 100%; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; color: #fff; padding-left: 44px; display: flex; align-items: center; }
#section3 > div div p span{ margin-right: 6px; }
#section3 > div div a { position: absolute; right: 50px; bottom: 28px; padding-right: 18px; font-size: 13px; color: #fff; font-weight: normal; line-height: 1; display: inline-block; }
#section3 > div div a::after { content: ""; width: 7px; height: 11px; background: url(../imgs/ic-arrow.png) no-repeat; position: absolute; right: 0; top: 0; }
.amList { }
.amList li { border-bottom: 1px solid #d6d6d6; }
.amList li a { padding: 30px 0; display: flex; align-items: center; }
.amList li a em { font-style: normal; flex: 0 0 130px; padding-left: 19px; position: relative; font-weight: 500; color: #000; font-size: 18px; }
.amList li a em::before { content: ""; display: block; width: 7px; height: 7px; background: #000; border-radius: 50%; position: absolute; left: 0; top:50%; margin-top: -3.5px; }
.amList li a strong { font-size: 19px; color: #696969; flex: 1; font-weight: 400; }
.amList li a i { font-style: normal; color: #919191; font-size: 18px; margin-right: 49px; }
#footer { height: 70px; background: #1a1a1c; display: flex; justify-content: space-between; align-items: center; }
#footer p { padding-left: 40px; font-size: 12px; letter-spacing: 0.75px; color: #858585; }
#footer div { padding-right: 45px; }
#footer div a { float: left; padding: 0 12px; color: #e8e8e9; font-weight: 300; position: relative; font-size: 12px; line-height: 1; letter-spacing: 0.25px; }
#footer div a::after {content: ""; display: block; width: 1px; height: 9px; background: #4e4e50; position: absolute; right: 0; top:1px }
#footer div a:nth-child(2)::after { display: none; }
/* //추가작업(20211207) */
/* max-width는 값이 큰거부터 적어야 하지만 min-width는 값이 작은거부터 적어야함 (보통 min-width는 모바일을 기준으로 할때 많이 사용) */
/*미디어쿼리*/
/* 추가작업 (20211207) */
@media only screen and (max-width: 1465px) {
.baseWidth { width: 100%; }
.mList > li { width: 33.3333%; margin: 0 15px; }
.con li a img { max-width: 100%; }
}
/* //추가작업(20211207) */
@media only screen and (max-width: 1280px) {
/* 바뀌는속성만 넣으면됨 */
.gnbWrap { margin-left: -250px;}
/* 추가작업 (20211207) */
#section2 { padding: 50px 0 30px; }
/* > div : 바로 아래의 div를 선택 */
#section2 > div { display: block; }
#section2 > div h2 em { font-size: 20px; }
#section2 > div h2 strong { font-size: 50px; padding: 20px 0 30px; }
#section2 > div h2 strong span { display: block; }
#section2 > div h2 i { font-size: 15px; }
#section2 > div ul { width: auto; margin-top: 40px; padding:0 30px; }
#section2 > div ul li { border-top: 1px solid #e2e2e2; }
/* 제일 위에는 border가 필요 없기 때문에 없애줌 */
#section2 > div ul li:nth-child(1) { border-top: none; }
#section2 > div ul li a { padding: 20px 0; }
#section2 > div ul li a span:nth-child(1) { padding-left: 0; flex: 0 0 170px; font-size: 16px; }
#section2 > div ul li a span:nth-child(2) { font-size: 16px; }
#section2 > div ul li a span:nth-child(2) strong { display: block; }
#section2 > div ul li a span:nth-child(2) em { font-size: 14px; }
#section3 { padding: 50px 30px 60px; }
#section3 > div h2 { font-size: 30px; margin-bottom: 25px; }
#section3 > div div { height: 171px; background-position: right 10px top 0; }
#section3 > div div p { font-size: 17px; padding-left: 40px; align-items: flex-start; justify-content:center; flex-direction: column; }
#section3 > div div a { right: 25px; bottom: 15px; }
.amList li a { padding: 20px 0; }
.amList li a em { flex: 0 0 130px; padding-left: 8px;font-size: 14px; }
.amList li a em::before { width: 4px; height: 4px;margin-top: -2px; }
.amList li a strong { font-size: 14px; }
.amList li a i { font-size: 12px; margin-right: 0px; }
/* //추가작업(20211207) */
}
@media only screen and (max-width: 1024px) {
#header { height: 75px; }
#header .logo{ left:20px; top:20px; width: 220px; }
.gnbWrap { display: none; }
.allMenu { display: block; }
.utility { top: 24px; }
/* 추가작업 (20211207) */
.mainSearchArea { padding: 50px 0 58px; width: 90%; max-width: 90%; }
.mainCopy em { font-size: 16px; margin-bottom: 15px; }
.mainCopy strong { font-size: 35px; }
/* //추가작업(20211207) */
}
/* 추가작업(20211207) */
@media only screen and (max-width: 760px) {
.pcView { display: none; }
.mView { display: block; }
#footer { height: auto; padding: 30px 0; justify-content: center; flex-direction: column; }
#footer p { padding-left: 0; padding-bottom: 10px; }
#footer div { padding-right: 0; }
}
/* //추가작업(20211207) */
</style>
</head>
<body>
<div id = "wrap">
<header id = "header">
<h1 class = "logo">
<a href = "#n">조선해양 경량소재 온라인라이브러리</a>
</h1>
<div class = "gnbWrap">
<div id = "top_menu">
<div class = "menu_wrap">
<ul class = "menu">
<li class = "first_mm mn1">
<a href = "#n" class ="mm1">소재정보</a>
</li>
<li class = "mn2">
<a href = "#n" class ="mm2">회원사정보</a>
</li>
<li class = "mn3">
<a href = "#n" class ="mm3">지식정보</a>
</li>
<li class = "mn4">
<a href = "#n" class ="mm4">알림마당</a>
</li>
<li class = "mn5">
<a href = "#n" class ="mm5">센터소개</a>
</li>
</ul>
</div>
</div>
</div>
<div class="gnbOverBg"><div></div></div>
<div class="utility">
<a href="#m" class="tLogin">로그인</a>
</div>
<div class="allMenu">
<a href="#n">
<!-- <i> : 글자를 이태릭체로 -->
<i></i><i></i><i></i>
</a>
</div>
</header>
<div id = "container">
<!-- 검색영역: start -->
<div class = "mainSearchArea">
<form>
<fieldset>
<legend>검색영역</legend>
<div class = "sBox">
<select class = "selType">
<option>소재 정보 전체</option>
</select>
<input type = "text" class="inpSearch">
<button class=btnSearch>검색</button>
</div>
</fieldset>
</form>
</div>
<!-- 검색영역: end-->
<section id = "section1">
<div class = "baseWidth">
<h2 class = "mainCopy">
<em>SERVICE</em>
<strong>MARINE CONVERGENCE MATRERIALS CENTER</strong>
</h2>
<ul class = "mList pcView">
<li>
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img1.jpg" alt>
<h3>섬유소재 TEXTILE MATERIALS</h3>
<p>
섬유소재정보은행은 국가정보자원으로서
섬유소재정보(물성, 공정, 기술 등)를 수집·가공·생성하여 DB화하고,
이를 제공함으로써 소재의 개발 및 사업화를 지원
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img4.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
<li class = "even">
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img2.jpg" alt>
<h3>플라스틱 PLASTIC MATERIALS</h3>
<p>
플라스틱소재분야 산·학·연에서 요구되는 공정정보·물성정보·지식정보
등의 소재정보를 온라인 및 오프라인으로 제공하고
소재응용분야(수요기업 등)에서 요구되는 부품 및 제품화에 필요한
소재정보를 공유
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img5.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
<li class>
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img3.jpg" alt>
<h3>플라스틱 PLASTIC MATERIALS</h3>
<p>
플라스틱소재분야 산·학·연에서 요구되는 공정정보·물성정보·지식정보
등의 소재정보를 온라인 및 오프라인으로 제공하고
소재응용분야(수요기업 등)에서 요구되는 부품 및 제품화에 필요한
소재정보를 공유
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img6.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
</ul>
<!-- 추가작업(20211207) -->
<!-- 모바일 슬라이드 -->
<div class ="mView mainSlider">
<!-- swiper -->
<div class = "swiper-container">
<div class = "swiper-wrapper">
<div class = "swiper-slide">
<a href="#n" class="ssLink">
<img src= "../imgs/main-img1.jpg" alt>
<h3>섬유소재 TEXTILE MATERIALS</h3>
<p>
섬유소재정보은행은 국가정보자원으로서
섬유소재정보(물성, 공정, 기술 등)를 수집·가공·생성하여 DB화하고,
이를 제공함으로써 소재의 개발 및 사업화를 지원
</p>
</a>
</div>
<div class = "swiper-slide">
<a href="#n" class="ssLink">
<img src= "../imgs/main-img2.jpg" alt>
<h3>섬유소재 TEXTILE MATERIALS</h3>
<p>
섬유소재정보은행은 국가정보자원으로서
섬유소재정보(물성, 공정, 기술 등)를 수집·가공·생성하여 DB화하고,
이를 제공함으로써 소재의 개발 및 사업화를 지원
</p>
</a>
</div>
<div class = "swiper-slide">
<a href="#n" class="ssLink">
<img src= "../imgs/main-img3.jpg" alt>
<h3>섬유소재 TEXTILE MATERIALS</h3>
<p>
섬유소재정보은행은 국가정보자원으로서
섬유소재정보(물성, 공정, 기술 등)를 수집·가공·생성하여 DB화하고,
이를 제공함으로써 소재의 개발 및 사업화를 지원
</p>
</a>
</div>
</div>
</div>
<!-- //추가작업(20211207) -->
<!-- //swiper -->
</div>
<!-- //모바일 슬라이드 -->
<div class ="moreDiv">
<a href ="#n">view more</a>
</div>
</div>
</section>
<section id = "section2">
<div class ="baseWidth">
<h2 class="libraryTitle">
<em>소재개발 중소기업의 종합지원을 위한</em>
<strong>
<span>조선해양 소재종합</span>
<span>온라인라이브러리</span>
</strong>
<i>MARINE CONVERGENCE MATRERIALS CENTER</i>
</h2>
<ul class = "libraryCon">
<li>
<a href ="#n">
<span>최신뉴스</span>
<span>
<!-- <strong>,<em>: 강조하고 싶을때 사용, 좀더 강한건 strong -->
<strong>국내 최대 소재종합 라이브러리</strong>
<em>5분 만에 코로나 9.9% 살균 필터</em>
</span>
</a>
</li>
<li>
<a href ="#n">
<span>기술 · 동향시장</span>
<span>
<strong>온라인라이브러리 기술 시장</strong>
<em>형상 기억 폴리우레탄 마감에 의한 약모 직물</em>
</span>
</a>
</li>
<li>
<a href ="#n">
<span>특허정보</span>
<span>
<strong>소재 관련 특허 요약</strong>
<em>에폭시수지 조성물, 그 용도 및 에폭시 수지</em>
</span>
</a>
</li>
</ul>
</div>
</section>
<section id = "section3">
<div class = "baseWidth am">
<h2>알림마당</h2>
<div>
<p>
<span>MARINE</span>
<span>CONVERGENCE</span>
<span>MATERIALS</span>
<span>CENTER</span>
</p>
<a href = "#n">전체보기</a>
</div>
<ul class = "amList">
<li>
<a href= "#n">
<em>공지사항</em>
<strong>화학소재정보은행 Newsletter Vol.141 (2021년 9월)</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>디지털 화학소재 혁신을 위한 온라인 심포지엄 개최 안내</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>[물성DB] 화학소재 물성DB는 어떤 정보들을 제공하나요?</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>심층 기술동향 보고서는 어떤 내용이 주로 실려 있나요?</strong>
<i>2021.09.01</i>
</a>
</li>
</ul>
</div>
</section>
</div>
<footer id = "footer">
<p>COPYRIGHT(C) 2021 MCMC RESERVED</p>
<div>
<a href="#n">개인정보처리방침</a>
<a href="#n">이용약관</a>
</div>
</footer>
</div>
<!-- 추가작업(20211207) -->
<script src="http://unpkg.com/swiper@6.3.4/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView : 'auto',
spaceBetween : 30,
});
</script>
<!-- 추가작업(20211207) -->
</body>
</html>코드분석
<head>
<style>
<style>
/*herder*/
#header { height: 113px; background : #191919; position: relative; }
#header .logo{ position: absolute; left:44px; top:36px; width: 297px; height:41px; }
#header .logo a{ display:block; width: 100%; height:100%; background: url(../imgs/logo.png) no-repeat; background-size: 100%; text-indent: -9999px ; font-size: 0; }
.gnbWrap { position: absolute; left: 50%; top: 0; height: 114px; width: 760px; margin-left: -380px; transition: all 0.3s;}
.menu { display: flex; justify-content: center; }
.menu li a{ padding: 0 30px; display: flex; align-items: center; height:114px; font-size:17px ;color : #fff; }
.utility { position: absolute; right: 44px; top:40px; width:40px; height: 40px;}
.tLogin { display: block; width:40px; height: 40px; background: url(../imgs/ic-login.png) no-repeat; text-indent: -9999px; }
.allMenu { display:none; position: absolute; right:20px; top: 26px; width: 25px; height: 40px; }
.allMenu a { display: block; width: 100%; height: 100%; }
.allMenu a i { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 8px; }
.mainSearchArea { padding: 70px 0 78px; width: 50%; margin:0 auto; max-width: 750px; }
.sBox { border: 1px solid #191919; width: 100%; height: 75px; border-radius: 40px; padding: 0 40px; position: relative; display: flex; align-items: center; }
/*display:flex를 하면 자식에 적용*/
.sBox { display: flex; }
.sBox > * { border:none; background:none; }
/* flex에 0을 주고 뒤에 px를 하면 그 px만큼만
flex에 1을 주면 가득 채워줌*/
.sBox select { flex: 0 0 140px; height: 26px; }
.sBox input { flex: 1; height: 40px; padding-left: 10px; }
.sBox button { flex: 0 0 26px; height: 26px; background: url(../imgs/ic-search.png) no-repeat; text-indent: -9999px; }
.baseWidth { width: 1440px; margin: 0 auto; }
.mainCopy { font-family: Montserrat; text-align:center; }
/* line-height:1은 지금 font-size만큼 */
.mainCopy em { font-size: 20px; font-weight: 700; color: #afafaf; line-height: 1; display: block; margin-bottom: 25px; }
.mainCopy strong { font-size: 55px; font-weight: 700; color: #000; line-height: 1; letter-spacing: -0.25px; }
/* justify-content: space-between; : 공간을 알아서 배분함 */
.mList { padding-top: 128px; display: flex; justify-content: space-between; }
.mList > li { width: 448px; }
.mList > li.even { padding-top: 230px; }
.mainSlider { margin-top: 40px; padding: 0 0 50px 30px; }
.swiper-slide { width: 60%; }
a.ssLink { display: block; }
a.ssLink img { width: 100%; display: block; }
a.ssLink h3 { margin-top: 18px; font-size: 22px; font-weight: 700; color: #111; font-size: Montserrat; letter-spacing: -0.25px; }
a.ssLink p { color: #515151; line-height: 1.5; letter-spacing: -0.25px; padding-top: 10px; word-break: keep-all; }
/* .mList li ul.con li { } : 원래 .con li의 구조 */
.con li { padding-bottom: 95px; }
.con li a{ display: block; }
.con li a img { }
.con li a h3 { margin: 24px 0 0; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.25px; font-family: Montserrat; }
/* word-break: keep-all; : 줄바꿈시에 단어단위로 될 수 있게 */
.con li a p { color: #515151; line-height: 1.5; letter-spacing: -0.25; padding-top: 12px; word-break: keep-all; }
.moreDiv { text-align: center; }
.moreDiv a { font-size: 19px; color: #111; font-weight: 600; font-family: Montserrat; position: relative; display: inline-block; line-height: 1; padding: 9px 75px 15px 0; margin-bottom: 100px; }
/* before : 빈공간? 을 만들어서 동그라미 만든것 */
.moreDiv a:before { content: ""; display: block; width: 38px; height: 38px; border-radius: 20px; background: #e2e5f3; position: absolute; right: 0; top: 0; }
.moreDiv a::after { content: ""; display: block; width: 33px; height: 8px; background: url(../imgs/ic-arrow2.png) no-repeat; position: absolute; right: 23px; top:15px; }
.mView { display: none; }
/* 추가작업(20211207) */
#section2 { background: #f8f8f8; padding: 80px 0; }
/* > div : 바로 아래의 div를 선택 */
#section2 > div { display: flex; justify-content: space-between; }
/* flex-direction: column; 를 사용하면 x,y 축이 바뀜 /. x랑 y가 바껴서 align-items: center가 가로 가운데정렬이 되고 / justify-content: center가 세로 가운데정렬이됨*/
#section2 > div h2 { display: flex; align-items: center; flex-direction: column; justify-content: center;}
#section2 > div h2 em { font-size: 29px; color: #010411; letter-spacing: -0.5px; font-style: normal; font-weight: 500; }
/* line-height: 1.2; / 1.2em / em 은 상대적인거 (font-size인 70px에 상대적으로) */
#section2 > div h2 strong { font-size: 70px; color: #010411; letter-spacing: -0.5px; font-weight: 700; padding: 30px 0 50px; line-height: 1.2; }
#section2 > div h2 strong span { display: block; }
#section2 > div h2 i { font-size: 21px; color: #8b8b8b; letter-spacing: -0.38px; font-style: normal; font-weight: 700; font-family: Montserrat; }
#section2 > div ul { width: 700px; }
#section2 > div ul li { border-top: 1px solid #e2e2e2; }
/* 제일 위에는 border가 필요 없기 때문에 없애줌 */
#section2 > div ul li:nth-child(1) { border-top: none; }
#section2 > div ul li a { padding: 50px 0; display: flex; align-items: center; }
#section2 > div ul li a span:nth-child(1) { padding-left: 14px; flex: 0 0 250px; font-size: 23px; color: #12279e; font-weight: 700; }
#section2 > div ul li a span:nth-child(2) { font-size: 23px; color: #474747; }
#section2 > div ul li a span:nth-child(2) strong { display: block; }
#section2 > div ul li a span:nth-child(2) em { font-size: 19px; }
#section3 { padding: 100px 0 140px; }
#section3 > div h2 { font-size: 40px; font-weight: 500; margin-bottom: 30px; }
#section3 > div div { height: 171px; background: #000 url(../imgs/bg-alrim.jpg) no-repeat right 215px top 0; position: relative; }
#section3 > div div p { height: 100%; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; color: #fff; padding-left: 44px; display: flex; align-items: center; }
#section3 > div div p span{ margin-right: 6px; }
#section3 > div div a { position: absolute; right: 50px; bottom: 28px; padding-right: 18px; font-size: 13px; color: #fff; font-weight: normal; line-height: 1; display: inline-block; }
#section3 > div div a::after { content: ""; width: 7px; height: 11px; background: url(../imgs/ic-arrow.png) no-repeat; position: absolute; right: 0; top: 0; }
.amList { }
.amList li { border-bottom: 1px solid #d6d6d6; }
.amList li a { padding: 30px 0; display: flex; align-items: center; }
.amList li a em { font-style: normal; flex: 0 0 130px; padding-left: 19px; position: relative; font-weight: 500; color: #000; font-size: 18px; }
.amList li a em::before { content: ""; display: block; width: 7px; height: 7px; background: #000; border-radius: 50%; position: absolute; left: 0; top:50%; margin-top: -3.5px; }
.amList li a strong { font-size: 19px; color: #696969; flex: 1; font-weight: 400; }
.amList li a i { font-style: normal; color: #919191; font-size: 18px; margin-right: 49px; }
#footer { height: 70px; background: #1a1a1c; display: flex; justify-content: space-between; align-items: center; }
#footer p { padding-left: 40px; font-size: 12px; letter-spacing: 0.75px; color: #858585; }
#footer div { padding-right: 45px; }
#footer div a { float: left; padding: 0 12px; color: #e8e8e9; font-weight: 300; position: relative; font-size: 12px; line-height: 1; letter-spacing: 0.25px; }
#footer div a::after {content: ""; display: block; width: 1px; height: 9px; background: #4e4e50; position: absolute; right: 0; top:1px }
#footer div a:nth-child(2)::after { display: none; }
/* //추가작업(20211207) */
/* max-width는 값이 큰거부터 적어야 하지만 min-width는 값이 작은거부터 적어야함 (보통 min-width는 모바일을 기준으로 할때 많이 사용) */
/*미디어쿼리*/
/* 추가작업 (20211207) */
@media only screen and (max-width: 1465px) {
.baseWidth { width: 100%; }
.mList > li { width: 33.3333%; margin: 0 15px; }
.con li a img { max-width: 100%; }
}
/* //추가작업(20211207) */
@media only screen and (max-width: 1280px) {
/* 바뀌는속성만 넣으면됨 */
.gnbWrap { margin-left: -250px;}
/* 추가작업 (20211207) */
#section2 { padding: 50px 0 30px; }
/* > div : 바로 아래의 div를 선택 */
#section2 > div { display: block; }
#section2 > div h2 em { font-size: 20px; }
#section2 > div h2 strong { font-size: 50px; padding: 20px 0 30px; }
#section2 > div h2 strong span { display: block; }
#section2 > div h2 i { font-size: 15px; }
#section2 > div ul { width: auto; margin-top: 40px; padding:0 30px; }
#section2 > div ul li { border-top: 1px solid #e2e2e2; }
/* 제일 위에는 border가 필요 없기 때문에 없애줌 */
#section2 > div ul li:nth-child(1) { border-top: none; }
#section2 > div ul li a { padding: 20px 0; }
#section2 > div ul li a span:nth-child(1) { padding-left: 0; flex: 0 0 170px; font-size: 16px; }
#section2 > div ul li a span:nth-child(2) { font-size: 16px; }
#section2 > div ul li a span:nth-child(2) strong { display: block; }
#section2 > div ul li a span:nth-child(2) em { font-size: 14px; }
#section3 { padding: 50px 30px 60px; }
#section3 > div h2 { font-size: 30px; margin-bottom: 25px; }
#section3 > div div { height: 171px; background-position: right 10px top 0; }
#section3 > div div p { font-size: 17px; padding-left: 40px; align-items: flex-start; justify-content:center; flex-direction: column; }
#section3 > div div a { right: 25px; bottom: 15px; }
.amList li a { padding: 20px 0; }
.amList li a em { flex: 0 0 130px; padding-left: 8px;font-size: 14px; }
.amList li a em::before { width: 4px; height: 4px;margin-top: -2px; }
.amList li a strong { font-size: 14px; }
.amList li a i { font-size: 12px; margin-right: 0px; }
/* //추가작업(20211207) */
}
@media only screen and (max-width: 1024px) {
#header { height: 75px; }
#header .logo{ left:20px; top:20px; width: 220px; }
.gnbWrap { display: none; }
.allMenu { display: block; }
.utility { top: 24px; }
/* 추가작업 (20211207) */
.mainSearchArea { padding: 50px 0 58px; width: 90%; max-width: 90%; }
.mainCopy em { font-size: 16px; margin-bottom: 15px; }
.mainCopy strong { font-size: 35px; }
/* //추가작업(20211207) */
}
/* 추가작업(20211207) */
@media only screen and (max-width: 760px) {
.pcView { display: none; }
.mView { display: block; }
#footer { height: auto; padding: 30px 0; justify-content: center; flex-direction: column; }
#footer p { padding-left: 0; padding-bottom: 10px; }
#footer div { padding-right: 0; }
}
/* //추가작업(20211207) */
</style>
.mainSlider { margin-top: 40px; padding: 0 0 50px 30px; }
.swiper-slide { width: 60%; }
a.ssLink { display: block; }
a.ssLink img { width: 100%; display: block; }
a.ssLink h3 {
margin-top: 18px;
font-size: 22px;
font-weight: 700;
color: #111;
font-size: Montserrat;
letter-spacing: -0.25px;
}
a.ssLink p {
color: #515151;
line-height: 1.5;
letter-spacing: -0.25px;
padding-top: 10px;
word-break: keep-all;
}모바일 슬라이더에 관한 css
#section2 { background: #f8f8f8; padding: 80px 0; }
#section2 > div { display: flex; justify-content: space-between; }
#section2 > div h2 {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#section2 > div h2 em {
font-size: 29px;
color: #010411;
letter-spacing: -0.5px;
font-style: normal;
font-weight: 500;
}
#section2 > div h2 strong {
font-size: 70px;
color: #010411;
letter-spacing: -0.5px;
font-weight: 700;
padding: 30px 0 50px;
line-height: 1.2;
}
#section2 > div h2 strong span { display: block; }
#section2 > div h2 i {
font-size: 21px;
color: #8b8b8b;
letter-spacing: -0.38px;
font-style: normal;
font-weight: 700;
font-family: Montserrat;
}flex-direction
flex-direction 속성은 요소의 정렬 방향을 정의한다.
flex-direction : column - 요소의 정렬을 세로로 설정
flex-direction : row - 요소의 정렬을 가로로 설정
#section2 > div ul { width: 700px; }
#section2 > div ul li { border-top: 1px solid #e2e2e2; }
#section2 > div ul li:nth-child(1) { border-top: none; }
#section2 > div ul li a { padding: 50px 0; display: flex; align-items: center; }
#section2 > div ul li a span:nth-child(1) {
padding-left: 14px;
flex: 0 0 250px;
font-size: 23px;
color: #12279e;
font-weight: 700;
}
#section2 > div ul li a span:nth-child(2) { font-size: 23px; color: #474747; }
#section2 > div ul li a span:nth-child(2) strong { display: block; }
#section2 > div ul li a span:nth-child(2) em { font-size: 19px; }
728x90