@charset "utf-8";

h2 {margin-top:150px; margin-bottom:75px; font-size:42px; font-weight:300; text-align:center;}

section {max-width:1340px; margin:0 auto; padding:0 20px; box-sizing:border-box; text-align:center;}

.main_visual {margin-top:0; opacity:1; transition:all 0.2s ease-in-out;}
.main_visual li {padding-top:28.906%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; position:relative; transition:background-position 0.2s;}
.main_visual li div {text-align:center; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0;}
.main_visual li div:after {height:100%; vertical-align:middle; content:''; display:inline-block;}
.main_visual li p {max-width:98%; vertical-align:middle; display:inline-block;}
.main_visual li p * {color:#fff; font-size:16px; line-height:1.5; text-shadow:2px 2px 3px rgba(0,0,0,0.4); opacity:1; display:block; transition:transform 1s, opacity 0.2s;}
.main_visual li p *.active {opacity:1; transform:inherit;}
.main_visual li p strong {margin-bottom:20px; font-size:40px; transform:translateX(0);}
.main_visual li p span {font-size:50px; font-weight:700; word-break:keep-all; transform:translateX(0);}

.content section > ul > li {opacity:1; transform:translateY(0); transition:transform 1s, opacity 0.2s;}
.content section > ul > li.active {opacity:1; transform:inherit;}

.business {max-width:inherit; padding:inherit;}
.business h2 {margin-top:80px;}
.business ul {margin-top:-5px; margin-left:-5px;}
.business ul:after {clear:both; content:''; display:block;}
.business li {width:50%; padding-top:5px; padding-left:5px; box-sizing:border-box; float:left;}
.business li > * {padding-top:52%; background-position:50%; background-repeat:no-repeat; background-size:cover; position:relative;}
.business li:nth-child(1) > * {background-color:#1d2332; background-image:url('/assets/images/main/BG_service_design.jpg');}
.business li:nth-child(2) > * {background-color:#000; background-image:url('/assets/images/main/BG_service_marketing.jpg');}
.business li:nth-child(3) > * {background-color:#5d4847; background-image:url('/assets/images/main/BG_service_print.jpg');}
.business li:nth-child(4) > * {background-color:#1d2332; background-image:url('/assets/images/main/BG_service_solution.jpg');}
.business li > * > * {text-align:center; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0;}
.business li > * > *:after {height:100%; vertical-align:middle; content:''; display:inline-block;}
.business li a {vertical-align:middle; position:relative; display:inline-block;}
.business li a:after {width:250px; height:250px; margin-top:-125px; margin-left:-125px; background-color:rgba(0,0,0,0.6); border-radius:50%; content:''; position:absolute; top:50%; left:50%; display:inline-block; transition:background 0.2s;}
.business li a:hover:after {background-color:rgba(0,0,0,1); transition:background 0.2s;}
.business li a * {position:relative; z-index:1;}
.business li a strong {margin:0 auto; color:#fff; font-size:20px; display:block;}
.business li a span {margin-top:20px; padding:10px 20px 0 20px; color:#dfbd53; border-top:1px solid #dfbd53; display:inline-block;}

.work {margin-bottom:50px;}
.work ul {margin-left:-20px; text-align:center;}
.work ul:after {clear:both; content:''; display:block;}
.work ul li {width:25%; padding-left:20px; box-sizing:border-box; float:left;}
.work ul li div p {margin-bottom:30px; padding-top:135.5072%; position:relative;}
.work ul li div p span {width:100%; height:100%; background-position:50%; background-repeat:no-repeat; background-size:100%; position:absolute; top:0; left:0;}
.work dt {margin-bottom:15px; font-size:16px; font-family: 'Noto Sans KR', serif;}
.work dt em {margin-top:10px; color:#959595; font-size:12px; font-style:normal; display:block;}
.work dd {line-height:1.5;}
.work .btn_more {margin-top:50px; padding:10px 30px 10px 20px; color:#000; font-size:11px; letter-spacing:0.18em; border:1px solid #333; position:relative; display:inline-block;}
.work .btn_more:before, .work .btn_more:after {width:10px; margin-top:-2px; border-top:2px solid #333; content:''; position:absolute; top:50%; right:15px; display:inline-block; transition:all 0.2s;}
.work .btn_more:after {transform:rotate(90deg);}
.work .btn_more:hover:before {transform:rotate(90deg);}
.work .btn_more:hover:after {transform:rotate(180deg);}

.blank {margin-bottom:50px;}
.blank h2 {margin-top:60px; margin-bottom:50px;}
.blank ul:after {clear:both; content:''; display:block;}
.blank li {width:33.333%; float:left;}
.blank li div {padding:0 30px;}
.blank li div p {margin-bottom:30px; padding-top:135.5072%; background-position:50%; background-repeat:no-repeat; background-size:cover;}
.blank li dt {font-size:40px; font-family: 'Cormorant Garamond', serif; font-weight:600;}

@media screen and (max-width: 1200px) {
.main_visual li p strong {font-size:34px;}
.main_visual li p span {font-size:44px;}
}

@media screen and (max-width: 1024px) {
h2 {margin-top:70px !important; margin-bottom:50px; font-size:34px;}
.business li a:after {width:180px; height:180px; margin-top:-90px; margin-left:-90px;}
}

@media screen and (max-width: 768px) {
h2 {margin-top:40px !important; margin-bottom:20px; font-size:22px;}
.main_visual li {padding-top:34.906%;}
.main_visual li p strong {font-size:24px;}
.main_visual li p span {font-size:30px;}
.business li > * {padding-top:64%;}

}

@media screen and (max-width: 767px) {
h2 {font-size:18px; font-weight:500;}
.main_visual li {padding-top:84.906%;}
.main_visual li div {padding:0 20px; box-sizing:border-box;}
.main_visual li p strong {font-size:16px;}
.main_visual li p span {font-size:20px;}

.business li {width:100%; margin-top:0;}
.business li + li {margin-top:25px;}
.business li > * {padding-top:54%;}
.business li a:after {width:150px; height:150px; margin-top:-75px; margin-left:-75px;}

.work ul {margin-left:-5px;}
.work ul li {width:100%; padding-top:10px; padding-bottom:10px; padding-left:5px; border-bottom:1px dashed #ccc;}
.work dt {font-size:14px;}
.work ul li div p {margin-bottom:0; padding-top:65.5072%;}
.work dt {margin-bottom:8px;}
.work dt em {font-size:11px;}
.work dd {font-size:13px;}
}