@charset "utf-8";

header.header_fixed {position:fixed; top:0; right:0; left:0; z-index:10;}

header {background-color:rgba(255,255,255,0.95); text-align:center; overflow:hidden;}
header .header_inner {max-width:1340px; margin:0 auto; padding:0 20px; box-sizing:border-box; position:relative;}

header h1 {padding:23px 0;}
header h1, header h1 a {display:inline-block;}

header .quick {position:absolute; top:10px; right:20px;}
header .quick:after {clear:both; content:''; display:block;}
header .quick li {padding-left:10px; float:left;}
header .quick li + li:before {height:8px; margin-top:-2px; margin-right:10px; border-left:1px solid #82819e; vertical-align:middle; content:''; display:inline-block;}
header .quick li a {color:#333; font-size:11px;}
header .quick li.progress a:before {width:16px; height:16px; margin-right:5px; background:url('/assets/images/common/icon_progress.png') 0 0 no-repeat; background-size:cover; vertical-align:bottom; content:''; display:inline-block;}

header .search_wrap {position:absolute; bottom:3px; right:20px; z-index:1; display:none;}
header .search_wrap input {width:auto; height:36px; padding-left:5px; color:#fff; font-size:14px; line-height:36px; background-color:transparent; border:0;}
header .search_wrap span {color:rgba(255,255,255,0.7); line-height:38px; position:absolute; top:0; bottom:0; left:10px; z-index:1;}
header .search_wrap input:focus + span {display:none;}
header .search_wrap input, header .search_wrap a {vertical-align:middle; display:inline-block;}
header .search_wrap a {width:18px; height:18px; font-size:0; background:url('/assets/images/common/icon_search.png') 50% no-repeat;}

header .btn_siteMap {width:25px; height:20px; font-size:0; border-top:2px solid #fff; box-sizing:border-box; position:absolute; bottom:12px; left:20px; display:none;}
header .btn_siteMap:before, header .btn_siteMap:after {width:25px; border-bottom:2px solid #fff; content:''; position:absolute; left:0; display:inline-block; transition:all 0.2s;}
header .btn_siteMap:before {bottom:9px;}
header .btn_siteMap:after {bottom:0;}

header .menu {position:relative;}
header .menu:after {height:100%; background-color:#3973b9; content:''; position:absolute; bottom:0; right:-100%; left:-100%;}
header .menu ul {position:relative; top:0; z-index:2; display:inline-block;}
header .menu ul:after {clear:both; content:''; display:block;}
header .menu ul li {padding:0 15px; float:left;}
header .menu li a {padding:15px 20px; color:#fff; font-size:15px; display:inline-block;}

#container {padding:0 24px; flex:1;}

footer {margin-top:20px;}
.footer_inner {padding:15px; background-color:#2d2d2d; text-align:center;}
.footer_inner a {color:#fff; font-size:1.1rem; display:inline-flex; align-items:center;}
.footer_inner a:after {width:16px; height:16px; margin-left:4px; background:var(--mj-icon) -632px -204px no-repeat; background-size:var(--mj-icon-size); content:''; display:block; filter:invert();}

.content {max-width:1280px; margin:0 auto;}

h2 {margin:60px 0; font-size:40px; font-family: 'Noto Sans KR', serif; font-weight:500;}
h3 {margin-bottom:30px; font-size:22px; font-family: 'Noto Sans KR', serif; font-weight:300;}

.content {max-width:1340px; padding:0 20px; box-sizing:border-box;}

.tab_area {margin-bottom:40px; border-bottom:1px solid #e9e9e9; text-align:center;}
.tab_area:after {clear:both; content:''; display:block;}
.tab_area li {margin-bottom:-1px; padding:0 10px; display:inline-block;}
.tab_area a {padding:10px; color:#a9a9a9; font-size:16px; font-weight:300; position:relative; display:block;}
.tab_area a:hover, .tab_area li.active a {color:#3973b9;}
.tab_area li.active a {font-weight:500;}
.tab_area a:before, .tab_area a:after, .tab_area li.active a:before, .tab_area li.active a:after {border-bottom:2px solid #3973b9; content:''; position:absolute; right:50%; bottom:0; left:50%; display:inline-block; transition:all 0.2s;}
.tab_area a:hover:before, .tab_area li.active a:before {left:0;}
.tab_area a:hover:after, .tab_area li.active a:before {right:0;}

.thumb_list ul {margin-top:-60px; margin-left:-60px;}
.thumb_list ul:after {clear:both; content:''; display:block;}
.thumb_list li {width:25%; padding-top:60px; padding-left:60px; box-sizing:border-box; float:left;}
.thumb_list li .thumb {padding-top:100%; border-radius:50%; overflow:hidden; position:relative;}
.thumb_list li .thumb span {background-position:50%; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; right:0; bottom:0; left:0; transform:scale(1.2); transition:transform 0.2s ease-in-out;}
.thumb_list li > *:hover .thumb span {transform:scale(1.5);}
.thumb_list li dl {margin-top:15px; text-align:center;}
.thumb_list li dt {margin-bottom:10px; color:#c9c9c9; font-size:18px; font-weight:500;}
.thumb_list li dd {color:#222; font-weight:300;}

.estimate_list {margin-top:20px; border-top:2px solid #333;}
.estimate_list > li {width:100%; border-bottom:1px solid #dfdfdf; opacity:0; display:table; transform:translateX(-20px); transition:transform 0.5s, opacity 0.4s;}
.estimate_list > li.active {opacity:1; transform:inherit;}
.estimate_list > li > * {padding:10px 15px; box-sizing:border-box; vertical-align:middle; display:table-cell;}
.estimate_list > li .col_tit {width:200px; background-color:#f9f9f9;}
.estimate_list textarea {height:120px; padding-top:10px;}

.required:before {margin-right:5px; font-weight:300; content:'*'; display:inline-block;}

.roboChk {margin:40px 0;}
.roboChk label {font-size:18px;}

/* policy */
.privacy_policy {padding:30px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; text-align:center;}
.privacy_policy * {line-height:1.5;}
.privacy_policy h3 {font-weight:400;}
.privacy_policy > dl {max-width:900px; margin:0 auto 30px; padding:30px 50px; background-color:#f9f9f9; box-sizing:border-box; text-align:left;}
.privacy_policy dt {margin-bottom:15px;}
.privacy_policy dd {margin-bottom:20px; padding-left:15px;}
.privacy_policy ul {margin-bottom:15px;}
.privacy_policy li {margin-top:8px;}
.privacy_policy .check_wrap {margin-top:40px; font-size:18px; font-weight:500;}

#container.SERVICE section {min-height:450px; box-sizing:border-box; opacity:0; position:relative; transition:opacity 0.5s ease-in-out;}
#container.SERVICE section + section {margin-top:60px; padding-top:60px; border-top:1px solid #efefef;}
#container.SERVICE section:nth-child(odd) {text-align:right;}
#container.SERVICE section strong {margin-top:30px; font-size:26px; display:inline-block;}
#container.SERVICE section strong em {color:#f4ac1c; font-size:34px; font-style:normal; position:relative; display:inline-block; transform:translateY(-120px); transition:all 1s;}
#container.SERVICE section strong em:before, #container.SERVICE section strong em:after {width:13px; border-top:3px solid #f4ac1c; content:''; position:absolute; top:-15px; right:-10px; display:inline-block; transition:transform 0.2s;}
#container.SERVICE section strong em:after {transform:rotate(90deg);}

#container.SERVICE section.active {opacity:1;}
#container.SERVICE section.active strong em {opacity:1; transform:translateY(0);}
#container.SERVICE section.active strong em:before {transform:rotate(90deg);}
#container.SERVICE section.active strong em:after {transform:rotate(180deg);}

#container.SERVICE section p {margin-top:30px; font-size:16px; line-height:1.8;}
#container.SERVICE section a {margin-top:30px; padding:20px 80px; color:#fff; font-size:16px; background-color:#f4ac1c; box-sizing:border-box; text-align:center; display:inline-block; transition:box-shadow 0.2s;}
#container.SERVICE section a:before {width:17px; height:18px; margin-right:10px; background:url('/assets/images/sub/icon_estimate.png') 0 0 no-repeat; vertical-align:middle; content:''; display:inline-block;}
#container.SERVICE section a:hover {box-shadow:2px 2px 3px rgba(0,0,0,0.2);}

#container.SERVICE section:after {width:50%; background-position:50% 0; background-repeat:no-repeat; background-size:100%; overflow:hidden; content:''; position:absolute; top:30px; bottom:0; display:block; transition:background-size 0.5s, transform 0.8s;}
#container.SERVICE section + section:after {top:60px;}
#container.SERVICE section:hover:after {background-size:120%;}
#container.SERVICE section:nth-child(odd):after {left:0; transform:translateX(-100px);}
#container.SERVICE section:nth-child(even):after {right:0; transform:translateX(100px);}
#container.SERVICE section.active:after {transform:translateX(0);}

#container.SERVICE section.design:after {background-image:url('/assets/images/main/BG_service_design.jpg');}
#container.SERVICE section.marketing:after {background-image:url('/assets/images/main/BG_service_marketing.jpg');}
#container.SERVICE section.print:after {background-image:url('/assets/images/main/BG_service_print.jpg');}
#container.SERVICE section.solution:after {background-image:url('/assets/images/main/BG_service_solution.jpg');}

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

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

@media screen and (max-width: 768px) {
h2 {font-size:24px;}

.thumb_list li {width:33.3333%;}

#container.SERVICE section {min-height:0;}
#container.SERVICE section:after {width:42%;}

.estimate_list > li .col_tit {width:130px;}
}

@media screen and (max-width: 767px) {
h2 {margin:40px 0; font-size:26px;}
h3 {margin-bottom:20px; font-size:20px; font-weight:400;}

.tab_area {margin-right:-20px; margin-left:-20px;}
.tab_area a {font-size:14px;}

.thumb_list ul {margin-top:-30px; margin-left:-30px;}
.thumb_list li {width:50%; padding-top:30px; padding-left:30px;}
.thumb_list li dt {font-size:15px;}

.estimate_list > li {padding:10px 0; display:block;}
.estimate_list > li > * {padding:0; display:block;}
.estimate_list > li .col_tit {width:100%; margin-bottom:10px; background-color:#fff;}

#container.SERVICE section + section {margin-top:30px; padding-top:30px;}
#container.SERVICE section:nth-of-type(1) {margin-top:0; padding-top:0;}
#container.SERVICE section:after {width:100%; margin-top:20px; padding-top:55%; position:static;}
#container.SERVICE section strong {margin-top:20px; font-size:18px; line-height:1.5;}
#container.SERVICE section strong em {font-size:26px;}
#container.SERVICE section strong em:before, #container.SERVICE section strong em:after {top:-5px;}
#container.SERVICE section p {margin-top:20px; font-size:15px; word-break:keep-all;}
#container.SERVICE section a {width:100%; margin-bottom:20px; padding:13px;}

.privacy_policy > dl {max-height:250px; padding:20px; overflow:auto;}
}