@import url("/web/_css/font.css");/*** reset ***/
body *{font-family:"Pretendard";}
h1, h2, h3, h4, h5, h6, strong{
    font-weight: 600;
    font-family: "Pretendard", sans-serif;
}

.mdl-layout__drawer-button {
	height:48px;
	width:48px;
	margin-left:15px;
	margin-top:4px;
}
.mdl-layout__drawer-button .material-icons {
	font-size:0;
    width:25px;height:48px;
    color: rgba(0, 0, 0, 1);
	background-image:url('/_img/icon/icon023.svg');
	background-repeat:no-repeat;
	background-size:25px;
	background-position:center center;

}
.mdl-layout__header-row {
    height: 56px;
    padding: 0 56px 0 0px;
	background-color: #1cb8b7; color: #fff;
}
.mdl-layout-title{width:105px;box-sizing:border-box; float: left;}
.mdl-layout-title img{width:100%;max-width:105px;margin-top: 76px;}
.mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title {
    line-height: 1;
	padding-top:35px;
    padding-left: 30px;width:135px;
}

.tmenu{font-size:0;display:block;width:40px;height:56px;background-repeat:no-repeat;background-position:center center;}
.tmenu.ico_login{
	background-image:url('/_img/icon/icon026.svg');
	background-size:38px;
}
.tmenu.ico_search{
	background-image:url('/_img/icon/icon001.svg');
	background-size:38px;
}
.tmenu.ico_community{
	background-image:url('/_img/icon/icon002.svg');
	background-size:38px;
}
.tmenu.ico_baby{
	background-image:url('/_img/icon/icon003.svg');
	background-size:38px;
}
.tmenu.ico_home{
	background-image:url('/_img/icon/icon001.svg');
	background-size:38px;
}
.homelink{position:absolute;right:10px;}
.nonehead .mdl-layout__header-row {
	position:relative;
    padding: 0 30px 0 30px;
	width:100%;
}
.nonehead-title{font-size:22px;height:40px;line-height:44px;}
.backbtn{position:absolute;left:0;width:40px;height:40px;line-height:40px;cursor:pointer;text-align:left;}
.backbtn .icon-back{font-size:0;display:inline-block;width:7px;height:40px;background-repeat:no-repeat;background-position:left center;background-image:url('/_img/icon/icon028_1.svg');
	background-size:7px;}
.nonehead-title{display:block;margin:0 auto;}
.fmenu{font-size:0;display:block;width:100%;height:45px;background-repeat:no-repeat;background-position: bottom center ;}
.flabel{color:#000;font-weight:normal;}
.fmenu.ico_home{
	background-image:url('/_img/icon/icon004.svg');
	background-size:40px;
}
.fmenu.ico_diary{
	background-image:url('/_img/icon/icon005.svg');
	background-size:40px;
}
.fmenu.ico_info{
	background-image:url('/_img/icon/icon006.svg');
	background-size:40px;
}
.fmenu.ico_play{
	background-image:url('/_img/icon/icon007.svg');
	background-size:40px;
}
.fmenu.ico_record{
	background-image:url('/_img/icon/icon045.svg');
	background-size:40px;
}
.bottom-nav{
	display:flex;align-items:center;
	justify-content:center;
	position:fixed;
	bottom:0;left:0;
	right:0;
	box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
	border-top:1px solid #e0e0e0;
	background-color:#fff;
	z-index:1;
	-webkit-tap-highlight-color:transparent;
	box-sizing:border-box
}
.bottom-nav *,.bottom-nav :after,.bottom-nav :before{
	box-sizing:inherit
}
.bottom-nav__destination{
	flex:1 1 0;position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding-right:12px;
	padding-left:12px;
	color:#757575;text-decoration:none
}
.bottom-nav__destination:focus{
	outline:0
}
.bottom-nav__destination--active{color:#f44336}
.bottom-nav__icon{
	flex:0 0 auto;
	display:block;
	width:1em;
	height:1em;
	margin-left:auto;
	margin-right:auto;
	font-size:24px
}
.bottom-nav__icon path,.bottom-nav__icon polygon,.bottom-nav__icon rect{
	fill:currentColor
}
.bottom-nav__icon circle{
	stroke:currentColor;stroke-width:1
}
.bottom-nav__label{
	flex:0 0 auto;
	margin-top:4px;
	font-size:12px;
	font-weight:400
}
.bottom-nav__badge,.bottom-nav__label{
	line-height:1;
	text-align:center;
	white-space:nowrap
}
.bottom-nav__badge{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:calc(50% + 6px);
	padding:2px;	min-width:9px;min-height:9px;font-size:10px;font-weight:500;color:#fff;background-color:#ff0a3b;border-radius:9999px}
.bottom-nav__destination,.bottom-nav__destination--active{padding-top:8px;padding-bottom:8px;min-width:80px;max-width:168px}
.bottom-nav__label{display:block}
.bottom-nav__badge{top:6px}
.hidden-labels-nav{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;left:0;right:0;border-top:1px solid rgba(0,0,0,.02);background-color:#fff;z-index:1;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.hidden-labels-nav a{width:25%;text-align:center;}
.cont{}
.cont_title{margin-bottom:30px;}
.btn{width:100%;border-radius:5px;text-align:center;font-weight:bold;font-size:1.125rem;padding:14px 0 14px;line-height:1;margin-top:10px;cursor:pointer;}
.btn.windowblue{border:1px solid #42a9c7;background-color:#42a9c7;color:#fff;}
.btn.whiteblue{border:1px solid #ccc;background-color:#fff;color:#42a9c7;}
.btn.blueblue{border:1px solid #42a9c7;background-color:#fff;color:#42a9c7;}
.btn + .btn{margin-top:10px;}

.bbox{width:100%;border-radius:5px;padding:20px;}
.bbox + .bbox{margin-top:15px;}
.bbox.nobaby{background-color:rgb(245,245,245);}
.bbox.gender_m{background-color:#d0e9f0;}
.bbox.gender_f{background-color:#fff5c8;}
.bbox p {float: right;}
.bbox_yellow {padding: 0 20px 20px 20px; border-bottom: 1px solid rgb(229,229,229); text-align: left;}
.bbox_yellow .btn {background-color:#ffd13a;color:#fff;}
.bbox_yellow .btn p {margin-top: 20px;}
.bbox_blue {padding-bottom: 20px; }
.bbox_blue .btn {background-color:#d0e9f0;color:#42A9C7; line-height:1.7;}

.bbox_mint {padding: 20px; border-bottom: 1px solid rgb(229,229,229); text-align: left; background: #fff; position: absolute; bottom:65px; width: 100%; border:1px solid #ddd;}
.bbox_mint h3 {text-align: center;}	
.bbox_mint .btn {background-color:#ffd13a;color:#fff;}
.btn50 {width:47%;border-radius:5px;text-align:center;font-weight:bold;font-size:1.125rem;padding:14px 0 14px;line-height:1;margin-top:10px;cursor:pointer; margin-left: 7px;}
.bbox_mint .btn50 {background-color:#42A9C7;color:#fff; margin-top: 30px;}
.bbox_yellow2 {padding: 20px; }
.bbox_yellow2 .btn {background-color:#ffd13a;color:#fff; line-height: 1.7;}


.nobaby .btn{background-color:#6cb3cb;color:#fff;}
.gender_m .btn{background-color:#6cb3cb;color:#fff;}
.gender_f .btn{background-color:#ffd13a;color:#fff;}
.grid-icon{display:flex;}
.grid-icon-left{width:105px;}
.grid-icon-left .icon-baby{background-color:#fff;border-radius:75px;width:75px;height:75px;font-size:0;display:block;background-repeat:no-repeat;background-position: center center ;background-size:90px;}
.gender_m .icon-baby{background-image:url('/_img/icon/icon008.svg');}
.gender_f .icon-baby{background-image:url('/_img/icon/icon009.svg');}
.nobaby .icon-baby{background-image:url('/_img/icon/icon033.svg');}
.nobaby .grid-icon-right{line-height:75px;padding-top:0;}
.bbox .btn{width:100%;border-radius:5px;text-align:center;font-weight:bold;font-size:1.125rem;padding:5px 0;line-height:35px;margin-top:10px;cursor:pointer;}
.bbox .btn.ico_before::before{content:'';display:inline-block;width:35px;height:35px;background-repeat:no-repeat;background-position: center center ;background-image:url('/_img/icon/icon032.svg');background-size:38px;margin-right:5px;}
.grid-icon-right{padding-top:12px;}
.cont .mdl-grid {padding: 0 !important;}
.cont .mdl-cell{margin:0 !important}
/*.cont .mdl-cell +  .mdl-cell{margin-top:-10px !important;}*/
.cont .mdl-cell--12-col, .cont .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
    width: 100% !important;
}
.tarea{padding-top:0 !important;}
input:-internal-autofill-selected {
    background-color: #fff !important;
    background-image: none !important;
}
.subtxt{text-align:left;line-height:1.8;}
.subtxt a{text-decoration:underline;}
.aleft{text-align:left;}
.acenter{text-align:center;}
.aright{text-align:right;}
.dtitle-area{padding:35px 30px 10px;}
.mdl-navigation{padding-bottom:50px;}
nav .grid-half{padding:0 30px 30px;}
.subtab .grid-half{padding:0;}
.grid-half{display:flex;}
.grid-half > button{width:50%;}
.grid-half > a{width:15%;}
.dlogo{width:105px;}
.dlogo img{width:100%;}
.dclose{text-align:right;background-image:url('/_img/icon/icon022.svg');background-size:20px;
background-position:center right;background-repeat:no-repeat;}
nav .grid-one{padding:0 30px 0;}
nav.infant .grid-one{padding:0;}
.grid-one{display:block;}
.grid-one > a{width:100%;display:block;height:54px;background-repeat:no-repeat;background-position: center right;background-image:url('/_img/icon/icon028.svg');background-size:7px;border-bottom:1px solid rgb(238,238,238);}
.grid-one > a > span{color:rgb(68,68,68);line-height:54px;}
.grid-one > a > i{width:40px;display:inline-block;height:54px;background-repeat:no-repeat;background-position: center center ;font-size:0;margin-right:5px;}
.grid-one > a > i.guide{background-image:url('/_img/icon/icon044.svg');background-size:40px;}
.grid-one > a > i.nav-diary{background-image:url('/_img/icon/icon005.svg');background-size:40px;}
.grid-one > a > i.nav-info{background-image:url('/_img/icon/icon006.svg');background-size:40px;}
.grid-one > a > i.nav-play{background-image:url('/_img/icon/icon007.svg');background-size:40px;}
.grid-one > a > i.nav-community{background-image:url('/_img/icon/icon027.svg');background-size:40px;}
.drawer_tbtn{padding:5px 0 ;color:rgb(102,102,102);text-align:center;border:1px solid rgb(221,221,221);}
.drawer_tbtn.lgray{background-color:rgb(245,245,245);}
.drawer_tbtn + .drawer_tbtn{border-left:none;}
nav .grid-sub{padding:10px 0 10px;margin:0 30px;border-bottom:1px solid rgb(238,238,238);}
.grid-sub > a{width:100%;display:block;height:40px;line-height:40px;padding-left:10px;color:rgb(102,102,102);}
.drawer_footer{width:100%;padding:20px 0;display:flex;background-color:rgb(245,245,245);}
.drawer_footer a{color:rgb(102,102,102);width:50%;text-align:center;}
.drawer_footer a + a{border-left:1px solid rgb(221,221,221);}
.drawer_footer i{width:20px;display:inline-block;height:20px;background-repeat:no-repeat;background-position: center center ;font-size:0;}
i.ico-logout{background-image:url('/_img/icon/icon025.svg');background-size:25px;}
i.ico-login{background-image:url('/_img/icon/icon024.svg');background-size:25px;}

.boxes2 {display: inline-block; width: 100%;}
.boxes2 ul {position: relative; width: 100%;}
.boxes2 ul li {border: 1px solid #ddd; width: 48.5%; float: left; padding: 12px 8px; margin-left: 5px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; text-align: center; margin-top: 5px;}
.boxes2 ul li:nth-child(odd){margin-left: 0;}
.boxes2 ul li:nth-child(2n){margin-left: 5px;}
.boxes2 ul li:nth-child(1) {background: #ffdfc5;}
.boxes2 ul li:nth-child(2) {background: #ecffdf;}
.boxes2 img {width:55px;  display: block; margin: 0 auto;}

.boxes  {display: inline-block; width: 100%;}
.boxes ul {position: relative; width: 100%;}
.boxes ul li {border: 1px solid #ddd; width: 48.5%; float: left; padding: 12px 8px; margin-left: 5px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; text-align: center; margin-top: 5px;}
.boxes ul li:nth-child(odd){margin-left: 0;}
.boxes ul li:nth-child(2n){margin-left: 5px;}
.boxes ul li:nth-child(1) {background: #fff9df;}
.boxes ul li:nth-child(2) {background: #ffded7;}
.boxes ul li:nth-child(3) {background: #dff7ff;}
.boxes ul li:nth-child(4) {background: #f5ffcb;}
.boxes img {width:55px;  display: block; margin: 0 auto;}


.tab_btn{padding:12px 0 ;line-height:1;height:inherit;color:#606060;text-align:center;border:1px solid rgb(221,221,221); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;	margin-left: 10px;}
.tab_btn.is-active{background-color:#0496e1; color: #fff;}
.mdl-tabs.is-upgraded .tab_btn.is-active:after{display:none;}
.textside .mdl-textfield__input{padding:0 0 6px;}
.textside.mdl-textfield{padding:10px 0;}
.textside-radio.mdl-textfield{padding:5px 0;}
.textside.getmdl-select .mdl-icon-toggle__label { margin-top: -35px;}
.textside-radio label + label{margin-left:10px;}


/*다이어리상세보기*/


.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel button.owl-dot {
  /*  background: none;*/
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
  /**
			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
			calculation of the height of the owl-item that breaks page layouts
		 */ }
  .owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease; }
  .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
    max-height: 0; }
  .owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
.owl-theme .owl-nav {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent; }
  .owl-theme .owl-nav [class*='owl-'] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #D6D6D6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
    .owl-theme .owl-nav [class*='owl-']:hover {
      background: #869791;
      color: #FFF;
      text-decoration: none; }
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default; }

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px; }

.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  	position: absolute;
	margin: -60px auto 0;
	z-index: 9999;
	left:0;right:0;

  }

  .owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;

	}
    .owl-theme .owl-dots .owl-dot span {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      background: #D6D6D6;
      display: block;
      -webkit-backface-visibility: visible;
      transition: opacity 200ms ease;
      border-radius: 30px; }
    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      background: #42A9C7; }
.owl-theme .owl-nav [class*='owl-'] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: transparent;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}
/*
.owl-theme .owl-nav .owl-prev{
	display:inline-block;background-repeat:no-repeat;background-position: center left ;background-image:url('/_img/icon/icon028_1.svg');background-size:7px;
}
.owl-theme .owl-nav .owl-next{
	display:inline-block;background-repeat:no-repeat;background-position: center right ;background-image:url('/_img/icon/icon028.svg');background-size:7px;
}*/

.use .owl-nav .owl-prev ,
.use .owl-nav .owl-prev:hover 
{ position: absolute; top: 300px; left: 15px; z-index: 9999; background: #000;width: 50px;height: 50px; opacity: 0.2;
	display:inline-block;background-repeat:no-repeat;background-position: center center ;background-image:url('/_img/icon/icon028_1_wh.svg');background-size:7px;
}
.use .owl-nav .owl-next,
.use .owl-nav .owl-next:hover
{ position: absolute; top: 300px; right: 15px; z-index: 9999; background: #000;width: 50px;height: 50px; opacity: 0.2;
	display:inline-block;background-repeat:no-repeat;background-position: center center ;background-image:url('/_img/icon/icon028_wh.svg');background-size:7px;
}








.cont.diary-view{padding: 20px 30px 0;border-bottom:1px solid rgb(221,221,221);}
.diary-view .bbox{margin-bottom:10px;}
.grid-multi{display:flex;flex-wrap:wrap;}
.grid-multi-nav{width:20px;}
.grid-multi-nav a{display:block;width:100%;height:53px;}
.grid-multi-nav .arrow-l{display:inline-block;background-repeat:no-repeat;background-position: center left ;background-image:url('/_img/icon/icon028_1.svg');background-size:7px;}
.grid-multi-nav .arrow-r{display:inline-block;background-repeat:no-repeat;background-position: center right ;background-image:url('/_img/icon/icon028.svg');background-size:7px;}



.grid-multi-left{width:53px;}
.grid-multi-left .icon-baby{
	background-color:#fff;border-radius:53px;width:53px;height:53px;
	font-size:0;display:block;background-repeat:no-repeat;background-position: center center ;background-size:53px;}
.grid-multi-right{width:calc( 100% - 93px );padding-left:20px;}	
.grid-multi-center{width:calc( 100% - 40px );text-align:center;margin-bottom:20px;}	
.grid-multi-full{width:100%;text-align:left;line-height:35px;}
.growth .grid-multi-nav,
.growth .grid-multi-center{margin-bottom:15px;}
.grid-multi-list{width:calc( 100% - 60px );text-align:left;line-height:35px;}
.grid-multi-link{width:60px;text-align:right;line-height:35px;}
.grid-multi-link a{text-decoration:underline;}
h4 + .grid-four{margin-top:10px;}
.cont.diary-view .grid-four{margin-bottom:15px;}
.grid-four{display:flex;}
.grid-four > a{width:23%;background-color:rgb(245,245,245);padding:0;color:#000;text-align:center;border-radius:10px;font-size:0;}
.grid-four > a.active{background-color:rgb(255,245,200);}
.grid-four > a i{display:block;width:45px;height:45px;background-repeat:no-repeat;background-position: center center ;background-size:45px;margin:0 auto;}
i.icon-milk{background-image:url('/_img/icon/icon010.svg');}
i.icon-diaper{background-image:url('/_img/icon/icon011.svg');}
i.icon-growthcheck{background-image:url('/_img/icon/icon012.svg');}
i.icon-playcheck{background-image:url('/_img/icon/icon013.svg');}
i.castle{background-image:url('/_img/icon/icon016.svg');}

.grid-four > a + a{margin-left:2%;}
.wrap-summary{width:100%;background-color:rgb(245,245,245);padding:16px 18px;color:#000;text-align:left;border-radius:10px;font-size:0;}
.wrap-summary .list-summary + .list-summary{margin-top:10px;}
.list-summary i{display:inline-block;width:40px;height:40px;background-repeat:no-repeat;background-position: center center ;background-size:40px;margin:0 auto;}
.list-summary h3{display:inline-block;line-height:40px;padding-left:5px;}
.cont.diary-view + .diary-view{border-bottom:0;padding-bottom:50px;}
.cont.diary-view .list-summary h3{min-width:180px;}
.wrap-summary + .btn{margin-top:20px;}









/*animation main*/
.txt_uni {
width: 100%; height: 200px;
position: relative;   z-index: -1;
}
.txt_uni span
{position: absolute;
  left: 0; top: 50px;
  width: 100%; height: 100%;
  margin-left: -20px; left: -14px;
}

.t01 {animation: ani 8s infinite ease-in-out;}

@keyframes ani {
  0% {transform: translate(-50px,0px);}
  50% {transform: translate(50px,10px);}
  100% {transform: translate(-50px,0px);}
}

/*main*/
.main_tbox {padding:40px; position: relative; }
.main_tit h3 {font-size: 32px;word-break:keep-all;}
/*.main_tbox::after {    content: '';
    display: block;
    position: absolute;
    height: 2px;
    background-color: #ddd;
    width: 70px;
	top:0;	
    left: 0px;
    z-index: 1;
}
.main_tbox::before {    content: '';
    display: block;
    position: absolute;
    height: 70px;
    background-color: #ddd;
    width: 2px;
	top:0;	
    left: 0px;
    z-index: 1;
}*/

.main_txt p {font-size: 20px; word-break:keep-all;}
.main_txt img {float: right;}
/*.main_txt::after {    content: '';
    display: block;
    position: absolute;
    height: 2px;
    background-color: #ddd;
    width: 70px;
	bottom:-120;	
    right: -30px;
    z-index: 1;}
.main_txt::before {    content: '';
    display: block;
    position: absolute;
    height: 70px;
    background-color: #ddd;
    width: 2px;
	bottom:-120;	
    right: -30px;
    z-index: 1;}
*/
.tab_comm {position: relative;margin: 0 auto; border-radius: 4px; width: 37%;overflow: hidden;margin-bottom: 60px;}
.tab_comm li.on {/* background: #0496e1; */}
.tab_comm li { float: left;line-height: 1; text-align: center; min-width: 9.25rem;}
.tab_comm li.on a { color: #fff;}
.tab_comm li a {display: block; font-size: 1rem; color: #606060;line-height: 1;padding: 12px 35px;margin-left: 12px;min-width: 130px;}
.tab_comm li:first-child {margin-left: 0;}

.boxes {width: 100%; position: relative;display:flex;flex-wrap:wrap;}
.boxes > div{box-sizing:border-box; }
.boxes .box_img {width: 50%;height:auto; max-height: 600px;background-size:cover;background-position:center;cursor:pointer;}
/*.boxes .box_img img {width: 100%; height: 64%; max-height: 600px;}*/
.boxes .box_txt {width: 50%; height:auto; max-height: 600px;padding: 80px 60px 80px;background-color:#f8f8f8;}
.boxes .box_txt span {font-size: 24px;}
.boxes .box_txt h3 {font-size: 32px; color: #000;margin-bottom:20px;}
.boxes .box_txt h4 {font-size: 20px; color: #000;}
.boxes .box_txt p.date {font-size: 18px;margin-top: 20px; color: #606060;}
.boxes .box_txt .box_btn {transition: 0.25s; color: #fff; width: 180px; height: 50px; padding: 8px 20px; margin-top: 20px; line-height: 2; text-align: left; border-radius: 5px;}
.boxes .box_txt .box_btn p {font-size: 18px;}
.boxes .box_txt .box_btn p img.arrow-r {width: 10px;height: 14px;display: inline-block; float: right; margin-top: 10px; }
.boxes .box_txt .box_btn p:hover, .boxes .box_txt .box_btn p:focus {transition: 0.25s; color: #fff; }
.slide_effect:hover, .slide_effect:focus {box-shadow: inset 13em 0 0 0 #606060; }
@keyframes slide_effect {
  0% {box-shadow: 0 0 0 0 #1973bc}
  }
.boxes .box_txt .taglist {width: 100%; display: inline-block;}
.boxes .box_txt .taglist p.tag {font-size: 18px; display: inline-block; margin-top: 20px; margin-right: 10px; color: #606060;}

.thumbnail {width: 100%; height: 70px;margin: 30px 0; padding: 20px 50px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;	 background-image: linear-gradient(120deg, #1cb8b7 20%, #667eea 100%);}
.thumbnail h4 {font-size: 18px; color: #fff; display: inline-block;}
.thumbnail .box_btn { width: 120px; height: 50px;  line-height: 2;  color: #fff; float: right;}
.thumbnail .box_btn p img.arrow-r {width: 10px;height: 14px;display: inline-block; float: right; margin-top: 10px;}

.sol_tit {position: relative;}
.sol_tit h2 {font-size: 36px; transition: all 0.5s ease;}
.sol_tit h4 {font-size: 20px; color: #222; margin-top: 50px; }
.boxes_sol {width: 100%; position: relative; overflow: hidden;display:flex;flex-wrap:wrap;}
.boxes_sol > div{box-sizing:border-box;}
.boxes_sol .sol01 {border-radius: 15px; background-image:url('../_img/wemake_img1.jpg'); width: 31.333%; min-height:245px; margin-right: 2.5%;  padding: 30px 30px 0; margin-top: 50px; color:#fff;}
.boxes_sol .sol02 {border-radius: 15px; background-image:url('../_img/wemake_img2.jpg'); width: 31.333%; min-height:245px; margin-right: 2.5%;padding: 30px 30px 0;margin-top: 50px; color:#fff;}
.boxes_sol .sol03 {border-radius: 15px; background-image:url('../_img/wemake_img3.jpg'); width: 31.333%; min-height:245px; padding: 30px 30px 0;margin-top: 50px; color:#fff;}
.boxes_sol .sol_txt h3 {font-size: 24px;}
.boxes_sol .sol_txt p {font-size: 18px; line-height: 1.5;}
.boxes_sol .sol01 strong{display: block; position: relative;}
.boxes_sol .sol01 strong::before {top: 5px;width: 59px;height: 52px;background-position: 0 -60px;  float: right;}
.ico_after:after, .ico_before:before {display: inline-block;background: url(../_img/ico_comm.png) 0 0 no-repeat; content: '';vertical-align: top;}
.boxes_sol .sol02 strong{display: block; position: relative;}
.boxes_sol .sol02 strong::before {top: 5px;width: 64px;height: 62px;background-position: 0 -120px;  float: right;}
.boxes_sol .sol03 strong{display: block; position: relative;}
.boxes_sol .sol03 strong::before {top: 5px;width: 54px;height: 54px;background-position: 0 -190px;  float: right;}



@media (max-width:800px){
		.sol_tit h2 { font-size: 26px;}
		.sol_tit h4 { font-size: 18px; margin-top: 20px;}
		.boxes_sol .sol_txt h3 {font-size: 18px;}
		.boxes_sol .sol_txt p {font-size: 16px;}
		}
.slide2 {border-radius: 5px; border: 1px solid #606060;width: 180px; height: 50px; color: #606060; text-align: left;  padding: 8px 20px;}
button { border-radius: 5px;width: 180px; height: 50px;
  line-height:2; 
 padding: 8px 20px;
  transition: 0.25s;}
button:hover, button:focus {transition: 0.25s; color: #fff;}
button.slide2:hover, button.slide2:focus {box-shadow: inset 13em 0 0 0 #606060;}

.hasicon{
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-image: url('../_img/icon002.svg');
    background-size: 10px; 
  }


.news_tit h2 {font-size: 36px;text-align: center;}
.slide_btn button i{line-height: 60px;}
.slide_btn button {
  position: absolute;
  top: 50%; transform: translatey(-50%);
  color: #fff;
  width: 60px; height: 60px; line-height: 60px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  transition: all 0.3s  
}

.slider_art2 {position:relative; width:300px; min-width:33.333%; margin:0 auto; margin-top: 30px; }
.slider_art2 .slick-list {overflow:visible;}
.slider_art2 .item {position:relative; padding:0 1px}
.slider_art2 .news_box {display:block; height:auto; opacity:0.4; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;	max-height: 800px; margin-top: 0; margin-right: 10%;     border-radius: 15px;
    box-shadow: 0px 0px 20px 13px #efefef;}
.slider_art2 .news_box img { -webkit-filter: grayscale(100%);  filter:gray; -webkit-filter:  opacity(100%);height: auto; border-radius:15px 15px 0 0; }
.slider_art2 .slick-current .news_box {opacity:1}
.slider_art2 .slick-current .news_box img {-webkit-filter:grayscale(0); filter:none;}
.slider_art2 .slick-current .cont {padding-top:40px; color:#fff; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.4)}
.slider_art2 .slick-current .cont .tit {font-size:1rem; font-weight:500;}
.slider_art2 .slick-current .cont .tit .btn_view {display:inline-block; padding:4px; vertical-align:top; height:18px; margin-top:1px;}
.slider_art2 .slick-current .cont .tit .btn_view .ico_comm {width:18px; height:16px; background-position:0px -220px;}
.slider_art2 .slick-current + .item .cont {text-align:left}
.slider_bottom {padding: 30px;}
.slider_bottom h3 {line-height: 1.5; font-size: 26px;}	
.slider_bottom p {color: #222; font-size: 18px;}
.slider_bottom span.date {color: #606060; }
@media (max-width:800px){
	.news_tit h2 {font-size: 24px;}
	.slider_art2 {min-width:100%; margin-top: 0; }
	.slider_bottom {padding: 20px;}
	.slider_bottom h3 {font-size: 21px;}
}


.sec3.sec_inner {
  padding: 0;
  overflow: hidden;
  padding-bottom: 100px;
}

.sec3 .inner_box {
  max-width: 100%;
}


.sec3 .inner_box h1 {padding: 60px 0 70px;
    font-size: 50px;
    line-height: 100%;
    font-weight: 500;
    text-align: center;}
.main_news .cont {
  height: 158px;
  padding: 30px 25px;
  box-sizing: border-box;
  background-color: #fff;
}

.main_news .cont .cont_top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 15px;
}

.main_news .cont .cont_top h2 {
  font-size: 21px;
  font-weight: 700; line-height: 1.3;
}

.main_news .cont .cont_top span {
  font-size: 14px; margin-top: 10px;
}

.main_news .cont p {
  font-size: 15px;
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.main_news {
  padding: 70px 20px 0px;
  margin-top: 50px;
/*   overflow: hidden; */
}

.main_news .swiper-container {
  overflow: visible;
}

.main_news .swiper-slide {
  width: 390px;
  padding: 0 25px;
  /* transform: scale(0.92); */
  /* transition: .3s; */
}

.main_news .swiper-slide-prev {
  transform: translateX(-25px) scale(0.92);
}

.main_news .swiper-slide-next {
  transform: translateX(25px) scale(0.92);
}

.main_news .swiper-slide-active {
  transform: scale(1.14);
}

.main_news .img.bg01 {
	background:url('../img/bg_news01.jpg') no-repeat center center;
	background-size:cover;
}

.main_news .img.bg02 {
	background:url('../img/bg_news02.jpg') no-repeat center center;
	background-size:cover;
}

.main_news .img.bg03 {
	background:url('../img/bg_news03.jpg') no-repeat center center;
	background-size:cover;
}

.main_news .img img {
  width: 100%;
}

.main_news .img .bg_img {
  width: 100%;
  height:0;
  padding-bottom:66.6%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

.main_news li .sw_item {
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 7px #efefef;
  transform: translateY(0);
  transition: all .5s;
}

.main_news li .sw_item:hover {
  transform: translateY(-10px);
  transition: all .5s;
}

.sec3 .vodbar .progress_bar .progress {
  transition: all 2.4s linear;
}

.main_vod_box .vodbar .progress_bar .progress {
  background: #fff;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.sec3 {
  padding-bottom: 100px;
}

.sec3 .vodbar.col3 {
  width: 510px;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 250px; 
}
.swiper-wrapper {height: auto !important;}


.bottom_ani_box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 810px;
  justify-content: center;
  align-items: center;
}

.bottom_ani_box h1 {
  padding: 0;
}

.bottom_ani_box p {
  margin: 35px 0 45px;
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
}

@keyframes circular {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
  }
}

@keyframes circular-size {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
  }
}

@-webkit-keyframes circular-jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
}

@keyframes circular-jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
}

@keyframes person01 {
  0% {
    border-radius: 65% 35% 60% 40%;
  }
  25% {
    border-radius: 35% 65% 40% 60%;
  }
  50% {
    border-radius: 60% 40% 65% 35%;
  }
  75% {
    border-radius: 40% 60% 35% 65%;
  }
}

@keyframes person02 {
  0% {
    border-radius: 40% 60% 35% 40%;
  }
  25% {
    border-radius: 60% 40% 65% 35%;
  }
  50% {
    border-radius: 35% 65% 40% 60%;
  }
  75% {
    border-radius: 65% 35% 60% 40%;
  }
}

.bottom_ani_box .circular {
  transition: all .5s;
  -webkit-animation: circular 3s 0s ease-in-out infinite;
  animation: circular 3s 0s ease-in-out infinite;
}

.bottom_ani_box .circular01 {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 242px;
  height: 242px;
  margin-left: -303px;
  border-radius: 100%;
  background: #fcfcfc;
  /* background-image: linear-gradient(40deg, #0becdd, #1eccea); */
  opacity: 1;
}

.bottom_ani_box .circular02 {
  position: absolute;
  top: 106px;
  left: 50%;
  width: 75px;
  height: 75px;
  margin-left: 160px;
  border-radius: 100%;
  background: #ebf4f7;
  opacity: 1;
}

.bottom_ani_box .circular03 {
  position: absolute;
  top: 237px;
  left: 50%;
  width: 190px;
  height: 190px;
  margin-left: -838px;
  border-radius: 100%;
  background: #ebf4f7;
  opacity: 1;
}

.bottom_ani_box .circular04 {
  position: absolute;
  top: 448px;
  left: 50%;
  width: 222px;
  height: 222px;
  margin-left: 340px;
  border-radius: 100%;
  background: #7ab5c7;
  opacity: 1;
}

.bottom_ani_box .circular05 {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 106px;
  height: 106px;
  margin-left: -210px;
  border-radius: 100%;
  background: #f6f6f6;
  opacity: 1;
}

.bottom_ani_box .person01 {
  position: absolute;
  top: 109px;
  left: 50%;
  width: 574px;
  height: 514px;
  margin-left: 310px;
  overflow: hidden;
  z-index: 5;
  transition: all .5s;
  -webkit-animation: circular-jump 8s 0s linear infinite;
  animation: circular-jump 8s 0s linear infinite;
}

.bottom_ani_box .person02 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 514px;
  height: 514px;
  margin-left: -800px;
  overflow: hidden;
  z-index: 5;
  transition: all .5s;
  border-radius: 100%;
  -webkit-animation: circular-jump 12s 0s linear infinite;
  animation: circular-jump 12s 0s linear infinite;
}

.bottom_ani_box .person02 img {
  -webkit-animation: circular-size 7s 0s ease-in-out infinite;
  animation: circular-size 7s 0s ease-in-out infinite;
}


.vodbar {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: 768px;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-50%);
}

.vodbar .progress_bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.vodbar .progress_bar .progress {
  transition: all .3s;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  width: 0;
  height: 2px;
}

.vodbar > span {
  display: inline-block;
  min-width: 72px;
  position: absolute;
  z-index: 3;
  text-align: center;
  transform: translate(-50%, 0);
}

.vodbar > span:nth-child(1) {
  left: 0;
}

.vodbar > span:nth-child(2) {
  left: 33%;
}

.vodbar > span:nth-child(3) {
  left: 66%;
}

.vodbar > span:nth-child(4) {
  left: 100%;
}

.vodbar > span > strong {
  display: block;
  margin-top: -80px;
  padding-bottom: 50px;
  color: #fff;
  font-weight: 500;
  opacity: .3;
  transition: all .3s;
  cursor: pointer;
}

.vodbar > span > i {
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
}

.vodbar > span > i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all .3s;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.vodbar > span:nth-child(3) > i {
  /* transform: translateX(-100%); */
}

.vodbar > span.active > i::after,
.vodbar > span:hover > i::after {
  width: 44px;
  height: 44px;
  transition: all .3s;
}

.vodbar > span:hover > i::after {
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.vodbar > span.active > i::after {
  border: 1px solid white;
}

.vodbar.col3 > span:hover > i::after {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.vodbar.col3 > span.active > i::after {
  border: 1px solid black;
}

.vodbar > span.active > i + strong,
.vodbar > span:hover > i + strong {
  opacity: 1;
  transition: all .3s;
}

.vodbar.col3 {
  width: 515px;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 100px;
}

.vodbar.col3 .progress_bar .progress {
  background-color: #000;
}

.vodbar.col3 > span:nth-child(1) {
  left: 0;
}

.vodbar.col3 > span:nth-child(2) {
  left: 50%;
}

.vodbar.col3 > span:nth-child(3) {
  left: 100%;
}

.vodbar.col3 > span > strong {
  color: #000;
}

.vodbar.col3 > span > i {
  background-color: #000;
}

.vodbar.col3 > span > i::after {
  border-color: #000;
}



.sec3 .vodbar.col3 {width: 400px;}


@media (max-width:800px){
   .main_news .cont .cont_top {display: inline-block;}
	.main_news .cont .cont_top h2 {font-size: 16px;}
	.main_news {padding: 0 20px 0;}
.sec3.sec_inner {padding-bottom: 60px;}

   }
#contact  .contact_tit h2 {font-size: 36px;text-align: center;}
#contact .hd_contact {display: inline-block; margin-top: 30px;}
#contact .hd_contact .logo {float: left;}
#contact .hd_contact .list_info {overflow:hidden; font-size:18px;letter-spacing:0; }
#contact .hd_contact .list_info li {position:relative; float:left; padding-left:32px; margin-left:60px;}
#contact .hd_contact .list_info li + li {}
#contact .hd_contact .list_info li:after {position:absolute; top:50%; left:0;}
#contact .hd_contact .list_info dt {font-weight:600;}
#contact .hd_contact .list_info .tel:after {width:21px; height:22px; margin-top:-11px; background-position:-80px 0px;}
#contact .hd_contact .list_info .address:after {width:19px; height:24px; margin-top:-12px; background-position:-80px -30px;}
#contact .hd_contact .list_info .email:after {width:24px; height:24px; margin-top:-12px; background-position:-80px -60px;}
#contact .cont_contact {margin-top:40px; display: inline-block;}
#contact .cont_contact .box {padding:30px; background: #fff;}
#contact .cont_contact dl {margin-bottom:5px; overflow:hidden; font-size:18px;}
#contact .cont_contact dt {float:left; width:120px; padding-left:14px; line-height:50px;font-weight:500}
#contact .cont_contact dd {overflow:hidden;}
#contact .cont_contact .inp {border:1px solid #ccc; border-radius:2px; background:#f5f5f5; padding:10px;}
#contact .cont_contact input {display:block; width:100%; height:25px;}
#contact .cont_contact textarea {display:block; width:100%; height:140px; resize:none}
#contact .cont_contact .info {overflow:hidden; margin-bottom:22px}
#contact .cont_contact .info dl {float:left; width:50%;}
#contact .cont_contact .info dl:nth-child(odd) dd {padding-right:20px;}
#contact .cont_contact .info dl:nth-child(even) dt {padding-left:8px;}
#contact .cont_contact .captcha_img{display:flex;}
#contact .foot_contact .btn {
    display: inline-block;
    width: 170px;
    line-height: 50px;
    border-radius: 2px;
    background: #1cb8b7;
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 12px;
	padding:0;
}

#clients {position:relative;}
#clients .list_clients {position:relative; overflow:hidden; margin-top:30px; }
#clients .news_tit h2 {font-size: 36px;text-align: center;}

#clients .list_clients li span {display:table-cell; height:110px; text-align:center; vertical-align:middle; padding: 10px;}
@media (max-width:800px){
#clients .news_tit h2 {font-size: 26px;}
}

#quick {
    position: fixed;
    top: 50%;
    right: 10;
    width: 150px;
    margin: 260px 0 0 0;
    text-align: center; z-index: 9999;
}
#quick .list_quick {
width: 150px; height: 150px; border-radius:50%;
 background: #fff27e; 
}
#quick .list_quick li {
	width: 150px; height: 150px;  position: relative;
	background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../_img/dog001.png'); 
  	background-size: 150px;
	background-color:#fff27e;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

	animation: morphing 10s infinite;
}

#quick .list_quick li:hover {
  animation-play-state: paused;
	 background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../_img/dog002.png'); 
  	background-size: 150px;
}
#quick .totop {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    line-height: 38px;
}
#quick .totop img{width: 30px; margin-top: 10px;}
span.must{color:#1cb8b7;}
@keyframes morphing {
  0% {
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 50% 50% 70% 50% / 60% 70% 50% 50%;

  }
  50% {
    border-radius: 50% 70% 50% 60% / 60% 50% 50% 70%;
  }
  75% {
    border-radius: 60% 50% 70% 50% / 70% 50% 50% 60%;
 
  }
  100{
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}



@media (max-width:1200px){
	.tab_comm {width: 47%;}
}
@media (max-width:1000px){
	.tab_comm {width: 100%; margin-bottom: 20px;}
	.boxes .box_img img {height: 50%;}
	.boxes .box_txt {height: 50%; padding: 50px 40px; min-height: auto;}
	#quick {
    display: none;
}
#contact .cont_contact .info dl {width: 100%;}
#contact .cont_contact dt {padding-left: 0;}
#contact .cont_contact .info dl:nth-child(odd) dd {padding-right: 0;}
#contact .cont_contact .info dl:nth-child(even) dt {padding-left: 0;}
}
@media (max-width:800px){
	.main_tit h3 {font-size: 24px;}
	.main_tit img,.main_txt img {width: 35px;}
	.main_txt p {font-size: 18px;}
	#banner {padding: 20px 0 50px;}
	#banner .txt_uni {height: 250px;}
	#news {padding: 30px 0 0;}
	#clients {padding: 20px 0;}
	.tab_comm li a:first-child {margin-left: 0;}
	.boxes .box_img img {height: 40%;}
	.boxes .box_txt {padding: 30px;}
	.boxes .box_txt h3 {font-size: 18px;}
	.boxes .box_txt h4 {font-size: 16px;}
	.boxes .box_txt span {font-size: 21px;}
	.boxes .box_txt .box_btn {height: 45px; width: 150px;}
	.boxes .box_txt .box_btn p {font-size: 14px;}
	.boxes .box_txt .box_btn p img.arrow-r {height: 11px;}
	.boxes .box_txt p.date {margin-top: 20px; font-size: 16px;}
	.boxes .box_txt {height: 40%; padding: 30px 40px; min-height: auto;}
	.boxes .box_txt .box_btn {margin-top: 20px;}
	.boxes .box_txt .tag {font-size: 16px;}

	.slider_art2 { min-width:50%;  }
	.slider_bottom {padding: 20px;}
	.slider_bottom h3 {font-size: 21px;}
   .sec3 .vodbar.col3 {width: 400px;}

   .main_news .cont .cont_top {display: contents;}
   .main_news .cont .cont_top h2 {width: 100%;}
   .main_news .cont .cont_top span {width: 100%;}
   #contact   .contact_tit h2 {font-size: 24px;}



}
@media (max-width:595px){
	.mdl-layout__header-row .mdl-navigation__link {width: 80px; font-size: 14px;}
	.main_tbox {padding: 30px;}
	#maintit {padding: 100px 0 60px;}
	.main_tit h3 {font-size: 18px; font-weight: bold;}
	.main_txt p {font-size: 14px;}
	.main_txt::before {bottom: -100px;}
	.main_txt::after {bottom: -100px;}
	.boxes > div {width: 100%;min-height:300px;}
	.boxes .box_img{width: 100%;}
	.boxes .box_txt {width: 100%;height: auto; padding: 30px;}
	.boxes .box_txt p.date {display: none;}
	.boxes .box_txt .box_btn {display: none;  margin-top: 30px;}
	.boxes .box_txt .taglist {display: none;}
	#panel2 .boxes .box_txt {border-top:1px solid #e9e9e9;}
	.thumbnail h4 {display: none;}
	.thumbnail .box_btn {float: left;width:100%;}
	.boxes_sol .sol01, .boxes_sol .sol02, .boxes_sol .sol03 {width: 100%; margin-top: 20px;margin-right: 0;}
	.boxes .box_txt .taglist p.tag {font-size: 14px;}
	.main_news .swiper-slide {width: 350px;}
	.main_news .cont {padding: 20px; height: 200px;}
    .sec3 .vodbar.col3 {width: 250px;}
	.main_news .cont p {-webkit-line-clamp: 4; font-size: 14px; margin-top: 10px;}
	#clients .list_clients li img{width: 80%;}
	#contact .hd_contact {margin-top: 20px;}
	#contact .hd_contact .logo {display: none;}
	#contact .hd_contact .list_info {width: 100%; margin-top:10px;}
	#contact .hd_contact .list_info li {margin-left: 0; 	width: 100%;margin-bottom:20px;}
	#contact .hd_contact .list_info dt {width:100%;font-size: 14px;}
	#contact .hd_contact .list_info dd {width:100%;font-size: 14px;}
	#contact .cont_contact {margin-top: 20px;}
	#contact .cont_contact dl {width:100%;font-size: 14px;float:none;}
	#contact .cont_contact dt {width:100%;font-size: 14px;float:none;    line-height: 30px;}
	#contact .cont_contact .box {padding: 15px;}
	#contact .cont_contact .inp {padding: 5px;}
}

/* app */
.port_tit {position: relative;}
.port_tit h2 {font-size: 36px; transition: all 0.5s ease;}
.port_tit h4 {font-size: 20px; color: #222; margin-top: 50px; }

.boxes_port { display: flex; justify-content: flex-end; flex-wrap: wrap; margin-top: -183px; }
.boxes_port a { color: inherit; }
.boxes_port li { position: relative; display: inline-block; margin-top: 60px; overflow: hidden; box-sizing: border-box; width:570px; height: 366px; padding: 40px; border-radius: 15px; }
.boxes_port img { width: 100%; }
.boxes_port li:nth-child(even) { margin-left: 60px; }
.boxes_port li:nth-child(odd) { transform: translateY(255px); }
.boxes_port li:last-child { transform: translateY(0); }
.boxes_port li .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.boxes_port li .tit { display: inline-block; position: relative; font-size: 24px; font-weight: 700; color: #222;}
.boxes_port li .bar { position: relative; display:block; width: 50px;margin-top:10px; height: 3px; background-color: #101010; }

.boxes_port li .tit_wh { display: inline-block; position: relative; font-size: 24px; font-weight: 700; color: #fff; }
.boxes_port li .tit_wh::before { content: ''; position: absolute; left: 0; bottom: -4px; display: inline-block; width: 100%; height: 3px; border-radius: 1.5px; background-color: #fff; }

.boxes_port li p { position: relative; max-width: 380px; margin-top: 32px; line-height: 1.5; font-size: 18px; word-break:keep-all;}
.boxes_port .color-white { color: #fff; }
.boxes_port .color-white .tit::before { background-color: #fff; }
.tit1 + .p { font-size: 20px; margin-top: 14px; }
.tit1 ~ .btn.more { margin-top: 28px; margin-left: -5px; }

.port_tit2 {position: relative; width: 40%; float:left;}
#portpolio h2 {font-size: 36px; transition: all 0.5s ease;	}
.port_tit2 h3 {font-size: 32px; color: #222; font-weight: bold;margin-top: 50px; word-break:keep-all;}
.port_tit2 h4 {font-size: 20px; color: #222; margin-top: 10px; word-break:keep-all; }
.port_txt {width: 60%; float:left; font-size: 20px; margin-top: 50px;}
.port_txt ul {position: relative; margin-top: 30px;}
.port_txt ul li {width: 31.33%; float: left; margin: 30px 0;}
.port_txt ul li:last-child {margin-right: 0;}
.port_txt ul li img {width: 35px;}
.port_txt ul li strong {display: block; font-weight: bold;font-size: 18px;margin-top: 10px;}
.port_txt ul li span {font-size: 16px; margin-top: 15px; word-break:keep-all;}



@media (max-width:1200px){ 
.boxes_port li:nth-child(odd) { transform: translateY(0px);}
.boxes_port li:nth-child(even) { margin-left: 0px; }
.boxes_port { margin-top: 0px;}
}
@media (max-width:800px){ 
.port_tit h4 {margin-top: 20px;	}
.boxes_port li {padding: 25px;}
.boxes_port li {margin-top: 30px; height: 350px;}
.boxes_port li .tit {font-size: 18px;}
.boxes_port li p {font-size: 16px; margin-top: 15px;}
#clients .list_clients li {width: 48%; margin: 1%;}
.port_tit2 h3 {font-size: 26px; }
.port_tit2 h4 {font-size: 16px; }

}
@media (max-width:595px){
.boxes_port li {height: 220px; margin-top: 15px;margin-bottom: 15px;}
.port_tit2 h3 {font-size: 24px;margin-top:30px; }
.port_tit2 h4 {font-size: 14px; }
.port_txt ul {margin-top: 0;}
.boxes_port li p {
    font-size: 13px;
    margin-top: 15px;
}
}

/*  about us */
#visual_top {padding: 120px 0 100px;  background: url(../_img/about_intro.png) 50% 50% no-repeat;}
#visual_top h4 {color:#222; font-size: 24px; text-align: center;word-break:keep-all;}
#visual_top h4:before {
    display: block;
    width: 100px;
    height: 116px;
    background: url(../_img/about_logo.png) 50% 50% no-repeat;
    margin: 0 auto 58px;
    content: '';}
#visual_top h4:after {
	display: block;
    width: 30px;
    height: 2px;
	margin: 0 auto;
	margin-top: 30px; margin-bottom: 20px;
	text-align: center;
    background: #222;
    content: '';}
#visual_top h5 {font-size: 18px;text-align: center; word-break:keep-all;}
#visual {position: relative;overflow: hidden;  }
.visual_wrap {position: relative; overflow: hidden; margin-bottom: 60px;background: url(../_img/about_visual.jpg) no-repeat fixed #6c7071; height:600px; max-height: 600px;background-size:cover;background-position:75% 50%;}
.visual_wrap .visual_txt {width: 50%;float:left; padding: 200px 120px; color:#fff;}
.visual_wrap .visual_txt span {display: block; font-size: 18px; line-height:30px;}
.visual_wrap .visual_txt h2 {display: block; font-size: 34px; font-weight: 300; margin-top: 20px;}
.visual_wrap .visual_txt h2 strong {font-weight: bold;}
.visual_wrap .visual_product {width: 50% !important;float:left; padding: 140px 60px 110px;} 

#certification {position: relative;margin: 80px 0;padding: 60px 0; background: url(../_img/about_certification.jpg) no-repeat fixed #6c7071; height:600px; max-height: 600px;background-size:cover;background-position:75% 50%;  }
#certification h2 {text-align: center; font-size: 36px; color:#fff;}
#certification h2:after {
	display: block;
    width: 30px;
    height: 2px;
	margin: 0 auto;
	margin-top: 10px; 
	text-align: center;
    background: #fff;
    content: '';}
#certification ul li {width: 23%; margin: 1%; float:left; margin-top: 60px;background:rgba(250,250,250,0.9); min-height: 300px; padding: 30px; border-radius: 5px;}
#certification ul li h3 {font-size: 21px; font-weight: bold;	color:#222;}
#certification ul li h3:after {
	display: block;
    width: 30px;
    height: 2px;
	margin-top: 10px; margin-bottom: 25px;
	text-align: center;
    background: #222;
    content: '';}
#certification ul li span {color:#222; font-size: 16px;}

#direct_certification {position: relative;margin: 80px 0;padding: 60px 0; background: url(../_img/main_visual1.jpg) no-repeat fixed #6c7071; height:600px; max-height: 600px;background-size:cover;background-position:75% 50%; }
#direct_certification h2 {text-align: center; font-size: 36px; color:#fff;}
#direct_certification h2:after {
	display: block;
    width: 30px;
    height: 2px;
	margin: 0 auto;
	margin-top: 10px; 
	text-align: center;
    background: #fff;
    content: '';}
#direct_certification ul li {width: 23%; margin: 1%; float:left; margin-top: 60px;background:rgba(250,250,250,0.9); min-height: 300px; padding: 30px; border-radius:5px;}
#direct_certification ul li h3 {font-size: 21px; font-weight: bold;	color:#1cb8b7;}
#direct_certification ul li h3:after {
	display: block;
    width: 30px;
    height: 2px;
	margin-top: 10px; margin-bottom: 25px;
	text-align: center;
    background: #1cb8b7;
    content: '';}
#direct_certification ul li span {color:#222; font-size: 16px;}

#business {padding: 60px 0;}
#business h3 {font-size:36px; text-align:center; }
#business h3:after {
	display: block;
    width: 30px;
    height: 2px;
	margin: 0 auto;
	margin-top: 10px; 
	text-align: center;
    background: #222;
    content: '';}
#business h3 + .ovf {margin-top:60px;}
#business .ovf > div {width:48%; margin: 1%; padding-top:274px;}
#business .webagency {background:url(../_img/about_business3.jpg) 50% 0 no-repeat}
#business .others {background:url(../_img/about_business4.jpg) 50% 0 no-repeat}
#business h4 {padding-top:22px; margin:3px 42px; background:#fff; text-align:center; font-size:20px;}
#business .list_business {margin-top:32px; overflow:hidden;}
#business li {display:table;}
#business .inner {/* display:table-cell; */ padding: 30px;height:200px; border:1px solid #ddd; text-align:center; vertical-align:middle;}
#business .inner strong {display:block; font-size:18px; color:#1cb8b7; line-height:34px; margin-bottom:12px; line-height:1.4;}
#business .inner strong:after {
    display: block;
    width: 30px;
    height: 2px;
	margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 25px;
    text-align: center;
    background: #1cb8b7;
    content: '';
}
#business .inner span {display:block; word-break: keep-all;}
#business .webagency .list_business {border-left:1px solid #ddd; border-top:1px solid #ddd;}
#business .webagency li {float:left; width:50%; }
#business .webagency .inner {border-left:none; border-top:none;}
#business .agency1 strong::before {width:30px; height:29px; margin-right:5px; background-position:-70px -110px;}
#business .agency2 strong::before {width:32px; height:32px; margin-right:5px; background-position:-70px -140px;}
#business .agency3 strong::before {width:30px; height:31px; margin-right:5px; background-position:-70px -180px;}
#business .agency4 strong::before {width:27px; height:24px; margin:6px 5px 0 0; background-position:-70px -220px;}
#business .others li {width:50%; float:left;}
#business .others li + li .inner {border-left:none;}
#business .others1 strong::before {width:26px; height:24px; margin:5px 5px 0 0; background-position:-70px -250px;}
#business .others2 strong::before {width:24px; height:30px; margin:0px 5px 0 0; background-position:-70px -280px;}



@media (max-width: 1200px){

}
@media (max-width: 1024px){
	#visual_top {padding: 100px 0 60px;}
	#visual_top h4:before {background-size: 45px;	margin: 0 auto; margin-bottom: 30px;height: 55px; font-size: 21px;}
	#visual_top h4:after {margin-top: 20px;}
	#visual_top h5 {font-size: 16px;}
	.visual_wrap {height: auto; max-height:auto;}
	.visual_wrap .visual_txt {width: 100% !important; padding: 30px 20px;text-align: center;}
	.visual_wrap .visual_txt span {font-size: 16px;}
	.visual_wrap .visual_txt h2 {font-size: 24px;}
	.visual_wrap .visual_product {width: 100% !important; padding: 0 30px 30px 30px;text-align: center;}
	#visual_in {width: auto; margin: 0 1px 60px;} 
	#certification {overflow: hidden; margin: 40px 0; padding: 40px 0;height: auto; max-height: none;}
	#certification h2 {font-size: 24px;}
	#certification ul li {width: 48%; min-height: 210px; margin-top: 30px; padding: 20px;}
	#certification ul li:nth-child(3),#certification ul li:nth-child(4) {margin-top: 1%;}
	#certification ul li h3 {font-size: 18px;}
	#certification ul li h3:after {margin-top: 7px; margin-bottom: 10px;}
	#direct_certification {overflow: hidden; margin: 40px 0 0; padding: 40px 0;height: auto; max-height: none;}
	#direct_certification h2 {font-size: 24px;}
	#direct_certification ul li {width: 48%; min-height: 210px; margin-top: 30px; padding: 20px;}
	#direct_certification ul li:nth-child(3),#direct_certification ul li:nth-child(4) {margin-top: 1%;}
	#direct_certification ul li h3 {font-size: 18px;}
	#direct_certification ul li h3:after {margin-top: 7px; margin-bottom: 10px;}
	
	#business {padding: 30px 0;}
	#business h3 {font-size: 24px;}
	#business h3 + .ovf {margin-top: 0px;}
	#business .ovf > div {width: 100%; margin: 0 auto; margin-top: 30px; padding-top: 120px; }
	#business .others {margin-top: 30px;}
	#business .webagency,#business .others { background-size:100%; }
	#business .webagency li,#business .others li {width: 100%;}
	#business .inner {background:#fff; padding: 20px 15px;  height: auto;}
	#business .inner span {text-align: left;}
	#business h4 {padding: 10px 0; margin-bottom: 0;}
	#business .inner strong {text-align: left;}
	#business .inner strong:after {margin: initial; margin-top: 7px; margin-bottom: 10px; }
	#business .list_business {margin-top: 0;}
	#business .others2 .inner {border-top: none;}
	#business .others li + li .inner {border-left: 1px solid #ddd;}


}
@media (max-width: 640px){
	#visual_top {padding: 100px 0 30px;}
	#certification ul li {width: 100%;	height: auto;    min-height: auto;}
	#certification ul li:nth-child(2),#certification ul li:nth-child(3),#certification ul li:nth-child(4)  {margin-top: 10px;}
	#direct_certification ul li {width: 100%;	height: auto;    min-height: auto;}
	#direct_certification ul li:nth-child(2),#direct_certification ul li:nth-child(3),#direct_certification ul li:nth-child(4)  {margin-top: 10px;}
}
@media (max-width: 480px){
}



/* 비쥬얼 슬라이더 */
aside, main {display: block;}
button, input { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; padding: 0; margin: 0; outline: none; border: 0; }

button { cursor: pointer; border: none; margin: 0; padding: 0; background-color: rgba(255, 255, 255, 0); outline: none; font-family: 'NG'; }

.main > .section.fp-auto-height { padding-top: 0 !important; }

.main > .section .section__inner { width: 100%; max-width: 1500px; margin: 0 auto; }

.main > .section:nth-child(2) .section__move--up { opacity: 0.4; pointer-events: none; }

.main > .section:nth-child(7) .section__move--down { opacity: 0.4; pointer-events: none; }

.main .tab--personal { position: relative; }

.main .tab--personal .tab__list { min-height: 80px; border-bottom: 1px solid #ccc; }

.main .tab--personal .tab__trigger { -webkit-box-flex: 0; -ms-flex: none; flex: none; height: 80px; padding: 0 40px; background-color: transparent; border: 0; color: #666; font-size: 20px; cursor: pointer; }

.main .tab--personal .tab__trigger:not(:first-child) { margin-left: 0; }

.main .tab--personal .tab__trigger:focus, .main .tab--personal .tab__trigger[aria-selected="true"] {}

.main .tab--personal .tab__trigger:focus:before, .main .tab--personal .tab__trigger[aria-selected="true"]:before { content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 4px; }

.main .tab--personal .tab__util { position: absolute; right: 0; top: 25px; }

.main .tab--personal .tab__reset { overflow: hidden; width: 30px; height: 30px; background: url("../images/common/ico_reset.png") no-repeat 0 0; text-indent: 100%; white-space: nowrap; }

.main .tab--personal .tab__panel { padding-top: 55px; }

.main .tab--personal .swiper__group { position: relative; margin: 0 -54px; }

.main .tab--personal .swiper-container { margin: 0 54px; }

.main .tab--personal .swiper-container[class^="strings__swiper"] .swiper-slide { width: calc(100% / 4 - 33px); }

.main .tab--personal .swiper-container[class*="initialized"] .swiper-slide:not(.swiper-slide-active) .strings { display: block; position: relative; }

.main .tab--personal .swiper-container[class*="initialized"] .swiper-slide:not(.swiper-slide-active) .strings:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.8))); background: linear-gradient(to left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%); }

.main .tab--personal .swiper-container[class*="initialized"] .swiper-slide-active .strings__header { border-bottom-width: 4px; }

.main .tab--personal .swiper-container[class*="initialized"] .swiper-slide-active ~ .swiper-slide .strings:before { background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.8))); background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%); }

.main .tab--personal .swiper__button { overflow: hidden; position: absolute; z-index: 1; top: 50%; width: 24px; height: 43px; margin-top: -21.5px; background-repeat: no-repeat; background-position: 0 0; text-indent: 100%; white-space: nowrap; }

.main .tab--personal .swiper__button[aria-disabled="true"] { opacity: 0.2; pointer-events: none; }

.main .tab--personal .swiper__button--prev { left: 0; background-image: url("../_img/btn_swiper_arrow_left.png"); }

.main .tab--personal .swiper__button--next { right: 0; background-image: url("../_img/btn_swiper_arrow_right.png"); }

.intro .section__inner { max-width: none !important; padding-left: 7.6%; padding-right: 7.6%; }

.intro .swiper__group { position: relative; padding: 0 60px; }

.intro .swiper__group .swiper-slide-active .banner__figcaption { opacity: 1; }

.intro .swiper__group .swiper__button { overflow: hidden; position: absolute; top: 50%; z-index: 1; width: 24px; height: 43px; margin-top: -21.5px; background-repeat: no-repeat; background-position: 0 0; text-indent: 100%; white-space: nowrap; }

.intro .swiper__group .swiper__button--prev { left: 0; background-image: url("../_img/btn_swiper_arrow_left.png"); }

.intro .swiper__group .swiper__button--next { right: 0; background-image: url("../_img/btn_swiper_arrow_right.png"); }

.intro .banner__img { position: relative; padding-top: 60%; }

.intro .banner__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 10px; }

.intro .banner__figcaption {opacity: 0;position: relative;margin-top: 20px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

.intro .banner__figcaption:before { content: ''; display: block; position: absolute; right: 0; bottom: 13px; width: 97px; height: 10px; background: url("../_img/bg_main_banner_arrow.png") no-repeat 0 0; }

.intro .banner__title { font-size: 26px;letter-spacing:-1px;}

.intro .banner__date { margin-top: 7px; color: #666; font-size: 17px; }

@media screen and (max-width: 1024px) { 
  /*.main { padding-top: 134px; }*/
  .main > .section { display: block; height: auto; }
  .main > .section:first-child { padding-top: 50px; }
  .main > .section:not(:first-child) { padding-top: 60px; }
  .main .section__inner { padding: 0 20px; }
  .main .tab--personal .tab__list { overflow-x: auto; height: 35px; min-height: 0; }
  .main .tab--personal .tab__trigger { padding: 0 20px; height: 35px; font-size: 14px; }
  .main .tab--personal .tab__util { top: 40px; }
  .main .tab--personal .tab__reset { width: 15px; height: 15px; background-size: 100% 100%; }
  .main .tab--personal .tab__panel { padding-top: 30px; }
  .main .tab--personal .swiper__group { margin: 0; }
  .main .tab--personal .swiper-container { margin: 0; }
  .intro > .section__inner { padding-left: 0; padding-right: 0; }
  .intro .swiper__group { padding: 0; }
  .intro .banner__img { padding-top: 75%; }
  .intro .banner__figcaption { margin-top: 20px; padding-bottom: 30px; }
  .intro .banner__figcaption:before { left: 0; right: auto; bottom: 0; }
  .intro .banner__title { font-size: 24px; font-family: 'NGBold','Malgun Gothic',Dotum,'돋움',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','굴림',arial,sans-serif; }
  .intro .banner__date { font-size: 14px; }
}

@media screen and (max-width: 680px) { 
  .main { padding-top: 0px; }
    .main > .section:first-child { padding-top: 0px; }
}

/*main_0412*/
.flex_wrap {display:flex; flex-wrap:wrap;}
.visuallogo_wrap {text-align:center;}
.main_tit h3 {
	font-size: 32px; 
	color:#1cb8b7; 
	line-height:1.4;
	font-weight:600;
	text-align:center; 
	word-break:keep-all;
}

.main_txt p {
	font-size: 20px; 
	word-break:keep-all;
	color:#666;
	text-align:center;
	line-height:1.4;
}
.portfolio_wrap *{box-sizing: border-box;}
.portfolio_wrap {
	width:100%; max-width:1400px; 
	margin:0 auto;
}
#portfolio.portfolio_wrap .portfolioTab_wrap {
	width:100%;
	padding-top:85px;
	background-image:url(../_img/port/bg_txt.png);
	background-size:804px;
	background-repeat:no-repeat;
	background-position:center top;
}
.portfolio_wrap .portfolioTab_wrap ul {width:100%; margin:0;}
.portfolio_wrap .portfolioTab_wrap li:first-child {margin-left:0;}
.portfolio_wrap .portfolioTab_wrap li:last-child {margin-right:0;}
.portfolio_wrap .portfolioTab_wrap li {
	width:auto;
	flex:1;
	margin:0 1%;
	background-color:#fff;
	border:1px solid #ccc;
	color:#000;
	font-size:20px;
	line-height:1.4;
	text-align:center;
}
.portfolio_wrap .portfolioTab_wrap li a {
	display:block;
	width:100%;
	padding:20px 0;
}
.portfolio_wrap .portfolioTab_wrap li.on,  .portfolio_wrap .portfolioTab_wrap li:hover {
	background-color:#1cb8b7;
	color:#fff;
	font-weight:600;
}
.portfolio_wrap .portfolio_box {
	margin:50px 0;
	padding:50px;
	background-color:#fff;
	border:1px solid #ebebeb;
	/*box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.2);*/
}
.borderline_wrap {width:100%; }
.borderline_wrap img {width:100%; }
.portfolio_wrap .portfolio_box .portfolio {align-items:flex-start;margin:50px 0;overflow:hidden;}
.portfolio_wrap .portfolio_box .portfolio:first-child {margin-top: 0;}
.portfolio_wrap .portfolio_box .portfolio .work_wrap {width:47%;margin-right:3%;}
.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap {
	width:50%;
	text-align:right;
    display: block;
    overflow: hidden;
    position: relative;
	/*z-index:10;*/
	
}
/*
.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap:before{transition: all 0.9s;}
.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap:hover:before {
	width: 100%;
    display: block;
    position: absolute;
    -webkit-backface-visibility: hidden;
   -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.9s ease-in-out;
	top: 5%;
    left: 3%;
    z-index: 3;
    height: 100%;
	border-radius:10px;
    color: #2791d8;
    font-size: 16px;
    content: '';
    line-height: 40px;
    text-align: center;
    margin: -20px 0 0 -20px;
    background-color:rgba(0, 0, 0, 0.5);
	background-image:url(../_img/port/icon_hoverview.png);
	background-size:90px;
	background-position:center;
	background-repeat:no-repeat;
}
.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap:hover:after {
	opacity: 1;
    width: 25px; height:25px;
    display: block;
    position: absolute;
    -webkit-backface-visibility: hidden;
   -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	top: 20px;
    right: 20px;
    z-index: 5;
    content: '';
    background-image:url(../_img/port/icon_link.png);
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
}*/


.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap .hv_ver {
	position: absolute;
	bottom: -115%;
	left: 0;
	height:100%;width:100%;
	text-align: center;
	background-color:rgba(0, 0, 0, 0.5);
	background-image:url(../_img/port/icon_hoverview.png);
	background-size:90px;
	background-position:center;
	background-repeat:no-repeat;
	border-radius:10px;
	color: #fff;
	transition: transform 0.3s ease-in-out;
}

.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap:hover .hv_ver {transform: translateY(-115%);}




.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap img {
	/*display:block;*/
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {
	font-size:30px;
	color:#000;
	text-align:left;
	font-weight:600;
	line-height:1.4;
	position:relative;
	margin:30px 0 10px;
}
.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit:before {
	content:'';
	position:absolute;
	top:-30px; left:0;
	width:60px; height:5px;
	background-color:#1cb8b7;
}
/*
.portfolio .tag:first-child {margin-left:0;}
.portfolio .tag:last-child {margin-right:0;}*/
.portfolio .tag {
	border:1px solid #ccc;
	padding:5px 15px;
	background-color:#fff;
	color:#75abe7;
	font-size:18px;
	line-height:1.4;
	text-align:center;
	border-radius:30px;
	margin:5px 5px;
	font-weight:500;
}
.portfolio_wrap .portfolio_box .portfolio .workinfo_wrap {margin-top:30px;}
.workinfo_wrap dl {
	align-items:flex-start;
	margin:10px 0;
	font-size:20px;
	line-height:1.4;
	text-align:left;
	font-weight:600;
}
.workinfo_wrap dt {width:100px;color:#1cb8b7;}
.workinfo_wrap dd {width:calc( 100% - 100px );color:#777;}
.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap img {
	border-radius:10px;
	box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
#portfolio .btn_wrap {margin-top:50px; width:100%; text-align:center;}
#portfolio .btn_wrap .btn_portmore {
	width:100%; max-width:340px;
	height:70px;
	background-color:#ffea37;
	font-size:20px;
	color:#000;
	letter-spacing:-0.6px;
	line-height:1.4;
	font-weight:600;
	margin:0 auto;
	align-items:center;
	justify-content:center;
}
#portfolio .btn_wrap .btn_portmore i {
	display:block;
	width:11px; height:17px;
	background-image:url(../_img/port/btn_moreview.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	margin:0 10px;
}
#wemake * {word-break:keep-all;}
#wemake {background-color:#fff !important;}
.titimgwrap {text-align:center; margin-top:0;}
#portfoliolist .titimgwrap {text-align:left;}
#wemake .titimgwrap {margin-top:100px;}

.boxes_sol {width:102%; margin:50px -1% 0;}
.boxes_sol .sol01.box {
    border-radius: 0;
    background:linear-gradient(to bottom, #f5f5f5, #edf6fb);
    width: 23%;
    padding: 30px;
    margin: 0 1%;
    color: #fff;
	transition:0.3s;
}

.boxes_sol .sol02.box {
    border-radius: 0;
    background:linear-gradient(to bottom, #f5f5f5, #edf6fb);
    width: 23%;
    padding: 30px;
    margin: 0 1%;
    color: #fff;
	transition:0.3s;
}
.boxes_sol .sol03.box {
    border-radius: 0;
    background:linear-gradient(to bottom, #f5f5f5, #edf6fb);
    width: 23%;
    padding: 30px;
    margin: 0 1%;
    color: #fff;
	transition:0.3s;
}
.boxes_sol .sol04.box {
    border-radius: 0;
    background:linear-gradient(to bottom, #f5f5f5, #edf6fb);
    width: 23%;
    padding: 30px;
    margin: 0 1%;
    color: #fff;
	transition:0.3s;
}
.sol_tit h2 {color:#000; text-align:center; width:100%;}
.boxes_sol .box .icowrap {width:100%; text-align:center;}
.boxes_sol .box .icowrap i {
	display:block;
	width:180px;height:180px;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	margin:0px auto;
}
.boxes_sol .box .icowrap i.B01 {background-image:url(../_img/port/make_icon1.png);}
.boxes_sol .box .icowrap i.B02 {background-image:url(../_img/port/make_icon2.png);}
.boxes_sol .box .icowrap i.B03 {background-image:url(../_img/port/make_icon3.png);}
.boxes_sol .box .icowrap i.B04 {background-image:url(../_img/port/make_icon4.png);}
.boxes_sol .box .sol_txt h3 {
	font-size:30px;
	color:#000;
	line-height:1.4;
	text-align:center;
	font-weight:600;
	margin-bottom:30px;
	position:relative;
}
.boxes_sol .box .sol_txt p {
	font-size:18px;
	color:#000;
	line-height:1.4;
	text-align:center;
}
.boxes_sol .box .sol_txt h3:after {
	content:'';
	width:10px; height:10px;
	background-color:#1cb8b7;
	border-radius:100%;
	position:absolute;
	bottom:-15px;
	left:48%;
}
.boxes_sol .sol01.box:hover  {
	background-image:url(../_img/port/make_bg01.png);
	background-size:cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	/*width:31.333%;*/ 
}
.boxes_sol .sol02.box:hover  {
	background-image:url(../_img/port/make_bg02.png);
	background-size:cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	/*width:31.333%;*/ 
}
.boxes_sol .sol03.box:hover  {
	background-image:url(../_img/port/make_bg01.png);
	background-size:cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	/*width:31.333%;*/  
}
.boxes_sol .sol04.box:hover  {
	background-image:url(../_img/port/make_bg02.png);
	background-size:cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	/*width:31.333%;*/ 
}
.boxes_sol .sol01.box:hover i.B01 {background-image:url(../_img/port/make_icon1_over.png);}
.boxes_sol .sol02.box:hover i.B02 {background-image:url(../_img/port/make_icon2_over.png);}
.boxes_sol .sol03.box:hover i.B03 {background-image:url(../_img/port/make_icon3_over.png);}
.boxes_sol .sol04.box:hover i.B04 {background-image:url(../_img/port/make_icon4_over.png);}
.boxes_sol .sol01.box:hover h3 {color:#fff;}
.boxes_sol .sol02.box:hover h3 {color:#fff;}
.boxes_sol .sol03.box:hover h3 {color:#fff;}
.boxes_sol .sol04.box:hover h3 {color:#fff;}
.boxes_sol .sol01.box:hover h3:after {background-color:#ffea37;}
.boxes_sol .sol02.box:hover h3:after {background-color:#ffea37;}
.boxes_sol .sol03.box:hover h3:after {background-color:#ffea37;}
.boxes_sol .sol04.box:hover h3:after {background-color:#ffea37;}
.boxes_sol .sol01.box:hover p {color:#fff;}
.boxes_sol .sol02.box:hover p {color:#fff;}
.boxes_sol .sol03.box:hover p {color:#fff;}
.boxes_sol .sol04.box:hover p {color:#fff;}

#portfoliolist {padding:100px 0;}
#portfoliolist .portfolio_wrap .portfolioTab_wrap {margin-top:30px;}


@media screen and (max-width: 1200px) {
	.portfolio_wrap .portfolioTab_wrap li {font-size:18px;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {font-size:28px;}
	.portfolio .tag {font-size:16px;}
	.workinfo_wrap dl {font-size:18px;}
	.portfolio .btn_wrap .btn_portmore {font-size:18px;}
	.boxes_sol .box .sol_txt h3 {font-size:28px;}
	.boxes_sol .box .sol_txt p {font-size:18px;}
	.boxes_sol .box .icowrap i {width:160px; height:160px;}
}
@media screen and (max-width: 1024px) {
	.portfolio_wrap .portfolioTab_wrap li {font-size:16px;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {font-size:24px;}
	.portfolio .tag {font-size:14px;}
	.workinfo_wrap dl {font-size:16px;}
	.workinfo_wrap dt {width:80px;}
	.workinfo_wrap dd {width:calc( 100% - 80px );}
	#portfolio .btn_wrap .btn_portmore {font-size:16px;height:50px;}
	.boxes_sol .box .sol_txt h3 {font-size:24px;}
	.boxes_sol .box .sol_txt p {font-size:16px;}
	#wemake .titimgwrap {margin-top:50px;}
	.boxes_sol .box .icowrap i {width:140px; height:140px;}
}
@media screen and (max-width: 870px) {
	.boxes_sol .sol01.box, .boxes_sol .sol02.box,
	.boxes_sol .sol03.box, .boxes_sol .sol04.box {width:48%; margin:1%;}
}
@media screen and (max-width: 780px) {
	#portfolio.portfolio_wrap .portfolioTab_wrap {background-size:100%;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap {width:100%; margin:1% 0;}
	.portfolio_wrap .portfolio_box .portfolio .workthumb_wrap {width:100%; margin:1% 0;text-align:center;}
	.portfolio_wrap .portfolio_box {padding:30px;margin: 30px 0;}
	.portfolio_wrap .portfolio_box .portfolio {margin:30px 0;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit:before {top:-20px;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {margin-top:20px;}
	
	.boxes_sol .box .sol_txt h3 {font-size:22px;}
	#wemake .titimgwrap {margin-top:30px;}
}
@media screen and (max-width: 620px) {
	.portfolio_wrap .portfolioTab_wrap li a {padding:10px 0;}
	.portfolio_wrap .portfolioTab_wrap li {font-size:14px;width:33%;margin:0;}
	.portfolio_wrap .portfolioTab_wrap li:first-child {border-right:none;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(2) {border-right:none;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(3) {border-right:none;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(4) {border-right:none;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {font-size:20px;}
	.portfolio .tag {padding:2px 10px;margin:0 5px;}
	.workinfo_wrap dl {font-size:14px;margin:5px 0;}
	.workinfo_wrap dt {width:60px;}
	.workinfo_wrap dd {width:calc( 100% - 60px );}
	#portfolio .btn_wrap .btn_portmore {font-size:14px;height:50px;}
	.portfolio_wrap .portfolio_box .portfolio .workinfo_wrap {margin-top:20px;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit:before {top:-15px;}
	.portfolio_wrap .portfolio_box .portfolio .work_wrap .work_tit {margin-top:15px;}
	#portfolio .btn_wrap {margin-top:50px;}
	.boxes_sol .box .icowrap i {width:130px; height:130px;}
	.boxes_sol .box .sol_txt h3 {font-size:20px;}
	.boxes_sol .box .sol_txt p {font-size:14px;}
}
@media screen and (max-width: 520px) {
	.boxes_sol {margin-top:20px;}
	.boxes_sol .sol01.box, .boxes_sol .sol02.box,
	.boxes_sol .sol03.box, .boxes_sol .sol04.box {width:100%; margin:5px 0; padding:0 20px 30px;}
	.boxes_sol .sol01.box:hover,
	.boxes_sol .sol02.box:hover,
	.boxes_sol .sol03.box:hover,
	.boxes_sol .sol04.box:hover {width:100%;margin:1% 0;}
	#wemake .titimgwrap {margin-top:20px;}
	.boxes_sol .box .icowrap i {width:130px; height:130px;}
	.portfolio_wrap .portfolioTab_wrap li {min-width:33.33%;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(3) {border-right:1px solid #ccc;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(4) {border-top:none;}
	.portfolio_wrap .portfolioTab_wrap li:nth-child(5) {border-top:none;}
}
@media screen and (max-width: 420px) {
	.portfolio_wrap .portfolio_box {padding:20px;}
	#portfolio.portfolio_wrap .portfolioTab_wrap {padding-top:50px;}
	.portfolio_wrap .portfolio_box .portfolio {margin:20px 0;}
	.portfolio_wrap .portfolio_box .portfolio .workinfo_wrap {margin-top:10px;}
	.workinfo_wrap dl {margin:0;}
	.workinfo_wrap dt {width:55px;}
	.workinfo_wrap dd {width:calc( 100% - 55px );}
	#portfolio .btn_wrap {margin-top:30px;}
	#portfolio .btn_wrap .btn_portmore {max-width:100%; height:40px;}
	#portfolio.workdetail .workbox p.worktit {margin:20px 0 10px;}
	#portfolio.workdetail .workbox p.worktit:before {top:-20px;}
}
@media screen and (max-width: 380px) {
	#portfolio.portfolio_wrap .portfolioTab_wrap {padding-top:40px;}
}

/*포트폴리오 상세*/

#portfolio.workdetail .workbox {
	margin:20px 0 100px;
	padding:50px;
	background-color:#fff;
	border:1px solid #ebebeb;
	/*box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.2);*/
}
#portfolio.workdetail .workbox .imgwrap {width:100%; max-width:1400px; text-align:center; margin:50px 0;}
#portfolio.workdetail .workbox .imgwrap.mo_bg {background-color:#dbeeee;}
#portfolio.workdetail .workbox .imgwrap.mo_bg img {width:70%; border:none;}
#portfolio.workdetail .workbox .imgwrap img {max-width:100%; border:1px solid #f5f5f5;}
#portfolio.workdetail .workbox .imgwrap.noborder img {max-width:100%; border:none;}
#portfolio.workdetail .titimgwrap {margin:80px 0 20px; text-align:left;}
#portfolio.workdetail h2 {
	font-size:32px; 
	line-height:1.4;
	text-align:left;
	font-weight:600;
	color:#000;
	margin:70px 0 20px;
}
#portfolio.workdetail .workbox p.worktit {
	font-size:32px;
	line-height:1.4;
	text-align:left;
	font-weight:600;
	color:#000;
	margin:30px 0 20px;
	position:relative;
}
#portfolio.workdetail .workbox p.worktit:before {
	content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 60px;
    height: 5px;
    background-color: #1cb8b7;
}
#portfolio.workdetail .workbox .work_top {width:100%; padding-bottom:50px; position:relative;}
#portfolio.workdetail .workbox .work_top .paging_wrap {
	position:absolute;
	top:0; right:0;
}
#portfolio.workdetail .workbox .work_top .paging_wrap button.prev {
	display:block;
	width:15px; height:28px;
	background-image:url(../_img/port/paging_prev.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
}
#portfolio.workdetail .workbox .work_top .paging_wrap button.list {
	display:block;
	width:33px; height:18px;
	background-image:url(../_img/port/paging_list.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	margin:auto 20px;
}
#portfolio.workdetail .workbox .work_top .paging_wrap button.next {
	display:block;
	width:15px; height:28px;
	background-image:url(../_img/port/paging_next.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
}
#portfolio.workdetail .workbox .info_left {width:50%; padding-right:50px;}
#portfolio.workdetail .workbox .info_right {width:50%; padding-left:50px; border-left:1px solid #ccc;}

#portfolio.workdetail .workbox .info_left p {
	font-size:18px;
	line-height:1.4;
	text-align:left;
	font-weight:500;
	color:#333;
	min-height:165px;
	word-break:keep-all;
}
#portfolio.workdetail .btn_wrap {
	margin-top: 30px;
    width: 100%;
    text-align: center;
}
#portfolio.workdetail .btn_wrap .btn_link { 
	font-size:20px;
	color:#333;
	line-height:1.4;
	font-weight:600;
	align-items:center;
	justify-content:center;
	border:1px solid #ccc;
	background-color:#fff;
	height:60px;
	width:100%; max-width:300px;
	letter-spacing:-2px;
}
#portfolio.workdetail .btn_wrap .btn_link i { 
	display:block;
	width:18px; height:18px;
	background-image:url(../_img/port/icon_link_mint.png);
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	margin-left:10px;
}

@media screen and (max-width: 1024px) {
	#portfolio.workdetail .workbox p.worktit {font-size:28px;}
	#portfolio.workdetail .workbox .info_left p {font-size:18px;}
	#portfolio.workdetail .btn_wrap .btn_link {font-size:18px;}
	#portfolio.workdetail .workbox {padding:30px;}
	#portfolio.workdetail .workbox .work_top {padding-bottom:30px;}
	#portfolio.workdetail .workbox .imgwrap {margin:30px 0;}
	#portfolio.workdetail .workbox .info_left {padding-right:30px;}
	#portfolio.workdetail .workbox .info_right {padding-left:30px;}
}
@media screen and (max-width: 720px) {
	#portfolio.workdetail .workbox .info_left {width:100%;padding:0;}
	#portfolio.workdetail .workbox .info_right {width:100%;padding:0;border-left:0;}
	#portfolio.workdetail .workbox .info_left p {min-height:0;}
	#portfolio.workdetail .workbox .info_left .flex_wrap {margin:10px 0;}
}
@media screen and (max-width: 620px) {
	#portfolio.workdetail .workbox p.worktit {font-size:24px;}
	#portfolio.workdetail .workbox .info_left p {font-size:16px;}
	#portfolio.workdetail .btn_wrap {margin-top:20px;}
	#portfolio.workdetail .btn_wrap .btn_link {font-size:16px;height:50px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap button.prev {width:12px; height:25px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap button.next {width:12px; height:25px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap button.list {width:30px; height:15px; margin:auto 10px;}
}
@media screen and (max-width: 420px) {
	#portfolio.workdetail .workbox p.worktit {font-size:20px;}
	#portfolio.workdetail .workbox .info_left p {font-size:14px;}
	#portfolio.workdetail .btn_wrap {margin-top:10px;}
	#portfolio.workdetail .btn_wrap .btn_link {font-size:14px;height:40px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap {top:-40px;}
}
@media screen and (max-width: 380px) {
	#portfolio.workdetail .workbox .work_top .paging_wrap button.prev {width:10px; height:23px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap button.next {width:10px; height:23px;}
	#portfolio.workdetail .workbox .work_top .paging_wrap button.list {width:28px; height:13px; margin:auto 5px;}
}