/*
Theme Name: gridin.co
Theme URI: https://wordpress.org/themes/NEWYEAR/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 3.9
Tested up to: 6.8
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0 auto; }
html { width:100%; height:100%; overflow-x: hidden; }
*, body, html { box-sizing: border-box; }
body,code { font-size: 13px; font-family: 'Fragment Mono', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; }
body { text-rendering: optimizeLegibility; font-smoothing: antialiased; -webkit-font-smoothing:antialiased; }
body#popup { min-width:0; }
ul { padding: 0; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:middle; }
img { max-width: 100%; height: auto !important; width: 100%;
	opacity: 1; 
	-webkit-transition: all .5s ease; 
	-moz-transition: all .5s ease; 
	-ms-transition: all .5s ease; 
	-o-transition: all .5s ease; 
	transition: all .5s ease;
 }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
input { }
input,select,textarea { font-size:100%; vertical-align:middle; border:1px solid #000; }
input:focus, textarea:focus { order-color: blue; outline: none; }
.inputTypeText { height:30px; padding:3px 0 0 3px; border:1px solid #000; }
select { font-family: 'Fragment Mono', 'Nanum Gothic', sans-serif, Verdana; min-height:30px; height: 30px; padding-left: 5px; color: #555;  min-width: 120px; background: url('/images/arrow-down.png') no-repeat 95% 50%; background-size:13px auto; background-color: #f1f1f1; border: 0px;
        -webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;}
select::-ms-expand { display: none; } 
textarea { padding:5px 6px; border:1px solid #000; line-height: normal; font-family: 'Fragment Mono', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; }
legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; color: #000; outline: none; font-family: 'Fragment Mono', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; }
hr.layout { display:none; }
a { text-decoration:none; color:#000; }
a:hover { }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
table tr.radioType input,
span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; }
#content_CONTAINER td { width:auto !important; }
table.nneditor-table { width:auto !important; }

a, button, input, textarea, div {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

a, button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; 
  user-select: none; 
}

a:active, button:active { background-color: transparent; }

#page { height: 100%; }

#header { padding: 12px 10px 65px; display: flex; align-items: center; justify-content: space-between; }
#header > div { flex: 1; font-size: 20px; font-weight: 400; line-height: 24px; }
#header #logo, #header #menu { flex: 0 0 40%; }
#header #logo a { display: flex; align-items: flex-start; gap: 6px; }
#header #logo span { font-size: 27px; line-height: 30px; }
#header #menu { display: flex; gap: 50px; }
#header #contact { text-align: right; }

#content { min-height: calc(100vh - 145px); }

#intro.mob_view { display: none; }

footer { padding: 10px; display: flex; align-items: center; justify-content: space-between; }
footer > div { flex: 1; font-size: 15px; font-weight: 400; line-height: 18px; }
footer #since, footer #intro { flex: 0 0 40%; }
footer #sns { text-align: right; }


/* Archive */

#main #menu { display: none; }

.project-list { margin: 0px 10px; border-top: 1px solid #000; }
.project-item { background: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #000; }
.project-item > span { text-align: left; flex: 0 0 40%; font-size: 20px; font-weight: 400; line-height: 24px; }
.project-item > span:last-child { text-align: right; flex: 1; }

.project-modal[hidden] {
    display: none;
}

.project-modal {
	position: fixed;
	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}

.project-modal__overlay {
	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: rgba(255,255,255,0.8);
}

.project-modal__window {
	position: absolute;
  	z-index: 99;
  	width: 80%;
  	max-width: 640px;
  	background: #fff;
  	padding: 10px 10px 20px;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border: 1px solid #000;
    box-sizing: border-box;
}

.project-modal__window .project-swiper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.project-modal__window .swiper-wrapper {
    align-items: flex-start;
}

.project-modal__window .swiper-slide {
    width: auto !important;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.project-modal__window .project-swiper__image {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 60vh !important;
    margin: 0 auto;
    transition: none !important;
}

/*
 * 모달이 세로 이미지에 맞춰 좁아졌을 때
 * 제목이나 상세 텍스트가 모달 너비를 밀어내지 않도록 처리
 */
.project-modal__title,
.project-modal__subtitle,
.project-modal__info-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-modal__close,
.project-swiper__controls {
    flex: 0 0 auto;
}

.project-modal__subtitle {
    flex: 1 1 auto;
}

.controls-cont {
    min-width: 0;
}

/*
 * 모바일에서는 우선 화면 좌우 10px 여백을 둔
 * 최대 너비로 시작한다.
 * 이후 JavaScript가 세로 이미지일 때만 너비를 줄인다.
 */


.project-modal__header { display: flex; justify-content: space-between; margin: 0 0 30px; }
.project-modal__header h2 { font-size: 18px; font-weight: 400; line-height: 24px; }
.project-modal__header button { background: none; }



.controls-cont { margin: 20px auto 30px; display: flex; align-items: baseline; gap: 20px; justify-content: space-between; color: #007FFF; font-size: 14px; }
.project-swiper__controls { display: flex; gap: 8px; }
.project-swiper__controls button { background: none; color: #007FFF; }

.project-modal__info { line-height: 23px; font-size: 14px; font-weight: 400; }
.project-modal__info-row { display: flex; gap: 70px; }
.project-modal__info-label { min-width: 74px; }


/* About Contact */

.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

.about-section__inner { display: flex; padding: 8px 10px 88px; border-top: 1px solid #000; }
.about-section__inner h1 { font-size: 20px; font-weight: normal; flex: 0 0 40%; }
.about-section__inner .about-section__content { font-size: 20px; font-weight: normal; }

.contact-section__inner { display: flex; padding: 8px 10px 88px; border-top: 1px solid #000; }
.contact-section__inner h2 { font-size: 20px; font-weight: normal; flex: 0 0 40%; }

.contact-section__content { flex: 1; }

.contact-form__project-types { display: flex; gap: 70px; margin: 0 0 16px; }
.contact-form__checkbox { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.contact-form__checkbox input[type="checkbox"] { width: 20px; height: 20px; border-radius: 0 !important; -webkit-appearance: none; appearance: none; }
.contact-form__checkbox input[type="checkbox"]:checked { background: url(/wp-content/themes/gridin.co/img/check.svg) no-repeat center center; background-size: 80% auto; }

.contact-form__field { margin: 0 0 16px; font-size: 20px; line-height: 24px; font-weight: normal; display: flex; gap: 20px; align-items: baseline; }
.contact-form__field input[type="text"], .contact-form__field input[type="email"], .contact-form__field input[type="tel"], .contact-form__field textarea { border: 0; padding: 0; }
.contact-form__field textarea { flex: 1; }

.contact-form__submit button { background: none; font-size: 20px; color: #007FFF; padding: 0 0 7px; border-bottom: 1px solid #007FFF; }


/***** 1080 *****/
	@media only screen and (device-width: 1080px),
       only screen and (max-width: 1080px),
       screen and (max-device-width: 1080px) {
       	
       	#header { padding: 12px 10px 45px; }
       	#header #logo { font-size: 15px; line-height: 18px; }
       	#header #logo span { font-size: 22px; line-height: inherit; position: relative; top: 2px; }
       	
       	#header > div { font-size: 15px; line-height: 18px; }
       	
       	#header #menu { display: none; }
       	
       	
       	/* footer */
       	
       	footer > div { font-size: 13px; line-height: 20px; }
       	footer #intro.web_view { display: none; }
       	
       	#intro.mob_view { display: block; font-size: 13px; line-height: 20px; padding: 10px; }
       	
       	
       	/* Archive */
       	
       	#main #menu { display: flex; font-size: 15px; line-height: 18px; justify-content: space-between; padding: 0px 10px 7px; }
       	
       	.project-modal__window {
	        width: calc(100% - 20px);
	        max-width: calc(100% - 20px);
	    }
       	.project-modal__header { margin: 0 0 20px; }
       	.project-modal__header h2 { font-size: 13px; line-height: 15px; }
       	.project-modal__header button svg { width: 9px; height: auto; }
       	
       	.controls-cont { margin: 10px auto 14px; align-items: baseline; font-size: 11px; line-height: 13px; }
       	.project-swiper__controls button { line-height: 13px; }
       	.project-modal__info { font-size: 11px; line-height: 19px; }
       	.project-modal__info-row { gap: 26px; }
       	.project-modal__info-label { min-width: 54px; }
       	
       	.project-item { display: block; }
       	.project-item > span { font-size: 13px; line-height: 20px; }
       	.project-item > span.project-item__title { display: block; width: 100%; }
       	.project-item > span.project-item__type { float: left; }
       	.project-item > span.project-item__discipline { float: right; }
       	
       	
       	/* About Contact */
       	
       	#about { margin: 0 0 50px; }
       	.about-section__inner { display: block; padding: 0px 10px; border-top: 0; }
		.about-section__inner h1 { font-size: 15px; line-height: 18px; padding: 0 0 7px; border-bottom: 1px solid #000; margin: 0 0 10px; }
		.about-section__inner .about-section__content { font-size: 13px; }

		.contact-section__inner { display: block; padding: 0px 10px; border-top: 0; }
		.contact-section__inner h2 { font-size: 15px; line-height: 18px; padding: 0 0 7px; border-bottom: 1px solid #000; margin: 0 0 10px; }

		.contact-form__project-types { gap: 38px; margin: 0 0 28px; }
		.contact-form__checkbox { gap: 8px; font-size: 15px; border-radius: 0; }
		.contact-form__checkbox input[type="checkbox"] { width: 15px; height: 15px; }

		.contact-form__field { margin: 0 0 20px; font-size: 15px; line-height: 18px; gap: 12.5px; white-space: nowrap; }
		.contact-form__field input[type="text"], .contact-form__field input[type="email"], .contact-form__field input[type="tel"], .contact-form__field textarea { width: 100%; }
		
		.contact-form__submit { text-align: right; }
		.contact-form__submit button { font-size: 15px; padding: 0 0 5px; }

       	
       	
       }