body {position:relative; font-family:'Noto Sans KR', sans-serif; letter-spacing:-0.05em;}
body::-webkit-scrollbar{width: 0;}
.Pf {font-family: 'Odibee Sans', cursive; letter-spacing:0;}
.inner {padding:0 8.2%; margin:0 auto;}
.v_wrap {padding:0 3.125%; margin:0 auto;}
.clearfix::after {content:''; display:block; clear:both;}

.mgb10 {margin-bottom:10px;}
.mgb15 {margin-bottom:15px;}
.mgb20 {margin-bottom:20px;}
.mgb30 {margin-bottom:30px;}
.mgb40 {margin-bottom:40px;}
.mgb50 {margin-bottom:50px;}
.mgb60 {margin-bottom:60px;}
.mgb80 {margin-bottom:80px;}
.mgb100 {margin-bottom:100px;}
.mgb120 {margin-bottom:120px;}
.mgb140 {margin-bottom:140px;}
.mgb160 {margin-bottom:160px;}

.copy {width:100%; height:60px; background:#f2f2f2; text-align:center;}
.copy p {color:#555; line-height:60px; font-weight:400; letter-spacing:0;}

.copy p {color:#fff;}
.copy.detail01 {background:#27303d;}
.copy.detail02 {background:#004f86;}
.copy.detail03 {background:#aa171d;}
.copy.detail04 {background:#564732;}
.copy.detail05 {background:#211008;}
.copy.detail06 {background:#cb0013;}
.copy.detail07 {background:#1f1f1f;}
.copy.detail08 {background:#1c284e;}
.copy.detail09 {background:#087bf4;}
.copy.detail10 {background:#062f07;}

.map_copy {position:absolute; bottom:40px; width:100%; text-align:center;}
.map_copy p {color:#555; font-weight:400; letter-spacing:0;}

/* header */
header {position:fixed; width:100%; height:80px; z-index:999; transition:all 0.5s ease;}
header .logo a {float:left; display:block; width:108px; height:50px; margin-top:15px; background:url("../img/logo.png");}
header .gnb {float:right;}
header .gnb li {display:inline-block; text-align:left;}
header .gnb li a {margin:0 40px; font-size:28px; color:#fff; line-height:80px; transition:all 0.5s ease;}
header .menu_icon {float:right; margin:24px 0 0 40px;}
header .menu_icon a {display:block; width:40px; height:32px; background:url("../img/menu_white.png");}

header:hover, header.h_sub {background:#fff;}
header:hover .logo a,
header.h_sub .logo a {background:url("../img/logo_on.png");}
header:hover .gnb li a,
header.h_sub .gnb li a {color:#555;}
header:hover .gnb li a:hover,
header.h_sub .gnb li a:hover {color:#971264;}
header:hover .menu_icon a,
header.h_sub .menu_icon a {background:url("../img/menu_black.png");}
header:hover .menu_icon a:hover,
header.h_sub .menu_icon a:hover {background:url("../img/menu_hover.png");}
header.on {box-shadow:8px 0px 10px rgba(0,0,0,0.1);}
/* header-end*/

/* site map */
section.sitemap {position:fixed; width:100%; height:100%; z-index:-9; opacity:0; transition:all 0.5s ease;}
section.sitemap .bg {width:100%; height:100%; background:url("../img/sitemap_bg.png"); background-position:center;}
section.sitemap .logo a {float:left; display:block; width:108px; height:50px; margin-top:15px; background:url("../img/logo_on.png");}
section.sitemap .menu_icon {float:right; margin-top:25px;}
section.sitemap .menu_icon a {display:block; width:30px; height:30px; background:url("../img/close.png");}
section.sitemap nav ul {height:calc(100vh - 80px); display:flex; align-items:center; justify-content: center;}
section.sitemap nav li a {position:relative; display:block; font-size:100px; color:#888; margin:0 80px; transition:all 0.5s ease;}
section.sitemap nav li a:hover {color:#971264;}
section.sitemap nav li a:hover::after {content:''; position:absolute; display:block; width:100%; height:4px; background:#971264;}

section.sitemap.on {z-index:9999; opacity:1; transition:all 0.5s ease;}
/* site map-end*/

/* main */
section.visual .title {margin-top:14vw; left:160px; opacity:0; transition:all 0.5s ease;}
section.visual .title h1 {font-size:120px; line-height:120px; color:#fff; margin-bottom:3vw;}
section.visual .title a {font-size:24px; color:#fff; text-decoration:none;}
section.visual .title a::after {content:""; display:block; width:120px; height:12px; background:url("../img/btn_arrow.png"); margin-top:-8px;}
section.visual .panel.current .title {opacity:1; margin-top:15vw;}
/* main-end*/

/* portfolio */
section.portfolio {padding-top:80px;}
section .s_bg {position:fixed; width:100%; height:100%; background:url("../img/bg_float.png") no-repeat center; background-size:cover; z-index:-999;}
section .sub_visual {width:100%; height:400px; background:url("../img/sub_visual1.jpg") no-repeat; background-size:cover; background-position:center; text-align:center; position:relative;}
section .sub_visual::after {content:''; display:block; width:1px; height:60px; background:#555; margin:0 auto;}
section .sub_visual .s_title {display:block; font-size:100px; color:#fff; padding:150px 0 0; position:relative;}
section .sub_visual .s_title::after {content:''; display:block; width:1px; height:90px; background:#fff; margin:60px auto 0;}

section.portfolio .item {float:left; width:calc(50% - 40px); margin-bottom:80px;}
section.portfolio .item:nth-child(2n-1) {margin-right:40px;}
section.portfolio .item:nth-child(2n) {margin-top:60px; margin-left:40px;}
section.portfolio .item:nth-child(9),
section.portfolio .item:last-child {margin-bottom:0;}
section.portfolio .item .img_area {padding-bottom:55.4%; position:relative; background-size:100%; background-position:center; transition:all 1.5s ease;}
section.portfolio .item:hover .img_area {background-size:120%;}
section.portfolio .item .img_area img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0; transition:all 0.5s ease;}
section.portfolio .item:hover .img_area img {opacity:1;}
section.portfolio .item .text .subject {font-size:32px; font-weight:500; color:#222; font-weight:bold;}
section.portfolio .item .text .exp {font-size:16px; font-weight:400; color:#999;}

section.portfolio .item .port01 {background-image:url("../img/logo/thumb/detail01.png");}
section.portfolio .item .port02 {background-image:url("../img/logo/thumb/detail02.png");}
section.portfolio .item .port03 {background-image:url("../img/logo/thumb/detail03.png");}
section.portfolio .item .port04 {background-image:url("../img/logo/thumb/detail04.png");}
section.portfolio .item .port05 {background-image:url("../img/logo/thumb/detail05.png");}
section.portfolio .item .port06 {background-image:url("../img/logo/thumb/detail06.png");}
section.portfolio .item .port07 {background-image:url("../img/logo/thumb/detail07.png");}
section.portfolio .item .port08 {background-image:url("../img/logo/thumb/detail08.png");}
section.portfolio .item .port09 {background-image:url("../img/logo/thumb/detail09.png");}
section.portfolio .item .port10 {background-image:url("../img/logo/thumb/detail10.png");}
/* portfolio-end*/

/* about */
section.about {padding-top:80px;}
section.about .sub_visual {background:url('../img/sub_visual2.jpg') no-repeat; background-size:cover; background-position:center;}
section.about li {display:flex; justify-content: space-between; align-items:flex-end;}
section.about .text_area {width:50%; font-size:18px; font-weight:300; line-height:30px; color:#555;}
section.about .text_area .deco {font-weight:500; color:#888;}
section.about .text_area .tit {font-size:42px; font-weight:500; line-height:50px; color:#222;}
section.about .text_area .tit strong {font-size:60px; font-weight:700; color:#971264;}
section.about .img_area {width:31.3vw;}
section.about .img_area img {width:100%;}
section.about .info {border-bottom:1px solid #ddd;}

section.about .history {display:flex; align-items:baseline;}
section.about .history .title {font-size:60px; font-weight:700; color:#222; margin-right:10%;}
section.about .history ul {width:100%;}
section.about .history .item {border-bottom:1px solid #ddd; padding:40px 0;}
section.about .history .item:first-child {padding-top:0;}
section.about .history .item p {font-size:20px; font-weight:500; color:#555;}
section.about .history .item p strong {font-size:32px; color:#971264; padding-right:40px;}
/* about-end*/

/* contact */
section.contact {padding-top:80px;}
section.contact .sub_visual {background:url('../img/sub_visual3.jpg') no-repeat; background-size:cover; background-position:center;}
section.contact .map_area {width:100%}
section.contact .map_area .root_daum_roughmap {width:100%;}

section.contact .info_area {display:flex;}
section.contact .text_area {width:50%; font-size:24px; font-weight:400; color:#888;}
section.contact .text_area .tit {font-size:48px; font-weight:700; line-height:58px; color:#222;}

section.contact .icon_area li {display:flex; align-items:center;}
section.contact .icon_area .icon_img {padding:22px; background:url('../img/contact_icon_bg.png') no-repeat; margin-right:30px;}
section.contact .icon_area p {font-size:24px; font-weight:500; color:#222;}
section.contact .icon_area p.small {font-size:18px; color:#888;}
/* contact-end*/

/* detail */
section.detail {padding-top:80px;}
section.detail .detail_top {position:relative; width:100%; padding-bottom:39.894%; background-size:cover;}
section.detail .detail_top.top01 {background:url("../img/detail/detail01_bg.jpg") no-repeat; }
section.detail .detail_top.top02 {background:url("../img/detail/detail02_bg.png") center no-repeat; }
section.detail .detail_top.top03 {background:url("../img/detail/detail03_bg.jpg") no-repeat; }
section.detail .detail_top.top04 {background:url("../img/detail/detail04_bg.jpg") no-repeat; }
section.detail .detail_top.top05 {background:url("../img/detail/detail05_bg.jpg") no-repeat; }
section.detail .detail_top.top06 {background:url("../img/detail/detail06_bg.jpg") no-repeat; }
section.detail .detail_top.top07 {background:url("../img/detail/detail07_bg.jpg") no-repeat; }
section.detail .detail_top.top08 {background:url("../img/detail/detail08_bg.jpg") no-repeat; }
section.detail .detail_top.top09 {background:url("../img/detail/detail09_bg.jpg") no-repeat; }
section.detail .detail_top.top10 {background:url("../img/detail/detail10_bg.jpg") no-repeat; }
section.detail .detail_top::before {content:''; display:block; width:1px; height:20%; background:#fff; margin:0 auto; position:absolute; bottom:0px; right:50%;}
section.detail .detail_top::after {content:''; display:block; width:1px; height:40px; background:#555; margin:0 auto; position:absolute; bottom:-40px; right:50%;}
section.detail .detail_info {position:absolute; width:100%; text-align:center; top:50%; transform:translateY(-50%);}
section.detail .detail_info p {font-size:40px; font-weight:700; color:#fff;}
section.detail .detail_info a {font-size:18px; color:#fff; text-decoration:none;}

section.detail .detail_txt {display:flex; justify-content:space-between; align-items:center; padding:0 5.556%;}
section.detail .detail_txt div {width:50%;}
section.detail .detail_txt .left {padding-right:5%;}
section.detail .detail_txt .right {line-height:3rem; text-align:right;}
section.detail .detail_txt .title {font-size:80px; font-weight:700; color:#222;}
section.detail .detail_txt .tag {font-size:20px; color:#738fb9;}
section.detail .detail_txt .txt {font-size:36px; font-weight:700; color:#555;}

section.detail .detail_view img {width:100%;}

/* detail-end*/