/******************************************************
*
* 공통 CSS
*
******************************************************/
* {margin:0; padding:0; border:0; font-size:16px; box-sizing:border-box!important; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0!important;

}

address, caption, cite, code, dfn, em, strong, th, var {font-style :normal; font-weight:normal}
table {border-collapse:collapse;}
a { text-decoration:none; color:inherit;}
img {vertical-align:middle; border:0;}
ul, li, ol { list-style:none;}
html,body { width:100%; height:100%; display: block!important; background-color:#fff!important;}
/* input 기본 스타일 초기화 */
input[type=text] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
			border:0;
	 box-sizing:border-box;
	border-radius:0;
	box-shadow:none;
}
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
			border:0;
	 box-sizing:border-box;
	border-radius:0;
	box-shadow:none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

textarea {-webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;border-radius:0; border:0;
			box-shadow:none;}
textarea:focus {
   outline: none;
}
input:focus {
   outline: none;
}
select:focus {
   outline: none;
}

textarea:focus { outline: none;}

.wrap {width:100%!important; height:100%; position:relative; min-width:1154px; }
.content_wrap {width:100%; position:absolute; top:0; left:0;  transition: all 0.3s; min-width:1154px; }
.content_wrap.cHide{left:-250px;  transition: all 0.3s; }

.inner {width:1154px; margin: auto;}
/**** 공통 CSS END ****/

.logPop {width:100%; height:100%; position:fixed; z-index:99999; top:0; left:0; display: none; }
.logPop .logPopBg {width:100%; height:100%; background:rgba(0,0,0,0.4);}

.logPop .logPopForm {width:330px; background-color:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; overflow: hidden;}

.logPopForm p.popTit {font-size:18px; font-weight:600; color:#1ABC9C; text-align: center; padding:25px 0px; background-color:#F7F7F7;}

.logPopForm .logForm {width:100%; padding-top:24px; padding-bottom:15px;}
.logPopForm .logForm table {width:280px; margin: auto;}
.logPopForm .logForm table tr th {width:43px; padding-bottom:5px;}
.logPopForm .logForm table tr th div{width:43px; height:34px; background-color:#EEEEEE; border:1px solid #ccc; border-right:0; -webkit-border-radius:2px 0 0 2px; -moz-border-radius:2px 0 0 2px; -ms-border-radius:2px 0 0 2px; -o-border-radius:2px 0 0 2px; border-radius:2px 0 0 2px; }

.logPopForm .logForm table tr:nth-child(1) th div {background:url("../img//common/logPopIcon01.jpg")no-repeat center center;}
.logPopForm .logForm table tr:nth-child(2) th div {background:url("../img//common/logPopIcon02.jpg")no-repeat center center;}


.logPopForm .logForm table tr td {width:237px; padding-bottom:5px;}
.logPopForm .logForm table tr td input[type=text],.logPopForm .logForm table tr td input[type=password]{width:237px; height:34px; border:1px solid #ccc; -webkit-border-radius:0 2px 2px 0px; -moz-border-radius:0 2px 2px 0px; -ms-border-radius:0 2px 2px 0px; -o-border-radius:0 2px 2px 0px; border-radius:0 2px 2px 0px; box-shadow:-1px 1px 2px rgba(0,0,0,0.1) inset; padding-left:12px; font-size:14px; color:#666;}

.logPopForm .logForm table tr td input[type=text]::placeholder,.logPopForm .logForm table tr td input[type=password]::placeholder {font-size:14px; color:#aaa;}

.logPopForm .logForm table tr:nth-child(3) td {padding-top:15px;}
.logPopForm .logForm table tr td input[type=checkbox] {vertical-align: middle;  cursor: pointer;}
.logPopForm .logForm table tr td label {vertical-align: middle; font-size:14px; color:#666;  cursor: pointer;}

.logPopForm .logForm table tr:nth-child(4) td {text-align: right;}
.logPopForm .logForm table tr td a {display: inline-block; vertical-align: middle; color:#1ABC9C; font-size:15px; margin-right:-5px;}
.logPopForm .logForm table tr td p {display: inline-block; vertical-align: middle; color:#555; font-size:14px; margin-right:-5px; padding:0px 2px;}

.logButton {width:100%; border-top:1px solid #e3e3e3; padding:20px 25px;}
.logButton input {width:100%; background-color:#1ABC9C; color:#fff; padding:12px 0px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px;  cursor: pointer;}

.order_quick { width:95px; height:95px; position: fixed; right:30px; bottom:136px; z-index:10001; transition:all 0.3s; }
.order_quick img.order_quick_btn { width:95px; height:95px; z-index:10001; cursor:pointer; }

.quick_form {width:366px; height:323px; position: fixed; right:30px; bottom:30px; z-index:1000; transition:all 0.3s;}

.quick_form .qf_close {position: absolute; right:0; top:0; width:20px; height:20px; background:url("../img/common/close.png")no-repeat center center; background-size:20px; transition:all 0.3s; cursor:pointer;}

.fp-viewing-HOME .quick_form .qf_close {background:url("../img/common/close2.png")no-repeat center center; background-size:20px; transition:all 0.3s;}
.fp-viewing-DIFFERENT .quick_form .qf_close {background:url("../img/common/close2.png")no-repeat center center; background-size:20px; transition:all 0.3s;}
.fp-viewing-PORTFOLIO .quick_form .qf_close {background:url("../img/common/close2.png")no-repeat center center; background-size:20px; transition:all 0.3s;}


.quick_form .q_form_box {width:325px; height:323px; background-color:#ffd473; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; text-align: center; position: relative; z-index:2;}
.quick_form .q_form_box p.qf_tit {padding-top:20px; font-size:24px; font-weight:300; color:#333; padding-bottom:10px;}
.quick_form .q_form_box p.qf_tit span {padding-top:20px; font-size:24px; font-weight:500; color:#333; padding-bottom:10px;}

.quick_form .q_form_box table { width:216px; margin-left:45px;}
.quick_form .q_form_box table tr th {width:70px; font-size:13px; color:#333; font-weight:300; position: relative; padding:2px 0px; padding-left:10px; letter-spacing:-0.5px!important; }
.quick_form .q_form_box table tr th div {width:2px; height:2px; background-color:#807f7f; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; position: absolute; top:13px; left:0; }
.quick_form .q_form_box table tr td {width:146px; padding:2px 0px;}
.quick_form .q_form_box table tr td input {width:146px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656;}
.quick_form .q_form_box table tr td select {width:146px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656; background:url("../img/common/selectBtn.png")no-repeat right 8px center; background-size:8px; background-color:#fff;}
.quick_form .q_form_box table tr td select option {font-size:14px; color:#565656;}

.quick_form .q_form_box table tr td textarea {width:146px; height:56px; resize:none; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:5px; font-size:14px; color:#565656;}

.quick_form .q_form_box table tr:last-child th {vertical-align: top; padding-top:6px;}

.quick_form .q_form_submit {position:absolute; bottom:0; right:-41px; width:95px; height:95px;}
.quick_form .q_form_submit input {width:95px;}

.quick_form img.qf_show_btn {position:fixed; bottom:30px; right:30px; width:95px; height:95px; z-index:1; cursor:pointer;}


/*** 간편상담_new***/
.quick_form_new {width:100%; height:70px; margin: 0 auto; background-color:#f9c647;  position: fixed; left:0px; bottom:0px; z-index:1000; transition:all 0.3s;}
.quick_form_new .q_form_box_new {overflow: hidden; width:1140px; height:70px; margin: 0 auto; text-align: left; position: relative; z-index:2;}
.quick_form_new .q_form_box_new p.qf_tit {float: left; display: inline-block; padding-top: 23px; font-size:24px; font-weight:500; color:#333; padding-bottom:10px;}
.quick_form_new .q_form_box_new p.qf_tit span {padding-top:20px; font-size:24px; font-weight:500; color:#333; padding-bottom:10px;}

.quick_form_new .q_form_box_new table {display: inline-block; width:90%; margin-top: 20px; margin-left:22px;}
.quick_form_new .q_form_box_new table tr th {width:70px; font-size:13px; color:#333; font-weight:300; position: relative; padding:2px 0px; padding-left:10px; letter-spacing:-0.5px!important; }
.quick_form_new .q_form_box_new table tr th div {width:2px; height:2px; background-color:#807f7f; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; position: absolute; top:13px; left:0; }
.quick_form_new .q_form_box_new table tr td {width:146px; padding:2px 0px; text-align: right; font-weight: 600; color: #534421;}
.quick_form_new .q_form_box_new table tr td input {width:126px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656;}
.quick_form_new .q_form_box_new table tr td select {width:126px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656; background:url("../img/common/selectBtn.png")no-repeat right 8px center; background-size:8px; background-color:#fff;}
.quick_form_new.q_form_box_new table tr td select option {font-size:14px; color:#565656;}

.quick_form_new .q_form_box_new table tr td textarea {width:146px; height:56px; resize:none; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:5px; font-size:14px; color:#565656;}

.quick_form_new .q_form_box_new table tr:last-child th {vertical-align: top; padding-top:6px;}

/*** 간편상담_sub***/
.quick_form_sub {width:100%; height:70px; margin: 0 auto; background-color:#f9c647;  position: fixed; left:0px; bottom:0px; z-index:1000; transition:all 0.3s;}
.quick_form_sub .q_form_box_sub {overflow: hidden; width:1140px; height:70px; margin: 0 auto; text-align: left; position: relative; z-index:2;}
.quick_form_sub .q_form_box_sub p.qf_tit {float: left; display: inline-block; padding-top: 23px; font-size:24px; font-weight:500; color:#333; padding-bottom:10px;}
.quick_form_sub .q_form_box_sub p.qf_tit span {padding-top:20px; font-size:24px; font-weight:500; color:#333; padding-bottom:10px;}

.quick_form_sub .q_form_box_sub table {display: inline-block; width:90%; margin-top: 20px; margin-left:22px;}
.quick_form_sub .q_form_box_sub table tr th {width:70px; font-size:13px; color:#333; font-weight:300; position: relative; padding:2px 0px; padding-left:10px; letter-spacing:-0.5px!important; }
.quick_form_sub .q_form_box_sub table tr th div {width:2px; height:2px; background-color:#807f7f; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; position: absolute; top:13px; left:0; }
.quick_form_sub .q_form_box_sub table tr td {width:146px; padding:2px 0px;  text-align: right; font-weight: 600; color: #534421;}
.quick_form_sub .q_form_box_sub table tr td input {width:126px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656;}
.quick_form_sub .q_form_box_sub table tr td select {width:126px; height:24px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 5px; font-size:14px; color:#565656; background:url("../img/common/selectBtn.png")no-repeat right 8px center; background-size:8px; background-color:#fff;}
.quick_form_sub .q_form_box_sub table tr td select option {font-size:14px; color:#565656;}

.quick_form_sub .q_form_box_sub table tr td textarea {width:146px; height:56px; resize:none; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:5px; font-size:14px; color:#565656;}

.quick_form_sub .q_form_box_sub table tr:last-child th {vertical-align: top; padding-top:6px;}

.quick_form_new .q_form_submit {position:absolute; bottom:0; right:-41px; width:95px; height:95px;}
.quick_form_new .q_form_submit input {width:95px;}


/************************************************************
*
* include top CSS
*
************************************************************/

#menu {position: static!important; height:auto!important; padding:0px 40px!important;}


#fp-nav ul li a span {background-color:#FFFFFF!important;}
#fp-nav ul li a.active span {background-color:#f8c546!important;}
#fp-nav ul li .fp-tooltip {color:#f8c546!important;}

body.fp-viewing-CATEGORY #fp-nav ul li a span, body.fp-viewing-CONTACT #fp-nav ul li a span {background-color:#FFFFFF!important;}
body.fp-viewing-CATEGORY #fp-nav ul li a.active span, body.fp-viewing-CONTACT #fp-nav ul li a.active span {background-color:#f8c546!important;}
body.fp-viewing-CATEGORY #fp-nav ul li .fp-tooltip, body.fp-viewing-CONTACT #fp-nav ul li .fp-tooltip {color:#f8c546!important;}

.header {width:100%; height:305px; position: relative; background:url("../img/common/sub_visual.jpg")no-repeat;  }
.mainTop {width:100%; position:fixed; top:0; left:0;  transition:all 0.3s; z-index:999;     background-color: #fff;  border-bottom: solid 1px #e9e9e9;}
.mainTop.mainTopLeft {left:-250px; transition:all 0.3s;}
.headerTop {width:100%; text-align: right; padding:0px 40px; transition:all 0.3s; z-index:9998; max-width:1920px; min-width:1170px; background-color:#ffffff;}

.headerTop img.logo {float:left; margin:15px 0px; transition: all 0.5s;}

.headerTop.htScroll.htLeft{left:-250px; transition: all 0.3s;}

body.fp-viewing-HOME .headerTop {background-color:#ffffff;}

.headerTop ul.gnb {display: inline-block; vertical-align: middle; margin-right:0px; padding-top: 6px;}
.headerTop ul.gnb li {display: inline-block; vertical-align: middle; position: relative; background:none!important; margin:0!important;}
.headerTop ul.gnb li a {padding:0!important;}
.headerTop ul.gnb li a p {font-size:15px; color:#000; height:62px; padding:0px 16px; font-weight:600; transition:all 0.4s; display: flex; align-items: center;}
.headerTop ul.gnb li a p:hover {color:#f8c546; transition:all 0.4s;}


.sgBox {width:170px; position: absolute; top:78px; background:rgba(51,51,51,0.9); padding:5px 0px; display:none; z-index:99;}
.sgBox > a > div{padding:10px 0px; text-align:left!important; color:#fff; font-size:13px; padding-left:20px;}
.sgBox > a > div:hover {color:#f8c546; transition: all 0.6s;}
.sgBox > a > div.sgOn {color:#f8c546;}


.rwBtn {display: inline-block; vertical-align: middle; position: relative;}
.rwBtnOn {width:28px; height:18px; position: absolute; top:0; left:0; display: none;}

.headerTop.htScroll{border-bottom:0; background:rgba(45,45,45,0.9); transition:all 0.5s; position: fixed; top:0; left:0; }
.headerTop.htScroll ul.gnb li a p{padding:20px 20px; transition:all 0.5s;}
.headerTop.htScroll ul.gnb li div.gLine { bottom:8px; }
.headerTop.htScroll img {width:154px; transition: all 0.5s;}
.headerTop.htScroll ul.gnb li .sgBox {top:61px; }

.headerTop .gnb02 {width:200px; display: inline-block; vertical-align: middle; border:1px solid #fff; border-radius:10px; overflow: hidden; margin-right:20px;}
.headerTop .gnb02 a div {width:50%; float:left; display:flex; justify-content: center; align-items: center; text-align: center; height:36px; font-size:15px; color:#fff; transition:all 0.2s;}

.headerTop .gnb02 a:first-child div {border-right:1px solid #fff;}
.headerTop .gnb02 a div:hover {background-color:#fff; color:#190f0d; transition:all 0.2s;}
.headerTop p.contact_num {display: inline-block; vertical-align: middle; margin-right:25px; font-size:19px; color:#000000; font-weight:600; background:url("../img/common/cn_icon.png")no-repeat left top 6px; padding-left:15px; background-size:8px; letter-spacing:-1px!important;}

.headerTop a img.kakao {display: inline-block; vertical-align: middle; height:26px; margin-right:25px;}

.menu-trigger {
	display: inline-block; cursor: pointer;
}
.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
}

.menu-trigger {
    position: relative;
    width: 28px;
    height: 18px;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    border-radius: 3px;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
}

.menu-trigger span:nth-of-type(2) {
    top: 8px;
}

.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}
/* type-07 */
/* 라인이 하나로 합쳐졌다가 엑스자 만들기 */
.menu-trigger.type7 span:nth-of-type(1) {
    -webkit-animation : menu-bar07-01 .5s forwards;
    animation : menu-bar07-01 .5s forwards;
}
@-webkit-keyframes menu-bar07-01 {
    0% {
        -webkit-transform : translateY(8px) rotate(45deg);
    }
    50% {
        -webkit-transform : translateY(8px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-01 {
    0% {
        transform : translateY(8px) rotate(45deg);
    }
    50% {
        transform : translateY(8px) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.type7 span:nth-of-type(2) {
    transition : all .25s .25s;
    opacity : 1;
}
.menu-trigger.type7 span:nth-of-type(3) {
    -webkit-animation : menu-bar07-02 .5s forwards;
    animation : menu-bar07-02 .5s forwards;
}
@-webkit-keyframes menu-bar07-02 {
    0% {
        -webkit-transform : translateY(-8px) rotate(-45deg);
    }
    50% {
        -webkit-transform : translateY(-8px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-02 {
    0% {
        transform : translateY(-8px) rotate(-45deg);
    }
    50% {
        transform : translateY(-8px) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.active-7 span:nth-of-type(1) {
    -webkit-animation : active-menu-bar07-01 .5s forwards;
    animation : active-menu-bar07-01 .5s forwards;
}
@-webkit-keyframes active-menu-bar07-01 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(8px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(8px) rotate(45deg);
    }
}
@keyframes active-menu-bar07-01 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(8px) rotate(0);
    }
    100% {
        transform : translateY(8px) rotate(45deg);
    }
}
.menu-trigger.active-7 span:nth-of-type(2) {
    opacity : 0;
}
.menu-trigger.active-7 span:nth-of-type(3) {
    -webkit-animation : active-menu-bar07-02 .5s forwards;
    animation : active-menu-bar07-02 .5s forwards;
}
@-webkit-keyframes active-menu-bar07-02 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(-8px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(-8px) rotate(-45deg);
    }
}
@keyframes active-menu-bar07-02 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(-8px) rotate(0);
    }
    100% {
        transform : translateY(-8px) rotate(-45deg);
    }
}

.sTitle {width:100%; padding-top:60px; padding-bottom:30px; text-align: center; position:absolute; bottom:0;}
.sTitle p:first-child {font-size:13px; color:#fff;}
.sTitle p:last-child {font-size:50px; font-weight:600; font-family:"noto snas kr"; color:#fff;}
.sTitle .sIcon {padding:15px 0px;}
.sTitle .sIcon div {width:60px; height:1px; background-color:#fff; display: inline-block; vertical-align: middle;}
.sTitle .sIcon img {display:inline-block; vertical-align: middle; margin:0 12px;}



.right_wrap {width:250px; height:100%; position: fixed; background-color:#FFFFFF; top:0; right:-250px; z-index:9999;  transition: all 0.3s; text-align: center; box-shadow: 2px 5px 28px -13px grey;
}


.right_wrap .rwPosition {width:100%; position: relative;}
.right_wrap .rwPosition p,.right_wrap .rwPosition img,.right_wrap .rwPosition div.memBtn {position: absolute;left:50%; transform:translateX(-50%);}
.right_wrap .rwPosition p.rwTxt01 {font-size:23px; color:#919191; font-weight:600; top:-100px; width:100%; transition: top 0.3s;}
.right_wrap .rwPosition p.rwTxt02 {font-size:14px; color:#919191; width:100%; padding:0px 10px; top:3000px; line-height:20px; transition: top 0.3s;}
.right_wrap .rwPosition img {top:3000px; transition: top 0.3s;}

.right_wrap .rwPosition ul.memBtn {width:100%; padding:0px 30px; overflow: hidden; top:3000px; transition: top 0.3s; position: absolute;}
.right_wrap .rwPosition ul.memBtn li {float:left; width:48%;  cursor: pointer;}
.right_wrap .rwPosition ul.memBtn li div {width:100%; background-color:#f8c546; padding:8px 0px; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; font-size:13px; margin-bottom:10px; color:#333;}
.right_wrap .rwPosition ul.memBtn li:nth-child(2n) {float:right;}
.right_wrap .rwPosition ul.memBtn li:nth-child(3) div{background-color:#e1e1e1; color:#4a322b;}
.right_wrap .rwPosition ul.memBtn li:nth-child(4) div{background-color:#e1e1e1; color:#4a322b;}


.right_wrap.rHide{right:0; transition: all 0.3s;}
.right_wrap.rHide .rwPosition p.rwTxt01 {top:21px; transition: top 0.3s;}
.right_wrap.rHide .rwPosition p.rwTxt02 {top:164px; transition: top 0.7s;}
.right_wrap.rHide .rwPosition img {top:76px; transition: top 0.5s;}

.right_wrap.rHide .rwPosition ul.memBtn {top:244px; transition: top 0.9s;}

/**** include top END ****/


/************************************************************
*
* visual CSS
*
************************************************************/
/*.section1 {background:url('../img/main/bg01.jpg')no-repeat top center; padding-bottom:0!important; background-size:100% 100%; position: relative;} */

.section1 {width:100%; position: relative;}

.section1 .vTitle {width:100%; text-align: center; position: absolute; top:-100px; opacity:0; transition:all 1s;}
.visual {width:100%; height:270px; position: relative;}
.vTitle p:first-child {line-height:25px; font-size:15px; color:#fff;}
.vTitle p:last-child {font-size:15px; color:#fff;}
.vTitle img {padding:30px 0px;}

.readMore {width:146px; margin: auto;  border:3px solid #fff; height:46px; display: flex; text-align: center; justify-content: center; align-items: center; position: relative; overflow: hidden; position: absolute; left:50%; transform: translateX(-50%); bottom:-100px; opacity: 0;}
.readMore p {font-size:17px; color:#fff; position: relative; z-index:2; font-weight:400;}
.readMore div {position: absolute; top:0; left:0; width:0; height:100%; background-color:#fff; transition: all 0.3s; z-index: 1;}

.readMore:hover p {transition: all 0.5s; color:#4a322b; font-weight:600;}
.readMore:hover div {transition: all 0.3s; width:100%;}

.scroll {position: absolute; bottom:120px; left:50%; transform: translateX(-50%);}


.section1.active .vTitle{top:0px; opacity:1; transition:1s; transition-delay:0.4s;}
.section1.active .readMore{bottom:0; opacity:1; transition:1s; transition-delay:0.4s;}

/**** visual ****/

/************************************************************
*
* visual CSS
*

.section1 {padding-bottom:0!important; position: relative; overflow: hidden;}

.section1 .vTitle {width:100%; text-align: center; position: absolute; top:-100px; opacity:0; transition:all 1s; z-index:3;}
.visual {width:100%; height:100%; position: relative;}
.vTit_position {width:100%; height:270px; position: absolute; top:50%; transform: translateY(-50%); z-index: 3;}
.vp_box {width:100%; height:270px; position: relative;}
#vid {position:absolute; top:0; left:50%; transform: translate(-50%); width:1920px; z-index:1;}

.videoFake {width:100%; height:100%; position: absolute; top:0; left:0; z-index:2; }

.vTitle p:first-child {line-height:25px; font-size:15px; color:#fff;}
.vTitle p:last-child {font-size:15px; color:#fff;}
.vTitle img {padding:30px 0px;}

.readMore {width:146px; margin: auto;  border:3px solid #fff; height:46px; display: flex; text-align: center; justify-content: center; align-items: center; position: relative; overflow: hidden; position: absolute; left:50%; transform: translateX(-50%); bottom:-100px; opacity: 0;  z-index:3;}
.readMore p {font-size:17px; color:#fff; position: relative; z-index:2; font-weight:400;}
.readMore div {position: absolute; top:0; left:0; width:0; height:100%; background-color:#fff; transition: all 0.3s; z-index: 1;}

.readMore:hover p {transition: all 0.5s; color:#4a322b; font-weight:600;}
.readMore:hover div {transition: all 0.3s; width:100%;}

.scroll {position: absolute; bottom:50px; left:50%; transform: translateX(-50%);  z-index:3;}



.section1.active .vTitle{top:0; opacity:1; transition:1s; transition-delay:0.4s;}
.section1.active .readMore{bottom:0; opacity:1; transition:1s; transition-delay:0.4s;}

/**** visual ****/




/************************************************************
*
* contents CSS
*
************************************************************/
.section2 {background-color:#FFFFFF; padding-bottom:0!important; background-size:100% 100%;}
.section3 {background-color:#f9f9f9; padding-bottom:0!important; background-size:100% 100%;}
.section4 {background-color:#f9f9f9; padding-bottom:0!important; background-size:100% 100%;}
.section5 {background-color:#FFFFFF; padding-bottom:0!important; background-size:100% 100%;}


.box {width:1154px; padding:0px 15px; margin: auto;}

.box01 {width:100%; height:686px; position: relative;}
.box02 {height:610px; position: relative; padding:0;}
.box03 { height:874px; position: relative; padding:0;}
.box04 {width:100%; height:670px; position: relative;}

.box .mTitle {width:100%; position: absolute; top:-100px; left:0; opacity:0; transition:1s;}

.box p.titTxt {font-size:35px; font-weight:800; color:#f8c546; padding-bottom:15px;}


.box p.titTxt02 {font-size:15px; font-weight:400; color:#919191; line-height: 22px;}
.box p.titTxt02:nth-child(3){padding-top:0px; line-height:22px;} 

.section3 .box p.titTxt, .section5 .box p.titTxt {color:#f8c546;}
.section3 .box p.titTxt02, .section5 .box p.titTxt02 {color:#919191;}

/***** uneed studio *****/
/*
.box .studio_ul {width:1140px; position: absolute; bottom:0; left:50%; transform: translateX(-50%);}
.box .studio_ul ul {width:1140px; margin: auto; position:relative;}
.box .studio_ul ul li {width:254px; float:left; text-align:center; background-color:#000; margin:0 auto; margin-right:42px; margin-bottom:42px; position: absolute; top:100px; opacity: 0; transition:all 1s;}
.box .studio_ul ul li div.studio_box {width:240px; height: 312px; margin:0 auto; background-color:#ff0000; border-radius: 30px; text-align:center;}
.box .studio_ul ul li:nth-child(4n+0) {width:254px; float:left; text-align:center; background-color:#000; margin-right:0px; position: absolute; top:100px; opacity: 0; transition:all 1s;}
*/


.box .link_ul {width:1140px; position: absolute; bottom:0; top:76px; left:50%; transform: translateX(-50%);}
.box .link_ul ul {width:1140px; height:694px; margin: auto; position:relative;}
.box .link_ul ul li {width:254px; float:left; text-align:center; margin-right:42px; margin-bottom:42px; position: absolute; top:160px; opacity: 0; transition:all 1s;}
.box .link_ul ul li:nth-child(5) {position: absolute; top:460px; opacity: 0; transition:all 1s;}
.box .link_ul ul li:nth-child(6) {position: absolute; top:460px; opacity: 0; transition:all 1s;}
.box .link_ul ul li:nth-child(7) {position: absolute; top:460px; opacity: 0; transition:all 1s;}
.box .link_ul ul li:nth-child(8) {position: absolute; top:460px; opacity: 0; transition:all 1s;}
.box .link_ul ul li div.studio_box {width:240px; height: 288px;  overflow: hidden; margin:0 auto; background-color:#ffffff; border-radius: 30px; text-align:center; box-shadow: 2px 5px 28px -13px  grey;
}
.box .link_ul ul li div.studio_boxImg{text-align:center; border-bottom:solid 1px #d9d9d9;}

}

.box .link_ul ul li p.aboutTxt01 {font-size:26px; color:#000; padding-bottom:36px; font-weight:600;}
.box .link_ul ul li p.aboutTxt02 {font-size: 21px;color: #000;padding-left: 25px;padding-top: 17px;text-align: left;}
.box .link_ul ul li p.aboutTxt03 {font-size: 24px; color: #f8c546; font-weight: 600; text-align: left; padding-left: 23px; padding-top: 13px;}
.box .link_ul ul li p.aboutTxt04 {width:100%; height:72px; font-size: 14px; color: #919191;text-align: left;padding-left: 21px;padding-top: 15px;line-height: 20px;letter-spacing: -0.035em!important;}



.box .link_ul ul li.diff_li01 {left:0;}
.box .link_ul ul li.diff_li02 {left:300px;}
.box .link_ul ul li.diff_li03 {left:600px;}
.box .link_ul ul li.diff_li04 {left:900px;}
.box .link_ul ul li.diff_li05 {left:0;}
.box .link_ul ul li.diff_li06 {left:300px;}
.box .link_ul ul li.diff_li07 {left:600px;}
.box .link_ul ul li.diff_li08 {left:900px;}

.box .link_ul ul li.diff_li01 p.aboutTxt01 {letter-spacing:0.5px!important;}
.box .link_ul ul li.diff_li02 p.aboutTxt01 {letter-spacing:-0.8px!important;}
.box .link_ul ul li.diff_li03 p.aboutTxt01 {letter-spacing:2px!important;}
.box .link_ul ul li.diff_li04 p.aboutTxt01 {letter-spacing:2.8px!important;}

.box .link_ul ul li.diff_li01 p.aboutTxt02 {letter-spacing:0.5px!important;}
.box .link_ul ul li.diff_li02 p.aboutTxt02 {letter-spacing:0.5px!important;}
.box .link_ul ul li.diff_li03 p.aboutTxt02 {letter-spacing:0.5px!important;}
.box .link_ul ul li.diff_li04 p.aboutTxt02 {letter-spacing:0.5px!important;}


.box .link_ul ul li .diff_icon {width:100%; height:100px; margin-bottom:25px;}
.box .link_ul ul li .diff_icon01 {}
.box .link_ul ul li .diff_icon02 {}
.box .link_ul ul li .diff_icon03 {}
.box .link_ul ul li .diff_icon04 {}
.box .link_ul ul li .diff_icon05 {}
.box .link_ul ul li .diff_icon06 {}
.box .link_ul ul li .diff_icon07 {}
.box .link_ul ul li .diff_icon08 {}

.border {color:red; font-size:30px;}

.readMore02 {width:122px; margin-top:30px; border:2px solid #fff; height:36px; display: flex; text-align: center; justify-content: center; align-items: center; position: relative; overflow: hidden;}
.readMore02 p {font-size:13px; color:#fff; position: relative; z-index:2; font-weight:400;}
.readMore02 div {position: absolute; top:0; left:0; width:0; height:100%; background-color:#fff; transition: all 0.3s; z-index: 1;}

.readMore02:hover p {transition: all 0.5s; color:#4a322b; font-weight:600;}
.readMore02:hover div {transition: all 0.3s; width:100%;}



.category {width:100%; position: absolute; top:350px; overflow: hidden; transition: 0.3s; opacity:0;}
.category .category_box {width:218px; float:left; margin-right:16px; position: relative; padding:0px 15px; overflow: hidden; padding-top:20px; }
.category .category_box:last-child {margin-right:0;}

.category .category_box .cate_icon {width:50px; height:50px; margin: auto; position: relative; z-index:2; transition: all 0.3s;}
.category .category_box:nth-child(1) .cate_icon {background:url("../img/main/cate_icon01_off.png")center center no-repeat;}
.category .category_box:nth-child(2) .cate_icon {background:url("../img/main/cate_icon02_off.png")center center no-repeat;}
.category .category_box:nth-child(3) .cate_icon {background:url("../img/main/cate_icon03_off.png")center center no-repeat;}
.category .category_box:nth-child(4) .cate_icon {background:url("../img/main/cate_icon04_off.png")center center no-repeat;}
.category .category_box:nth-child(5) .cate_icon {background:url("../img/main/cate_icon05_off.png")center center no-repeat;}

.category .category_box .cate_list_box {width:100%; border:2px solid #4a322b; -webkit-border-radius:15px; -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; border-radius:15px; padding:25px; text-align: left; position:relative; margin-top:30px; position: relative; z-index:3; transition: 0.3s;}
.category .category_box .cate_list_box p.cate_tit01 {position: absolute; background-color:#F8F8FA; padding:0px 10px; top:-12px; font-size:20px; color:#4a322b; font-weight:600; left:50%; transform: translateX(-50%); transition: 0.2s; }
.category .category_box .cate_list_box p.cate_tit02 {position: absolute; background-color:#8f817d; padding:0px 10px; top:-12px; font-size:20px; color:#fff; font-weight:600; left:50%; transform: translateX(-50%); transition: 0.3s;  opacity:0;}

.category .category_box .cate_list_box ul {width:100%;}
.category .category_box .cate_list_box ul li {width:100%; position:relative; font-size:17px; color:#4a322b; padding:5px 0px; padding-left:12px; line-height:22px; transition: 0.3s;}
.category .category_box .cate_list_box ul li div {width:2px; height:2px; background-color:#4a322b; position: absolute; top:15px; left:0; transition: 0.3s;}


.category .category_box .cate_hover_box {position: absolute; width:100%; height:0; top:0; left:0; z-index:1; transition: 0.3s;}

.category .category_box a .cate_more_box {width:100%; height:0px; opacity:0; position:relative; z-index:2; background-color:#fff; top:-12px; -webkit-border-radius:0 0 15px 15px; -moz-border-radius:0 0 15px 15px; -ms-border-radius:0 0 15px 15px; -o-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; margin-bottom:5px; transition: 0.2s;} 
.category .category_box a .cate_more_box p {padding:20px 0px; padding-top:32px; color:#4a322b; font-size:17px; font-weight:600; text-align: center;}


.category .category_box_on:nth-child(1) .cate_icon {background:url("../img/main/cate_icon01_on.png")center center no-repeat; transition: 0.3s;}
.category .category_box_on:nth-child(2) .cate_icon {background:url("../img/main/cate_icon02_on.png")center center no-repeat; transition: 0.3s;}
.category .category_box_on:nth-child(3) .cate_icon {background:url("../img/main/cate_icon03_on.png")center center no-repeat; transition: 0.3s;}
.category .category_box_on:nth-child(4) .cate_icon {background:url("../img/main/cate_icon04_on.png")center center no-repeat; transition: 0.3s;}
.category .category_box_on:nth-child(5) .cate_icon {background:url("../img/main/cate_icon05_on.png")center center no-repeat; transition: 0.3s;}

.category .category_box_on .cate_list_box {border:2px solid #fff; background-color:#8f817d; transition:all 0.3s;}
.category .category_box_on .cate_list_box p.cate_tit01 {opacity:0;  transition: 0.3s;}
.category .category_box_on .cate_list_box p.cate_tit02 {opacity:1;  transition: 0.3s;}

.category .category_box_on .cate_list_box ul li {color:#fff; transition: 0.3s; }
.category .category_box_on .cate_list_box ul li div {background-color:#fff; transition: 0.3s; }

.category .category_box_on .cate_hover_box { background-color:#8f817d; height:100%; transition: 0.3s;}
.category .category_box_on a .cate_more_box {height:72px; opacity:1; transition-delay:0.5s; transition: 0.1s;}


ul.tabs {width:100%; padding-top:75px; position: absolute; top:258px;  opacity:0;  transition:1s;}
ul.tabs li {display: inline-block; vertical-align: middle; margin-right:20px;}
ul.tabs li:last-child {margin-right:0;}
ul.tabs li div {width:50px; height:50px; margin: auto; margin-bottom:10px;}
ul.tabs li p {font-size:13px; color:#fff;}

ul.tabs li:nth-child(1) div {background:url("../img/main/tab_icon01_off.png")no-repeat;}
ul.tabs li:nth-child(2) div {background:url("../img/main/tab_icon02_off.png")no-repeat;}
ul.tabs li:nth-child(3) div {background:url("../img/main/tab_icon03_off.png")no-repeat;}
ul.tabs li:nth-child(4) div {background:url("../img/main/tab_icon04_off.png")no-repeat;}

ul.tabs li.active:nth-child(1) div {background:url("../img/main/tab_icon01_on.png")no-repeat;}
ul.tabs li.active:nth-child(2) div {background:url("../img/main/tab_icon02_on.png")no-repeat;}
ul.tabs li.active:nth-child(3) div {background:url("../img/main/tab_icon03_on.png")no-repeat;}
ul.tabs li.active:nth-child(4) div {background:url("../img/main/tab_icon04_on.png")no-repeat;}

.tab_container {width:1154px; height:300px; padding:0px 15px; position: absolute; bottom:0; left:50%; transform:translateX(-50%);}
.tab_container .tab_content {width:100%; position: relative;}
.tab_container .tab_content img {position: absolute; left:-100px; top:0; opacity:0;  transition:1s;}
.tab_container .tab_content .tabConBox {position: absolute; right:-100px; top:0; text-align: left; width:580px;  opacity:0;  transition:1s;}
.tab_container .tab_content .tabConBox p.tcTxt01 {font-size:15px; color:#fff; font-weight:600; padding-bottom:30px;}
.tab_container .tab_content .tabConBox p.tcTxt02 {font-size:14px; color:#fff; padding-bottom:10px; line-height:26px; word-break: keep-all;}


ul.link_ul02 {width:1154px; margin: auto; overflow: hidden; margin-top:120px;}
ul.link_ul02 li {width:292.5px; float:left; padding:0px 15px; text-align: left;}
ul.link_ul02 li img {width:100%;}
ul.link_ul02 li .lineBox {width:100%; height:2px; background-color:#fff; margin:20px 0px;}
ul.link_ul02 li p.txt01 {font-size:20px; color:#fff; font-weight:600; padding-bottom:20px;}
ul.link_ul02 li p.txt02 {font-size:14px; color:#fff; line-height:24px; padding-bottom:25px;}


.portfolio {width:100%; position: absolute; top:300px; opacity:0; transition:all 0.3s;}

ul.port_tab {width:100%; overflow: hidden; margin-bottom:0px;}
ul.port_tab li {float:left; width:14%; height: 43px; border-bottom: solid 3px #ededed;}
ul.port_tab li div {width:48px; height:48px; margin: auto; cursor: pointer;}
ul.port_tab li:nth-child(1) div {background:url("../img/main/cate_icon01_on.png")no-repeat center center; background-size:38px;}
ul.port_tab li:nth-child(2) div {background:url("../img/main/cate_icon02_on.png")no-repeat center center; background-size:37px;}
ul.port_tab li:nth-child(3) div {background:url("../img/main/cate_icon03_on.png")no-repeat center center; background-size:33px;}
ul.port_tab li:nth-child(4) div {background:url("../img/main/cate_icon04_on.png")no-repeat center center; background-size:32px;}
ul.port_tab li:nth-child(5) div {background:url("../img/main/cate_icon05_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li:nth-child(6) div {background:url("../img/main/cate_icon06_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li:nth-child(7) div {background:url("../img/main/cate_icon07_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li p {font-size:17px; font-weight:300; color:#919191; cursor: pointer;}


ul.port_tab li.active:nth-child(1) div {background:url("../img/main/gallery_icon01_on.png")no-repeat center center;  background-size:38px;}
ul.port_tab li.active:nth-child(2) div {background:url("../img/main/gallery_icon02_on.png")no-repeat center center; background-size:37px;}
ul.port_tab li.active:nth-child(3) div {background:url("../img/main/gallery_icon03_on.png")no-repeat center center; background-size:33px;}
ul.port_tab li.active:nth-child(4) div {background:url("../img/main/gallery_icon04_on.png")no-repeat center center; background-size:32px;}
ul.port_tab li.active:nth-child(5) div {background:url("../img/main/gallery_icon05_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li.active:nth-child(6) div {background:url("../img/main/gallery_icon06_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li.active:nth-child(7) div {background:url("../img/main/gallery_icon07_on.png")no-repeat center center; background-size:36px;}
ul.port_tab li.active p {color:#f8c546; font-weight:600;}
ul.port_tab li.active {border-bottom: solid 3px #f8c546;}


.ps_box {width:100%; height:615px;}
.ps_box .port_sw {width:100%; }
.ps_box .port_sw .swiper-slide {width:100%; }
.ps_box .port_sw .swiper-slide ul.portfolio_ul {width:100%;  z-index: 2; overflow: hidden; padding-top:38px;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li {width:288.5px; height:288.5px; cursor: pointer; overflow: hidden; float:left; position: relative; background-color:#fff; display: flex; align-items: center; justify-content: center;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li img {width:100%; transition:0.3s;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li .p_hover_box {width:100%; height:100%; background:rgba(0,0,0,0.7); position:absolute; text-align:center; z-index:2; top:0; left:0;  opacity:0; transition:all 0.3s;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li .p_hover_box .ph_center {width:100%; position: absolute; top:50%; left:0; z-index:9; -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); opacity:0; transition:all 0.3s;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li .p_hover_box .ph_center p {font-size:22px; color:#fff; font-weight:600; padding-bottom:15px;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li .p_hover_box .ph_center span {font-size:13px; color:#fff;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li:hover img {transform:scale(1.2); transition:all 0.3s;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li:hover .p_hover_box {opacity:1; transition:all 0.3s;}
.ps_box .port_sw .swiper-slide ul.portfolio_ul li:hover .p_hover_box .ph_center {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); opacity:1; transition:all 0.3s;}



/*.port_continer {width:100%;}
.port_continer .port_content {width:100%; position:relative;}
.port_continer .port_content ul.portfolio_ul {width:100%; border-top:5px solid #eeb993; z-index: 2; overflow: hidden;}
.port_continer .port_content ul.portfolio_ul li {width:288.5px; height:288.5px; cursor: pointer; overflow: hidden; float:left; position: relative; background-color:#fff; display: flex; align-items: center; justify-content: center;}
.port_continer .port_content ul.portfolio_ul li img {width:100%; transition:0.3s;}
.port_continer .port_content ul.portfolio_ul li .p_hover_box {width:100%; height:100%; background:rgba(0,0,0,0.7); position:absolute; text-align:center; z-index:2; top:0; left:0;  opacity:0; transition:all 0.3s;}
.port_continer .port_content ul.portfolio_ul li .p_hover_box .ph_center {width:100%; position: absolute; top:50%; left:0; z-index:9; -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); opacity:0; transition:all 0.3s;}
.port_continer .port_content ul.portfolio_ul li .p_hover_box .ph_center p {font-size:22px; color:#fff; font-weight:600; padding-bottom:15px;}
.port_continer .port_content ul.portfolio_ul li .p_hover_box .ph_center span {font-size:13px; color:#fff;}

.port_continer .port_content ul.portfolio_ul li:hover .p_hover_box {opacity:1; transition:all 0.3s;}
.port_continer .port_content ul.portfolio_ul li:hover .p_hover_box .ph_center {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); opacity:1; transition:all 0.3s;}*/

.portfolio_slide {width:100%; height:0; position:fixed; top:0; left:0; z-index:999999; overflow: hidden;  }
.portfolio_slide .slide_box {width:100%; height:100%; position: relative; transition:0.5s; opacity:0; z-index:99;  }
.portfolio_slide .slide_box .port_img_sw {width:580px; transition:0.3s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.portfolio_slide .slide_box .port_img_sw .swiper-slide {width:100%!important;}
.portfolio_slide .slide_box .port_img_sw .swiper-slide img {width:100%!important; transition:0.3s;}

.portfolio_slide .slide_box .port_img_sw .swiper-slide .detail_box {width:100%; height:150px!important;  background-color:#fff; padding:15px;}
.portfolio_slide .slide_box .port_img_sw .swiper-slide .detail_box .port_detail {height:100%; width:100%;}
.portfolio_slide .slide_box .port_img_sw .swiper-slide .detail_box .port_detail  p {color:#454545; font-size:15px; word-break: keep-all; line-height:22px; }

.ps_readMore {width:146px; margin: auto;  border:3px solid #fff; height:46px; display: flex; text-align: center; justify-content: center; align-items: center; position: relative; overflow: hidden; margin-top:30px;}
.ps_readMore p {font-size:17px; color:#fff; position: relative; z-index:2; font-weight:400;}
.ps_readMore div {position: absolute; top:0; left:0; width:0; height:100%; background-color:#fff; transition: all 0.3s; z-index: 1;}

.ps_readMore:hover p {transition: all 0.5s; color:#4a322b; font-weight:600;}
.ps_readMore:hover div {transition: all 0.3s; width:100%;}


.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
 
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
 
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
 
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
/*************** SCROLLBAR MAC OS X ***************/
 
.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
 
.scrollbar-macosx > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
 
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar {
    background-color:#ccc;
    display: block;
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
 
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 1;
}
 
 
.scrollbar-macosx > .scroll-element.scroll-x {
    bottom: 0px;
    height: 0px;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}
 
.scrollbar-macosx > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0px;
    top: 0;
    width: 0px;
}
 
/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
 
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
 
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
 
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
/*************** SCROLLBAR MAC OS X ***************/
 



.portfolio_slide .port_bg {width:100%; height:100%; position:absolute; top:0; left:0; 
background: rgba(0,0,0,0.85); transition:0.3s; z-index:1;  opacity:0;}
.portfolio_slide .close { width:33px; height:33px; background-color:#fff; position: absolute; top:20px; right:50px; cursor: pointer; z-index:99; background:url("../img/main/close.png")no-repeat center center; background-size:24px;}

.portfolio_slide .port_next {width:80px; height:80px; position: absolute; right:50px; top:50%; transform: translateY(-50%); z-index:99; background:url("../img/main/g_next.png")no-repeat center center; background-size:24px; cursor: pointer;}
.portfolio_slide .port_prev {width:80px; height:80px; position: absolute; left:50px; top:50%; transform: translateY(-50%); z-index:99; background:url("../img/main/g_prev.png")no-repeat center center; background-size:24px; cursor: pointer;}


.portfolio_slide_hover { height:100%; }
.portfolio_slide_hover .slide_box {opacity:1; transition:0.5s; transition-delay:0.5s;}
.portfolio_slide_hover .port_bg {opacity:1; transition:0.3s;}



.location {width:1140px; height:400px; position: absolute; bottom:142px; left:50%; transform: translateX(-50%);}

.location .loca_position {width:100%; height:400px; position: relative;}
.location .map {width:760px; height:200px; position:absolute; top:0px; left:-100px; transition:1s; opacity:0; background-color: #ebebeb; padding: 5px;}
.location .map img {width:100%;}
.location .map2 {width:760px; height:200px; position:absolute; top:200px; left:-100px; transition:1s; opacity:0; background-color: #ebebeb; padding: 5px;}
.location .map2 img {width:100%;}
.location .mapInfo {width:380px; height:400px; background-color:#f9f9f9; padding: 30px 45px; text-align:left;  position:absolute; top:0; right:-100px; transition:1s; opacity:0;}

.location .mapInfo p.mapInfoTxt01 {font-size:18px; font-weight:600; color:#f8c546; text-align: left; padding-bottom:10px;}
.location .mapInfo p.mapInfoTxt02 {font-size:18px; font-weight:600; color:#f8c546; text-align: left; padding-bottom:10px; padding-top:40px;     margin-top: 40px; border-top:solid 1px #919191;}
.location .mapInfo ul.mapInfoUl {width:100%;}
.location .mapInfo ul.mapInfoUl li {padding-bottom:25px;}
.location .mapInfo ul.mapInfoUl li:last-child {padding-bottom:0;}
.location .mapInfo ul.mapInfoUl li .map_info_box {display: inline-block; vertical-align: middle; width:100%; padding-left:0px;}
.location .mapInfo ul.mapInfoUl li .map_info_box p {color:#919191; font-size:14px; line-height:18px;}

.location .mapInfo ul.mapInfoUl li:nth-child(1) .map_info_box {}
.location .mapInfo ul.mapInfoUl li:nth-child(2) .map_info_box:nth-child(1) {width:50%; margin-right:-5px;}
.location .mapInfo ul.mapInfoUl li:nth-child(2) .map_info_box:nth-child(2) {width:50%;}
.location .mapInfo ul.mapInfoUl li:nth-child(3) .map_info_box {}

/*sub_오시는길*/
.location_position {width:100%; height:400px; margin-top: 120px; position: relative;}
.location_position .map {width:580px; height:200px; position:absolute; top:0px; left:0px; background-color: #ebebeb; padding: 5px;}
.location_position .map img {width:100%;}
.location_position .map2 {width:580px; height:200px; position:absolute; top:200px; left:0px; transition:1s; background-color: #ebebeb; padding: 5px;}
.location_position .map2 img {width:100%;}
.location_position .mapInfo {width:302px; height:400px; background-color:#f9f9f9; padding: 30px 26px; text-align:left;  position:absolute; top:0; right:0px;}

.location_position .mapInfo p.mapInfoTxt01 {font-size:18px; font-weight:600; color:#f8c546; text-align: left; padding-bottom:10px;}
.location_position .mapInfo p.mapInfoTxt02 {font-size:18px; font-weight:600; color:#f8c546; text-align: left; padding-bottom:10px; padding-top:40px; margin-top: 40px; border-top:solid 1px #919191;}
.location_position .mapInfo ul.mapInfoUl {width:100%;}
.location_position .mapInfo ul.mapInfoUl li {padding-bottom:25px;}
.location_position .mapInfo ul.mapInfoUl li:last-child {padding-bottom:0;}
.location_position .mapInfo ul.mapInfoUl li .map_info_box {display: inline-block; vertical-align: middle; width:100%; padding-left:0px;}
.location_position .mapInfo ul.mapInfoUl li .map_info_box p {color:#919191; font-size:14px; line-height:18px;}

.location_position .mapInfo ul.mapInfoUl li:nth-child(1) .map_info_box {}
.location_position .mapInfo ul.mapInfoUl li:nth-child(2) .map_info_box:nth-child(1) {width:50%; margin-right:-5px;}
.location_position .mapInfo ul.mapInfoUl li:nth-child(2) .map_info_box:nth-child(2) {width:50%;}
.location_position .mapInfo ul.mapInfoUl li:nth-child(3) .map_info_box {}

p.comp_info {font-size:14px; color:#919191; padding-top:20px; line-height:24px;}

p.copyTxt {font-size:13px; color:#f8c546;  font-weight:bold; line-height: 1.6; padding-top:12px; position: absolute; bottom:-24px; left:50%; transform: translateX(-50%);}


.section2.active .mTitle {opacity:1; top:-24px; transition:0.8s; transition-delay:0.4s;}
.section2.active .link_ul ul li:nth-child(1) {opacity:1; top:0; transition:0.8s; transition-delay:0.4s;}
.section2.active .link_ul ul li:nth-child(2) {opacity:1; top:0; transition:0.8s; transition-delay:0.6s;}
.section2.active .link_ul ul li:nth-child(3) {opacity:1; top:0; transition:0.8s; transition-delay:0.8s;}
.section2.active .link_ul ul li:nth-child(4) {opacity:1; top:0; transition:0.8s; transition-delay:1.0s;}
.section2.active .link_ul ul li:nth-child(5) {opacity:1; top:314px; transition:0.8s; transition-delay:1.2s;}
.section2.active .link_ul ul li:nth-child(6) {opacity:1; top:314px; transition:0.8s; transition-delay:1.4s;}
.section2.active .link_ul ul li:nth-child(7) {opacity:1; top:314px; transition:0.8s; transition-delay:1.6s;}
.section2.active .link_ul ul li:nth-child(8) {opacity:1; top:314px; transition:0.8s; transition-delay:1.8s;}

.section3.active .mTitle {opacity:1; top:0; transition:0.8s; transition-delay:0.4s;}
.section3.active .category {opacity:1; top:230px; transition:0.8s; transition-delay:0.4s;}


.section4.active .mTitle {opacity:1; top:54px; transition:0.8s; transition-delay:0.4s;}
.section4.active .portfolio {opacity:1; top:138px; transition:0.8s; transition-delay:0.4s;}

.section5.active .mTitle {opacity:1; top:-34px; transition:0.8s; transition-delay:0.4s;}

.section5.active .map {opacity:1; left:0; transition:0.8s; transition-delay:0.4s;}
.section5.active .map2 {opacity:1; left:0; transition:0.8s; transition-delay:0.4s;}
.section5.active .mapInfo {opacity:1; right:0; transition:0.8s; transition-delay:0.4s;}
/**** contents END ****/