@import url('reset.css');
@import url('common.css');
@import url('fonts.css');
@import url('helpers.css');

/* skiptoContent */
#skiptoContent_title {position:absolute;top:-10000px}
#skiptoContent {position:absolute;width:100%;}
a.skip {display:block;position:absolute;left:0;top:-10000px;z-index:1000;width:100%;font-size:15px;text-align:center}
a.skip:focus {position:absolute;top:0;z-index:1000;padding:15px 0;background:#fff;font-weight:800;color:#000}

body {background:#fff;font-family:Dotum}
.inner {max-width: 1250px;padding: 0 20px;margin: 0 auto;box-sizing: content-box;}

/*----- header -----*/
#header {position:fixed;z-index:100;width:100%;min-width:1250px;background:#101010}
#header div.center {width:1250px;height:109px;margin:0 auto}
#header div.center h1 {padding:25px 0 0 20px}
#header .header-tel {float: right;margin-top: 45px;}
/* GNB */
ul.gnb {overflow:hidden;margin-left:142px}
ul.gnb li {float:left;background:url('../img/common/gnb_line.png') no-repeat 0 0}
ul.gnb li h2 {height:109px;background-repeat:no-repeat;background-position:0 0}
ul.gnb li:hover h2, ul.gnb li.on h2 {background-position:0 -109px}
li.gnb1 h2 {width:184px;background-image:url('../img/common/gnb1.png')}
li.gnb2 h2 {width:163px;background-image:url('../img/common/gnb2.png')}
li.gnb3 h2 {width:163px;background-image:url('../img/common/gnb3.png')}
li.gnb4 h2 {width:163px;background-image:url('../img/common/gnb4.png')}

/* recent comment */
aside#comment {overflow:hidden;float:right;width:190px;height:58px;margin:30px 30px 0 0;background:url('../img/common/gnb_line.png') no-repeat 0 0;font-size:12px;font-family:NanumGothicBold;color:#fff}
aside#comment a {display:block;overflow:hidden;color:#fff}
aside#comment div.text {margin-left:10px}
aside#comment div.text span {display:block;font-size:11px;font-family:Dotum}
aside#comment div.text p.mention {width:120px;margin-top:5px;font-family:Dotum;color:#dfdfdf}

/*----- wrapper -----*/
#wrap {overflow:hidden;width:1250px;min-width:1250px;margin:0 auto 100px;background:#fff url('../img/common/pattern.png') repeat-y 100% 0}

/*----- layout -----*/
#section1 {position:relative;padding-top:80px}
#section2 {position:relative;padding:100px 0 0 20px}
#section3 {position:relative;min-width:1250px;height:950px;background:#D2D5DA url('../img/common/sec3_bg.jpg') no-repeat 50% 0}
#section4 {overflow:hidden;position:relative;min-width:1250px;height:879px;background-color:#1d1e20;}
/* titles */
h2.sec_tt {background-repeat:no-repeat;background-position:0 0}
h2.sec_tt.on {background-position:0 100%}
#sec_tt1 {width:334px;height:77px;background-image:url('../img/common/sec_tt1.png')}
#sec_tt2 {width:215px;height:78px;background-image:url('../img/common/sec_tt2.png')}
#sec_tt3 {width:229px;height:106px;background-image:url('../img/common/sec_tt3.png')}
#sec_tt4 {width:300px;height:67px;background-image:url('../img/common/sec_tt4.png')}
/* arrows */
aside.arrow {display:none;position:absolute;right:0;top:0}
aside#arrow1 {display: block;clip-path: inset(0 0 100% 0);}
aside.arrow button {padding:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:0 0;cursor:pointer}
aside.arrow:hover button {background-position:0 100%}
#arrow1 button {width:240px;height:217px;background-image:url('../img/common/arrow1.png')}
#arrow2 button {width:398px;height:173px;background-image:url('../img/common/arrow2.png')}
#arrow3 button {width:233px;height:239px;background-image:url('../img/common/arrow3.png')}
#arrow4 {top:-40px}
#arrow4 button {width:240px;height:217px;background-image:url('../img/common/arrow4.png')}

/*----- [NEW] main-popup & main -----*/
.main-popup, .main {font-family: 'Pretendard';color: white;line-height: 1;letter-spacing: -0.025em;}

/*----- [NEW] main-popup -----*/
.main-popup {z-index: 11000;position: relative;width: 100%;height: 100vh;background-color: #101010;}
.main-popup-inner {width: 800px;height: 450px;}
.main-popup-front {font-weight: bold;}
.main-popup-text01 {font-size: 46px;margin-bottom: 5px;color: white;}
.main-popup-text02 {font-size: 46px;margin-bottom: 150px;color: #cecccc;clip-path: inset(0 100% 0 0);}
.main-popup-text03 {font-size: 36px;margin-bottom: 20px;color: #cecccc;clip-path: inset(0 100% 0 0);}
.main-popup-close {gap: 12px;position: absolute;left: 50%;bottom: -80px;transform: translateX(-50%);cursor: pointer;}
.main-popup-close-text {font-size: 36px;color: #cecccc;}

/*----- [NEW] main -----*/
#main {width:100%;min-width:1250px;height:760px;padding-top:109px;background:#1d1e20;background-image: url(../img/common/main-bg.jpg);cursor: url('../img/common/main-cursor.png'), auto;overflow: hidden;}
#main div.center {width:1004px;margin:0 auto}
.main-front{margin-top: 109px;}
.main-title {margin-bottom: 35px;color: #b3b2b3;font-size: 75px;line-height: 1.1;}
.main-title em {color: white;}
.main-title-logo {width: 197px;aspect-ratio: 197/52;}
.main-title-logo-svg {width: 100%;fill: #b3b2b3;}
.main-des {color: #737373;font-size: 22px;line-height: 1.272;}
.main-des em {color: #d0d2d2;}
.main-bi-item {position: absolute;left: 50%;}
.main-bi-item-img{opacity: 0.6;}
.main-bi-item-img.floating {animation: floating 2.2s infinite ease-out;}
@keyframes floating {0%, 100% {transform: translateY(0);} 50% {transform: translateY(5px);}}
.main-bi-item-img img {width: 100%;}

.main-bi-item.item-frankburger {top: 137px;margin-left: -80px;width: 196px;}
.main-bi-item.item-shabuallday {top: 71px;margin-left: 290px;width: 101px;}
.main-bi-item.item-mawang {top: 141px;margin-left: 520px;width: 134px;}
.main-bi-item.item-gimgane {top: 266px;margin-left: 680px;width: 161px;}
.main-bi-item.item-yeokjeon {top: 309px;margin-left: 370px;width: 168px;}
.main-bi-item.item-gamsung {top: 522px;margin-left: 630px;width: 145px;}
.main-bi-item.item-dailybeer {top: 524px;margin-left: 360px;width: 129px;}
.main-bi-item.item-hwarak {top: 591px;margin-left: 30px;width: 178px;}
.main-bi-item.item-youngdabang {top: 562px;margin-left: -210px;width: 144px;}
.main-bi-item.item-yuksudang {top: 479px;margin-left: -410px;width: 89px;}
.main-bi-item.item-hanchon {top: 522px;margin-left: -710px;width: 147px;}
.main-bi-item.item-2chadol {top: 353px;margin-left: -860px;width: 177px;}
.main-bi-item.item-jinsa {top: 311px;margin-left: -540px;width: 203px;}
.main-bi-item.item-hanampig {top: 113px;margin-left: -620px;width:199px;}
.main-bi-item.item-goldstarbeer {top: 98px;margin-left: -320px;width: 138px;}

.main-bi-item.item-youngdabang .main-bi-item-info-img {margin-bottom: -15px;}
.main-bi-item-info {z-index: 2;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 300px;height: 300px;border-radius: 50%;background-color: #24282a;box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.09), inset 0 0 80px 15px rgba(235, 235, 235, 0.1);opacity: 0;visibility: hidden;transform-origin: center;pointer-events: none;}
.main-bi-item-info:before {content: '';position: absolute;inset: 0;border-radius: 50%;background-image: url(../img/common/main-hover-bg.jpg);opacity: 0.6;}
.main-bi-item-info-img {margin-bottom: 20px;}
.main-bi-item-info-text {align-items: baseline;}
.main-bi-item-info-number {font-size: 56px;}
.main-bi-item-info-unit {font-size: 36px;}

/*----- section1 - web / mobile -----*/
#section1 h2 {margin-left:20px}
div.section1_wrap {position:relative;height:100%;margin-top:100px}
/* portfolio list */
#pf_list {position:relative;width:585px;margin-left:337px}
#pf_list li {position:relative;margin-bottom:60px}
#pf_list li figure {position:relative}
#pf_list li figcaption {position:absolute;left:0;top:-25px;padding-left:5px;font-family:NanumGothicBold}
#pf_list li figcaption span {position:absolute;left:270px;top:0;width:300px;font-size:13px}
#pf_list #blockImg {opacity:0;position:absolute;left:0;top:0;width:100%;height:130px;background:transparent url('../img/common/bg_icon.png')}
#pf_list #icons {opacity:0;position:absolute;left:0;top:0;width:100%;height:83px;padding-top:22px}
#pf_list #icons li {float:left;width:50%;text-align:center;cursor:pointer}
/* portfolio detail */
#pf_detail {overflow:hidden;position:absolute;right:-3000px;top:0;z-index:10;background:#f2f3f3}
#pf_detail div.part1 {float:left;position:relative;width:487px;margin-bottom:20px}
div.pf_detail_wrap {overflow:hidden;margin-top:20px;padding:0 30px}
dl.pf_tt {float:left;width:172px}
dl.pf_tt dt {height:18px;padding:4px 0 2px 4px;background:#e9d3d2;font-weight:700;font-size:14px;color:#000}
dl.pf_tt dd.pf_desc {margin-top:10px;font-size:11px;color:#8c8c8c}
dl.pf_tt dd.pf_link {margin-top:40px;font-weight:700;font-size:13px;color:#000}
dl.pf_tt dd.pf_link a {color:#666}
figure.pf_thum {float:right;width:230px}
div.pf_comment {margin:20px 30px 0;padding:10px 0;background:#fff;font-family:NanumGothicBold}
div.pf_comment dl {margin:0 10px}
div.pf_comment dt {color:#000;margin-bottom:20px}
div.pf_comment dd {overflow:hidden;margin-top:10px;font-size:12px;color:#303030}
div.pf_comment div.comment {margin-left:10px}
div.pf_comment div.comment span {font-size:11px}
div.pf_comment div.comment p.mention {width:300px;margin-top:5px;color:#454545}
#pf_close {position:absolute;right:30px;top:20px;padding:0;border:0;background:transparent;cursor:pointer}
#pf_detail div.part2 {float:left;position:relative;width:300px;margin-bottom:20px;padding:0 20px}
#pf_detail div.part2 ul {margin-top:20px}
#pf_detail div.part2 ul li {margin-bottom:20px}
#pf_detail div.part2 ul li img {width:300px}

/*----- section2 - client -----*/
.client {font-family: 'Pretendard';}
.client-head {align-items: flex-end;gap: 40px;margin-bottom: 88px;}
.client-des {font-size: 22px;line-height: 1.28;letter-spacing: -0.025em;color: #737373;}
.client-list {flex-wrap: wrap;gap: 22px;}
.client-item-year {position: relative;width: 228px;height: 228px;background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(242, 242, 242, 0.6), transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), rgba(242, 242, 242, 0.6), transparent calc(50% + 1px));background-color: #3dcfc8;color: white;font-size: 60px;font-weight: bold;}
.client-item-year:before {content: '';position: absolute;inset: 7px;background-color: #3dcfc8;border: 1px solid rgba(242, 242, 242, 0.6)}
.client-item-year:after {content: '';position: absolute;inset: 0;background-image: url('../img/common/client-item-year-deco.png');pointer-events: none;}
.client-item-year .year-text {position: relative;}

/*----- section3 - company -----*/
#section3 h2 {margin-left:20px}
div.section3_wrap {overflow:hidden;position:relative;width:1250px;margin:0 auto;padding-top:50px}
ul.sec3_menu {overflow:hidden;width:610px;margin:0 auto}
ul.sec3_menu li {float:left;width:170px;height:35px;background-repeat:no-repeat;background-position:50% 100%}
ul.sec3_menu li.on {background-position:50% 0}
li.sec3_menu1 {background-image:url('../img/common/sec3_title1.png')}
li.sec3_menu2 {background-image:url('../img/common/sec3_title2.png')}
li.sec3_menu3 {background-image:url('../img/common/sec3_title3.png')}

#sec3_wrap {position:relative;left:-2520px;width:3780px;height:920px;margin-top:60px}

#sec3_1 {float:left;width:1250px}
#sec3_1 p.sec3_1_title {font-size:25px;text-align:center}
#sec3_1 div.part1 {float:left;width:60%}
#sec3_1 div.part1 p {margin-left:20px;padding-left:140px;background:url('../img/common/sec3_tt.png') no-repeat}
#sec3_1 div.part1 figure.icon {margin:40px 0 0 20px}
#sec3_1 div.part1 figure.diagram {margin:40px 0 0 15px}
#sec3_1 div.part2 {float:right;position:relative;width:37%;margin-left:3%}
#sec3_1 div.part2 ul {width:316px;height:182px;padding:24px 0 0 16px;background:#00cac7}
#sec3_1 div.part2 ul li {margin-bottom:12px;font-size:19px;font-family:verdana;color:#fff;letter-spacing:-1px}
#sec3_1 div.part2 p {margin-top:30px;font-size:15px;line-height:18px}
#sec3_1 div.part2 a.brochure {display:block;position:absolute;left:300px;top:0}

#sec3_2 {overflow:hidden;float:left;width:1250px;margin-top:80px}
#sec3_2 div.part1 {float:left;width:62%;text-align:center}
#sec3_2 dl.part2 {float:right;width:38%;margin-top:150px}
#sec3_2 dl.part2 dt {font-size:50px}
#sec3_2 dl.part2 dd {margin-top:50px;font-size:16px}

#sec3_3 {float:left;position:relative;width:1250px}
#sec3_3 dl {padding-left:100px}
#sec3_3 dl dt {font-size:50px}
#sec3_3 dl dd {margin-top:10px;font-size:16px}
#sec3_3 div.people_wrap {overflow:hidden;width:1100px;margin:0 auto}
#sec3_3 #people {overflow:hidden;position:relative;left:2000px;margin-top:100px}
#sec3_3 #people li {float:left;width:211px;margin:0 10px 20px 0}
#sec3_3 #people li figure {position:relative}
#sec3_3 #people li figure figcaption {position:absolute;top:10px;padding-left:10px;font-size:12px;color:#fff;line-height:18px}
aside.btn_wrap button {position:absolute;top:430px;z-index:99;padding:0;border:0;background:transparent;cursor:pointer}
#btnL {left:0}
#btnR {right:0}

/*----- section4 - contact us -----*/
div.section4_wrap {position:relative;width:1250px;margin:0 auto}
div.section4_wrap h2 {margin:40px 0}
.section4_map {position: absolute;left: -30px;top: -80px;pointer-events: none;}
div.section4_wrap aside.info {margin:120px 0 0 1000px}
div.section4_wrap aside.info dl {margin-top:40px;font-size:14px;font-family:NanumGothic;color:#bababa}
div.section4_wrap aside.info dt {font-size:27px}
div.section4_wrap aside.info dt span {font-size:14px}
div.section4_wrap aside.info dd {margin-top:10px}
div.section4_wrap dl.road {margin:20px 0 0 100px}
div.section4_wrap dl.road dt {margin-bottom:20px;font:bold 28px NanumGothic;color:#bababa}
div.section4_wrap dl.road dd {min-height:41px;background:url('../img/common/icon_subway.png') no-repeat;font:13px NanumGothic;color:#bababa}
div.section4_wrap dl.road dd table {margin-left: 50px;line-height: 1.5;}
div.section4_wrap dl.road dd tr {margin-bottom:5px}
/* div.section4_wrap dl.road dd span {display:inline-block;padding:0 10px 0 50px} */
div.section4_wrap dl.road dd span {display:inline-block;}
div.section4_wrap dl.road dd span.orange {font-weight:bold;color:#bc603b}
div.section4_wrap dl.road dd span.green {font-weight:bold;color:#6f783c}
div.section4_wrap dl.road dd span.red {font-weight:bold;color:#d31145}
.road-subway {padding-right: 13px;}

#section4 address.address {margin-top:20px;text-align:center}

/*----- footer -----*/
#footer {display: flex;justify-content: center;align-items: center;min-width:1250px;height:110px;background:#101010}
#footer div.center {position:relative;width:1250px;font-size:12px;font-family:Verdana;color:#999}
#footer div.center address {margin: 6px 0;}
#footer p.policy {display:inline-block;zoom:1;display:inline;}
#footer p.policy a {color:#999}
#footer #goto_top {margin-left:10px;padding:0;border:0;cursor:pointer}
.footer-right {gap: 30px;}
.footer-certificate-list {gap: 10px;}
.footer-certificate-item:hover .footer-certificate-item-logo {filter: none;opacity: 1;}
.footer-certificate-item:hover .footer-certificate-item-paper {opacity: 1; visibility: visible;transform: translateX(-50%);}
.footer-certificate-item-logo {filter: saturate(0);opacity: 0.4;transition: all 0.3s ease;}
.footer-certificate-item-paper {position: absolute;left: 50%;bottom: 70px;transform: translateX(-50%) translateY(5%);opacity: 0;visibility: hidden;transition: all 0.3s ease 0.15s;}

/* floating_circle */
.floating_circle{position: fixed;bottom: 50px;right: 50px;z-index:10000;width: 180px;height: 180px}
.floating_circle button{background-color: transparent;border: 0;}
.floating_bg{position: absolute;top: 50%;left: 50%;width: 550px;height: 550px;border-radius: 50%;background-color: #333;transform: translate(-50%, -50%) scale(0.3);transition: all 0.3s;transition-delay: 0.3s;}
.floating_open{
   display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.3s;transition-delay: 0.3s;cursor:pointer;
   font-family: 'NanumGothicBold';font-size: 16px;line-height: 1.5;color: #fff;
}
.floating_content{display: inline-block;width: 280px;margin: 116px 0 0 95px;visibility: hidden;opacity: 0;transition: all 0.3s}
.floating_close{display: flex;gap:10px;margin-bottom: 27px;cursor:pointer;}
.floating_close .floating_close_icon{position: relative;width: 40px;height: 12px;}
.floating_close .floating_close_icon span{position: absolute;top: calc(50% - 1px);left: 5%;width: 90%;height: 2px;border-radius: 1px;background-color: #fff;transition: 0.5s;}
.floating_close .floating_close_icon span:nth-child(1){transform: rotate(20deg);}
.floating_close .floating_close_icon span:nth-child(2){transform: rotate(-20deg);}
.floating_close:hover .floating_close_icon span{transform: rotate(0);}
.floating_thumb{aspect-ratio: 16/9;margin-bottom: 27px;}
.floating_thumb video{width: 100%;height: 100%;}
.floating_bottom{display: flex;justify-content: end;}
.floating_more{display: flex;align-items: center;}
.floating_more::after{content:'';display: inline-block;;width: 0;height: 0;border-radius: 50%;background-color: #00cac7;transition: all 0.5s;}
.floating_link:hover .floating_more::after{width: 15px;height: 15px;margin-left: 10px;}
.floating_circle.open .floating_bg{transform: translate(-50%, -50%) scale(1);}
.floating_circle.open .floating_open{visibility: hidden;opacity: 0;transition-delay: 0s;}
.floating_circle.open .floating_content{visibility: visible;opacity: 1;transition-delay: 0.3s;}

/* inquiry */
#inquiry {position:absolute;left:50%;z-index:1000;width:880px;margin-left:-400px;padding-bottom:15px;background:#fff;font-size:13px;color:#9a9a9a}
#inquiry form {width:750px;margin:0 auto;padding:10px 15px}
#inquiry form fieldset {margin-top:20px}
#inquiry form legend {font-weight:700;color:#000}
#inquiry input, #inquiry select {padding:2px 0;border:1px solid #e2e2e2}
table.inquiry_tb {width:100%;margin-top:10px}
table.inquiry_tb th, table.inquiry_tb td {padding-bottom:5px}
table.inquiry_tb th {padding-right:5px;text-align:left}
table.inquiry_tb .row1 th, table.inquiry_tb .row1 td {padding-top:10px;border-top:1px solid #e2e2e2}
table.inquiry_tb .row4 th, table.inquiry_tb .row4 td {padding-bottom:10px;border-bottom:1px solid #e2e2e2}
div.field_wrap {margin-top:10px;padding:10px 0;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
div.field_wrap p.rows {margin-bottom:5px}
#content {width:100%;margin-top:10px}
#inquiry .w1 {width:54px}
#inquiry .w2 {width:192px}
#inquiry .w3 {width:470px}
#btn_sm {width:128px;height:36px;margin:0;border:0;background:#00cac7;font-size:15px;color:#fff;cursor:pointer}
#btn_cansel {width:128px;height:36px;margin:0;border:0;background:#9a9a9a;font-size:15px;color:#fff;cursor:pointer}
#btn_x {position:absolute;right:5px;top:5px;margin:0;padding:20px;border:0;background:transparent;cursor:pointer}

/* privacy layer */
#privacy_wrap {overflow:hidden;position:absolute;z-index:1000;width:100px;height:50px;background:#fff;text-align:center;border-radius:5px}
#p_spinner {padding-top:10px}
#privacy {position:relative;width:800px;height:530px;margin:0 auto;padding:20px;border:1px solid #b1b1b1;text-align:left}
#privacy_title {position:relative;height:75px;background-color:#b1b1b1;border-radius:10px}
#privacy h1 {padding:25px 0 0 15px;font-weight:800;font-size:25px;color:#fff}
#privacy_x {position:absolute;right:10px;top:15px}
#privacy_con {margin-top:10px;padding:20px 10px 20px 20px;background:#9b9b9b;border-radius:10px}
div.privacy_text {overflow-y:scroll;height:400px;padding-right:20px;font-size:14px;text-align:justify;line-height:18px}

/* popup layer */
div.popup {display:none;opacity:0;position:absolute;left:50%;padding:10px;background:#fff;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000');
}
div.pop_footer {height:25px;margin-top:8px;font-size:13px;color:#000;text-align:right;line-height:1.8em}
div.pop_footer label {display:inline-block}
a.popup_x {display:inline-block;width:50px;height:23px;margin-left:5px;border:1px solid #e1e1e1;color:#5e5e5e;text-align:center;text-decoration:none;border-radius:3px;box-shadow:0 0 3px #999 inset;cursor:pointer}


.gray_c{color:#8C8C8C}




.transitions-enabled.masonry,
.transitions-enabled.masonry .item {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .item {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
      -ms-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}