@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Serif&display=swap');

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:border-box;  
}

/* mobile style */
*{-webkit-text-size-adjust:none}
html {font-family:sans-serif;-webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; }
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0; font-family: 'NanumSquareRound', 'Noto Sans KR', 'nanumsquare' , 'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;font-weight:normal; }
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); margin:0 auto; }
li{list-style:none}
a{text-decoration:none; color:inherit;}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none; border:0;padding:0;}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal;}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none; padding:5px;}
input[type="checkbox"]{-webkit-appearance:;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; color:#666; }
input[type="file"] {display: none;}
input:checked {}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}[hidden]{display:none;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}


.topheader {height: 65px;background-color:#fff;    position: absolute;    z-index:1; border-bottom: 1px solid #f1f1f1;}
.topheader #logo {text-align: left; left: 20px; position: relative; top: 17px; display: inline-block;}
.topheader .btn {position: absolute;top:0;left:0;background-color:#; width: 65px;    height: 65px; padding: 12px 9px;}
.topheader .btn span {display: block;height:3px; width:20px;background-color:#FFF; margin-bottom:4px;  margin: 4px;  top: 8px; position: relative;    left: 8px;   }
.topheader .btn span:last-child { margin-bottom: 0; }
.topheader .allmenu{ width:50px; height: 50px; position: absolute;top:0;right: 0;background-color:midnightblue;color:aliceblue;text-align: center;line-height: 50px; }        
div#logo {}
div#id {text-align:center; }
div#id ul {text-align:center;}
div#id ul li {text-decoration:none; display:inline-block; font-size:20px; color:#444; }

    #wrap{}
    .box{
        width:200px;
        height:200px;
        background-color:cyan;
        border:4px solid #000;
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-100px;
        margin-top:-180px;
        opacity: 0;
        transition: all 1s;
    }
    .box.on{margin-top:-100px; opacity: 1; }

    .item{
        width:200px;
        height:200px;
        background-color:lime;
        border:4px solid #000;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-100px;
        margin-left:-100px;
        transition: all 1s;
    }

    .item.on{        transform: rotate(360deg);    }
    .item.active{        transform: scale(2);    }


header{
            width:100%;
            height:70px;
        }
        
        .h_wrap{
            width:100%;
            margin:0 auto;
            position: relative;
        }
        
        .h_wrap ul{
            position: absolute;
            right:30px;
            top:-7px;
        }
        .h_wrap ul li{ font-family: 'nanumsquare', SANS-SERIF;
            float: left;
            margin-left:30px;
            color:navy;
            font-size: 15px;
            text-transform: uppercase;
        }
        
        .bar{
            display: none;
            width:22px;
            height: 4px;
            background-color:#2996d7;
            position: absolute;
            top:45px;
            left:0;
            transition:all 1s;
        }
    

        .con div{
            width:100% !important;
            height:100%;
        }
		.con div img {overflow:hidden; width: auto; }
		.bx-viewport {
    height: 100% !important; overflow:visible !important; padding-top:65px;}
        
        .box1{
            background-color:#fff;
        }
		.box1 img  {width:;}
		.con .box1 p img {position:absolute; top: 49vh;    left: 25vh; width: 350px;}
		.con .box2 p img {position:absolute; top: 40vh;    left: 45vh; width: 350px;}
		.con .box3 p img {position:absolute; top: 20vh;    left: 85vh; width: 350px;}
        .bx-pager{
            text-align: center;     bottom:5em;    z-index: 99; position:absolute; left:0em; right:0}
		.bx-controls-direction { position: absolute;  bottom:45%; z-index: 99;  left:3%; right: 3%; color:#fff; display: none;}
        .bx-pager-item{
            display: inline-block;
            margin:0 4px;
        }
        .bx-pager-item a{
            width:10px;
            height: 10px;
            border-radius: 50%;
            background-color:#ccc;
            display: block;
            text-indent: -9999px;
        }
        .bx-pager-item a.active{
            background-color:orangered;
        }

.scrollTop {
  position: absolute;
  background-color: #BE3F48;
  padding: 20px;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}

.scrollTop a {
  font-size: 18px;
  color: #fff;
}

a.bx-prev {background:url('/img/prev.png?<?=mt_rand(1,8145060)?>') center center no-repeat; background-size:contain; color:transparent; width: 30px;    height: 58px;    display: inline-block; opacity:0.7}
a.bx-next {background:url('/img/next.png?<?=mt_rand(1,8145060)?>') center center no-repeat; background-size:contain; color:transparent; width: 30px;    height: 58px;    display: inline-block; position: absolute; right:0; opacity:0.7}
#about {background:#ececec;     position: relative; width: 100%;  height: 100%;}
#about ul {width:1000px; margin:0 auto;}
#about ul li {width:24%; height:350px; background:#fff; margin:80px 10px 0 0; float:left;     overflow: hidden; text-align:center;}
#about ul li:hover {background:#2a96d8; color:#fff; transition:all 0.5s;}
#about ul li div.tt {    height: 107px;   margin-top: 42px;  line-height: 18px;   display: inline-block;}
#about ul li div.tt p {font-weight:bold; }
#about ul li div.tt span {font-size:13px; font-weight:normal;}
#about ul li img {width:100%;}
#about ul li:last-child {margin:80px 0 0 0;}
.title {width:100%; height:90px; text-align:center; display:inline-block;     margin-top:10%; }

#product {background:#fff; position:relative; height: 100%;}
#product ul {width:1000px; margin:0 auto;}
#product ul li {height:350px; margin:80px 10px 0 0;  overflow: hidden; text-align:center;}
#product .title p.cc {font-family: 'Noto Sans KR', serif; font-size:13px; margin: 0 20px;}

#support {background:#ececec;     position: relative; width: 100%;  height: 100%;}
#support ul {width:1000px; margin:0 auto;}
#support ul li {width:32%; margin:80px 10px 0 0; float:left;     overflow: hidden; text-align:center;}
#support .title {width:100%; height:90px; text-align:center; display:inline-block;     margin-top:12%; color:#fff;}
#support ul li p {color:#fff; margin:20px 0;}
#support ul li span {color:#fff;}

#contact {background:#fff;     position: relative; width: 100%;  height: 100%}
#contact .title p.cc {font-family: 'Noto Sans KR', serif; font-size:13px; font-style:italic; margin: 0 20px;}
#contact table {width:1000px; margin:0 auto;}
#contact table tr {margin:10px 0; display:inline-block;     width: 100%;}
#contact table th {width:30%; text-align: left;font-family: 'Noto Sans KR', sans-serif; font-size:0.95em; letter-spacing: -1px; border: 2px solid #e4e4e4; padding: 5px; font-weight:bold;float:left;}
#contact table td {border-top:2px solid #e4e4e4; border-bottom:2px solid #e4e4e4;border-right:2px solid #e4e4e4; background:#f4f4f4; font-family:'Noto Sans KR', sans-serif; font-size:15px;     width: 70%;    display: inline-block;}
#contact table th.tex {width:100%;}
#contact table td.texd {width:100%; border-left:2px solid #e4e4e4; border-bottom:2px solid #e4e4e4;border-right:2px solid #e4e4e4; border-top:0px;}
#contact table td.texd textarea {border:none; width:100%; height:150px; overflow-y:scroll; padding:5px;  background:#f4f4f4;}
#contact table td input {width:100%; border:none; text-align:left; padding:5px; background:#f4f4f4;}
#map {background:#ececec;     position: relative; width: 100%;  height:100%;}
.root_daum_roughmap .wrap_map {position: relative; height: 100% !important;}
.root_daum_roughmap {padding:0 !important;}
.custo_box {width:1000px; margin:0 auto;}
.custo_but {    padding: 12px 25px;background: #616161; color: #fff; text-align: right; margin-top: 15px;float: right;font-size: 18px;   border: none; border:2px solid #616161;}
.custo_but:hover {border:2px solid #e4e4e4; color:#444; background:#fff;}
#footer {background:#f7f7f7; text-align:left; font-size:12px; color:#444; line-height:21px; font-family:'맑은 고딕', sans-serif; top:-150px; height:150px; z-index:999; position:relative;}
#footer p {width:1000px; margin:0 auto;     height: 120px;   padding-top: 22px;}
#footer img.topbut {position:relative; right:0; float:right;     top: -22px;}
#footer .copyright {    background: #585858;  text-align: center;    height: 30px; font-size: 10px; color: #fff; line-height: 31px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase;}

aside{top:0;left:-100%;position:fixed;width:30%;height:100%;background:rgba(34,34,34,0.9);color:#fff; z-index:2;}
aside ul{padding-top:120px;padding-left:0px;}
aside ul li{border-bottom:0px solid #666;line-height: 50px; text-align: center; font-size:24px;}
aside ul li a {font-size:15px; color:#fff;}
aside .close{position: absolute;top:20px;right:20px;font-size:30px}
nav {background-color:midnightblue;color:#eee;position: absolute;    top: -19px;left: 0;width:100%;display:;}
nav a{display: block;float: left;width:33.33%;text-align: center;padding:20px 0;}
nav:after{content: '';clear: both;display: block;}

h1{font-family:'nanumsquareround',sans-serif; font-size:22px; font-weight:bold;}
h2{font-family: 'Noto Serif', serif; font-size:13px; font-style:italic;}
#mmouse {position: fixed; bottom: 4vh;right: 4vh;}
#mmouse span{display: block;
  width: 8px;
  height: 8px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 2px solid #d9221a;
  border-bottom: 2px solid #d9221a;
  margin: 3px 0 3px 7px;}

.unu {margin-top: 6px;}
.unu, .doi, .trei {-webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite;}
.unu {-webkit-animation-delay: .1s;-moz-animation-delay: .1s;-webkit-animation-direction: alternate;}
.doi {-webkit-animation-delay: .2s;-moz-animation-delay: .2s;-webkit-animation-direction: alternate;}
.trei {-webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate;}
.mouse {height: 30px;width: 21px;border-radius: 21px; transform: none; border: 2px solid #d9221a;}
.wheel { height: 6px; width: 2px; display: block; margin: 5px auto; background: #d9221a; position: relative;}
.wheel {-webkit-animation: mouse-wheel 1.2s ease infinite; -moz-animation: mouse-wheel 1.2s ease infinite;}

@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  50% { top: 2px; }
  100% { top: 3px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}


/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);}
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;}
@keyframes loaderAnim {
	to {opacity: 1;transform: scale3d(0.5,0.5,1);}}

a {
	text-decoration: none;
	color:#000;;
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

main {position: relative;}
.frame {position: relative;padding: 1.5rem 2.5rem;}
.frame a:hover {color: #4c33f7;}

/* Header */
.codrops-header {
	position: relative;
	z-index: 100;
	text-align: center;
	font-size: 1rem;}

.codrops-header__title {
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
	padding: 0; font-family: 'Domine', sans-serif;}

.info {margin: 0 0 0 1.25em;color: var(--color-info);}

.title {text-align: center;}
.title__name,
.title__sub {
	font-weight: normal;
	margin: 0;
	font-size: 1rem; font-family: 'Domine', sans-serif;
}

.title__sub {
	position: relative;
	margin: 0; font-family: 'Domine', sans-serif;
}

/* Top Navigation Style */
.grid-wrap {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 1rem 0;
}

.grid-wrap--hidden {
	height: 0;
	overflow: hidden;
}

.grid {
	margin: 0 auto;
	position: relative;
	display: none;
}

.js .grid {
	display: block;
}

.grid__item {
	width: 250px;
	position: relative;
	padding: 0.2rem;
	margin-bottom: 5rem;
}

.grid__item-wrap {
	position: relative;  overflow: hidden; border-radius: 100%; width:244px; height:244px; }

.grid__item-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; border-radius:100%;
	background: var(--grid-item-bg);
}

.grid__item-img {
	pointer-events: none;
	position: relative;
	margin: 0 auto; max-width:115%; left:0%; top:0%;
	display: block; overflow: hidden; width:244px; height:244px;
	outline: 1px solid transparent; border-radius: 100%;
}

.grid__item:nth-child(even) .grid__item-img {
	transform: rotate3d(0,0,1,0deg);
}

.grid__item:nth-child(odd) .grid__item-img {
	transform: rotate3d(0,0,1,0deg);
}

.grid__item-title {
	font-weight: normal;
	position: absolute;
	left: 0; display: none;
	top: 0; font-size: 15px;
	margin: 0 0 0 0rem;  font-family: 'Domine', sans-serif;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transform-origin: 0 50%;
}

.grid__item-number {
	font-weight:bold;
	position: absolute;
	right: 0;
	bottom: 0; 
	font-size: 2.65rem;
	margin:0 0.5rem 0.15rem;
}

.grid__item-number > span {
	display: inline-block;
}

.content {
	margin: 0 auto;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	align-items: center;
	pointer-events: none;
}

.js .content {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.content__item {
	padding: 10rem 5vw 10rem;
	grid-area: 1 / 1 / 1 / 1;
}

.js .content__item {
	height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
}

.js .content__item--current {
	height: auto;
	opacity: 1;
	padding: 0rem 5vw 10rem;
	pointer-events: auto;
}

.content__item-intro {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	align-items: center;
}

.content__item-img {
	position: relative;
	height: 23vh !important;
	max-width: 100%; 
	display: block;
	margin: 0 auto;
	grid-area: 1 / 1 / 1 / 1;
    visibility: hidden; opacity: 0;transition: visibility 2s 2s, opacity 2s linear;
}

.js .content__item-img {
	visibility: hidden;
}

.content__item-title {
	position: relative;
	font-size: 5vw;
	line-height: 1;
	text-align: center;
	margin: 0;
	padding: 0 5vw;
	white-space: nowrap;
	grid-area: 1 / 1 / 1 / 1;
}

.content__item-title > span {
	white-space: pre;
	display: inline-block;
}

.content__item-subtitle {
	text-align: center;
	font-size: 1.25rem;
	font-weight: normal;
	margin: 3rem auto; letter-spacing: -2px; text-decoration: underline; font-style: italic;
}

.content__item-text {
	text-align: justify;
	max-width: 800px;
	margin: 0 auto;
}

.content__item-text p {
	margin: 0;
}
.content__item-text img {width:100%;}
.content__close {
	position: absolute;
	top: 1.7%;
	right: 2%;
	z-index: 10000;
	transform: translateX(-50%);
	background: none;
	border: 0;
	margin: 0;
	padding: 0; font-size:45px;
	cursor: pointer;
	color: var(--color-text);
}

.content__close:focus {
	outline: none;
}

.content__item--current ~ .content__close {pointer-events: auto;}

.content__indicator {
	position: absolute;
	top: calc(100vh - 6rem);
	left: calc(50% - 0.75rem);
	display: none;
}

.js .content__item-title > span,
.js .content__item-subtitle,
.js .content__item-text,
.content__close,
.content__indicator {opacity: 0;}


@media screen and (max-width:720px) {
    aside {width: 50%;}
	.grid__item-number {right: 0rem;}
	.grid__item-title {margin-left: -0.25rem;}
	.content__item-subtitle {font-size: 1.5vw; letter-spacing: -2px; font-weight: 400; font-style: italic; text-decoration: underline;}
	.content__item-text {column-gap: 20px;}
	.content__item-img {max-width: none;height: calc(100vh - 6rem);}
	.content__item-subtitle {max-width: 80%;     font-size: 5vw;}
	.content__indicator {display: block;}
    .content__item-title {font-size: 14vw}
    
}

@media screen and (min-width: 55em) {
	.frame {
		display: grid;
		align-items: start;
		justify-items: start;
		grid-template-columns: 40% 60%;
		grid-template-areas: 'title header';
	}
	.codrops-header {
		grid-area: header;
		justify-self: end;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		align-items: center;
		text-align: left;
	}
	.codrops-links {margin: 0 0 0 1.5rem;}
	.title__sub {
		position: relative;
		padding: 0 0 0 5rem;
		margin: 0 0 0 1rem;
	}
	.title__sub::before {
		content: '';
		height: 1px;
		width: 4rem;
		background: currentColor;
		position: absolute;
		top: 0.65rem;
		left: 0;}
	.title__sub-works {display: block;}
    
}
        .row_in{
            width:900px; text-align:center;
            margin:0 auto;
        }
        
        .boxa:last-child{margin-right: 0;     margin: 15px 10% 0;    width: 80%;}

		.boxa img {width:100%; margin-top:0px !important;}
        .boxa {border: 1px solid #f1f1f1; margin-top: 15px;}
        .row_in:after{
            content:'';
            clear: both;
            display: block;
        }
        .viewa{
            background-color:rgba(0,0,0,0.5);
            position: absolute;
            width:100%;
            height: 100%;
            top:0;z-index:9999;
            left:0;
            display: none;
        }
        
        .viewa i, .cclo{
            color:#fff;
            position: absolute;
            top:100px;
            right: 40px;
        }
		.cclo{
            color:#fff;
            position: absolute;
            top:100px;
            right: 40px;
        }
		.cclo img {width:40px;}
		 .viewa figure{
            width:800px;
            position: absolute;
            top:50%;
            left:50%; height:600px; overflow-y:scroll; overflow-x:hidden;
            transform: translate(-50%, -50%);
        }
        
        .viewa figure img{
            width:100%; 
            height: auto;
        }
        
        .view_close{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
.con {display:block;}
.con_s {display: none;}

.p_c {display:block;}
.p_m {display:none}

.modal {text-align: center;}
.modal > label {
  cursor: pointer;
  display: inline-block;
  -webkit-transition: all 0.55s;
  transition: all 0.55s;
}

.modal > label:hover {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}

.modal input {
  position: absolute;
  right: 100px;
  top: 30px;
  z-index: -10;
}

.modal__overlay {
  background:rgba(0,0,0,0.7);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: -800;
}

.modal__box { height:65vh; overflow-y:scroll;overflow-x:hidden; -webkit-overflow-scrolling: touch;
  position: relative;
  max-width: 650px;
  width: 100%;
}
@media (min-height: 37.5em) {

.modal__box {
  left: 50%;
  position: absolute;
  top: 65vh;
  -webkit-transform: translate(-50%, -80%);
  -ms-transform: translate(-50%, -80%);
  transform: translate(-50%, -80%);
}
}
.modal__box img {width:100%;}
.modal__box label {
  background: #FFDE16;
  border-radius: 50%;
  color: black;
  cursor: pointer;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  width: 2em;
}

.modal__overlay {
  opacity: 0;
  overflow: hidden;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

input:checked ~ .modal__overlay {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 800;
}

input:focus + label {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}

    .swiper-container {
      width: 1000px;
      height: auto;    margin: 0 auto;
    text-align: center;
    overflow: hidden;     position: relative;
    }/*
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
*/
@media screen and (min-width: 769px) {
    #mbtn {display:none;}
	.section.fp-section {overflow: hidden; height: 100% !important;}
}

@media screen and (max-width: 768px) {
	#mbtn {display:block;}
	.btn {position: absolute; top: 0; left: 0; width: 65px; height: 65px; padding: 13px 8px;    cursor: pointer;     z-index:1;}
	.btn span { display: block; height: 3px; width: 25px; background-color: #2a96d8; margin-bottom: 4px; margin: 4px; top: 8px; position: relative;  left: 8px;}
	.close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 30px; cursor: pointer;z-index: 999;}

	.topheader #logo {text-align:center;    right: 0;    position: absolute;    left: 0;}
	.h_wrap {display:none;}
	#product .title {margin-top:100px;}
	#product ul {width:100%;}
    #about ul {width:100%; margin:0 auto;}
	#about .title {margin-top: 100px;}
	#about ul li {width:45%; margin:20px 2.5% 0 2.5%; height:28.5vh;}
	#about ul li:last-child {margin: 20px 2.5% 0 2.5%;}
	#about ul li div.tt {height: 75px; margin-top: 20px; line-height: 15px;}
	#support ul {width:100%; margin:0 1em;}
	#support .title {margin-top:10em;}
	#support ul li {width: 30%;}
	#support ul li img {width:50%;}
	#contact .title {margin-top:100px;}
	.section.fp-section {overflow:hidden; height: 100% !important;}

	#contact table {width:94%;}
	.con_s {display:block;}
	.con {display:none;}
	.p_c {display:none;}
	.p_m {display:block; width: 100% !important;}
	.box1 img , .box2 img , .box3 img {width:100%; height:120%;}
	.bx-viewport {padding-top:32px;}
	a.bx-prev {width: 20px;height: 48px;}
	a.bx-next {width: 20px;height: 48px;}
	.bx-pager {bottom: 2em;}
	.row_in {width:100%}
	.row_in img {width:250px; height:auto; margin-top:10px;}
	.viewa {z-index:9999;}
	.viewa figure {width:90%; height: 500px; top:52%;}
	.cclo {top:75px;}
	#footer p {width:90%;     margin: 0 5%; text-align: center;   overflow: hidden;     line-height: 14px;     font-size: 11px;}
    .swiper-container {width:100% !important;}
	.custo_box {width:94%;}
	.custo_but {width: 100%; text-align: center; font-size: 18px; margin-top: 5px; padding: 15px 20px;}
	#contact table td.texd textarea {max-height:auto; min-height:80px; height:auto;}

	
}