.extra-slider,
.extra-slider .wrapper {position: relative;}
.extra-slider .wrapper {overflow: hidden;}
.extra-slider ul {display: block;list-style: none;position: relative;}
.extra-slider li {display: block;list-style: none;position: absolute;top: 0; left: 0;}
.extra-slider li.extra-slider-first {position: relative;}
.extra-slider {margin:0 auto;width: 100%;max-width: 1920px;}
.extra-slider .pagination {margin: 0 0 0 0;position: absolute;left: 50%;bottom: 318px;text-align: center;z-index: 50;width: auto;}
.extra-slider .pagination a {background: #c7c7c7;color: transparent;display: inline-block;margin: 0 5px;text-indent: 100%;white-space: nowrap;position: relative;left: -50%;width: 16px;height: 16px;-webkit-border-radius: 20px;border-radius: 20px;}
.extra-slider .pagination a.extra-slider-link-active {background-color: #15427d;}
.extra-slider .pagination a:hover {border-color: #15427d;}
.extra-slider ul {margin: auto;max-width: 100%;cursor:inherit !important;}
.extra-slider li {width: 100%;}
.extra-slider li img {max-width: 100%;height: auto;}

.extra-slider .navigation_wrap {position: absolute;text-align:center;top:50%;left:0;width:100%;margin-top:-14px;z-index:10;}
.extra-slider .navigation {display:inline-block;}
.extra-slider .navigation a {text-indent: -9999px;white-space: nowrap;background-image:url('/skin/default/img/main/portfolio_navi.png');background-repeat:no-repeat;background-size:30px 54px;width:15px;height:27px;display:block;float:left;margin:0 20px;}
.extra-slider .navigation .divide {display:block;float:left;width:5px;height:27px;background-image:url('/skin/default/img/main/portfolio_navi_devide.png');background-repeat:no-repeat;background-position:0 6px;}
.extra-slider .navigation a.prev {background-position:0 0;}
.extra-slider .navigation a.next {background-position:-15px 0;}
.extra-slider .navigation a.prev:hover {background-position:0 -27px;}
.extra-slider .navigation a.next:hover {background-position:-15px -27px;}

.main_visual {background-image:url('/skin/default/img/main/main_visual.jpg');position:relative;background-color:#111;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;height:946px;text-align:center;background-position: center center;overflow:hidden;}
.main_visual .vc {position:relative;z-index:20;}
.main_visual .main_slogan {margin-bottom:50px;font-size: 90px;font-weight: 300;color: #fff;line-height: 1.2;letter-spacing: 5px;}
.main_visual .main_slogan strong {font-weight: 600;letter-spacing: 1px;}
.main_visual .main_text {font-size:26px;color:#fff;font-weight:200;margin-bottom:60px;}
.main_visual .main_text br {display:none;}
.circle_wrap {display:inline-block;}
.circle_wrap li {display:table;float:left;margin-left:-20px;opacity:0;filter: alpha(opacity=0);-moz-opacity:0;}
.circle_wrap li.first {margin-left:0;}
.circle_wrap li .circle {display:table-cell;vertical-align:middle;height:220px;width:220px;border:1px solid #bfbfbf;border-radius:50%;font-size:22px;color:#fff;}
.circle_wrap li .circle.red {border-color:#ea0000;}

.h_gtitle {margin-bottom:90px;text-align:center;font-size:42px;color:#333333;font-weight:600;position:relative;padding-bottom:15px;}
.h_gtitle strong {color: #d01c25;}
.h_gtitle:before {position:absolute;left:50%;margin-left:-23px;bottom:0;background-color:#d10714;width:46px;height:3px;content:"";display:block;}
.h_gtitle.white {color:#fff;}
.h_gtitle.white:before {background-color:#d10714;}
.h_stitle {font-size:19px;color:#888888;font-weight:200;text-align:center;}

.helloweb_blog {padding:70px 0 100px 0;position: relative;}
.helloweb_blog:after {content: "";display: block;width: 100%;height: 308px;background-color: #d01c25;position: absolute;bottom: 0;left: 0;z-index: 0;}
.helloweb_blog .h_stitle {margin-bottom:60px;}
.helloweb_blog .blog {background-repeat:no-repeat;background-size:cover;height:493px;text-align:center;position: relative;z-index: 1;background-position: center center;}
.helloweb_blog .blog.blog1 {background-image:url('/skin/default/img/main/service_bg1.jpg');}
.helloweb_blog .blog.blog2 {background-image:url('/skin/default/img/main/service_bg2.jpg');}
.helloweb_blog .blog.blog3 {background-image:url('/skin/default/img/main/service_bg3.jpg');}
.helloweb_blog .hovermore {position:relative;}
.helloweb_blog .hovermore .link {transition: all .6s ease;-webkit-transition: all .6s ease;-moz-transition: all .6s ease;position:absolute;left:0;top:0;height: 100%;display: table;text-align:center;width:100%;z-index:10;opacity:0;filter: alpha(opacity=0);-moz-opacity:0;}
.helloweb_blog .hovermore .link .link_cell {position: relative;display: table-cell;width: 100%;height: 100%;vertical-align: middle;}
.helloweb_blog .hovermore .link .link_cell .text {font-size: 21px;color: #fff;font-weight: 500;margin-bottom: 35px;}
.helloweb_blog .hovermore .link .link_cell .stext {font-size: 16px;color: #fff;font-weight: 300;font-family: 'Nanum Gothic';line-height: 1.6;}
.helloweb_blog .hovermore .link .link_cell .ank {position: absolute;left: 0;bottom: 60px;text-align: center;width: 100%;}
.helloweb_blog .hovermore .link a {text-decoration:none;color:#fff;font-size:16px;font-weight:500;display:inline-block;padding-right:38px;position:relative;border-bottom:1px solid #fff;height:30px;line-height:30px;padding-left:3px;font-family: 'Nanum Gothic';}
.helloweb_blog .hovermore .link a:after {position:absolute;right:3px;top:8px;background:url('/skin/default/img/main/view_arrow.png') no-repeat 0 0;width:24px;height:11px;content:"";display:block;}
.helloweb_blog .hovermore:before {position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;content:"";opacity:0;filter: alpha(opacity=0);-moz-opacity:0;z-index:5;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.helloweb_blog .hovermore:hover:before {opacity:0.85;filter: alpha(opacity=85);-moz-opacity:0.85;}
.helloweb_blog .hovermore:hover .link {opacity:1;filter: alpha(opacity=100);-moz-opacity:1;}
.helloweb_blog .blog .tit {position:relative;padding-bottom:15px;line-height:1.1;margin-bottom:15px;}
.helloweb_blog .blog .tit:before {position:absolute;left:50%;margin-left:-13px;bottom:0;background-color:#fff;width:26px;height:2px;content:"";display:block;}
.helloweb_blog .blog.blog2 .tit:before {background-color: #000;}
.helloweb_blog .blog .tit .tt {display:block;color:#fff;font-size:26px;font-weight:500;}
.helloweb_blog .blog .tit .bb {display:block;color:#fff;font-size:26px;font-weight:500;}
.helloweb_blog .blog .txt {font-size:16px;color:#fff;font-weight:bold;font-family: 'Nanum Gothic';}
.helloweb_blog .blog .blog_btn {background-color:#fff;width:182px;height:50px;line-height:50px;display:inline-block;border-radius:2px;text-decoration:none;}
.helloweb_blog .blog .blog_btn span {font-size:14px;color:#b71d25;font-weight:500;display:inline-block;padding-right:41px;position:relative;}
.helloweb_blog .blog .blog_btn span:after {position:absolute;right:0;top:16px;background:url('/skin/default/img/main/btn_arrow.png') no-repeat 0 0;width:24px;height:11px;content:"";display:block;}

.portfolio_visual {position:relative;}
.portfolio_text {position:absolute;padding:80px 0 0 0;left:0;width:100%;top:0;z-index:10;}
.portfolio_text .txt {text-align:center;font-size:19px;color:#fff;font-weight:300;}
.portfolio_description .portfolio_cont_img {margin-top:-146px;position:relative;z-index:10;}
.portfolio_description .portfolio_cont {margin-top:40px;margin-bottom:20px;}
.portfolio_cont .tit {font-size:22px;color:#333333;font-weight:400;margin-bottom:10px;}
.portfolio_cont .box {background-color:#f4f4f4;padding:25px 30px;min-height:180px;}
.portfolio_cont .box .box_field {display:table;width:100%;}
.portfolio_cont .box .box_field .th {display:table-cell;width:25%;vertical-align:middle;padding:5px 0;font-size:15px;color:#d01c25;letter-spacing:-0.5px;}
.portfolio_cont .box .box_field .td {font-size:15px;width:75%;color:#898989;padding:5px 0;letter-spacing:-0.5px;}
.portfolio_cont .box .box_field .td a {font-size:15px;color:#898989;text-decoration:underline;}
.portfolio_cont .box .box_field .td.under {text-decoration:underline;}
.portfolio_btn {overflow:hidden;margin:0 -5px;}
.portfolio_btn .item {padding:0 5px;float:left;width:50%;}
.portfolio_btn .item a {display:block;height:60px;text-decoration:none;line-height:60px;background-color:#ededee;font-size:16px;color:#333;font-weight:400;text-align:center;border-radius:3px;}
.portfolio_btn .item a.btn_red {background-color:#d10714;color:#fff;}

.recent_work {padding:80px 0 130px 0;}
.portfolio_list {margin-top:55px;}
.portfolio_list a.work {display:block;text-decoration:none;}
.portfolio_list a.work .img {position:relative;overflow:hidden;}
.portfolio_list a.work .img img {-webkit-transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,-webkit-transform 2000ms cubic-bezier(.19,1,.22,1) 0ms;transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,transform 2000ms cubic-bezier(.19,1,.22,1) 0ms;transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,transform 2000ms cubic-bezier(.19,1,.22,1) 0ms,-webkit-transform 2000ms cubic-bezier(.19,1,.22,1) 0ms;}
.portfolio_list a.work:hover .img img {-webkit-transform: scale(1.05);transform: scale(1.05);-webkit-transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,-webkit-transform 2000ms cubic-bezier(.215,.61,.355,1) 0ms;transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,transform 2000ms cubic-bezier(.215,.61,.355,1) 0ms;transition: opacity 3000ms cubic-bezier(.19,1,.22,1) 0ms,transform 2000ms cubic-bezier(.215,.61,.355,1) 0ms,-webkit-transform 2000ms cubic-bezier(.215,.61,.355,1) 0ms;}
.portfolio_list a.work .img:before {opacity:0;filter: alpha(opacity=0);-moz-opacity:0;position:absolute;left:0;top:0;background-color:#000;width:100%;height:100%;content:"";z-index:5;transition: background-color 0.5s ease;}
.portfolio_list a.work .img:after {opacity:0;filter: alpha(opacity=0);-moz-opacity:0;position:absolute;left:50%;top:50%;background:url('/skin/default/img/main/ico_link.png') no-repeat 0 0;width:55px;height:55px;content:"";margin-top:-22px;margin-left:-22px;z-index:10;}
.portfolio_list a.work:hover .img:before {-webkit-transition: opacity 0.5s ease-in;-moz-transition: opacity 0.5s ease-in;-o-transition: opacity 0.5s ease-in;opacity: 0.7;}
.portfolio_list a.work:hover .img:after {-webkit-transition: opacity 0.5s ease-in;-moz-transition: opacity 0.5s ease-in;-o-transition: opacity 0.5s ease-in;opacity: 1;}
.portfolio_list .title_box {padding:25px 15px 20px 15px;}
.portfolio_list .title_box .title {font-size:16px;color:#333333;font-weight:400;font-family: 'Nanum Gothic';font-weight: bold;}
.portfolio_list .title_box .stitle {font-size:16px;color:#666666;font-weight:300;}
.portfolio_btn_area {text-align:center;padding:50px 0 0 0;}
.portfolio_btn_area .portfolio_btn {background-color:#d10714;width:182px;height:50px;line-height:50px;display:inline-block;border-radius:2px;text-decoration:none;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.portfolio_btn_area .portfolio_btn span {font-family: 'Nanum Gothic';font-size:14px;color:#fff;font-weight:500;display:inline-block;padding-right:41px;position:relative;}
.portfolio_btn_area .portfolio_btn span:after {position:absolute;right:0;top:16px;background:url('/skin/default/img/main/btn_arrow_white.png') no-repeat 0 0;width:24px;height:11px;content:"";display:block;}
.portfolio_btn_area .portfolio_btn:hover {background-color:#333;}

.helloweb_service {background-position:center center;overflow: hidden;position:relative;padding:165px 0 180px 0;background-image:url('/skin/default/img/main/service_bg.jpg');background-repeat:no-repeat;background-size:cover;}
.helloweb_service .text {text-align:center;font-size:19px;color:#919191;font-weight:300;margin-bottom:120px;}
.helloweb_service .item .circle {margin:0 auto 35px auto;width:204px;height:204px;background-image:url('/skin/default/img/main/circle_bg.png');background-repeat:no-repeat;}
.helloweb_service .item .txt {text-align:center;font-size:18px;font-weight:300;color:#fff;}
.helloweb_service_content {position:relative;height:100%;z-index:25;}
.lore .title {color:#fff;font-size:38px;font-weight:400;margin-bottom:5px;}
.lore .stitle {color:#fff;font-size:20px;font-weight:300;margin-bottom:20px;}
.location {background-position:center center;text-align:center;background-color: #d20c18;height:250px;}
.request {background-position:center center;background-color: #f0f0f0;height:250px;}
.location .stitle {color:#edbcbd;}
.location .sstitle a {color: #fff;font-size: 50px;font-weight: 600;text-decoration: none;}
.request .title {color:#2f2f2f;}
.request .stitle {color:#666666;}
.lore .lore_btn {background-color:#fff;width:182px;height:50px;line-height:50px;display:inline-block;border-radius:2px;text-decoration:none;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.lore .lore_btn span {font-size:14px;color:#b71d25;font-weight:500;display:inline-block;padding-right:41px;position:relative;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;font-family: 'Nanum Gothic';}
.lore .lore_btn span:after {position:absolute;right:0;top:16px;background:url('/skin/default/img/main/btn_arrow.png') no-repeat 0 
0;width:24px;height:11px;content:"";display:block;}
.lore .lore_btn:hover {background-color:#fff5f6;}
.lore .request .lore_btn {background-color:#333333;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.lore .request .lore_btn span {color:#fff;}
.lore .request .lore_btn span:after {background:url('/skin/default/img/main/btn_arrow_white.png') no-repeat 0 0;}
.lore .request .lore_btn:hover {background-color:#b71d25;}

.mouse-icon {border: 2px solid #fff;border-radius: 16px;height: 35px;width: 26px;display: block;z-index: 20;opacity: .7;position: absolute;left: 50%;bottom: 100px;margin: 0 0 0 -13px;}
.mouse-icon:after {content: "";display: block;width: 77px;height: 44px;position: absolute;left: 50%;bottom: -60px;margin-left: -38px;background:url('/skin/default/img/main/iscroll_arrow.png') no-repeat 0 0;}
.mouse-icon .wheel {-webkit-animation-name: drop;-webkit-animation-duration: 1s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 0s;-webkit-animation-iteration-count: infinite;-webkit-animation-play-state: running;-webkit-animation-name: drop;animation-name: drop;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-play-state: running;animation-play-state: running;}
.mouse-icon .wheel {position: relative;border-radius: 50%;background: #fff;width: 5px;height: 5px;top: 4px;margin-left: auto;margin-right: auto;}

.tech_pop {position: fixed;right:0;bottom:0;z-index: 100;top: 0;left: 0;text-align: center;overflow-x: hidden;overflow-y: auto;}
.tech_pop .pop_back {position: fixed;left: 0;top: 0;right:0;bottom:0;background-color: rgba(0, 0, 0, 0.7);z-index: 101;}
.tech_pop .content_wrap {margin-top: 100px;margin-bottom: 50px;position: relative;display: inline-block;max-width:1200px;background-color: #fff;padding: 100px;z-index: 102;}
.tech_pop .content_wrap .pop_close {z-index: 102;position: absolute;right: 20px;top: 20px;}
.tech_pop .content {text-align:left;position: relative;z-index: 102;}
.tech_pop .content .tit {font-size: 30px;color: #333333;font-weight: 500;margin-bottom: 15px;text-align: center;}
.tech_pop .content .img {margin-bottom: 30px;}
.tech_pop .content .text {word-break: keep-all;font-size: 24px;color: #d01c25;line-height: 1.7;text-align: center;}
.tech_pop .content .works_text {word-break: keep-all;font-size: 16px;color: #000;line-height: 1.7;text-align: center;font-family: 'Nanum Gothic';}
.tech_pop .content .works_text span {color:#d01c25}
.tech_pop .content .stit {font-size: 20px;color: #333333;font-weight: 500;margin-bottom: 10px;text-align: center;}
.tech_pop .content .roll_wrap {margin-bottom: 25px;max-height:667px;overflow:hidden;}

.roll_wrap .owl-carousel .owl-nav .owl-next,
.roll_wrap .owl-carousel .owl-nav .owl-prev {font-size: 0;display: block;overflow: hidden;margin-top: -58px;position: absolute;top: 50%;z-index: 50;text-indent: -9999px;white-space: nowrap;width: 32px;height: 115px;}
.roll_wrap .owl-carousel .owl-nav .owl-next:before,
.roll_wrap .owl-carousel .owl-nav .owl-prev:before {background-size: 42px auto;content: "";display: block;width: 21px;height: 42px;position: absolute;left: 50%;margin-left: -11px;top: 50%;margin-top: -21px;background-repeat: no-repeat;}
.roll_wrap .owl-carousel .owl-nav .owl-prev {left: -66px;}
.roll_wrap .owl-carousel .owl-nav .owl-prev:before {background-image: url('/skin/default/img/sub/main_slide_off.png');}
.roll_wrap .owl-carousel .owl-nav .owl-next {right: -66px;}
.roll_wrap .owl-carousel .owl-nav .owl-next:before {background-image: url('/skin/default/img/sub/main_slide_off.png');background-position: -21px 0;}

#tech_wrap {display: none;}
.grid {display: grid;grid-template-columns: repeat(3, 33%);gap: 20px;}