/* ==========================================================================
   webfonts
   ========================================================================== */
@import "../fonts/samsungone/style.css";
@import "../fonts/samsung-sharp-sans/style.css";
@import "../fonts/AppleSDGothicNeo/stylesheet.css";
@import "../fonts/bodoni/style.css";
@import "../fonts/noto-sans/style.css";

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {color: #222;font-size: 1em;line-height: 1.4;}
body{font-family: 'samsungone'; font-weight: 400; color: #231f20;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
h1,h2,h3,h4,h5,h6{margin: 0; padding: 0;}
dl,dt,dd{margin: 0; padding: 0;}
ul,ol{margin: 0; padding: 0; list-style: none;}
p{margin: 0; padding: 0;}
a{text-decoration: none; color: #231f20;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {display: none !important;}
.sr-only {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;/* 1 */}
.sr-only.focusable:active,.sr-only.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;white-space: inherit;width: auto;}
.invisible {visibility: hidden;}
.clearfix:before,.clearfix:after {content: " ";/* 1 */display: table;/* 2 */}
.clearfix:after {clear: both;}


@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
#wrap{overflow: hidden; min-width: 360px; /*margin: 0 auto; max-width: 1280px; height: 100%;*/}

/* header */
#header{position: fixed; top: 0; left: 0; right: 0; z-index: 10; background-color: #fff; transition: all 0.5s;}
#header .inner{position: relative; margin: 0 auto; max-width: 1280px; height: 108px; z-index: 10; transition: all 0.5s;}
#header.fixed{box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);}
#header.fixed .inner{height: 70px;}
#header .logo_gnb{display: block; position: absolute; left: 54px; bottom: 14px; width: 110px; height: 82px; background: url(../img/logo.png) no-repeat 0 0; background-size: 100%; transition: all 0.5s;}
#header.fixed .logo_gnb{left: 54px; bottom: 6px; width: 75px; height: 56px; transition: all 0.5s;}
#header .lst_gnb{position: absolute; right: 54px; bottom: 0px; }
#header .lst_gnb li{float: left; padding: 0 42px;}
#header .lst_gnb li a{display: block; position: relative; height: 53px; line-height: 53px; font-size: 15px; }
#header .lst_gnb li a:before{content: ''; display: block; position: absolute; left: 50%; top: 1px; margin-left: -3px; width: 6px; height: 10px; background: url(../img/ico_arrow_gnb.png) no-repeat 0 0; opacity: 0; transition: all 0.5s;}
#header .lst_gnb li a.active:before,#header .lst_gnb li a:hover:before{opacity: 1;}
#header .btn_gnb{display: none; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 25px; height: 20px;}
#header.fixed .btn_gnb{margin-top: -15px;}
#header .btn_gnb span{display: block; margin-top: 5px; height: 3px; background-color: #000;}
#header .btn_gnb span:first-child{margin: 0;}

@media only screen and (max-width: 900px) {
  #header .inner{height: 60px;}
  #header .logo_gnb{left: 20px; width: 60px; height: 45px; bottom: 8px;}
  #header .btn_gnb{display: block;}
  #header .lst_gnb{display: none; top: 60px; left: 0; right: 0; bottom: auto; /*box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);*/}
  #header.fixed .lst_gnb{top: 85px;}
  #header .lst_gnb{border-bottom: 1px solid #ddd;}
  #header .lst_gnb li{float: none; clear: both; padding: 0 54px; border-top: 1px solid #ddd; background: #fff;}
  #header .lst_gnb li a:before{display: none;}
}

#container{padding-top: 108px;}
@media only screen and (max-width: 900px) {
  #container{padding-top: 60px;}
}

#visual{margin: 0 auto; max-width: 1280px;}
#visual .swiper-container .swiper-slide a{overflow: hidden; display: block; position: relative;}
#visual .swiper-container .swiper-slide img{display: block; width: 100%;}
#visual .swiper-container .swiper-slide .txt_area{display: block; position: absolute; left: 94px; top: 50%; color: #dcddde; transform: translateY(-50%); z-index: 100;}


#visual .swiper-container .swiper-slide .txt_area strong{display: block; position: relative; left: -1500px; font-size: 40px; font-family: 'SamsungSharpSans'; font-weight: 800; opacity: 0; transition: left 1s, opacity 1.5s;}
#visual .swiper-container .swiper-slide .txt_area em{display: block; position: relative; left: -2000px; padding-top: 10px; font-size: 21px; font-family: 'SamsungSharpSans'; font-weight: 400; font-style: normal; opacity: 0; transition: left 1s, opacity 1.5s;}


#visual .swiper-container .swiper-slide.swiper-slide-active .txt_area strong{left:0;opacity: 1;}
#visual .swiper-container .swiper-slide.swiper-slide-active .txt_area em{left:0;opacity: 1;}

#visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 14px; width: 9px; height: 9px; background: #fff; opacity: 1;}
#visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{background: #6d6e71;}
@media only screen and (max-width: 768px) {
  #visual .swiper-container .swiper-slide .txt_area{left: 20px;}
  #visual .swiper-container .swiper-slide .txt_area strong{font-size: 18px;}
  #visual .swiper-container .swiper-slide .txt_area em{padding-top: 5px; font-size: 12px;}
}


/* work */
#work{padding: 70px 0 50px; margin: 0 auto;  max-width: 1302px;}
#work h2{padding: 0 0 35px; line-height: 55px; text-align: center; font-size: 32px; font-family: 'SamsungSharpSans'; font-weight: 400;}
#work h2 strong{font-weight: 800;}
#work .grid .grid-item{overflow: hidden; margin: 0 11px 22px; width: 412px; height: 302px;}
#work .grid .grid-item a{display: block; position: relative; height: 302px;}
#work .grid .grid-item a.btn_more{background: url(../img/ico_plus.png) no-repeat 50% 50%;}
#work .grid .grid-item a img{width: 100%;}
#work .grid .grid-item a .info_area{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 100%; background-color: rgba(253, 253, 253, 0.85); font-size: 19px; color: #231f20; text-align: center; opacity: 0; transition: opacity 0.3s;}
#work .grid .grid-item a .info_area em{display: block; position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); font-style: normal;}
#work .grid .grid-item a:hover .info_area{opacity: 1;}

@media only screen and (max-width: 1320px) {
 #work{width: 868px;}
 
}

@media only screen and (max-width: 900px) {
 #work{width: 402px;}
 #work .grid .grid-item{width: 380px; height: 278px;}
 #work .grid .grid-item a{height: 278px;}
}

/* history */
#history{position: relative; margin: 0 auto; background-color: #f4f4f4; max-width: 1280px;}
#history:after{content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; right: 0; margin-left: 541px; background-color: #f4f4f4;}
#history .history_visual{position: relative; z-index: 1;}
#history .history_visual .txt_slogan{line-height: 44px; text-align: center; font-family: "Bodoni"; font-size: 22px; color: #4d4d4f; font-style: italic;}
#history .history_visual .bg_history{position: relative; padding: 174px 0 0;}
#history .history_visual .bg_history img{display: block; width: 100%;} 

#history .history_strength{position: relative; height: 1400px; background-image: url("../img/bg_strength.png"); background-position: calc(50% - 148px) 96px; background-repeat: no-repeat;}
#history .history_strength .group_strength{position: absolute; left: 50%; top: 185px; margin-left: -5px;}
#history .history_strength h2{padding-left: 55px; line-height: 109px; font-size: 62px; font-family: 'SamsungSharpSans'; font-weight: 800;}
#history .history_strength .box_outer{padding: 32px 0 32px 55px; width: 700px; background-color: #fff;}
#history .history_strength .lst_strength li{font-family: 'SamsungOne'; font-weight: 400; line-height: 30px; font-size: 15px;}

@media only screen and (max-width: 900px) {
  #history .history_strength{background-position: calc(50% - 312px) 96px;}
  #history .history_strength .group_strength{left: auto; right: 0;}
  #history .history_strength .box_outer{width: 400px;}
}


#history .history_strength .lst_corp{margin: 29px 0 0 3px; width: 348px; height: 181px; border-top: 1px solid #c7c8c8;}
#history .history_strength .lst_corp li{float: left; padding: 35px 0 0; line-height: 27px;  text-align: center; font-family: 'AppleSDGothicNeo'; font-weight: 300; color: #58595b; line-height: 30px; font-size: 16px;}
#history .history_strength .lst_corp li:nth-child(1){width: 186px; background: url(../img/logo_kidp.png) no-repeat 2px 32px;}
#history .history_strength .lst_corp li:nth-child(2){width: 159px; background: url(../img/logo_kotra.png) no-repeat 38px 26px;}



#history .history_award{padding: 49px 0 152px;}
#history .history_award .lst_award{position: relative; margin: 0 auto; padding-left: 45px; width: 1045px;}
#history .history_award .lst_award li{float: left; padding-top: 85px; line-height: 20px; font-family: 'SamsungOne'; font-weight: 400; color: #4d4d4f;}
#history .history_award .lst_award li strong{font-weight: 700; color: #231f20;}
#history .history_award .lst_award li .txt_desc{padding-top: 20px;}
#history .history_award .lst_award li:nth-child(1){width: 288px; background: url(../img/logo_award1.png) no-repeat 0 20px;}
#history .history_award .lst_award li:nth-child(2){width: 272px; padding-left: 3px; background: url(../img/logo_award2.png) no-repeat 0 0px;}
#history .history_award .lst_award li:nth-child(3){width: 262px; padding-left: 6px; background: url(../img/logo_award3.png) no-repeat 0 13px;}
#history .history_award .lst_award li:nth-child(4){width: 214px; background: url(../img/logo_award4.png) no-repeat 0 0px;} 

@media only screen and (max-width: 900px) {
  #history .history_award .lst_award{padding: 0 30px; width: auto;}
  #history .history_award .lst_award li{width: 50%; box-sizing: border-box;}
  #history .history_award .lst_award li:nth-child(1){margin-bottom: 30px; width: 50%;}
  #history .history_award .lst_award li:nth-child(2){margin-bottom: 30px; width: 50%;}
  #history .history_award .lst_award li:nth-child(3){width: 50%;}
  #history .history_award .lst_award li:nth-child(4){width: 50%;}
}

@media only screen and (max-width: 620px) {
  #history .history_award .lst_award li:nth-child(1){width: 100%;}
  #history .history_award .lst_award li:nth-child(2){width: 100%;}
  #history .history_award .lst_award li:nth-child(3){margin-bottom: 30px; width: 100%;}
  #history .history_award .lst_award li:nth-child(4){width: 100%;}
}


#highlight{margin: 0 auto; padding: 92px 0 235px; max-width: 1280px; background-color: #e6e5e5;}
#highlight .inner{position: relative; margin: 0 auto; padding-left: 45px; width: 1045px;}
#highlight dl{}
#highlight dl dt{float: left; width: 168px; line-height: 25px; font-family: 'SamsungOne'; font-weight: 700; font-size: 17px; color: #231f20;}
#highlight dl dd{float: left; line-height: 25px; font-family: 'SamsungOne'; font-weight: 400; font-size: 14px; color: #231f20;}

@media only screen and (max-width: 1024px) {
  #highlight .inner{padding: 0 30px; width: auto;}
  #highlight dl dt{width: 100%;}
  #highlight dl dd{margin-top: 30px;}
}


#clients {position: relative;}
#clients:after{content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; right: 0; margin-left: 541px; background-color: #fff;}

#clients .name_area{height: 393px; background-color: #fff;}
#clients .name_area dl{position: absolute; top: -142px; left: 50%; margin-left: -455px; padding: 38px 0 0 118px; width: 910px; height: 468px; background: url(../img/bg_client.jpg) no-repeat 0 0;}
#clients .name_area dt{line-height: 28px; font-family: 'SamsungOne'; font-size: 17px; font-weight: 700; color: #fff;}
#clients .name_area dd{padding-top: 8px; line-height: 23px; font-family: 'SamsungOne'; font-size: 15px; font-weight: 400; color: #dcddde;}

#clients .bi_area{height: 360px; background-color: #fff;}
#clients .bi_area .lst_bi{margin: 0 auto; width: 830px;}
#clients .bi_area .lst_bi li{float: left; width: 16.6666%; height: 70px; line-height: 70px; text-align: center;}
#clients .bi_area .lst_bi li img{vertical-align: middle;}

@media only screen and (max-width: 1024px) {
  #clients .name_area dl{left: 0; margin: 0; padding-left: 30px; width: 100%; background-position: 50% 0; background-size: cover;}
  #clients .bi_area .lst_bi{width: auto;}
  #clients .bi_area .lst_bi li{}
}

@media only screen and (max-width: 800px) {
  #clients .bi_area{height: 480px;}
  #clients .bi_area .lst_bi li{width: 25%;}
}

@media only screen and (max-width: 600px) {
  #clients .bi_area{height: 580px;}
  #clients .bi_area .lst_bi li{width: 33.3333%;}
}



#scope{margin: 0 auto; padding-top: 80px; max-width: 1280px; height: 450px; background-color: #d6d6d6;}
#scope .inner{margin: 0 auto; padding-left: 45px; width: 1045px;}
#scope h2{float: left; width: 280px; line-height: 25px; font-family: 'SamsungOne'; font-weight: 800; font-size: 17px; color: #414042; letter-spacing: 2.5px;}

#scope .group_desc{float: left;}
#scope .group_desc>li{float: left;}
#scope .group_desc>li h3{line-height: 25px; font-family: 'SamsungOne'; font-weight: 700; font-size: 15px; color: #4d4d4f;}
#scope .group_desc>li .lst_desc{position: relative; padding-top: 25px;}
#scope .group_desc>li .lst_desc li{line-height: 25px; font-family: 'SamsungOne'; font-weight: 400; font-size: 15px; color: #4d4d4f;}
#scope .group_desc>li .lst_desc:before{content: ''; display: block; position: absolute; left: 0; top: 14px; width: 14px; border-top: 1px solid #b1b3b6;}
#scope .group_desc>li .lst_desc:after{content: ''; display: block; position: absolute; left: 0; bottom: -15px; width: 14px; border-top: 1px dashed #b1b3b6;}

#scope .group_desc>li:nth-child(1){width: 245px;}
#scope .group_desc>li:nth-child(2){width: 237px;}
#scope .group_desc>li:nth-child(3){}


@media only screen and (max-width: 900px) {
  #scope h2{width: 100%;}
  #scope .inner{padding: 0 30px; width: auto;}
  #scope .group_desc{margin-top: 30px; width: 100%;}
  #scope .group_desc>li:nth-child(1){width: 33.3333%;}
  #scope .group_desc>li:nth-child(2){width: 33.3333%;}
  #scope .group_desc>li:nth-child(3){width: 33.3333%;}
}

@media only screen and (max-width: 650px) {
  #scope {padding: 80px 0 150px; height: auto;}
  #scope .group_desc>li:nth-child(1){margin-bottom: 30px; width: 100%;}
  #scope .group_desc>li:nth-child(2){margin-bottom: 30px; width: 100%;}
  #scope .group_desc>li:nth-child(3){width: 100%;}
}


#contact{position: relative; height: 385px;}
#contact .inner{margin: 0 auto; width: 910px;}
#contact .group_map{position: absolute; top: -76px; left: 50%; margin-left: -455px;}
#contact .group_map .map_area{float: left; width: 540px;}
#contact .group_map .group_address{float: left; width: 370px; height: 394px; background: url(../img/bg_address.png) no-repeat 0 0;}
#contact .group_map .group_address .lst_address{padding: 78px 0 0 55px;}
#contact .group_map .group_address .lst_address li{position: relative; padding-top: 16px; line-height: 16px; font-size: 14px; color: #d1d3d4;}
#contact .group_map .group_address .lst_address li:first-child{padding-top: 0;}
#contact .group_map .group_address .lst_address li strong{font-size: 17px; font-weight: 700;}
#contact .group_map .group_address .lst_address .address_area{padding-top: 53px; line-height: 18px;}
#contact .group_map .group_address .lst_address .address_area:before{content: ''; display: block; position: absolute; left: 0; top: 30px; width: 14px; border-top: 1px solid #b1b3b6;}
#contact .group_map .group_address .lst_address .link_area{padding-top: 40px;}

@media only screen and (max-width: 950px) {
  #contact{height: auto;}
  #contact .inner{padding: 0 30px; width: auto;}
  #contact .group_map{position: relative; left: auto; margin: 0;}
  #contact .group_map .map_area{width: 100%;}
  #contact .group_map .map_area img{width: 100%;}
  #contact .group_map .group_address{width: 100%; background-size: cover;}
}



#footer{padding: 60px 0 60px; background-color: #494949;}
#footer .lst_copyright{text-align: center;}
#footer .lst_copyright li{display: inline-block; height: 30px; line-height: 40px; font-size: 12px; font-family: 'AppleSDGothicNeo'; font-weight: 400; color: #231f20;}
#footer .lst_copyright li.copy_area{color: #939598;}
#footer .lst_copyright li:nth-child(1){}
#footer .lst_copyright li:nth-child(2){margin-left: 50px;}
#footer .lst_copyright li:nth-child(3){margin-left: 22px;}

@media only screen and (max-width: 600px) {
  #footer .lst_copyright{text-align: center;}
  #footer .lst_copyright{margin: 0; width: 100%;}
  #footer .lst_copyright li:nth-child(1){margin: 0; width: 100%;}
  #footer .lst_copyright li:nth-child(2){margin: 0;}
  #footer .lst_copyright li:nth-child(3){margin: 0;}
}

#portfolio{max-width: 1280px; margin: 0 auto;}
#portfolio h2{padding: 115px 0 142px; line-height: 37px; font-size: 22px; font-weight: 400; text-align: center; color: #231f20;}
#portfolio h2 strong{font-weight: 800;}
#portfolio .img_area img{display: block; width: 100%;}


#portfolio .info_area{position: relative; height: 530px; line-height: 530px; text-align: center;}
#portfolio .info_area:after{content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; right: 0; margin-left: 541px; background-color: #fdfdfd;}
#portfolio .info_area dl{display: inline-block; padding: 20px 0 20px 224px; text-align: center; vertical-align: middle; background: url(../img/img_camera.png) no-repeat 0 50%;}
#portfolio .info_area dl dt{line-height: 20px; text-align: left; font-size: 18px; color: #231f20;}
#portfolio .info_area dl dd{padding-top: 22px; line-height: 20px; text-align: left; font-size: 14px; color: #808285;}

#portfolio .info_area dl.case2{padding: 0; text-align: center;  background: none;}
#portfolio .info_area dl.case2 dt{text-align: center;}
#portfolio .info_area dl.case2 dd{text-align: center;}



/* ==========================================================================
   under construction
   ========================================================================== */

.bodywrap{width: 100%; height: 500px; margin:0 auto; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 300; letter-spacing: -1px; color: #333333; position: relative;}
.bodywrap p{padding-left: 14%; padding-right: 14%;}
.adress p:last-child{padding-bottom: 100px;}
.header-ci{text-align: center; padding-top: 100px;}
.Ntext{text-align: center;  margin-top: 80px;}
.Atext{text-align: center;  margin-top: 6px;}
.adress{margin-top: 80px;}