@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

/* reset.css */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-size:100%;}
img, fieldset{border:0px;}
table{border-collapse:collapse;}
ul, ol, li{list-style:none;}
address, em{font-style:normal;}
li img, object{vertical-align:top;}
input, select, textarea, form img{vertical-align:middle;}
a{outline:0; text-decoration:none; border:none;}
body {font-family:Pretendard, sans-serif; padding-top:0px!important;}

@font-face {
  font-family: 'Buri';
  font-style: normal;
  font-weight: 400;
  src: url(../_fonts/Arita-buri-Medium.eot);
  src: url(../_fonts/Arita-buri-Medium.eot?iefix) format("embedded-opentype"), url(../fonts/Arita-buriM-subset.woff) format("woff"); }

@font-face {
  font-family: 'Buri';
  font-style: normal;
  font-weight: 700;
  src: url(../_fonts/Arita-buriSB-subset.woff) format("woff"); }

@font-face {
  font-family: 'SSGizmo';
  font-style: normal;
  font-weight: normal;
  src: url(../_fonts/ss-gizmo.woff) format("woff"); }

/* global css */
.grid-960 {max-width:960px; margin:0 auto;}
.noMargin {margin:0px;}
.noPadding {padding-right:0px; padding-left:0px;}
.noPaddingL {padding-left:0px!important;}
.noBorder-R {border-right:none!important;}
.container-fluid {padding-left:0px; padding-right:0px; background:#fef9e2;}
.pdt20 {padding-top:20px;}
.pdb40 {padding-bottom:40px;}

/* webfont */

.icon {font-family: 'SSGizmo';}
.eng {font-family: 'Tinos', serif; font-weight:400;}

/* layout */
.section1 {width:100%; overflow:hidden; background:#fef9e2;}
.section2 {width:100%; background:#f1f6e7;}
.section2 .insta-section #instaPics {margin-bottom:100px;}
.section3 {width:100%; overflow:hidden; background:#fff0e7;}
.footer {width:100%; overflow:hidden;}

/* header nav */
.actions {position:fixed; top:20px; right:20px; z-index:100;}
.actions .trigger {float:right; width:40px; height:40px;}
.actions .trigger .btn {display:block; width:100%; height:100%; background:blue; transition:background-color 200ms;}

.actions .trigger .gr {position:absolute; top:0; left:10px; width:20px; height:2px; background-color:#ffffff;
    -webkit-transition : background-color 400ms, opacity 400ms, -webkit-transform 600ms;
    transition : background-color 400ms, opacity 400ms, transform 600ms;
}
.actions .trigger .g1 {top:13px; }
.actions .trigger .g2 {top:19px; }
.actions .trigger .g3 {top:25px; }
.actions .trigger .btn:hover {background-color:#e01783;}

.actions .trigger .gr.active {background-color:#ffffff;}
.actions .trigger .g1.active {
    -webkit-transform : translate3d(0,6px,0) rotate(225deg) scale(1.2, 1);
    transform : translate3d(0,6px,0) rotate(225deg) scale(1.2, 1);
}
.actions .trigger .g2.active {opacity:0; }
.actions .trigger .g3.active {
    -webkit-transform : translate3d(0,-6px,0) rotate(315deg) scale(1.2, 1);
    transform : translate3d(0,-6px,0) rotate(315deg) scale(1.2, 1);
}

.nav-wrap {display:none; width:100%; height:100%; position:fixed; top:0; left:100%; background:#001689; z-index:9999; transition:all 0.4s;}
.nav-wrap.active {left:0px;}
.navi {display:table; width:100%; height:100%;}

.nav-wrap .mobile-gnb {opacity:0; transition:all 1s; display:table-cell; vertical-align:middle;}
.nav-wrap .mobile-gnb.active {opacity:1; }
.nav-wrap .mobile-gnb ul {text-align:center;}
.nav-wrap .mobile-gnb ul li {display:block; padding:2%;}
.nav-wrap .mobile-gnb ul li a {font-family: 'Tinos', serif; font-weight:400; font-size:2.8em; color:#fff; text-decoration:none;}
.nav-wrap .mobile-gnb ul li a:hover {color:#e01783;}

/* header */

.mlogo {position:absolute; top:22px; left:20px; z-index:1000;}
.mlogo img {width:100px;}

.mheaderWrap {width:100%; z-index:20; position:absolute; top:0; left:0; right:0;}
.headerWrap {width:100%; z-index:20; position:absolute; top:0; left:0; right:0; background:#f5f5f5;}
.sns {position:relative; padding:20px 0px;}
.sns li {display:block; float:left; padding:0px 14px; border-right:1px solid #999;}
.sns li a {display:block; width:18px; height:18px;}
.sns li a img {width:18px; height:18px;}

/* logo */
.logo {position:relative; left:50%; transform:translateX(-50%); right:0; text-align:center; width:125px; height:60px;}

/* gnb */
.gnb {padding-top:61px; padding-bottom:76px; position:relative;}
.gnb ul {height:21px; text-align:center;}
.gnb ul li {display:inline-block; padding:0px 40px;}
.gnb ul li a {text-decoration:none; text-transform:uppercase; font-size:22px; color:#000;}
.gnb ul li a.active {color:#023cdd; padding-bottom:4px; border-bottom:1px solid #023cdd;}

/* Underline from left to right on hover in and out */
.underline {display: inline; position: relative; overflow: hidden;}
.underline:after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 100%;
	bottom: -5px;
	background: #023cdd;
	height: 1px;
	transition-property: left right;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
.underline:hover:after, .underline:focus:after, .underline:active:after {right: 0;}

/* section1 */
.section1 .row {margin-right:0px; margin-left:0px;}
.section1-title {padding:82px 0 27px 0;}
.section1 h2 {font-size:20px; text-align:center; letter-spacing:8px;}
.section1 .portfolio {width:100%; overflow:hidden;}

.section1 .text {text-align:center; padding:130px 0 130px 0;}
.section1 h3 {font-size:24px; color:#010101; letter-spacing:4px; margin-bottom:20px; line-height:1.5; word-break:keep-all;}
.section1 p {color:#999; font-weight:400; line-height:1.8; word-break:keep-all;}

/* section2 */
.section2 .row {margin-right:0px; margin-left:0px;}
.section2-title {padding:82px 0 27px 0;}
.section2 h2 {font-size:20px; text-align:center; letter-spacing:8px;}
.section2 .insta-section {max-width:1350px; margin:0 auto;}

/* instagram css */

.insta-box {padding:5px;}

/* section3 */
.section3 .row {margin-right:0px; margin-left:0px;}
.section3 .text {padding-top:130px; padding-bottom:130px; text-align:center;}
.section3 h3 {font-size:24px; color:#010101; letter-spacing:5px; line-height:1.5; margin-bottom:20px; word-break:keep-all;}
.section3 p {color:#999; font-weight:400; line-height:1.8; word-break:keep-all;}

.section3 .box {max-width:1360px; padding-bottom:80px; margin:0 auto;}
.section3 .box .portfolio-bg-img {height:322px; background:url(../images/section3-portfolio.jpg) center center no-repeat; background-size:cover;}
.section3 .box .portfolio-bg-img a {font-family:Pretendard, sans-serif; color:#fff; text-decoration:none;}
.section3 .box .about-bg-img {height:322px; background:url(../images/section3-about.jpg) center center no-repeat; background-size:cover;}
.section3 .box .about-bg-img a {font-family:Pretendard, sans-serif; color:#fff; text-decoration:none;}
.section3 .box .text-block {padding:120px 30px; text-align:center;}
.section3 .box .text-block h2 {font-size:28px; color:#fff; font-weight:900;}
.section3 .box .text-block p {color:#fff;}

/* footer */
.footerwrap {overflow:hidden; background:#e6e4e1;}
.footer-container {max-width:1350px; margin:0 auto; overflow:hidden; padding:58px 0 105px 0;}
.footer-container h4 {padding-bottom:33px; font-weight:900; color:#000; font-family:Pretendard, sans-serif;}
.footer-container p {color:#808080; font-size:14px; line-height:1.6;}
.footer-container .sns-wrap li {float:left; padding-right:15px;}
.copyright {background:#b9b7b5;}
.copyright p {padding-top:46px; padding-bottom:46px; color:#808080; text-align:center; font-size:12px;}

.carousel-control { background: none !important; filter: none !important; progid:none !important; }

/* Fade transition for carousel items */
.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity 1s; /*adjust timing here */
         -moz-transition: opacity 1s;
           -o-transition: opacity 1s;
              transition: opacity 1s;
}
.carousel-control {background-image: none !important; /* remove background gradients on controls */}
/* Fade controls with items */
.next.left, .prev.right {opacity: 1; z-index: 1;}
.active.left, .active.right {opacity: 0; z-index: 2;}

/* contact */
.contact {width:100%; overflow:hidden; margin-top:82px; margin-bottom:125px;}
.contact .infor .row {margin-left:0px; margin-right:0px;}
.contact .infor h6 {font-size:14px; color:#969696; font-weight:300; padding-bottom:20px;}
.contact .infor p {font-size:18px; color:#000; font-weight:300;}
.contact .infor .touch {padding-top:25px; padding-bottom:25px;}
.contact .infor .touch .icon {vertical-align:middle; padding-right:5px;}
.contact .infor li {font-size:16px; color:#000; font-weight:300; padding-top:6px;}
.contact .infor .contact-sns-title {padding-top:10px;}
.contact .contact-sns {overflow:hidden;}
.contact .contact-sns li {display:block; float:left; padding:0px 14px; border-right:1px solid #999;}
.contact .contact-sns li a {display:block; width:18px; height:18px;}
.contact .contact-sns li a img {width:18px; height:18px;}
.contact .input-group {padding-bottom:6px;}
.contact .input-group input {font-size:18px;}
.contact .input-group textarea {font-size:18px;}
.contact .input-group .icon {font-size:24px; color:#969696;}
.contact .input-group .form-control {border:none; box-shadow:none; height:42px;}
.contact .input-group .input-group-addon {vertical-align:top; padding-top:12px; border:none;} 
.contact .contactR .btn {font-size:18px; padding:13px 30px 6px; background:#eee; border:none; color:#626262;}
.contact .contactR .btn:hover {background:#626262; color:#fff;}
.contact .contactR .btn .icon {font-size:28px; vertical-align:middle;}
.contact .contact-map {padding-top: 100px; margin-left:0px; margin-right:0px;}
.contact .contact-map #map {width:100%; height:600px;}


@media screen and (max-width:767px) {

.nav-wrap {display:block;}

.section1 .text {padding-left:15px; padding-right:15px;}
.section3 .text {padding-left:15px; padding-right:15px;}

.section3 .box {padding-bottom:0px;}
.section3 .box .portfolio-bg-img {height:150px; background:url(../images/section3-portfolio.jpg) center center no-repeat; background-size:cover;}
.section3 .box .about-bg-img {height:150px; background:url(../images/section3-about.jpg) center center no-repeat; background-size:cover;}
.section3 .box .text-block {padding:60px 30px; text-align:center;}
.section3 .box .text-block h2 {font-size:20px;}
.section3 .box .text-block p {font-size:12px;}

.contact {margin-top:20px;}
.contact .contactR {padding-top:60px;}
.contact .contact-map {padding-top:40px;}
.contact .contact-map #map {width:100%; height:300px;}

.footerwrap {}
.footer-container h4 {padding:30px 0 15px 0;}
.footer-container {padding:10px 0 40px 0;}

.copyright p {padding-top:26px; padding-bottom:26px;}
}