모니터크기,해상도 따라서 라이브화면이 넘 다르게 보여요~

PC 레이아웃 서브페이지(project detail)-#01

안녕하세요, 쌤~답변 넘 도움되었어요 감사드립니다. ^^

쌤수업이 넘 좋아서 하나씩 다 듣고 포폴로 활용하려구해요.

현재 pc페이지 다 완성했는데, 맥북13.3/21인치 모니터 두개 라이브 화면이 너무 달라서 문의드립니다 ㅜㅜ

1. hiring 모달페이지 img 아래 margin-bottom: 30px준거 때문에 project detail 페이지 사진 사이가 떠서 margin-bottom:0 줘야하는데요. 맥북 13.3에서 라이브로보면 캡쳐와 같이 안맞아요. 하지만 21인치 모니터에서는 맞게 붙어 있습니다. 왜그런건가요?

혹시해서 hiring-photo img에 추가로 height: 100%를 주니 맥북에서도 사진 모서리가 맞아보이는데 비율도 통통하고..원래는 width만 주셨쟎아요.

또한, 13.3맥북에서는 headign h1도 2줄로 내려가게 되는데 실제 작업시 사양에따라 내려가게 냅두나요?

2. 전체적으로 문제가 라이브는 큰모니터로보고 코딩만 맥북13.3인치로하다가 피시끝나서 맥북으로 라이브 제대로보니 다른 섹션들 모두 마진탑이나 버튼들이 사진등이 짤리거나 겹쳐 있습니다..어떻게 해야할까요?

쌤수업 코딩은 똑같이 하고 큰모니터에서는 정상으로 보인다고해도 작은맥북에서 깨져보여서요.

맥북 해상도는 1280*600 으로 쓰고 있고

최대 1680으로 바꾸면 큰모니터처럼 거의 비슷하게 보이지만 그래도 마진등이 붙어있는등 또 눈아파서 볼수없구요.

13.3은 보통 노트북사이즈인데…작은해상도문제인건지…

3. 혹시 모든사이즈, 패딩 마진을 피시에서부터 %로 안줘서 그렇다고도 하는데 어떻게 pc페이지 정리를 해야할까요? 나중에 피시를 바꾸기넘 어렵다고 하던데 혹시 모바일 변환영상에서 피시를 %로 바꾸시나요? 알려주세용~

미리 감사드립니다. ^^

사진: 13.3 맥북에서 캡쳐한 모달, 섹션 페이지들.

사진: 21인치 모니터에서 정상적으로 보이는 캡쳐

index.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DesignWorks Architecture Agency</title>
<link rel="icon" href="images/favicon.png"><!-- 파비콘 넣는법 -->
<script src="https://kit.fontawesome.com/a69c137eb6.js" crossorigin="anonymous"></script>
<script src="js/jquery-2.1.4.js"></script>
<!-- Page Scroll Effects JS & CSS -->
<script src="./js/velovity/modernizr.js"></script>
<script src="./js/velovity/velocity.min.js"></script>
<script src="./js/velovity/velocity.ui.min.js"></script>
<script src="./js/velovity/main.js"></script>
<link rel="stylesheet" href="./js/velovity/velocity.css">
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Slick.js -->
<script src="js/slick/slick.min.js"></script>
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="js/slick/slick.css">
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->

<body data-hijacking="on" data-animation="none">
<div class="container"><!-- container -->
<!-- ########## section ########## -->
<section class="cd-section visible" id="home"><!-- ########## Section: home ########## -->
<div>
<div class="content">
<div class="home-inner">
<h3 class="welcome-text">You can do it <span>with CodingWorks<i class="fas fa-heart"></i></span></h3>
<div class="opacity-image"></div>
<div class="home-heading">
<span>Creative</span>
<span>Architecture</span>
<span>Specialists</span>
</div>
</div>
</div>
</div>
</section><!-- Section: home end-->
<section class="cd-section" id="about"><!-- ########## Section: about ########## -->
<div>
<div class="content">
<div class="about-inner">
<div class="about-items">
<div class="item">
<img src="images/careers-main-01.png" alt="career01">
<span>
<h3>Together we can make an impact</h3>
<p>
Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs.
</p>
</span>
</div>
<div class="item">
<img src="images/careers-main-02.png" alt="career02">
<span>
<h3>We’re always looking for talent</h3>
<p>
If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available.
</p>
</span>
</div>
<div class="item">
<img src="images/careers-main-03.png" alt="creer03">
<span>
<h3>Fellowship</h3>
<p>Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.</p>
</span>
</div>
</div>
</div>
</div>
</div>
</section><!-- Section: about end-->
<section class="cd-section" id="project"><!-- ########## Section: project ########## -->
<div>
<div class="content">
<div class="project-inner"><!-- project-inner-->
<!-- input type=radio 버튼은 안보임 -->
<input type="radio" name="tabmenu" id="tab1" checked> <!-- checked: 기본을 넣은 레디오만 체크로 보이게함 -->
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs"><!-- tabs -->
<div class="tab"><!-- tab1 -->
<div class="project-info" data-text="01"><!-- project-info--> <!-- 사용자정의속성 data-text:"보여지는 텍스트"-->
<h3>Project : Glass Wall Architecture</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ipsum consequuntur cum ad, eum deserunt atque est corporis iusto temporibus a dignissimos asperiores fugit! Saepe nemo ab molestiae facilis doloribus, corrupti quod, maxime mollitia odio tenetur deleniti suscipit optio rem?
</p>
<ul>
<li><b>Area</b> : 1670 m2</li>
<li><b>Completed Date </b>: September 2018</li>
<li><b>Architect</b> : Andrew Yu</li>
</ul>
<div class="detail">
<div><span>225</span>
WORKING DAY</div>
<div><span>320</span>
MEMBERS</div>
<div><span>3M</span>
BUDGET</div>
</div>
<a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a>
</div><!-- project-info end-->
<div class="project-photo"><!--project-photo1-->
<img src="images/project-main-01-01.jpg" alt="">
<img src="images/project-main-01-02.jpg" alt="">
<img src="images/project-main-01-03.jpg" alt="">
<img src="images/project-main-01-04.jpg" alt="">
</div>
</div>
<div class="tab"><!-- tab2 -->
<div class="project-info" data-text="02"><!-- project-info-->
<h3>Project : Hallway of Architecture</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea molestiae quae quas eligendi dicta vel fugiat, tempore amet eveniet assumenda quis, quidem ullam, in velit laborum nihil autem culpa rerum quaerat commodi unde eius quisquam. Provident perferendis quisquam doloribus magni neque dicta et eum vero.
</p>
<ul>
<li><b>Area</b> : 2345 m2</li>
<li><b>Completed Date </b>: April 2019</li>
<li><b>Architect</b> : Robert Matteus</li>
</ul>
<div class="detail">
<div><span>321</span>
WORKING DAY</div>
<div><span>420</span>
MEMBERS</div>
<div><span>8M</span>
BUDGET</div>
</div>
<a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a>
</div><!-- project-info end-->
<div class="project-photo"><!--project-photo2-->
<img src="images/project-main-02-01.jpg" alt="">
<img src="images/project-main-02-02.jpg" alt="">
<img src="images/project-main-02-03.jpg" alt="">
<img src="images/project-main-02-04.jpg" alt="">
</div>
</div>
<div class="tab"><!-- tab3-->
<div class="project-info" data-text="03"><!-- project-info-->
<h3>Project : Outside Stairs Architecture</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ipsum consequuntur cum ad, eum deserunt atque est corporis iusto temporibus a dignissimos asperiores fugit! Saepe nemo ab molestiae facilis doloribus, corrupti quod, maxime mollitia odio tenetur deleniti suscipit optio rem?
</p>
<ul>
<li><b>Area</b> : 1200 m2</li>
<li><b>Completed Date </b>: May 2020</li>
<li><b>Architect</b> : Christine Jung</li>
</ul>
<div class="detail">
<div><span>132</span>WORKING DAY</div>
<div><span>202</span>MEMBERS</div>
<div><span>5M</span>BUDGET</div>
</div>
<a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a>
</div><!-- project-info end-->
<div class="project-photo"><!--project photo3-->
<img src="images/project-main-03-01.jpg" alt="">
<img src="images/project-main-03-02.jpg" alt="">
<img src="images/project-main-03-03.jpg" alt="">
<img src="images/project-main-03-04.jpg" alt="">
</div>
</div>
</div><!-- tabs end-->
<div class="btn"><!-- btn -->
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div><!-- project-inner end-->
</div>
</div>
</section><!-- Section: project end-->
<section class="cd-section" id="plan"><!-- ########### Section: plan ######### -->
<div>
<div class="content">
<div class="plan-inner">
<div class="plan-feature">
<div class="plan-info">
<div class="plan-heading">
<h2>Planning<br> For the Next Project</h2>
<hr class="bar">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus error numquam animi quas architecto doloribus hic accusantium, officia accusamus fugiat quae rem reprehenderit repellat placeat vel, perspiciatis quia harum fugit eligendi nam. Fuga praesentium pariatur temporibus, natus, explicabo expedita quaerat magnam aliquid similique autem iure iste. Officiis repellat, repellendus.
</p>
</div>
<div class="plan-photo">
<img src="images/plan-main-01.jpg">
</div>
</div>
<div class="history-info">
<h2>History</h2>
<hr class="bar">
<div class="history-slider">
<div>
<h4>The Project <br>of Architect for the <span>2013</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2014</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2015</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2016</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2017</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2018</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2019</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2020</span></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="awards"><!-- ########## Section: awards ########## -->
<div>
<div class="content">
<div class="awards-inner">
<div class="about-awards">
<div class="about-heading">
<h2>2020<br>Architecture Award<br> Winner</h2>
<hr class="bar">
<p>
The mission of the Architecture MasterPrize (AMP) is
to advance the appreciation and exposure of quality
architectural design worldwide. The AMP architecture
award celebrates creativity and innovation in the fields
of architectural design, landscape architecture, and
interior design. Submissions from architects all around
the world are welcome.
</p>
<a class="view-awards" href="https://architectureprize.com/" target="_blank">View the awards</a>
</div>
</div>
<div class="victory-jump">
<img src="images/victory-jump.png" alt="victory">
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="location"><!-- ########## Section: location ########## -->
<div>
<div class="content">
<div class="location-inner">
<div class="feature">
<div class="office">
<div class="headquarters">
<b>CREATIVE DESGIN GROUP</b>
<h2>Headquarters</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima alias voluptatibus aspernatur accusamus sapiente esse quo iure voluptatem laudantium, tempore libero reprehenderit voluptate ipsam eum error mollitia sunt ducimus autem?
</p>
<span>
Address : Address: 309, New Cavendish St, EC1Y 3WK / Tel : 0800 214 5252
</span>
</div>
<div class="customer">
<b>THE PERFECT WAY</b>
<h2>Customer Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laboriosam accusamus tenetur dolore temporibus explicabo odio sint ullam officia porro. Amet eos molestiae omnis tenetur culpa iste non dignissimos expedita!
</p>
<span>Address : 11 Fifth Ave - New York, US / Tel : 0800 809 3400</span>
</div>
</div>
<div class="service">
<div class="service-item">
<i class="fas fa-leaf"></i>
<h3>Built and natural contexts</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam.
</p>
</div>
<div class="service-item">
<i class="fas fa-bullseye"></i>
<h3>Landscape design</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam.
</p>
</div>
<div class="service-item">
<i class="fas fa-cube"></i>
<h3>Every building site unique
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="contact"><!--########## Contact ########## -->
<div class="content">
<div class="contact-inner"><!--Contact Inner-->
<div class="contact-feature"><!--Contact feature-->
<div class="contact-form"><!--Contact-form-->
<h3><b>Contact</b>Us</h3>
<p>Feel free to ask for details, dont’save any questions.
</p>
<form class="send-box"><!--send-box-->
<label>Email<span>*</span></label>
<input type="email">
<label>Subject<span>*</span></label>
<input type="text">
<label>Message<span>*</span></label>
<textarea cols="30" rows="10"></textarea>
<!-- <input type="button" value="send message"> input type은 가상태그 못하니까 버튼태그사용-->
<button>send message</button>
</form>
</div>
<div class="contact-info"><!--contact-info-->
<h4>Our <b>Office</b></h4>
<ul>
<li>Address : Address: 309, New Cavendish St, EC1Y 3WK</li>
<li>Phone : 0800 214 5252</li>
<li>Email : designworks@designworks.com</li>
</ul>
<h4>Business <b>Hours</b></h4>
<ul>
<li><i class="far fa-clock"></i>Monday - Friday : 9am to 5pm</li>
<li><i class="far fa-clock"></i>Saturday : 9am to 2pm</li>
<li><i class="far fa-clock"></i>Sunday : Closed</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa debitis delectus fugit minus! Rem, quod rerum! Reiciendis sed doloremque totam natus! Consequatur voluptas reprehenderit, error excepturi nulla dolores odit fugit eaque! Laboriosam placeat consequuntur incidunt est autem quos harum labore expedita, nulla aperiam? Atque corrupti perferendis illum, sit ad distinctio?Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illum culpa numquam nobis fugiat corporis officia saepe soluta id distinctio?</p>
</div>
</div>
</div>
</div>
</section><!--Contact end-->

<header><!-- ########## Header ########## -->
<div class="gnb-inner"><!-- gnb-inner -->
<div class="logo"><!-- logo-->
<a href="#none"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="gnb"><!-- gnb -->
<div class="menu"><!-- menu -->
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">We design places, not projects.</div>
</div><!-- gnb end -->
<div class="trigger"><!--toggle button: active 추가는 responsive.css 제어는 jquery -->
<span></span>
<span></span>
<span></span>
</div><!-- trigger end-->
</div><!-- gnb-inner end-->
</header><!-- Header end -->
</div><!-- container end -->
<!-- Container end -->

<a href="#" class="gototop"><!-- ########## gototop ########## -->
<img src="images/gototop.png" alt="">
</a><!--a="#"" 문서의가장 탑상단!-->
<a href="#" class="btn_hiring"><!-- ########## btn-hiring ########## -->
<i class="fas fa-comment-dots"></i>
Hiring</a>

<nav><!-- ########## nav ########## -->
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav>
<!-- nav end -->
</body>
</html>

Project-detail.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project01: Design works</title>
<script src="https://kit.fontawesome.com/a69c137eb6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="modal project-detail"><!-- project-detail 마진없애려고 추가 -->
<div class="header"><!-- header -->
<div class="header-inner">
<div class="modal-display">+ Project Descriptions #01
</div>
</div>
</div>
<div class="hiring-main project-detail"><!--기존클래스 옆에 새 클래스를 추가 -->
<div class="hiring-heading">
<span>project</span>
<h1>We design complete environments</h1>
</div>
</div>
<article class="hiring-info"><!-- article 1 -->
<div class="center-parent">
<div class="center-child">
<h2></h2>
<p></p>
</div>
</div>
<div class="photo">
</div>
</article>
<article class="hiring-info"><!-- article 2 -->
<div class="photo"><img src="images/project-main-01-02.jpg" alt="">
</div>
<div class="center-parent">
<div class="center-child">
<h2>Today it is busily, loudly rebounding.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At iure labore cupiditate soluta rerum dolor itaque cumque molestias perferendis et odit, nulla veritatis eligendi rem unde accusamus? Sit voluptatum iste esse eveniet dolorem, beatae ab totam harum id explicabo quisquam tenetur repellendus libero eius aperiam? Eum explicabo voluptate optio possimus perspiciatis ea ipsum eos molestiae ut ducimus, tempora esse maxime, quis sunt ipsam aliquid delectus omnis, corrupti error hic! Iure magni natus nisi tenetur! Ipsum esse, molestias
</p>
</div>
</div>
</article>
<article class="hiring-info"><!-- article 3 -->
<div class="center-parent">
<div class="center-child">
<h2>invisible city was a space of cybernetic</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A voluptate quod impedit consequuntur enim aliquam, debitis libero, sapiente ab, suscipit porro modi omnis mollitia? Praesentium asperiores voluptates accusamus. Vitae quae nulla exercitationem quod necessitatibus doloribus temporibus consequatur doloremque molestias assumenda, ducimus modi eum sint libero reiciendis a deleniti repudiandae magni? Dicta omnis odio autem eius, excepturi tempore rerum?
</p>
</div>
</div>
<div class="photo"><img src="images/project-main-01-03.jpg" alt="">
</div>
</article>
<article class="hiring-info"><!-- article 4 -->
<div class="photo"><img src="images/project-main-01-04.jpg" alt="">
</div>
<div class="center-parent">
<div class="center-child">
<h2>This work-network shared in Zoom-mode</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium temporibus sunt esse earum tempore deleniti provident est aut molestiae, quidem qui deserunt fuga tenetur veritatis, incidunt dolores commodi iste. Dolores earum voluptates rem saepe, voluptatum voluptatibus, praesentium deserunt, sapiente nulla nam veniam distinctio odit rerum accusamus delectus molestias esse temporibus dicta nemo.
</p>
</div>
</div>
</article>
<article class="hiring-slogan project-slogan"><!--이미지 마진없애려고 클래스추가-->
<p><!-- "" before로 넣으려고 p 사용-->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione fugit magnam quidem reprehenderit cumque soluta quam? Dignissimos reiciendis eum distinctio inventore odio. Reprehenderit laborum illum dolore accusamus doloremque at sed.
</p>
</article>
</div>
</body>
</html>

style.css

/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;300;400&display=swap');

/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* ################+### Reset CSS ################### */

* {
box-sizing: border-box;
}

ul {
list-style: none;
padding: 0;
}

a {
text-decoration: none;
}

/* ################### Default CSS ################### */

body {
font-family: 'Montserrat', sans-serif;
color: #222;
font-size: 15px;/*상대적으로 늘어나니 em*/
margin: 0;
height: 100vh;
background-color: #fff;

}

/* ################### Entire Layout ################### */
.cd-section {
height: 100vh;

}

.cd-section>div {
height: 100%;
position: relative;

}

.content {
background-color: #ddd;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 80px);
left: 20px;
bottom: 20px;
overflow: hidden;
}

/* ################### Header ################### */

header {
position: fixed;
/*position fixed 인라인됨*/
width: 100%;
top: 0;
left: 0;
z-index: 10;
}

.gnb-inner {
/* border: 1px solid #000; */
width: calc(100% - 40px);
margin: auto;
height: 60px;
line-height: 60px;
}

.logo {
float: left;
}

.logo img {
padding-top: 17px;
}

.gnb {
float: right;
}

.gnb a {}

.menu {
display: none;
}

.slogan {
font-size: 18px;
font-style: italic;
}

.trigger {
display: none;
}

/* ################### Hiring Button ################### */

.btn_hiring {
position: fixed;
right: 50px;
bottom: 50px;
color: #fff;
background-color: #000;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
transition: 0.5s;
}
.fa-comment-dots{
transform: rotateY(180deg);
margin-right: 5px;
}
.btn_hiring:active{/*버튼 누르면 작아지는 액티브 가상클래스*/
transform: scale(0);
}
/* ################### Home ###################### */
.home-inner{
background-color: #fff;
height: 100%;
}
/* 애니메이션: slideup 1 */
.welcome-text{
font-family: 'Source Sans Pro', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: 300;
text-align: center;
line-height: 1.2em;
/* display: none; */
animation: slideup 2s 0s linear;
/* animation: 이름 시간 시작시간 스타일 반복 */
animation-fill-mode: both; /*처음으로 돌아가지 많고 끝내라*/
}
.welcome-text span{
font-size: 26px;
display: block;
}

.welcome-text span i{
color: red;
margin-left: 3px;
}
/* 애니메이션: overlay 2 */
.home-inner:before{
/* display: none; */
content:'';
background-color: #000;
position: absolute; /*before는 인라인이라서 블록이나 앱솔루트해서 인라인블록만들어야한다 */
width: 10%; /* 초기상태 */
height: 100%;
top: 0;
left: 0;
animation: overlay 1s 2s ease-in-out BOTH; /* 1번 welcome 글자 2초뒤에 시작해야하니까 dealy: 2s*/
}

/* 애니메이션: opacity-image 3*/

.opacity-image{
background: url(images/section-bg-01.jpg) no-repeat center center/cover;
height: 100%;
opacity: 0; /*처음상태 0 임*/
animation: opacity-image 1s 2.5s ease-in both; /*dealy: 시작시간인데 앞에거 다 더하면 3초지만 겹치게 하려면 0.5 빠르게.*/
}

.home-heading{
/* display: none; */
position: absolute;
top: 50%;
/* 이렇게 중간 %잡는게 맞으나, 아래 애니메이션 reveal span에 넣으니 가로가 흔들린다. 그래서 가로는 px로 고정한다.(x, left) */
/* left: 40%;
 transform: translate(-50%, -50%); */
left: 300px;
transform: translateY(-50%);
}
/* 애니메이션: reveal 4 */
.home-heading span{
display: block;
font-size: 115px;
font-weight: 600;
color:#fff;
width: 0;
overflow: hidden; /*span 0으로 해서 줄이고 글자는 나와있으니 오버플로우 히든으로 가린다?*/
animation: reveal 1s 3s ease-in-out both; /*아래 시간 다 더하고 좀빨리교차*/
}
/* span 글자 각각 딜레이 시간차 주기 */
.home-heading span:nth-child(1){
animation-delay: 3s;
}
.home-heading span:nth-child(2){
animation-delay: 3.2s;
}
.home-heading span:nth-child(3){
animation-delay: 3.4s;
}

/* 애니메이션 keyframes */
@keyframes slideup {
0%{
opacity: 0;
margin-top: 50px;
}
20%{
opacity: 1;
margin-top: 0;
}
80%{
opacity: 1;
margin-top: 0;
}
100%{
opacity: 0;
margin-top: 0;
}
}
@keyframes overlay {
0%{
width: 0;
left: 0; /* 애니메이션은 같은 위치만 가능하니 left변하면 안됨*/
}
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left:100%; /* right: 0와 같은얘기. */
}
}
@keyframes opacity-image{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
@keyframes reveal {
0%{
width: 0;
}
100%{
width: 100%;
}
}
/* ################### Section : About ################### */

.about-inner{ /*background 한줄쓰기: color url no-repeat position/size*/
background: #0dace3 url(images/line-drawing.png) no-repeat right bottom;
height: 100%;
position: relative;;
/* background-color: #0dace3; */
/* background-size: 80%; */
/* background: blue; 이렇게치면 위에거를 덮어버리므로 반드시 -color */
}
.about-items{
/* border: 1px solid #000; */
width: 50%;
position: absolute; /* mobile 은 사용못함 */
top: 50%;
left: 100px;
transform: translateY(-50%); /*y - 위로 올라감*/

}
.item{
overflow: hidden; /* float준 부모를 해제 */
/* clear: both; */
color:#fff;
margin-bottom: 30px;
}
.item img{
height: 120px;
float: left;
margin-right: 20px;
filter:invert(1); /* img에 색상필터 넣을떄 filter, (1)은100% */
}
.item span{
transition: 0.5s;
}
.item span h3{
font-size: 28px;
font-weight: 500;
margin: 0;
letter-spacing: -1px; /*자간*/
}
.item span p{
overflow: hidden; /* float떄문에 글자가 아래로 밀린경우*/
font-size: 18px;
}
.item:hover h3{ /*item에 호버하면 img, h3변한다(자식만가능)*/
color: #000;
}
.item:hover img{
filter:invert(0); /*원래 흰색이였으므로 필터0으로 제거한다*/
}


/* ################## Section: project #############*/
.project-inner{
height: 100%;
overflow: hidden;
background-color: #fff;
border: 1px solid #ddd;
}
.tabs{
height: 100%;
width: 300%; /*탭3개를 가져야하니까 */
transition: 0.5s;
}
.tab{
height: 100%;
float: left;
width: 33.3333%;
}
.tab>div{
height: 100%;
float: left;
}
.project-info{
width: 25%;
}
.project-photo{
width: 75%;
overflow: hidden;
}
/* 속성선택자 [] */
/* radio 꺼줘야함 */
input[name=tabmenu] {
display: none;
}
/* ### label ### */
.btn{
position: absolute;
left:0;
bottom: 30px;
width: 25%; /* project-info가 25%였으니까 똑같이 25%로 맞추면 딱참*/
text-align: center; /* 라벨 중앙배치- 인라인블럭이니 가능함*/
}
/* 동그란 버튼부분*/
.btn label{
cursor: pointer;
width: 6px;
height: 6px;
background-color:#000;
border-radius: 50%;
display: inline-block;
margin: 8px;
position: relative;
transition: 0.5s;
}
.btn label:before {
content: '';
display: inline-block;
border: 1px solid transparent;
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
left: -6.5px;
top: -6.5px;
}
/* 테두리 hover해서 보일때 */
.btn label:hover:before{
border: 1px solid #aaa;
}

input[id="tab1"]:checked ~ .btn label[for="tab1"]:before,
input[id="tab2"]:checked ~ .btn label[for="tab2"]:before,
input[id="tab3"]:checked ~ .btn label[for="tab3"]:before {
border: 1px solid #aaa;
}

/* 라벨 누르면 각각 tab 3개가 왼쪽으로 움직이게 만든다*/
input[id="tab1"]:checked ~ .tabs {
margin-left: 0;
}
input[id="tab2"]:checked ~ .tabs{
margin-left: -100%;
}
input[id="tab3"]:checked ~ .tabs{
margin-left: -200%;
}
/* ### project info ### */
.project-info{
padding: 50px;
position: relative;
}
.project-info h3{
font-size: 20px;
position: relative; /* 가상태크 숫자가 아래로 안내려가서 얘한테 렐러티브 주면 이게 우선함(위에있음)*/
}
.project-info p{
font-size: 16px;
line-height: 1.5em;
}
.project-info ul{
line-height: 2em;
margin: 30px 0; /* 나중에 문단마진줄떄, 중간에 상하를 한번에 주자.*/

}
.project-info ul li{
}
/* > unicode로 html보다 css에 폰트오썸 대신한다. */
.project-info ul li:before{
content: '\f105';
font-family: fontawesome;
margin-right: 10px;
}
.detail{
margin-bottom: 50px;
}
/* inlineblock애는 약간의 마진이 있어서 밀려내려간다.. */
.detail div{
display: inline-block; /*정교한 가로배치: float:left, 대략배치:display: block; */
text-align: center;
width: 32.5%;
color: #999;
}
.detail div span{ /* span은 인라인블럭이라 block줘서 상하배치*/
display: block;
font-size: 36px;
font-weight: bold;
color: #000;
margin-bottom: 10px;
}
/* button */
.view-project{
background-color:#3f3f3f;
color: #fff;
text-transform: uppercase;
font-size: 13px;
/* padding: 10px 50px; a 는 인라인: 마진상하 x 패딩 0 */
transition: 0.5s;
width: 200px;
display: inline-block;
padding: 10px;
text-align: center;
}
.view-project:hover{
background-color: #000;
}
.view-project .fa-long-arrow-alt-right {
transition: 0.5s;
}
.view-project:hover .fa-long-arrow-alt-right {
margin-left: 30px; /* 0에서 30픽셀 이동하는것 a가 늘어나는것은 패딩만 줘서이므로 위드를 줘야함 */
}

/* ### 상단 3개의 각각숫자 가상태그+사용자정의속성 사용 ### */

.project-info:before{
content: attr(data-text);
font-size: 130px;
color: #ddd;
position: absolute; /*z-index:-1이 안된이유: absolute이 relative보다 순위낮음. */
top: -10px;
left: 10px;
}
.project-photo img{
width: 100%;
}
/* ################# Section : plan ##################*/
.plan-inner {
background-color: #1d1b24;
height: 100%;
}
.plan-feature {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.plan-feature > div {
height: 300px;
color: #bbb;
}
.plan-info {}
.plan-info > div {
float: left;
}
.plan-heading {
width: 70%;
padding-right: 50px;
}
.plan-heading h2,
.history-info h2{
color: #fff;
margin: 0;
}
.plan-heading p {
font-size: 16px;
line-height: 1.6em;
}
.plan-photo {
width: 30%;
}
.plan-photo img {
height: 265px;
}
.plan-heading hr.bar,
.history-info hr.bar
{
background-color: dodgerblue;
display: inline-block;
}
.history-slider div {
outline: none;
}
.history-slider div h4 {
color: #fff;
font-size: 20px;
font-weight: normal;
margin: 0;
line-height: 1.5em;
}
.history-slider div h4 span {
color: dodgerblue;
}
.history-slider div p {
font-size: 16px;
line-height: 1.5em;
}
/* Slick.js Custom CSS */
.history-slider .slick-arrow {
display: none !important;
}
.history-slider .slick-dots li button:before {
color: #fff;
font-size: 40px;
}
.history-slider .slick-dots li {
margin: 0;
}

/* ################### Section : awards winner ################## */

.awards-inner{
height: 100%; /*부모에 높이를 100%줘야 자식이 float 플롯됐을떄 높이를 줄수있음!! */
border: 1px solid #ddd;
}
.awards-inner >div{ /* awards-inner안에 자식div 2개만 해당되므로 >div */
float: left;
width: 50%;
height: 100%;
position: relative;
}
.about-awards{
background-color: #000;
color: #fff;
}
.about-heading{
position: absolute; /*absolute 인라인블럭-길이높이 가지지만 딱 컨텐츠만큼 줄어든다 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 70%;
}
hr.bar{
width: 50px;
height: 4px;
border: none; /*hr은 보더였다..ㅋ*/
background-color: crimson;
margin: 30px auto;/* 위아래30 가로중앙 auto*/
}
.about-heading p{
color: #999;
font-size: 16px;
line-height: 1.5em;
}
/* A button */
.view-awards{
color: #bbb;
border: 1px solid #bbb;
padding: 5px 15px;
border-radius: 20px;
transition: 0.5s; /*hover*/
/* margin-top: 200px; 마진상하가 안되니까 인라인임 p테그에서 내리거나*/
display: inline-block;
margin-top: 20px;

}
.view-awards:hover{ /*호버시 색상변화, ** 보더가 안보여야하는데 none으로하면 픽셀이빠져서 화면이 흔들림, 투명으로해야 */
background-color: #31c0ce;
color:#fff;
/* border: none; */
border-color: transparent;
}
.victory-jump{
background-color: #fff;
}
.victory-jump img{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
width: 80%;
}
/* ################### Section : Location ################### */

.location-inner{
background: url(images/background-location.jpg) no-repeat center center; /*background 안나오는이유: 크기줘야쟎이*/
height: 100%;
}
.location-inner:before{
content:''; /*before, after content:'' 로시작, 인라인이되므로 크기줘도안보인다. position: absoulte/display inline-block 줘서 인라인블럭화한다*/
background-color:rgba(0,0,0,0.85);
width: 100%;
height: 100%;
/* display: inline-block; */
position: absolute; 
}
.feature{
width: 70%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ddd;
}
.feature>div{ /
float: left;
}
.office{
width: 60%;
padding-right: 100px;
}
.service{
width: 40%;
}
.office b{
font-weight: normal;
}
.office h2{ /*h2는 마진0줘야한다*/
color: #1db1f0;
font-weight: 500;
margin: 0;
margin-top: 5px;
}
.office p{
font-size: 16px;
line-height: 1.5em;
}
.office span{color: #fff;}

.customer{
margin-top: 40px;
}
/* Service */
.service{}

.service-item{
margin-bottom: 20px;
}
.service-item .fas{
color: #1db1f0;
font-size: 40px;
}/*fontawesome 인라인임*/
.service-item h3{
color: #fff;
font-size: 22px;
margin: 0;
margin-top: 10x;
}
/* ### 섹션 하나씩 닫자. ### */


/* ////////////////// Section: contact ///////////////// */

.contact-inner {
background-color: #fff;
height: 100%;
/* border: 5px solid red; */
}
.contact-feature {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-feature > div {
float: left;
width: 50%;
padding: 20px;
}
.contact-form{}
.contact-form h3{
font-size: 30px;
font-weight: normal;
margin: 0;
}
.contact-form h3 b{}
.send-box{}
.send-box label{
display: block;
font-weight: bold;
font-size: 16px;
margin: 10px 0;
margin-top: 20px;
}
.send-box label span{
color: crimson;
font-weight: normal;
}
.send-box input[type=email],
[type=text],textarea{
border: 1px solid #ccc;
padding: 10px;
width: 100%;
border-radius: 3px;
outline: none;
transition: 0.5s;
}
.send-box input[type=email]:hover,
[type=text]:hover,
textarea:hover{
border: 1px solid #0088cc;
box-shadow: 0 0 5px #0088cc;
}
.send-box input[type=email]:focus,
[type=text]:focus,
textarea:focus {
background-color: #eee;
}
.send-box button{
background-color: #0088cc;
color: #fff;
text-transform: uppercase;
border:none;
padding: 11px 20px;
border-radius: 3px;
cursor: pointer;
transition: 0.5s;
margin-top: 10px;
}
.send-box button:hover {
background-color: #000;
}
.contact-info{}
.contact-info h4{
font-weight: normal;
font-size: 20px;
margin: 0;
}
.contact-info ul{
/*ul,li왼쪽 정렬은 ul에 패딩0을 줬음*/
}
.contact-info ul li{
line-height: 2em;/* body:15px * 2em = 30px */
}
.contact-info ul li:last-child{
color: #0088cc;
}
.contact-info i{
margin-right: 5px;
}
.contact-info p{
line-height: 1.5em;
}

/* ############# Subpage : Hiring ############## */
.modal{
}
/* header */
.header{
position:fixed; /*인라인블럭되서 줄어드니까 다시 100%줘야한다. */
width: 100%;
background-color: #fff;
z-index: 1;
}
.header-inner{
width: 95%;
margin: auto;
height: 90px;
line-height: 90px;
border-bottom: 1px solid #ddd;
}
.modal-display{
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
}
/* main */
.hiring-main{
height: 600px;
position: relative;
}
.hiring-heading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.hiring-heading span{
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
position: relative;
}
.hiring-heading span:before,
.hiring-heading span:after {
content: '';
height: 2px;
width: 50px;
position: absolute;
top: 50%;
}
.hiring-heading span:before{
right: 120%;
}
.hiring-heading span:after{
left: 120%;
}
.hiring-heading h1{
font-size: 100px;
font-weight: 200;
margin: 0;
margin-top: 40px;
}
.hiring-info{
overflow: hidden;
margin-bottom: 30px;
}
.hiring-info >div{
width: 50%;
height: 600px;
float: left;
}
.center-parent{
position: relative;
}
.center-child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 78%;
}
.center-child h2{
font-size: 36px;
font-weight: normal;
}
.center-child p{
font-size: 22px;
line-height:1.5;
font-weight: 300;
}
.photo img{
width: 100%;
}
.hiring-slogan{
padding: 100px 0;
}
.hiring-slogan p{
font-size: 32px;
font-weight: 200;
text-align: center;
width: 70%;
margin: auto;
position: relative;
}
.hiring-slogan p:before{
content:',,'; /* 쌍따옴표 ,, 콤마 두개로한다*/
font-family: 'Overpass', sans-serif;
font-size: 200px;
position: absolute;
color: #ddd;
transform: rotate(180deg);
top:-82%;
left:-7%;
}
.hiring-contact ul{
display: inline-block; /*50%하면 안된다. 인라인블럭에 마진이 있음*/
width: 49%;
font-size: 20px;
font-weight: 300;
}
.hiring-contact ul li{
line-height: 2;
}
.hiring-contact ul li:first-child {
font-weight: 400;
}
.hiring-contact ul li:last-child {
color: dodgerblue;
font-size: 18px;
}
.sns{}
.sns a{
font-size: 15px;
color: #000;
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 2px;
position: relative;
transition: 0.5s;
/* transform: scale(0.2);초기가 0이면 클릭을 못하므로 호버는 before에줌. */
}
.sns a:hover {
color:#fff;
}
.sns a:before{/* 배경동그라미 만들고 높이는 부모에게 있으니까
 y축은 냅두고 x축만 중간만들면됨. */
content:'';
position: absolute;/*가상태그는 인라인블록 만들어야함, 부모에 꼭 렐러티브*/
background-color: red;
width: inherit;
height: inherit;
border-radius: 50%;
z-index: -1;
left: 50%;
transform: translateX(-50%) scale(0);/*transform 반드시 한줄에*/
transition: 0.5s;
}
.sns a:hover:before{/*x축 위치 유지하면서 스케일1로 한다.*/
transform: translateX(-50%) scale(1);
}
.sns a:nth-child(1):before{
background-color: #3B5999;
}
.sns a:nth-child(2):before{
background-color: #56ACEE;
}
.sns a:nth-child(3):before{
background-color: #00C300;
}
.sns a:nth-child(4):before{
background-color: #E4405F;
}
.sns a:nth-child(5):before{
background-color: #CD201F;
}
.sns a:nth-child(6):before{
background-color: #00AFF0;
}
/* Sunpage: Project-detail 01 */
.hiring-main.project-main{
background: url(images/project-modal-main-01.jpg)no-repeat center center/cover;
height: 100vh;
}
.hiring-main.project-main .hiring-heading {
color: #fff;
animation: slidedown 1s linear both;
transition: 0.5s;
}
.hiring-main.project-main .hiring-heading h1{
font-size: 70px;
margin: 0;
margin-top: 30px;
}
.project-detail .hiring-info{
margin-bottom: 0;
}
.project-detail .project-slogan p:before{
left: -70px;
}

/* animation: Slidedown */
@keyframes slidedown{
0%{
opacity: 0;
margin-top: -50px;
}
100%{
opacity: 1;
margin-top: 0;
}
}

인프런 커뮤니티 질문&답변