/* 상단 메뉴, nav,  사이드 메뉴 */
html.expand body { position:fixed; top:0; left:0; width:100%; }
html.expand #side_bgc {position: fixed; top:0; right:0; width:100%; height:100%;  background:rgba(0,0,0,.7); }


br.br_768 {display: none;}
@media (max-width: 768px) {
	br.br_768 {display: block;}
}

.header_wrap {  width: 100%; height: 80px; position: fixed;top:0; border-bottom: 1px solid #dfdfdf;background:#fff;  z-index: 897;}
.header_wrap:after {content:""; display:block; clear:both;}
.header_wrap:before {content:""; display:block; height: 79px; width: 100%;  position: absolute; left:0; top:0; }


.header_wrap .head_icon {display: none;}
.header_wrap .header {height: 80px; position: relative; max-width:1200px; margin: 0 auto;}
.header_wrap .header:after {content:""; display:block; clear:both;}
.header_wrap .logo_wrap {width:120px; position: absolute; top: 30px; left:15px; font-size:0; z-index: 10; }
.header_wrap .logo_wrap a {display:block; }
.header_wrap .logo_wrap img {height: 21px;}


.header_wrap .header .nav { text-align: right; padding: 0 15px 0 0;}
.header_wrap .header .nav li {display:inline-block; padding:0 40px; height: 80px; line-height:80px; position:relative; vertical-align: top;}
.header_wrap .header .nav li a {font-size: 1.53rem;  display: block; height: 80px; font-weight: normal; color: #111010; }
.header_wrap .header .nav li a::before {  display: block;   content: attr(title);   font-weight: bold;   height: 0;   overflow: hidden;   visibility: hidden; }

.header_wrap .header .nav li a.active,
.header_wrap .header .nav li a:hover {font-weight: bold; color: #000; }

.header_wrap .header .nav li ul  {display:none; width:200px; min-height: 60px; padding: 15px 0; background:rgba(255,255,255,.9);text-align:center;  position:absolute;  left:50%;  margin-left:-100px; top:80px; font-size:0; z-index:14; }
.header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height:30px; line-height:30px; vertical-align:top;}
.header_wrap .header .nav li ul li a {display:block;  font-weight: normal;}
.header_wrap .header .nav li ul li a.longtxt {letter-spacing:-1px;}
.header_wrap .header .nav li ul li a:hover,
.header_wrap .header .nav li ul li a.active {border-bottom: none;}
.header_wrap .header .nav li:last-child {padding-right: 0;}
.header_wrap .header .nav li ul.snav5 {left:-85px; margin-left:0; }


@media all and (min-width:769px) {
	.header_wrap .header .nav li:hover ul {display:block;}
}

@media (max-width: 1024px) {
	.header_wrap .header .nav li { padding:0 20px; }
	.header_wrap .header .nav li a {}

}

#side_nav .side_hide {display: none;}

@media (max-width: 768px) {
	.header_wrap {height: 50px; }
	.header_wrap .header {height:auto; min-height:50px }
	.header_wrap:before { height: 49px; }

	.header_wrap .logo_wrap  {width: 240px; position: absolute; top: 18px; left: 14px; margin-left: 0; font-size:0;}
	.header_wrap .logo_wrap a {display:block; text-align: left;}
	.header_wrap .logo_wrap img {height: 17px}

	.header_wrap .head_icon {height:30px;  display: block;}

	.header_wrap p.ico_ham {position: absolute; right: 12.5px; top: 14.5px; cursor: pointer; }
	.header_wrap p.ico_ham i {font-size: 25px; }
	.header_wrap p.ico_ham img {height: 15px;}

	.header_wrap .header #side_nav { padding:0 0; width: 85%; height:100%;  max-width: 500px; position: fixed; top:0; right:-100%;  background: #fff;  z-index:900   ; box-shadow:2px 0px 4px rgba(0,0,0,0.30); }
	.header_wrap .header .nav {float:none; width:100%; text-align:left; margin:0; position: relative; background: #fff;}
	.header_wrap .header .nav li {display:block; padding:0 0; height:auto; line-height:40px; position:relative; border-bottom: 1px solid #f7f7f7;}
	.header_wrap .header .nav li.havn {}

	.header_wrap .header .nav li a {font-size:15.5px; padding: 0 0 0 15px;  color:#1e1e1e; display: block; height:50px; line-height:50px; font-weight:500 ; border-bottom:none; }
	.header_wrap .header .nav li a.active,
	.header_wrap .header .nav li a:hover {border-bottom:none;}

	.header_wrap .header .nav li.havn > a:after {display: block; position: absolute; right:0; top:0;  width:40px; height:50px; line-height:50px; text-align: center; font-size:15px; content: "  \e941"; font-family:'xeicon'; 	transform: rotate(0deg);transition: transform 120ms 200ms ease-out;}
	.header_wrap .header .nav li.havn.on > a:after {	transform: rotate(-180deg);    transition: transform 120ms ease-in-out;}



	.header_wrap .header .nav li ul  {display:none; width:100%; min-height:40px; height:auto;  padding:5px 0; background: #f9f9f9;text-align:left;  position: relative; left:0;  top:0;  margin-left:0; }
	.header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height:40px; line-height:40px; vertical-align:top; border-bottom:none;}

	.header_wrap .header .nav li ul.snav5 {left:0; margin-left:0; }

	#side_nav .side_hide {display:block;}
	#side_nav .side_logo {padding: 15px 0 10px; text-align: center;}
	#side_nav .side_logo img {height: 16px;}


	#side_nav .btn_side_close {position: absolute; right: 13px; top: 13px; cursor: pointer;}
	#side_nav .btn_side_close i {font-size: 21px;}

}





.rico_wrap {width: 74px; position: fixed; right: 0; top: 80px; z-index: 20; }
.rico_wrap ul {background: #fefffe; }
.rico_wrap ul li {  text-align: center; padding: 19px 0 12px 0;}
.rico_wrap ul li.border {border: 1px solid #dfdfdf;}
.rico_wrap ul li .img img {width: 28px;}
.rico_wrap ul li .img2 img { height: 22px;}
.rico_wrap ul li .img.mobile {display: none;}
.rico_wrap ul li .t {color: #000; font-size: 1.22rem; letter-spacing: -0.068rem; font-weight: bold; margin: 6px 0 0; line-height: 1.23;}

.rico_wrap ul li .link {color: #fefffe; font-size: 1.22rem; letter-spacing: -0.068rem; font-weight: bold; margin: 14px 0 0; line-height: 1.23;}
.rico_wrap ul li .link a {color: #fefffe; display: block; line-height: 1.0; margin: 10px 0 0 0;}
.rico_wrap ul li.tel {background: #000000; color: #ffffff; border-bottom: 0;}

.rico_wrap .goTop {width: 74px; height: 74px; border-radius: 37px; background: #000000; text-align: center; margin: 10px 0; position: fixed; bottom: 0; right: 0}
.rico_wrap .goTop a { color: #fefffe; display: block; padding-top: 20px;}
.rico_wrap .goTop a span {display: block; }



.rico_wrap .kakao { width: 74px; height: 74px;  background: #ffffff; border-radius: 37px; margin: 10px 0 0 0; }
.rico_wrap .kakao span.ico img {width: 100%;}
/*
.rico_wrap .kakao span.ico {width: 44px; display: inline-block; border-radius: 22px; background: #FFE100; text-align: center;}
.rico_wrap .kakao span.ico .xi {color: #000000; font-size: 26px; vertical-align: middle;}
*/

.rico_wrap .open_btn {width: 50px; height: 50px; margin: 0 auto; background: #000; border-radius: 25px; text-align: center; outline: 0;  display: none; }
.rico_wrap .open_btn span {cursor: pointer; display: block; line-height: 50px;  color: #fff; font-size: 20px; transform: rotate(0deg); 	transition: transform 120ms 20ms ease-out; }
.rico_wrap .open_btn.close span {	transform: rotate( 45deg); 	transition: transform 120ms 20ms ease-out; }


.footer_go_btn{    background: #0e0f11;
    color: #fff!important;
    padding: 10px 22px;
    margin-top: 30px;
    text-decoration: none!important;
    display: inline-block;}


@media (max-width: 1024px) {

    .rico_wrap {width: 50px; top: auto; bottom: 30px; right: 15px;}
    .rico_wrap ul {background: transparent; border-top: 0;}

    .rico_wrap ul li { padding: 0 0 5px 0; }
    .rico_wrap ul li.border {border: none;}
    .rico_wrap ul li a {height: 50px; display: block; border-radius: 25px; background: #ffffff; border: 1px solid #dfdfdf;
        padding: 4px 0 0 0;
    }
    .rico_wrap ul li:first-child a {padding: 0 0 0;}
    /*
    .rico_wrap ul li .img img {width: 15px; height: auto;}
    .rico_wrap ul li .t {  font-size: 0.90rem;  font-weight: normal; margin: 3px 0 0; line-height: 1.23;}
    */
    .rico_wrap ul li .img,
    .rico_wrap ul li .t {display: none;}

    .rico_wrap ul li .img.mobile {display: block; }
    .rico_wrap ul li .img.mobile img {width: 100%;}

    .rico_wrap ul li.tel {display: none;}
    .rico_wrap .goTop {display: none;}


    .rico_wrap .kakao { width: 50px; height: 50px; line-height: 15px; background: transparent; border-radius: 25px;   text-align: center;
         padding: 4px 0 0 0; margin: 0 0 5px 0;
    }
    .rico_wrap .kakao a {font-size: 1.0rem; font-weight: normal;  }
    .rico_wrap .kakao span.ico {width: auto; line-height: 1.1; border-radius: 0; text-align: center; display: block; background: transparent; height: auto; }
    .rico_wrap .kakao span.ico .xi {color: #000000; font-size: 18px;  }


    .rico_wrap .rico_conts {display: none;}
    .rico_wrap .open_btn {display: block;}

}






/* 중간 레이아웃 */
.sub_conts {max-width: 1200px; margin: 0 auto; padding: 80px 0 0 0;  position: relative;}
@media (max-width: 768px) {
	.sub_conts {padding: 50px 0 0 0;}
}



/* 하단 */
.tail_wrap { padding:30px 15px 30px;  background: #0e0f11; color: #ffffff;}
.tail_wrap .tail { padding:0 15px; max-width:1200px;  margin:0 auto; position:relative; font-size: 1.3rem;

}
.tail_wrap .tail .item { }
.tail_wrap .tail .logo_b { padding: 0 0 30px 0;  }
.tail_wrap .tail .logo_b img { height: 30px; }

.tail_wrap .tail .com_info { color: #ffffff; line-height: 1.7; font-size: 1.4rem; margin: 0 0 20px 0; }
.tail_wrap .tail .com_info span { /* display: inline-block; float: left; margin-left: -80px; width: 80px; font-size: 1.6rem;  font-weight: bold; */}

.tail_wrap .tail .site_menu {padding: 0 0 10px ; text-align: left;}
.tail_wrap .tail .site_menu a {color: #fff; display: inline-block; margin-right: 20px;}

.tail_wrap .tail .copyright {padding:22px 0; text-align: center; line-height: 1.1; font-size: 1.2rem; color: #c5c5c5; text-align: center;}

ul.bsns {text-align: right;}
ul.bsns li {display: inline-block; margin-right: 10px;}
ul.bsns li a {display: block; width: 54px; height: 54px; border-radius: 27px; background: #6081c4; text-align: center;}
ul.bsns li a.o {background: #f15a4b;}
ul.bsns li a.c {background: #d50060;}
ul.bsns li a i {font-size: 32px; color: #fff;  line-height: 54px; }


@media (max-width: 768px) {
	.tail_wrap {border-top-width: 7px;}
	.tail_wrap .tail { display: block;	}
	.tail_wrap .tail .item { width: 100%;}
	ul.bsns {text-align: center;}
	ul.bsns li {display: inline-block; margin: 5px;}
	ul.bsns li a {display: block; width: 34px; height: 34px; border-radius: 17px; background: #6081c4; text-align: center;}
	ul.bsns li a i {font-size: 20px; color: #fff;  line-height: 34px; }
	.tail_wrap .tail .logo_b {padding: 30px 0 20px 0;}
	.tail_wrap .tail .logo_b img {height: 26px;}

	.tail_wrap .tail .com_info {   font-size: 1.3rem;}
	.tail_wrap .tail .com_info span { font-size: 1.45rem;}
}






/* sub */

.top_img_wrap { padding: 80px 0 0 0;}

.topImg_about { background: url('../img/top_img_about.png') no-repeat 50% 50%; background-size: cover;
    height: 426px;
}

.sub_top_area {position: relative; height: 130px; background: #000; }

.full_body_wrap {background: #ffffff;}

.page_title {color: #fff; max-width: 1200px; margin: 0 auto; padding: 110px 15px 0;}
.page_title h1 {line-height: 1.2; font-size: 3.74rem; font-weight: normal; letter-spacing: -1.5px; margin: 0 0 20px;}
.page_title .pdesc {line-height: 1.2; font-size: 1.76rem; font-weight: 300; font-style: italic; color: rgba(255,255,255,.8);}




.page_title.normal {padding: 25px 15px 0; }
.page_title.normal h1 {line-height: 1.2; font-size: 3.14rem; margin: 0 0 10px;}



.page_body_wrap {background: #f9f9f9; position: relative; padding: 10px 20px 100px;}
.page_body {max-width: 1436px; margin: 0 auto; padding: 80px 0; margin-top: -120px; background: #fff;  border: 1px solid #cbcbcb; }
.page_body.noPadding {padding: 0;}
.page_body.noBorder {border: 0; background: transparent;}
.page_body .prx { height: 424px; background: url('../img/about_img_prx.jpg') no-repeat 50% 50%; background-size: 90% auto; background-attachment: fixed;
        margin: 75px 0;
}

.about {padding: 0 15px; max-width: 870px; margin: 0 auto;}
.about img {max-width: 100%;}

.about h2.st {line-height: 1.1; border-bottom: 1px solid rgba(8,8,8,0.1); padding-bottom: 30px; margin-bottom: 30px;}
.about h2.st img {max-height: 28px; }


.greet { text-align: right; position: relative; padding: 35px 0;}
.greet .img {width: 380px; display: inline-block;}
.greet .txt {position: absolute; width: calc(100% - 420px);
    font-size: 2.0rem ; font-weight: normal; letter-spacing: -1.5px; line-height: 1.9;
    left: 0; top: 50%; -webkit-transform: translateY(-50%) ; text-align: left;
}

.greet.left {text-align: left;}
.greet.left .txt {right: 0; left: auto; text-align: right;}

@media (max-width: 768px) {
	.top_img_wrap {padding: 50px 0 0 0;}
    .topImg_about {height: 0; padding-bottom: 43.6%;}

	.page_body {margin-top: 0; padding: 40px 0;}

}

@media (max-width: 468px) {
    .sub_top_area {height: 86px;}

    .page_title { padding: 50px 20px 0;}
    .page_title h1 { font-size: 2.1rem; letter-spacing: -0.7px; margin: 0 0 8px;}
    .page_title .pdesc {  font-size: 1.2rem; }

    .page_title.normal {padding: 17px 20px 0; }
    .page_title.normal h1 { font-size: 2.1rem; letter-spacing: -0.7px; margin: 0 0 8px;}

    .page_body_wrap {padding: 0;}

    .page_body { padding: 0; border: 0;}

    .about {padding: 0 20px;}
    .about h2.st {display: none;}

    .greet .img {width: 100%; display: block;}
    .greet .txt {position: static; top: auto; left: auto; right: auto; width: 100%;  -webkit-transform: none ;
        font-size: 1.3rem; color: rgba(4,4,4,0.6); font-weight: 300;letter-spacing: -0.5px; line-height: 1.67;
        margin: 0 0 25px 0;
    }
    .greet.left .txt {text-align: left;}


	@supports (-webkit-touch-callout: none) {
		.page_body .prx { height: 160px; margin: 0px 0;  background: url('../img/about_img_prx.jpg') no-repeat 50% 50%; background-size: 100% auto; background-attachment: scroll;	}
	}


	@supports not (-webkit-touch-callout: none) {
		/* CSS for other than iOS devices */
		.page_body .prx { height: 160px; margin: 0px 0; background: url('../img/about_img_prx.jpg') no-repeat 50% 50%; background-size: 100% auto; background-attachment: fixed;}
	}

}








.location_wrap {}

.location_wrap #map_head  {width: 100%; height: 810px;}
.location_wrap .addr {padding: 60px 0; font-size: 2.0rem; line-height: 1.9; letter-spacing: -1.5px;}

@media (max-width: 1024px) {
    .location_wrap #map_head {height: 400px;}
}

@media (max-width: 468px) {
    .location_wrap {padding: 20px 0;}
    .location_wrap #map_head {height: 320px;}
    .location_wrap .addr {padding: 25px 20px; font-size: 1.3rem; line-height: 1.67; font-weight: 300; letter-spacing: -0.5px;}
}


.succ {}
.succ .msg {max-width: 1200px; margin: 0 auto; padding: 100px 15px; word-break: keep-all;
    font-size: 2.0rem; letter-spacing: -1.5px; line-height: 1.9; color: #000;
}


.bna {background: #eef6f3; position: relative; }
.bna.gray {background: #f1f3f2;}
.bna.purple {background: #e4e7f6;}
.bna.white {background: #ffffff;}


.bna:after {content:""; display:block; clear:both;}

.bna img {max-width: 100%;}
.bna .img_wrap {width: 824px; float: left; }

.bna .txt { width: 500px; position: absolute; text-align: right;
    left: 50%; top: 50%;  -webkit-transform: translateY(-50%); margin-left: 100px; word-break: keep-all;
    font-size: 2.0rem; font-weight: normal; line-height: 1.9; letter-spacing: -1.5px; color: rgba(0,0,0,.6);
}
.bna .txt span.r {font-size: 1.95rem; line-height: 1.2; letter-spacing: -1px; font-weight: normal;  padding: 10px 22px;  border-radius: 26px; background: #000; color: #fff; }
.bna .txt .tt {line-height: 1.43; margin: 20px 0; font-size: 3.0rem; font-weight: 500; letter-spacing: -2px; color: #000;}
.bna .img_wrap .double {}
.bna .img_wrap .double .item {}
.bna .img_wrap .double .item p { position: relative; margin: 0; width: 50%; float: left;}
.bna .img_wrap .double .item.line p {border-top: 1px solid #fff;}
.bna .img_wrap .double .item span.tip {padding: 15px 20px; display: inline-block; background: #fff; font-size: 1.95rem; letter-spacing: -1px; line-height: 1.1; color: #000000;
    position: absolute; left: 0; top: 0;
}
.bna .img_wrap .double .item span.tip.b {background: #000; color: #fff;}
.bna .img_wrap .double .item img {width: 100%;}


.bna.bna2 {background: #ffffff;}
.bna.bna2.purple {background: #e4e7f6;}
.bna.bna2 .img_wrap {float: right;}
.bna.bna2 .txt {left: auto; margin-left: 0; right: 50%; margin-right: 100px; text-align: left;}

.bna.bna3 {background: #e3f0ff;}

@media (max-width: 1420px) {
    .bna .img_wrap {width: 50%; }
    .bna .txt {line-height: 1.6; font-size: 1.8rem; }
    .bna .txt,
    .bna.bna2 .txt {margin-left: 0; margin-right: 0; width: 50%; padding: 0 30px; float: left;}
}

@media (max-width: 768px) {
    .succ .msg {font-size: 1.3rem; line-height: 1.42; letter-spacing: -0.5px; font-weight: 300; padding: 35px 20px;}
    .bna {padding-bottom: 25px;}
    .bna.bna2 .img_wrap,
    .bna .img_wrap {float: none; width: 100%;}
    .bna .img_wrap:after {content:""; display:block; clear:both;}
    .bna .img_wrap .double .item span.tip {font-size: 1.2rem; font-weight: 500; letter-spacing: -0.5px; padding: 10px 10px;}

    .bna .txt,
    .bna.bna2 .txt { position: static; left: auto; top: auto; width: 100%; padding: 40px 20px; float: none; -webkit-transform: none;
        text-align: left;
    }

    .bna .txt span.r {font-size: 1.1rem; letter-spacing: -0.5px; padding: 6px 10px; border-radius: 17px; }
    .bna .txt .tt {font-size: 1.7rem; letter-spacing: -1px;}
    .bna .txt {font-size: 1.3rem; letter-spacing: -0.5px;}

}


.marketing {background: #f9f9f9;}
.marketing img {max-width: 100%;}


.marketing .msg {background: #fff; padding: 100px 20px;}
.marketing .msg .txt { max-width: 1200px; margin: 0 auto; font-size: 2.0rem; line-height: 1.9; letter-spacing: -1.5px; color: #000;}

.marketing .online { max-width: 1200px; margin: 0 auto 90px; padding: 200px 20px 30px; border-bottom: 2px solid #000; position: relative;
    color: rgba(0,0,0,.6); font-weight: normal; font-size: 2.0rem; line-height: 1.55; letter-spacing: -1.5px;
}
.marketing .online .img {width: 419px; position: absolute; right: 0; bottom:0; }

@media (max-width: 1200px) {
    .marketing .online .img {width: 340px;}
}
@media (max-width: 768px) {
    .marketing .msg {padding: 70px 20px 70px; }
    .marketing .msg .txt {font-size: 1.3rem; letter-spacing: -0.5px; color: rgba(0,0,0,.6); position: relative; z-index: 5; }
    .marketing .online {font-size: 1.3rem; letter-spacing: -0.5px; color: rgba(0,0,0,.6);}
	.marketing .online .img {width: 300px; }
}

@media (max-width: 468px) {
    .marketing .msg {padding: 30px 20px 50px; }
    .marketing .online {padding: 120px 20px 30px; margin-bottom: 50px;}
    .marketing .online .img {width: 54%;}

}

.tni_wrap {}
.tni {background: #2c2c2c; position: relative; width: calc(100% - 150px);  }
.tni:after {content:""; display:block; clear:both;}
.tni .img {width: 580px; float: right;}
.tni .img img {width: 100%;}
.tni .txt {position: absolute;  color: rgba(255,255,255,.6);  font-weight: normal; font-size: 2.0rem; letter-spacing: -1.5px; line-height: 1.55;
    width: 360px; top: 50%; left: 50%;  	-webkit-transform: translateY(-50%) translateX(-50%);
}
.tni .txt .t {font-size: 3.0rem; font-weight: 500; line-height: 1.1; margin: 0 0 20px 0; color: #ffffff;}


.tni.tni2 {background: #e3f0ff; margin-left: 150px;}
.tni.tni2 .img {float: left;}

.tni.tni2 .txt { color: rgba(0,0,0,.6);}
.tni.tni2 .txt .t { color: #000000;}

.tni .img .single {position: relative;}
.tni .img .icon {position: absolute; left: 10%; top: -20px; }
.tni .img .icon img {height: 100px; width: auto; }
.tni .img .icon.icon2 { top: 30%; left: auto; right: 20px; }



.cloud1 { position: absolute; width: 150px;  text-align: right;
   animation-duration: 2s;	animation-iteration-count: infinite; animation-name: moveup1;   -webkit-animation-name:moveup1;
}


@-webkit-keyframes moveup1{
	0% {top:-20px; }
	50% {top: 0px; }
	100% {top:-20px;}
}
@keyframes moveup1 {
	0% {top:-20px;}
	50% {top: 0px;}
	100% {top:-20px;}
}

.tni .img .icoA {position: absolute; left: 10%; top: -20px;}
.tni .img .icoA img {height: 80px; width: auto;}
.tni .img .icoA.icoA2 { top: 15%; left: auto; left: 30%}
.tni .img .icoA.icoA3 { top: 30%; left: auto; right: -20px}


@media (max-width: 1700px) {
    .tni .txt {left: 30%; }
    .tni.tni2 .txt { left: 50%; -webkit-transform: translateY(-50%) translateX(30%);}

}
@media (max-width: 1200px) {
    .tni {width: 100%; padding: 0 20px; }
    .tni.tni2 {margin-left: 0;}

	.tni .img .icon.icon2 {right: 150px;}
}
@media (max-width: 1024px) {
	.marketing {overflow: hidden;}

	.tni .img {width: 350px;}
	.tni .img .icon img {height: 60px; }
	.tni .img .icoA img {height: 50px; }

	.tni .txt {width: calc(100% - 350px); left: 0; -webkit-transform: translateY(-50%) translateX(0); padding-left: 10%;}
	.tni.tni2 .txt {left: 0; width: 50%; padding-left: 0; margin-left: 30%;}


}

@media (max-width: 768px) {
    .tni_wrap {background: #ffffff; padding: 20px 20px;}
    .tni,
    .tni.tni2 {padding: 0; margin: 0;}

    .tni .img,
    .tni.tni2 .img {float: none; width: 100%;}

    .tni .txt { position: static; font-size: 1.3rem; letter-spacing: -0.7px; line-height: 1.5;
        padding: 30px 20px; width: 100%; -webkit-transform: none
    }
    .tni .txt .t {font-size: 1.7rem; }

    .tni.tni2 .txt {width: 100%; margin: 0; padding: 30px 20px; -webkit-transform: none; left: auto;}

    .tni .img .icon img {height: 50px; width: auto;}
    .tni .img .icon.icon2 { right: 150px}

    .tni .img .icoA img {height: 40px;}
    .tni .img .icoA.icoA3 {  right: -5px; }

}


.channel {max-width: 1200px; margin: 0 auto; padding: 100px 20px 100px;}
.channel ul.ico {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    margin: 0 auto;
}
.channel ul.ico li { flex: 0 0 20%; padding: 0 15px;  text-align: center;}
.channel ul.ico li img {max-width: 100%; }
.channel ul.ico li p {line-height: 1.35; font-size: 2.0rem; letter-spacing: -1.5px; font-weight: normal; color: rgba(0,0,0,.6);
    padding: 20px 0 0 0;
}


.youtuber {background: #fdfdfd; padding: 10.0rem 20px 10.0rem 20px; position: relative; border-top: 1px solid #cbcbcb; }

.youtuber .ma_list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    margin: 0 auto;
}
.youtuber .ma_list li {flex: 0 0 20%; }
.youtuber .ma_list li .item {margin: 0 14px 28px; height: 100%;   }

.youtuber .ma_list li .item .box {}
.youtuber .ma_list li .item .box img { width: 100%;
   filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: gray;
    transition: filter 400ms ease-in-out;
}


.youtuber .ma_list li .item .box:hover img {filter: none; -webkit-filter: none; }


.marketing .ct {font-size: 2.0rem; font-weight: normal; color: rgba(0,0,0,.6); letter-spacing: -1.5px; margin: 0 auto 80px; max-width: 1200px; }
.marketing .ct h3 {font-size: 3.0rem; font-weight: 500; color: #000; letter-spacing: -2px; margin-bottom: 20px; line-height: 1.1;}



@media (max-width: 1660px) {
    .youtuber .ma_list {margin: 0 -10px;}
    .youtuber .ma_list li .item {margin: 0 10px 20px; }
}
@media (max-width: 768px) {

    .channel ul.ico {flex-wrap: nowrap; overflow-x: auto; padding: 0 0 10px 0;}
    .channel ul.ico li p {font-size: 1.6rem;}
    .channel ul.ico li {flex: 0 0 30%; }

    .youtuber {padding-top: 5.0rem;}

    .youtuber .ma_list {margin: 0 -7px; flex-wrap: nowrap; overflow-x: auto; }
    .youtuber .ma_list li {flex: 0 0 40%; }
    .youtuber .ma_list li .item { margin: 0 7px 14px;}


    .marketing .ct {font-size: 1.3rem; letter-spacing: -1px; margin: 0 auto 40px;}
    .marketing .ct h3 {font-size: 1.8rem;  letter-spacing: -1px; }
}

@media (max-width: 468px) {
    .channel {padding: 50px 20px 50px; margin-top: 20px;}
    .channel ul.ico li { padding: 0 7px; }
    .channel ul.ico li p {font-size: 1.3rem; padding: 10px 0 0 0;}

}


.bstep {background: #f9f9f9;}
.bstep img {max-width: 100%;}

.bstep .msg {background: #fff; padding: 100px 20px;}
.bstep .msg .txt { max-width: 1200px; margin: 0 auto; font-size: 2.0rem; line-height: 1.9; letter-spacing: -1.5px; color: #000;}

@media (max-width: 768px) {
    .bstep .msg {padding: 30px 20px; }
    .bstep .msg .txt {font-size: 1.3rem; letter-spacing: -0.5px; color: rgba(0,0,0,.6); position: relative; z-index: 5; }
}

.step_info {   padding: 130px 0; }
.step_info:after {content:""; display:block; clear:both;}
.step_info img {max-width: 100%;}
.step_info .item {width: calc(50% - 20px); float: left; background: #e3f0ff; position: relative;}
.step_info .item:after {content:""; display:block; clear: left;}
.step_info .item .img {float: left; width: 50%;}
.step_info .item .desc {   position: absolute;  width: 35%; left: 75%; top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.step_info .item .img .pc {}
.step_info .item .img .mo {display: none;}

.step_info .item.right {margin-top: 17%; margin-left: 40px;}
.step_info .item.right2 {margin-top: 13%; margin-left: 40px; margin-bottom: 140px;}
.step_info .item.side {margin-top: -4%;}

.step_info .item.wide {clear: both; width: 100%; float: none; }

.step_info .item.color1 {background: #2c2c2c;}
.step_info .item.color2 {background: #e4e1da;}
.step_info .item.color3 {background: #ffffff;}
.step_info .item.color4 {background: #7fc9af;}


.step_info .numb { display: inline-block; width: 50px; height: 50px; line-height: 48px; text-align: center;
    font-size: 2.08rem; border: 1px solid rgba(0,0,0,.6);     border-radius: 42px;
}
.step_info .desc_desc .t {font-size: 3.0rem; letter-spacing: -2px; margin: 20px 0 10px;}
.step_info .desc_desc .d {font-size: 2.0rem; color: rgba(0,0,0,.6); letter-spacing: -1.5px;}

.step_info .white .numb {border: 1px solid rgba(255,255,255,.6); color: rgba(255,255,255,.6);}
.step_info .white .desc_desc .t { color: #ffffff; }
.step_info .white .desc_desc .d { color: rgba(255,255,255,.6); }


.step_info .boo {position: absolute; height: 220px; right: 10%; top: -50%}
.step_info .boo img {height: 100%;}

.step_info .boo.boo1 { margin-top: -140px;
    animation-duration: 2s;	animation-iteration-count: infinite; animation-name: moveup1;   -webkit-animation-name:moveup1;
}
.step_info .boo.boo1 img {width: 220px; height: auto;}


.step_info .boo.boo2 {right: auto; left: 7%; margin-top: -40px;
    animation-duration: 2s;	animation-iteration-count: infinite; animation-name: moveup1;   -webkit-animation-name:moveup1;
}
.step_info .boo.boo2 img {width: 220px; height: auto;}




@media (max-width: 1536px) {
    .step_info .item {width: 61%; }
    .step_info .item.side {margin-top: 43px;}
    .step_info .item.right {float: right; margin-top: 43px; margin-left: 0;}
    .step_info .item.right2  {float: right; margin-top: 43px; margin-left: 0; margin-bottom: 43px;}
}

@media (max-width: 1200px) {
    .step_info {padding: 43px 0;}
    .step_info .boo {height: 170px;}
    .step_info .boo.boo1 img {width: 170px;}

}

@media (max-width: 1024px) {
    .step_info .numb {font-size: 1.8rem;  }
    .step_info .desc_desc .t {font-size: 2.5rem; letter-spacing: -1px; }
    .step_info .desc_desc .d {font-size: 1.6rem; letter-spacing: -0.5px;}
}

@media (max-width: 768px) {
    .step_info .item,
    .step_info .item.side,
    .step_info .item.right,
    .step_info .item.right2 {float: none; width: 100%; margin: 0 0 25px 0;}
    .step_info .item.right2 {margin-bottom: 60px;}

    .step_info {padding: 25px 0 0;}

    .step_info .boo.boo1 {display: none;}

    .step_info .boo.boo2 img {width: 120px; height: auto;}



    .step_info .numb {font-size: 1.1rem; width: 22px; height: 22px; line-height: 20px;  }
    .step_info .desc_desc .t {font-size: 1.65rem; letter-spacing: -1px; margin: 10px 0 5px; }
    .step_info .desc_desc .d {font-size: 1.25rem; letter-spacing: -0.5px;}
}

@media (max-width: 468px) {
    .step_info .item .img .pc {display: none;}
    .step_info .item .img .mo {display: block;}
    .step_info .boo.boo2 {width: 90px; margin-top: -10px;}
}

@media (max-width: 320px) {
    .step_info .desc_desc .t {font-size: 1.5rem; margin: 5px 0 4px; }
    .step_info .desc_desc .d {font-size: 1.1rem; }
}



.contact {padding: 40px 15px; max-width: 870px; margin: 0 auto;}
.contact img {max-width: 100%;}
.contact h3 {text-align: center; font-size: 3.0rem; letter-spacing: -2px; color: #000000; font-weight: normal; margin: 0 0 70px 0;}
.contact_en{display:block;    padding-top: 10px; font-size: 22px;    font-weight: 300;  color: #222222;}


.mobile_device{display:none;}
.from_sub {
     --from_sub_height: 9.5rem;
     --from_sub_txt: 2.4rem;
}

.from_sub { max-width: 830px; margin: 50px auto;}
.from_sub * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.from_sub ul {    border-top: 1px solid #cbcbcb; border-left: 1px solid #cbcbcb; }
.from_sub ul li {  border-right: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; }
.from_sub ul li .item {height: var(--from_sub_height); background: #f7f7f7;  position: relative; font-size: 0;    display: flex ;  align-items: center;}

.from_sub ul li .item .t {display: inline-block; line-height: 33px; width: 290px; font-size: var(--from_sub_txt); font-weight: normal; padding-left: 20px; letter-spacing: -0.2rem;}
.from_sub ul li .item .item_en{    display: block;
    font-size: 16px;
    letter-spacing: -1px;
    font-weight: 300;
    color: #222222;}
.from_sub input[type=text],
.from_sub input[type=tel] { height: var(--from_sub_height); width: calc(100% - 290px); outline: 0; border: 0; background: #ffffff; border-left: 1px solid #cbcbcb; vertical-align: top;
    padding: 0 20px; font-size: var(--from_sub_txt);
}
.from_sub .radio_box {height: var(--from_sub_height); width: calc(100% - 290px);  border-left: 1px solid #cbcbcb; background: #fff; 
    text-align: center;    display: inline-block;
}
.from_sub .radio_box.view_details{ display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;}
.from_sub .radio_box .view_en{font-size:16px; font-weight:300; color:#222222;margin-left: 22px;}
.from_sub .agree {font-size: var(--from_sub_txt); line-height: 35px; }
.from_sub .agree label { font-size: 0; }
.from_sub .agree input[type="checkbox"] { border-radius: 0; border: 2px solid #000;
  -moz-transform: scale(1.5);   -webkit-transform: scale(1.5);   -o-transform: scale(1.5);
}

.from_sub .agree a { display: inline-block; margin-left: 10px; color: #000; font-size: 0.9em;}

.from_sub .pop_agree {position: fixed; width: 100%; height: 100%; left: 0; top: 0;  z-index: 1000; display: none; }
.from_sub .pop_agree .inner {padding: 20px 20px; background: #fff; border: 1px solid #000; font-size: 1.2rem; line-height: 1.6;
    position: absolute; max-width: 500px;width:100%; left: 50%; top: 10%; margin-left: -250px; z-index: 1001; }

.from_sub .pop_agree .x {padding: 0 0 10px 0; text-align: right; cursor: pointer;}

.from_sub .pop_agree .shadow {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.7); left: 0; top: 0; }

.from_sub .submit_wrap {text-align: right; padding: 20px 0 0 0;}
.from_sub .submit_wrap button {line-height:30px;padding-bottom: 15px; height: var(--from_sub_height); font-size: var(--from_sub_txt); letter-spacing: -0.2rem; background: #2e54b7 url('../img/arrow_1.png') no-repeat 50% 77%;  
    background-size: auto 11px; color: #ffffff; border: 0; outline: 0;
    text-align: center; width: 100%; }
.from_sub .submit_wrap button span{  letter-spacing: -1px;    margin-left: 10px;}

.from_sub .switch-radio {	display: flex;	margin-bottom:0; align-items: center;   height: 100%;}
.from_sub .switch-radio input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px; 	width: 1px; 	border: 0; 	overflow: hidden; margin: 0;
}

.from_sub .switch-radio label { cursor: pointer;
	background-color: #ffffff;
	color: #000000;
	font-size: var(--from_sub_txt);
	line-height:33px;
    flex: 0 0 50%;
	text-align: center;
	padding: 0 10px;
    border-left: 1px solid #cbcbcb;
	margin-left: -1px;
	transition: all 0.1s ease-in-out;
}
.from_sub .switch-radio input:checked + label {	background-color: #000000; color: #fff;	box-shadow: none;}
.from_sub .switch-radio label span{    display: block; font-size:16px; color:#222222; font-weight:300;}


.contact .other_info {text-align: center;}
.contact .other_info .more {padding: 40px 0;}
.contact .other_info .more a {display: inline-block; line-height: 1.1; border-bottom: 1px solid #000; color: #000; font-size: 2.4rem; letter-spacing: -1.5px;}

.contact .cs_info {padding: 40px 0 0;}
.contact .cs_info .item {display: inline-block; line-height: 59px; height: 59px; margin: 0 0; padding: 0 50px;
    font-size: 2.4rem; font-weight: 300; letter-spacing: -1px; color: #000;
}
.contact .cs_info .item:first-child {border-right: 1px solid rgba(0,0,0,.2);}
.contact .cs_info .item .ico {}
.contact .cs_info .item .ico img {height: 100%; margin-right: 5px;}



@media (max-width: 1024px) {
    .from_sub {
        margin: 0 auto;
        padding: 0;
         --from_sub_height: 7.0rem;
         --from_sub_txt: 1.6rem;
    }

    .contact .other_info .more a {font-size: 2.0rem;}
    .contact .cs_info .item {font-size: 1.8rem;}
}

@media (max-width: 768px) {
    .contact h3 {text-align: left; font-size: 1.65rem; letter-spacing: -1px; margin: 0 0 30px 0;}
    .mobile_device{display:block;}
    .from_sub ul li {flex: 0 0 100%}
    .from_sub ul li .item{height:55px;}
    .from_sub ul li .item .t {width: 163px;    line-height: 16px; padding-left: 15px; letter-spacing: -0.1rem;}
    .from_sub input[type=text],
    .from_sub input[type=tel] {width: calc(100% - 163px);}
    .from_sub .radio_box { width: calc(100% - 163px); height:100%;}
    .from_sub ul li .item .item_en{font-size:12px;}
    .from_sub .submit_wrap button { background: #2e54b7 url('../img/arrow_1.png') no-repeat 50% 76%;
        background-size: auto 5px;        height: 60px;
        line-height: 23px;
    }
    .from_sub .switch-radio{height:100%;}
    .from_sub .switch-radio label{line-height: 18px;}
    .contact .cs_info {padding: 0 ;}
    .contact .other_info .more a {font-size: 1.4rem;}
    .contact .cs_info .item {font-size: 1.3rem; height: 32px; line-height: 32px; padding: 0 0 0 30px;}
    .contact .cs_info .item:first-child {padding-right: 30px; padding-left: 0;}
    .contact_en{font-size:13px;}
    .from_sub .switch-radio label span, .from_sub .radio_box .view_en{font-size:12px;}
    .from_sub .radio_box .view_en{margin-left:40px;}
    .from_sub .submit_wrap button span{font-size:12px; letter-spacing: -1px;}
    .from_sub input[type=text], .from_sub input[type=tel]{height:100%;}
    .from_sub .agree{line-height: 20px;}
    .from_sub .agree a{font-size:13px;}
}

@media (max-width: 468px) {
    .from_sub {
         --from_sub_height: 4.4rem;
         --from_sub_txt: 1.3rem;
    }
    /* .from_sub ul li .item .t {width: 130px;} */

    .from_sub .agree {padding-left: 15px;}
    .from_sub .agree  input[type="checkbox"] {
      -moz-transform: scale(1.0);   -webkit-transform: scale(1.0);   -o-transform: scale(1.0);
        -webkit-appearance: none; -webkit-border-radius: 0; border: 2px solid #000;
        appearance: checkbox;
    }
    .from_sub .agree input[type="checkbox"]:checked { -webkit-appearance: checkbox; border: 2px solid #000;}
    
    .from_sub .pop_agree .inner {width: 90%; left: 5%; margin-left: 0;        max-height: 500px;
        overflow-y: auto;}


    .from_sub .submit_wrap {width: 250px; margin: 0 auto; }
   

}




.txt_form {padding: 40px 20px; max-width: 1200px;margin: 0 auto;}
.txt_form textarea {width: 100%; height: 600px;}

@media (max-width: 468px) {
    .txt_form textarea {height: 330px;}
}