@charset "utf-8";

/* Layout Properties */
header .header_menu {background:rgba(0, 0, 0, 0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)}
#subVisual {background:url(../../img/sub_company_bg.jpg) no-repeat center bottom/cover}

/* peopleconn!? */
#container .kevinbacon {letter-spacing:-2px;background:url(../../img/sub_introduce_bg01.jpg) no-repeat bottom;padding:30px 0 920px;}
#container .containSub .kevinbacon h4 {font:5em 'NanumSquareL','Malgun Gothic','맑은 고딕';color:#000;width:20%;line-height:1.1;float:left}
#container .kevinbacon p {font-size:1.71em;float:left;line-height:1.6;padding-left:15%;letter-spacing:-2px;color:#444}
#container .kevinbacon .line::after {width:220px}
/* #container .kevinbacon em::selection {background-color:#7433b6;color:#fff}*/

#container .rule {background-color:#211728}
#container .rule dl {background:url(../../img/sub_introduce_bg02.png) no-repeat right;padding:150px 0}
#container .rule dl > * {width:30%}
#container .rule dl dt {color:#fff;font:3.57em 'NanumSquareL','Malgun Gothic','맑은 고딕'}
#container .rule dl dd {padding:50px 0 15px}
#container .rule dl dd q {font-size:1.78em;background-color:#211728!important;color:#fff;padding-bottom:15px;display:block}
#container .rule dl dd q em {color:#7e3eff}
#container .rule dl dd p {font-size:1.18em;line-height:1.5}
#container .rule strong,
#container .rule dl dd mark em {font-family:'NanumSquareB','Malgun Gothic','맑은 고딕'}

/* card Introduce */
#container .containSub hr {height:100px;display:block}
#container .card_intro {position:relative}
#container .card_intro .title {background:url(../../img/sub_nfccard_thum.jpg) no-repeat;width:512px;height:340px;float:left;padding:118px 0 0 50px}
#container .card_intro .title > * {width:40%}
#container .card_intro .title h4 {font:bold 2.57em 'NanumSquareR','Malgun Gothic','맑은 고딕';color:#111}
#container .card_intro .title p {font-size:1.19em;color:#333;padding-top:18px}
#container .card_intro dl {float:right;width:25%;padding:20px 0;position:relative}
#container .card_intro .list dl > * {text-align:center}
#container .card_intro .list dt {color:#111;height:60px;font:bold 1.57em 'NanumSquareR','Malgun Gothic','맑은 고딕';color:#111;width:95%}
#container .card_intro .list dd {height:240px;font-size:1.18em;padding:0 10px}
#container .card_intro .list dd::after {content:"";display:block;height:2px;width:40px;background-color:#333;position:absolute;bottom:44%;left:50%;margin-left:-20px}
#container .card_intro .list dl.type01 {background:url(../../img/sub_nfccard_ico01.png) no-repeat center 85%}
#container .card_intro .list dl.type02 {background:url(../../img/sub_nfccard_ico02.png) no-repeat center 85%}
#container .card_intro .list dl.type03 {background:url(../../img/sub_nfccard_ico03.png) no-repeat center 85%}
#container .card_intro .list dl.type04 {background:url(../../img/sub_nfccard_ico04.png) no-repeat center 85%}
#container .card_intro .list dl.type05 {background:url(../../img/sub_nfccard_ico05.png) no-repeat center 85%}
#container .card_intro .list dl.type06 {background:url(../../img/sub_nfccard_ico06.png) no-repeat center 85%}

#container .card_use {position:relative;background:url(../../img/sub_nfccard_bg02.png) no-repeat center 88px}
#container .card_use h4 {font:3.571em 'NanumSquareL','Malgun Gothic','맑은 고딕';color:#111;width:49%;background:url(../../img/sub_nfccard_bg01.png) no-repeat right top;padding:210px 0 40px 10px;position:absolute;top:0;left:0;z-index:-1}
#container .card_use ul {width:50%}
#container .card_use ul:nth-of-type(1) {float:left;margin-top:362px}
#container .card_use ul:nth-of-type(2) {float:right;margin-top:100px}
#container .card_use ul li {min-width:450px;max-width:50%;font-size:1.429em;color:#333;background-color:#ececec;border:1px solid #ececec;border-radius:10px;-webkit-border-radius:10px;-mos-border-radius:10px;margin:0 1% 30px 1%;padding:4% 15% 4% 4%;position: relative}
#container .card_use ul li::after{top:50%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(236, 236, 236, 0);border-width:15px}
#container .card_use ul:nth-of-type(2) li {margin:0 1% 30px 10%}
#container .card_use ul:nth-of-type(1) li::after {left:100%;border-left-color:#ececec}
#container .card_use ul:nth-of-type(2) li::after {right:100%;border-right-color:#ececec;margin-top:-20px}

#container .card_view {text-align:center;padding:35px 0;background:#3e1f7f;
background:-moz-linear-gradient(top, #3e1f7f 0%, #3e1f7f 70%, #211728 70%, #211728 100%);
background:-webkit-linear-gradient(top, #3e1f7f 0%,#3e1f7f 70%,#211728 70%,#211728 100%);
background:linear-gradient(to bottom, #3e1f7f 0%,#3e1f7f 70%,#211728 70%,#211728 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e1f7f',endColorstr='#211728',GradientType=0 )}
#container .card_view h4 {color:#fff;padding:100px 0 35px;letter-spacing:-2px}
#container .card_view .video_view {width:47%;margin:0 auto;max-width:879px;position:relative}
#container .card_view .video_view video {width:100%;height:100%}
#container .card_view .btn_play {position:absolute;top:50%;left:50%;margin:-80px 0 0 -70px}
#container .card_view .btn_play button {background:url(../../img/btn_video_play.png) no-repeat center top / cover;width:120px;height:120px;text-indent:-10000px;line-height:0;transition:all .7s linear;-webkit-transition:all .7s linear;-moz-transition:all .7s linear;-o-transition:all .4s linear;-ms-transition:all .7s linear}
#container .card_view .btn_play button:hover {transform:scale(1.5);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2)}

/* app Introduce */
#container .appExplan {position:relative}
#container .appExplan > div {position:relative;height:900px}
#container .appExplan > div > div:not(.phone) {position:absolute;width:1024px;left:50%;margin-left:-512px}
#container .appExplan > div .phone {height:810px;width:720px;margin:0 auto;display:block;-webkit-animation:updown 4s infinite ease;animation:updown 4s infinite ease}
#container .appExplan > div:not(.app_introduce01) .title {top:200px}
#container .appExplan > div .title h4 {color:#a40081;font:bold 2.571em 'NanumSquareR','Malgun Gothic','맑은 고딕'}
#container .appExplan > div .title p {font-size:1.571em;line-height:1.4;color:#333;padding-top:20px;width:29%}
#container .appExplan > div > .explan {position:absolute;bottom:220px!important}
#container .appExplan > div.app_introduce05 > .explan {bottom:220px!important;margin-left:240px}
#container .appExplan > div .explan dt {color:#3e1f7f;font:bold 1.571em 'NanumSquareR','Malgun Gothic','맑은 고딕';padding:15px 0}
#container .appExplan > div .explan dd {font-size:1.18em;color:#888;position:relative;padding:3px 0}
#container .appExplan > div:not(.app_introduce01) .explan dd {padding-left:10px}
#container .appExplan > div:not(.app_introduce01) .explan dd::after {content:"";width:3px;height:3px;background-color:#bf4ca7;position:absolute;top:12px;left:0}

#container .appExplan > div .half.title {top:50%;margin-top:-67px}
#container .appExplan > div.puple  {background-color:#330d7a}
#container .appExplan > div.puple .title p {color:#7862a6}
#container .appExplan > div.gray {background-color:#f1f1f1}

#container .app_introduce01::after {content:"";z-index:-10;position:absolute;top:0;-webkit-animation:updownPat 8s infinite;
animation:updownPat 8s infinite;background:url(../../img/sub_appintro_01_pat.png) no-repeat center top;width:1266px;height:912px;left:50%;margin-left:-633px}
#container .puple::after {content:"";z-index:0;position:absolute;bottom:100px; -webkit-animation:fadePat 7s infinite;
animation:fadePat 7s infinite;background:url(../../img/sub_appintro_02_pat.png) no-repeat center bottom;width:684px;height:271px;left:50%;margin-left:-342px}
#container .app_introduce04::after {content:"";z-index:-10;position:absolute;top:0;-webkit-animation:updownPat 8s infinite;
animation:updownPat 8s infinite;background:url(../../img/sub_appintro_04_pat.png) no-repeat center top;width:1343px;height:944px;left:50%;margin-left:-671px}
#container .app_introduce01 .phone {background:url(../../img/sub_appintro_01_phone.png)no-repeat 190px 50px}
#container .app_introduce02 .phone {background:url(../../img/sub_appintro_02_phone.png)no-repeat 190px 100px}
#container .app_introduce03 .phone {background:url(../../img/sub_appintro_03_phone.png)no-repeat 190px 100px}
#container .app_introduce04 .phone {background:url(../../img/sub_appintro_04_phone.png)no-repeat 190px 100px}
#container .app_introduce05 .phone {background:url(../../img/sub_appintro_05_phone.png)no-repeat 190px 100px}
#container .app_introduce06 .phone {background:url(../../img/sub_appintro_06_phone.png)no-repeat 190px 100px}

#container .appExplan > div .tooltip a {outline:1px solid transparent}
#container .appExplan > div .tooltip a {position:absolute;z-index:200;left:50%;display:block}

#container .app_introduce01 .tooltip a:nth-of-type(1) {top:112px;margin-left:30px}
#container .app_introduce01 .tooltip a:nth-of-type(2) {top:164px;margin-left:-430px}
#container .app_introduce01 .tooltip a:nth-of-type(3) {top:164px;margin-left:-30px}
#container .app_introduce01 .tooltip a:nth-of-type(4) {top:265px;margin-left:-360px}
#container .app_introduce01 .tooltip a:nth-of-type(5) {top:263px;margin-left:0px}

#container .app_introduce01 .tooltip a.rightLeft:nth-of-type(1) {animation:rightleft 4s ease .2s;-webkit-animation:rightleft 4s ease .2s}
#container .app_introduce01 .tooltip a.rightLeft:nth-of-type(3) {animation:rightleft 4s cubic-bezier(.47,0,.74,.71) .2s;-webkit-animation:rightleft 4s cubic-bezier(.47,0,.74,.71) .2s}
#container .app_introduce01 .tooltip a.rightLeft:nth-of-type(5) {animation:rightleft 4s cubic-bezier(.55,.09,.68,.53) .4s;-webkit-animation:rightleft 4s cubic-bezier(.55,.09,.68,.53) .4s}
#container .app_introduce01 .tooltip a.leftRight:nth-of-type(2) {animation:leftright 4s cubic-bezier(.23,1,.32,1) .1s;-webkit-animation:leftright 4s cubic-bezier(.23,1,.32,1) .1s}
#container .app_introduce01 .tooltip a.leftRight:nth-of-type(4) {animation:leftright 4s ease .3s;-webkit-animation:leftright 4s ease .3s}

#container .app_introduce01 .explan dl:last-child {position:absolute;right:0;top:0}

#container .app_introduce02 .tooltip a:nth-of-type(1) {top:250px;margin-left:-355px}
#container .app_introduce02 .tooltip a:nth-of-type(2) {top:250px;margin-left:100px}
#container .app_introduce02 .tooltip a:nth-of-type(3) {top:490px;margin-left:70px}

#container .app_introduce02 .tooltip a.leftRight:nth-of-type(1) {animation:leftright 4s ease 1.1s 3;-webkit-animation:leftright 4s ease 1.1s 3}
#container .app_introduce02 .tooltip a.rightLeft:nth-of-type(2) {animation:rightleft 4s cubic-bezier(.23,1,.32,1) 1s 3;-webkit-animation:rightleft 4s cubic-bezier(.23,1,.32,1) 1s 3}
#container .app_introduce02 .tooltip a.rightLeft:nth-of-type(3) {animation:rightleft 4s ease-out 1.1s 3;-webkit-animation:rightleft 4s ease-out 1.1s 3}

#container .app_introduce03 .tooltip a:nth-of-type(1) {bottom:172px;margin-left:110px}
#container .app_introduce03 .tooltip a.rightLeft:nth-of-type(1) {animation:rightleft 4s cubic-bezier(.23,1,.32,1) 2s 5;-webkit-animation:rightleft 4s cubic-bezier(.23,1,.32,1) 2s 5}

#container .app_introduce04 .tooltip a:nth-of-type(1) {top:220px;margin-left:90px}
#container .app_introduce04 .tooltip a:nth-of-type(2) {top:320px;margin-left:-250px}
#container .app_introduce04 .tooltip a:nth-of-type(3) {top:385px;margin-left:100px}

#container .app_introduce04 .tooltip a.rightLeft:nth-of-type(1) {animation:rightleft 4s ease 1.5s 7;-webkit-animation:rightleft 4s ease 1.5s 7}
#container .app_introduce04 .tooltip a.leftRight:nth-of-type(2) {animation:leftright 4s ease 1.4s 7;-webkit-animation:leftright 4s ease 1.4s 7}
#container .app_introduce04 .tooltip a.rightLeft:nth-of-type(3) {animation:rightleft 4s ease 1.6s 7;-webkit-animation:rightleft 4s ease 1.6s 7}

#container .app_introduce05 .tooltip a:nth-of-type(1) {top:225px;margin-left:-250px}
#container .app_introduce05 .tooltip a:nth-of-type(2) {top:225px;margin-left:90px}
#container .app_introduce05 .tooltip a:nth-of-type(3) {top:375px;margin-left:105px}

#container .app_introduce05 .tooltip a.leftRight:nth-of-type(1) {animation:leftright 4s ease 1.8s 7;-webkit-animation:leftright 4s ease 1.8s 7}
#container .app_introduce05 .tooltip a.rightLeft:nth-of-type(2) {animation:rightleft 4s cubic-bezier(.23,1,.32,1) 1.9s 7;-webkit-animation:rightleft 4s cubic-bezier(.23,1,.32,1) 1.9s 7}
#container .app_introduce05 .tooltip a.rightLeft:nth-of-type(3) {animation:rightleft 4s ease-out 1.9s 7;-webkit-animation:rightleft 4s ease-out 1.9s 7}

#container .app_introduce06 .tooltip a:nth-of-type(1) {top:170px;margin-left:110px}
#container .app_introduce06 .tooltip a:nth-of-type(2) {top:245px;margin-left:90px}
#container .app_introduce06 .tooltip a:nth-of-type(3) {top:355px;margin-left:110px}
#container .app_introduce06 .title a {display:inline-block;padding:2% 3%;text-align:center;background-color:#fff;color:#3e1f7f;font:bold 1.571em 'NanumSquareR','Malgun Gothic','맑은 고딕';margin-top:20px}

#container .app_introduce06 .tooltip a.rightLeft:nth-of-type(1) {animation:rightleft 4s ease 2.1s 8;-webkit-animation:rightleft 4s ease 2.1s 8}
#container .app_introduce06 .tooltip a.rightLeft:nth-of-type(2) {animation:rightleft 4s cubic-bezier(.23,1,.32,1) 2s 8;-webkit-animation:rightleft 4s cubic-bezier(.23,1,.32,1) 2s 8}
#container .app_introduce06 .tooltip a.rightLeft:nth-of-type(3) {animation:rightleft 4s ease-out 2.2s 8;-webkit-animation:rightleft 4s ease-out 2.2s 8}

/* FAQ */
#container .faq_hgroup {background:url(../../img/sub_faq_bg01.jpg) no-repeat right top;height:400px;margin-top:-100px}
#container .faq_hgroup h4 {color:#333;width:30%;padding:120px 0 45px}
#container .faq_hgroup h4 strong {color:#111}
#container .faq_hgroup h5 {font-size:1.786em;color:#444}
#container .faq_hgroup .line::after {width:65px}
#container .faq_article {width:100%;max-width:1024px;padding:50px 0;height:820px;overflow:hidden}
#container .faq_list {position:relative;margin-bottom:10px;border:1px solid #555;width:95%}
#container .faq_list .heading {display:block;text-transform:uppercase;text-decoration:none;color:#333;font-size:1.357em;position:relative;padding:2% 3%;transition:.3s ease-in-out}
#container .faq_list .faq-input {display:none}
#container .faq_list .faq-input:checked + .heading {color:#111;border-bottom:1px solid #555}
#container .faq-input:checked + .faq_list .heading {color:#c58cbf}
#container .faq_list .faq-input:checked ~ .content {position:static;visibility:visible;line-height:1.5;opacity:1;-webkit-transform:translateX(0);transform:translateX(0);transition: .3s ease-in-out}
#container .faq_list .content {position:absolute;padding:3%;visibility:hidden;opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px);font-size:1.18em}
#container .faq_list .faq-input + .heading .faq_arw {width:13px;height:13px;transition:-webkit-transform .8s;transition:transform .8s;transition:transform .8s,-webkit-transform .8s;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);border-top:2px solid #000;border-right:2px solid #000;float:right;position:relative;top:6px;right:2px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
#container .faq_list .faq-input:checked + .heading .faq_arw {transition:-webkit-transform .8s;transition:transform .8s;transition:transform .8s,-webkit-transform .8s;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transform:rotate(135deg);transform:rotate(135deg);border-top:2px solid #7433b6;border-right:2px solid #7433b6}
#container .faq_list .faq-input + .heading .faq_ico {background:url(../../img/ico_q.png) no-repeat center -2px;background-color:#222; float:left;width:25px;height:25px;border-radius:30px;margin-right:10px;margin-top:-1px}
#container .faq_list .faq-input:checked + .heading .faq_ico {background-color:#7433b6;}

/* keyframe Ani */
@keyframes updown {
	0%{-webkit-transform:translateY(0);transform:translateY(0)}
	50%{-webkit-transform:translateY(15px);transform:translateY(15px)}
	to{-webkit-transform:translateY(0);transform:translateY(0)}}
@-webkit-keyframes updown {
	0%{-webkit-transform:translateY(0);transform:translateY(0)}
	50%{-webkit-transform:translateY(15px);transform:translateY(15px)}
	to{-webkit-transform:translateY(0);transform:translateY(0)}}
@-moz-keyframes updown {
	0%{-webkit-transform:translateY(0);transform:translateY(0)}
	50%{-webkit-transform:translateY(15px);transform:translateY(15px)}
	to{-webkit-transform:translateY(0);transform:translateY(0)}}
@-o-keyframes updown {
	0%{-webkit-transform:translateY(0);transform:translateY(0)}
	50%{-webkit-transform:translateY(15px);transform:translateY(15px)}
	to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(120px);transform:translateY(120px);opacity:1}
	to{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}}
@-webkit-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(120px);transform:translateY(120px);opacity:1}
	to{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}}
@-moz-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(120px);transform:translateY(120px);opacity:1}
	to{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}}
@-o-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(120px);transform:translateY(120px);opacity:1}
	to{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}}
@keyframes fadePat{
	0%{-webkit-transform:translate(-30px,-0);transform:translate(-30px,-0);opacity:.5}
	50%{-webkit-transform:translate(50px,-50px);transform:translate(50px,-50px);opacity:.3}
	to{-webkit-transform:translate(0,-10px);transform:translate(0,-10px);opacity:0}}
@-webkit-keyframes fadePat{
	0%{-webkit-transform:translate(-30px,-0);transform:translate(-30px,-0);opacity:.5}
	50%{-webkit-transform:translate(50px,-50px);transform:translate(50px,-50px);opacity:.3}
	to{-webkit-transform:translate(0,-10px);transform:translate(0,-10px);opacity:0}}
@-moz-keyframes fadePat {
	0%{-webkit-transform:translate(-30px,-0);transform:translate(-30px,-0);opacity:.5}
	50%{-webkit-transform:translate(50px,-50px);transform:translate(50px,-50px);opacity:.3}
	to{-webkit-transform:translate(0,-10px);transform:translate(0,-10px);opacity:0}}
@-o-keyframes fadePat {
	0%{-webkit-transform:translate(-30px,-0);transform:translate(-30px,-0);opacity:.5}
	50%{-webkit-transform:translate(50px,-50px);transform:translate(50px,-50px);opacity:.3}
	to{-webkit-transform:translate(0,-10px);transform:translate(0,-10px);opacity:0}}
@keyframes rightleft {
	from {-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	0%{-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	50%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes rightleft {
	from {-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	0%{-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	50%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-moz-keyframes rightleft {
	from {-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	0%{-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	50%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-o-keyframes rightleft {
	from {-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	0%{-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
	50%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@keyframes leftright {
	0%{-webkit-transform:translateX(-150px);transform:translateX(-150px);opacity:0}
	50%{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes leftright {
	0%{-webkit-transform:translateX(-150px);transform:translateX(-150px);opacity:0}
	50%{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-moz-keyframes leftright {
	0%{-webkit-transform:translateX(-150px);transform:translateX(-150px);opacity:0}
	50%{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-o-keyframes leftright {
	0%{-webkit-transform:translateX(-150px);transform:translateX(-150px);opacity:0}
	50%{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:1}
	to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes skew {
	0%{-webkit-transform:skewX(37deg);transform:skewX(37deg)}
	50%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}
	to{-webkit-transform:skewX(37deg);transform:skewX(37deg)}}

/* bubble motion
#container .tooltip a[data-tooltip]::after {border-top:8px solid #222;border-top:8px solid hsla(0,0%,0%,.85);border-left:8px solid transparent;border-right:8px solid transparent;content:"";display:none;height:0;left:25%;position:absolute;width:0;}
#container .tooltip a[data-tooltip]::before {background:#222;background:hsla(0,0%,0%,.85);color:#f6f6f6;content:attr(data-tooltip);display:none;left:0;position:absolute;text-shadow:0 1px 1px hsla(0,0%,0%,1);white-space:nowrap;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px}
#container .tooltip a[data-tooltip]:hover::after{display:block;top:-9px;}
#container .tooltip a[data-tooltip]:hover::before {display:block;top:-41px}
#container .tooltip a[data-tooltip]:active::after {top:-10px;}
#container .tooltip a[data-tooltip]:active::before {top:-42px;}

.tooltip {}
.tooltip a {overflow:hidden}
.tooltip a::before {position: absolute;top: 0;left: 0;z-index:-1;width:100%;height:100%;content:'';-webkit-transition:-webkit-transform .2s;transition: transform .2s;-webkit-transform:translateY(100%);transform:translateY(100%);background:rgba(149,165,166,0.4);opacity:0}
.tooltip a:hover::before,
.tooltip a:focus::before {-webkit-transform:translateY(0);transform: translateY(0);opacity:1} */

/* mobile mediaquery 320px*640px */

@media only screen and
(min-width:10px) and (max-width:640px)
{	
	#lnbWrap .depth1 {display:none;}
	#gnbWrap ul li:not(:last-child) {display:none;}
	
	/* Layout Properties */
	#subVisual {background-position:63% top}

	/* peopleconn!? */
	#container .containSub .kevinbacon h4 {font:2.8em 'NanumSquareL','Malgun Gothic','맑은 고딕';color:#000;width:55%;float:none;letter-spacing:-2px}
	#container .kevinbacon {background-size:120%;background-position:28% 117%;padding:2% 4% 100% 13%}
	#container .kevinbacon p {font-size:1.13em;float:none;line-height:1.5;padding:5% 0 1%}
	#container .kevinbacon .line::after {width:150px}

	#container .rule {padding-left:13%}
	#container .rule dl {padding:20% 0;background-size:70%;background-position:150% 90%}
	#container .rule dl > * {width:70%}
	#container .rule dl dt {font-size:2.5em}
	#container .rule dl dd {padding:10% 0 3%}
	#container .rule dl dd q {font-size:1.3em;background-color:transparent!important}
	#container .rule dl dd p {font-size:1.05em}

	/* card Introduce */
	#container .card_intro .title {background:url(../../img/sub_nfccard_thum.jpg) no-repeat top left / cover;width:100%;float:none;padding:18% 0 10% 11%;height:auto}
	#container .card_intro .title > * {width:50%}
	#container .card_intro .title h4 {font:bold 1.9em 'NanumSquareR','Malgun Gothic','맑은 고딕'}
	#container .card_intro .title p {font-size:1em}
	#container .card_intro .list dl {width:33%;padding:28% 0.5% 0}
	#container .card_intro .list dt {font-size:1.1em;height:45px;letter-spacing:-1px}
	#container .card_intro .list dd {font-size:0.95em;height:100px;line-height:1.45}
	#container .card_intro .list dd::after {display:none}
	#container .card_intro .list dl.type06 {background:url(../../img/sub_nfccard_ico06.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type05 {background:url(../../img/sub_nfccard_ico05.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type04 {background:url(../../img/sub_nfccard_ico04.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type03 {background:url(../../img/sub_nfccard_ico03.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type02 {background:url(../../img/sub_nfccard_ico02.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type01 {background:url(../../img/sub_nfccard_ico01.png) no-repeat center 13% / 50%}

	#container .card_use {background:url(../../img/sub_nfccard_bg02.png) no-repeat center 88px / 3%}
	#container .card_use h4 {font:2.188em 'NanumSquareL','Malgun Gothic','맑은 고딕';width:45%;top:1%;padding:100px 0 140px 20px;background:url(../../img/sub_nfccard_bg01.png) no-repeat right top / 100%}
	#container .card_use ul li {font-size:0.9em;margin:0 1% 5px 10%;min-width:75%}
	#container .card_use ul:nth-of-type(1) {float:left;margin-top:240px}
	#container .card_use ul:nth-of-type(2) {margin-top:80px}
	#container .card_use ul:nth-of-type(2) li {margin:0 1% 5px 10%}
	#container .card_use ul li::after {border-width:10px}

	#container .card_view {padding:0 0 35px}
	#container .card_view h4 {padding:40px 7%}
	#container .card_view figure img {width:85%}
	#container .card_view .video_view {width:85%!important}

	/* FAQ */
	#container .faq_hgroup {padding:5%;margin-top:-130px;background:url(../../img/sub_faq_bg01.jpg) no-repeat right bottom / contain}
	#container .faq_hgroup h5 {font-size:1.3em;color:#444}

	/* app Introduce */
	#container .appExplan img {width:100%;max-width:100%}
	#container .appExplan > div {width:100%;height:750px;}
	#container .appExplan > div > div:not(.phone) {width:100%;margin-left:-40%;top:1%}
	#container .appExplan > div > .explan {bottom:120px!important;z-index:10000;padding-top:150px;display:flex}
	#container .appExplan > div .phone {width:100%;height:400px;position:absolute;bottom:0}
	#container .appExplan > div .title h4 {font:bold 2.2em 'NanumSquareR','Malgun Gothic','맑은 고딕';letter-spacing:-3px}
	#container .appExplan > div .title p {font-size:1.13em;width:60%}
	#container .appExplan > div .explan dt {font-size:1.15em}
	#container .appExplan > div .explan dd {font-size:1em}
	#container .appExplan > div:not(.app_introduce01) .title {top:10%}
 	#container .tooltip a {display:block}

	#container .app_introduce01 .explan dl:last-child {position:relative;width:35%;padding-left:20px}
	#container .app_introduce01 .tooltip a:nth-of-type(1) {margin-left:10px;top:65px;width:45%}
	#container .app_introduce01 .tooltip a:nth-of-type(2) {margin-left:0;top:100px;left:5%;width:60%}
	#container .app_introduce01 .tooltip a:nth-of-type(3) {margin-left:-130px;top:135px;width:70%}
	#container .app_introduce01 .tooltip a:nth-of-type(4) {margin-left:0;top:170px;left:10px;width:50%}
	#container .app_introduce01 .tooltip a:nth-of-type(5) {margin-left:0;top:240px}
	#container .app_introduce02 .tooltip a:nth-of-type(1) {top:170px;margin-left:-175px;width:40%}
	#container .app_introduce02 .tooltip a:nth-of-type(2) {margin-left:30px;width:40%}
	#container .app_introduce02 .tooltip a:nth-of-type(3) {margin-left:50px;top:290px}
	#container .app_introduce03 .tooltip a:nth-of-type(1) {margin-left:50px;bottom:32px}
	#container .app_introduce04 .tooltip a:nth-of-type(1) {width:35%;top:100px;margin-left:50px}
	#container .app_introduce04 .tooltip a:nth-of-type(2) {top:170px;margin-left:-180px;width:30%}
	#container .app_introduce04 .tooltip a:nth-of-type(3) {top:210px;margin-left:50px;width:35%}
	#container .app_introduce05 .tooltip a:nth-of-type(1) {width:30%;margin-left:-170px;top:105px;}
	#container .app_introduce05 .tooltip a:nth-of-type(2) {margin-left:70px;top:105px}
	#container .app_introduce05 .tooltip a:nth-of-type(3) {top:215px;margin-left:65px;width:30%}
	#container .app_introduce06 .tooltip a:nth-of-type(1) {width:35%;top:45px;margin-left:50px}
	#container .app_introduce06 .tooltip a:nth-of-type(2) {top:115px}
	#container .app_introduce06 .tooltip a:nth-of-type(3) {margin-left:80px;top:305px}
	#container .app_introduce06 .tooltip a.rightLeft:nth-of-type(3) {width:36%}
	#container .app_introduce01::after {width:100%}
	#container .app_introduce04::after {width:auto;height:500px}

	#container .app_introduce01 .phone {background:url(../../img/sub_appintro_01_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce02 .phone {background:url(../../img/sub_appintro_02_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce03 .phone {background:url(../../img/sub_appintro_03_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce04 .phone {background:url(../../img/sub_appintro_04_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce05 .phone {background:url(../../img/sub_appintro_05_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce06 .phone {background:url(../../img/sub_appintro_06_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce06 .title a {font:bold 1.2em 'NanumSquareR','Malgun Gothic','맑은 고딕';letter-spacing:-2px}

	#container .app_introduce04 .explan {top:7%!important;width:90%}

	#container .appExplan > div > .explan {padding-top:135px}
	#container .appExplan > div .explan dt {padding:5px 0}
	#container .appExplan > div .title p {width:80%}
	#container .appExplan > div .half.title {top:15%;margin-top:0}

	/* FAQ */
	#container .faq_hgroup {background:url(../../img/sub_faq_bg01.jpg) no-repeat right bottom / contain;height:450px}
	#container .faq_hgroup h4 {width:40%}
	#container .faq_hgroup .line::after {width:45px}
	#container .faq_list {width:90%;margin:0 auto;border-bottom:none}
	#container .faq_list:last-child {border-bottom:1px solid #555}
	#container .faq_list .heading {font-size:1.12em}
	#container .faq_list .faq-input + .heading .faq_arw {width:8px;height:8px}
	#container .faq_list .faq-input + .heading .faq_ico {width:20px;height:20px;line-height:20px;background-size:cover;background-position:0 1px}
	#container .faq_list .content {font-size:1em}
	#container .faq_article {height:550px}
	
	#container article {padding-left:0px;}

}

@media only screen and
(min-width:641px) and (max-width:999px)
{
	#lnbWrap .depth1 {display:none;}
	#gnbWrap ul li:not(:last-child) {display:none;}
	
	/* Layout Properties */
	#subVisual {background-position:63% top}

	/* peopleconn!? */
	#container .containSub .kevinbacon h4 {font:2.8em 'NanumSquareL','Malgun Gothic','맑은 고딕';color:#000;width:55%;float:none;letter-spacing:-2px}
	#container .kevinbacon {background-size:120%;background-position:28% 117%;padding:2% 4% 100% 13%}
	#container .kevinbacon p {font-size:1.13em;float:none;line-height:1.5;padding:5% 0 1%}
	#container .kevinbacon .line::after {width:150px}

	#container .rule {padding-left:13%}
	#container .rule dl {padding:20% 0;background-size:70%;background-position:150% 90%}
	#container .rule dl > * {width:70%}
	#container .rule dl dt {font-size:2.5em}
	#container .rule dl dd {padding:10% 0 3%}
	#container .rule dl dd q {font-size:1.3em;background-color:transparent!important}
	#container .rule dl dd p {font-size:1.05em}

	/* card Introduce */
	#container .card_intro .title {background:url(../../img/sub_nfccard_thum.jpg) no-repeat top left / cover;width:100%;float:none;padding:18% 0 10% 11%;height:auto}
	#container .card_intro .title > * {width:50%}
	#container .card_intro .title h4 {font:bold 1.9em 'NanumSquareR','Malgun Gothic','맑은 고딕'}
	#container .card_intro .title p {font-size:1em}
	#container .card_intro .list dl {width:33%;padding:28% 0.5% 0}
	#container .card_intro .list dt {font-size:1.1em;height:45px;letter-spacing:-1px}
	#container .card_intro .list dd {font-size:0.95em;height:100px;line-height:1.45}
	#container .card_intro .list dd::after {display:none}
	#container .card_intro .list dl.type06 {background:url(../../img/sub_nfccard_ico06.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type05 {background:url(../../img/sub_nfccard_ico05.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type04 {background:url(../../img/sub_nfccard_ico04.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type03 {background:url(../../img/sub_nfccard_ico03.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type02 {background:url(../../img/sub_nfccard_ico02.png) no-repeat center 13% / 50%}
	#container .card_intro .list dl.type01 {background:url(../../img/sub_nfccard_ico01.png) no-repeat center 13% / 50%}

	#container .card_use {background:url(../../img/sub_nfccard_bg02.png) no-repeat center 88px / 3%}
	#container .card_use h4 {font:2.188em 'NanumSquareL','Malgun Gothic','맑은 고딕';width:45%;top:1%;padding:100px 0 140px 20px;background:url(../../img/sub_nfccard_bg01.png) no-repeat right top / 100%}
	#container .card_use ul li {font-size:0.9em;margin:0 1% 5px 10%;min-width:75%}
	#container .card_use ul:nth-of-type(1) {float:left;margin-top:240px}
	#container .card_use ul:nth-of-type(2) {margin-top:80px}
	#container .card_use ul:nth-of-type(2) li {margin:0 1% 5px 10%}
	#container .card_use ul li::after {border-width:10px}

	#container .card_view {padding:0 0 35px}
	#container .card_view h4 {padding:40px 7%}
	#container .card_view figure img {width:85%}
	#container .card_view .video_view {width:85%!important}

	/* FAQ */
	#container .faq_hgroup {padding:5%;margin-top:-130px;background:url(../../img/sub_faq_bg01.jpg) no-repeat right bottom / contain}
	#container .faq_hgroup h5 {font-size:1.8em;color:#444}

	/* app Introduce */
	#container .appExplan img {width:100%;max-width:100%}
	#container .appExplan > div {width:100%;height:875px;}
	#container .appExplan > div > div:not(.phone) {width:100%;margin-left:-40%;top:1%}
	#container .appExplan > div > .explan {bottom:120px!important;z-index:10000;padding-top:150px;display:flex}
	#container .appExplan > div .phone {width:100%;height:600px;position:absolute;bottom:0}
	#container .appExplan > div .title h4 {font:bold 2.2em 'NanumSquareR','Malgun Gothic','맑은 고딕';letter-spacing:-3px}
	#container .appExplan > div .title p {font-size:1.13em;width:60%}
	#container .appExplan > div .explan dt {font-size:1.15em}
	#container .appExplan > div .explan dd {font-size:1em}
	#container .appExplan > div:not(.app_introduce01) .title {top:10%}
 	#container .tooltip a {display:block}

	#container .app_introduce01 .explan dl:last-child {position:relative;width:35%;padding-left:20px}
	#container .app_introduce01 .tooltip a:nth-of-type(1) {margin-left:10px;top:65px;width:45%}
	#container .app_introduce01 .tooltip a:nth-of-type(2) {margin-left:0;top:100px;left:5%;width:60%}
	#container .app_introduce01 .tooltip a:nth-of-type(3) {margin-left:-130px;top:135px;width:70%}
	#container .app_introduce01 .tooltip a:nth-of-type(4) {margin-left:0;top:170px;left:10px;width:50%}
	#container .app_introduce01 .tooltip a:nth-of-type(5) {margin-left:0;top:240px}
	#container .app_introduce02 .tooltip a:nth-of-type(1) {top:170px;margin-left:-175px;width:40%}
	#container .app_introduce02 .tooltip a:nth-of-type(2) {margin-left:30px;width:40%}
	#container .app_introduce02 .tooltip a:nth-of-type(3) {margin-left:50px;top:290px}
	#container .app_introduce03 .tooltip a:nth-of-type(1) {margin-left:50px;bottom:32px}
	#container .app_introduce04 .tooltip a:nth-of-type(1) {width:35%;top:100px;margin-left:50px}
	#container .app_introduce04 .tooltip a:nth-of-type(2) {top:170px;margin-left:-180px;width:30%}
	#container .app_introduce04 .tooltip a:nth-of-type(3) {top:210px;margin-left:50px;width:35%}
	#container .app_introduce05 .tooltip a:nth-of-type(1) {width:30%;margin-left:-170px;top:105px;}
	#container .app_introduce05 .tooltip a:nth-of-type(2) {margin-left:70px;top:105px}
	#container .app_introduce05 .tooltip a:nth-of-type(3) {top:215px;margin-left:65px;width:30%}
	#container .app_introduce06 .tooltip a:nth-of-type(1) {width:35%;top:45px;margin-left:50px}
	#container .app_introduce06 .tooltip a:nth-of-type(2) {top:115px}
	#container .app_introduce06 .tooltip a:nth-of-type(3) {margin-left:80px;top:305px}
	#container .app_introduce06 .tooltip a.rightLeft:nth-of-type(3) {width:36%}
	#container .app_introduce01::after {width:100%}
	#container .app_introduce04::after {width:auto;height:500px}

	#container .app_introduce01 .phone {background:url(../../img/sub_appintro_01_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce02 .phone {background:url(../../img/sub_appintro_02_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce03 .phone {background:url(../../img/sub_appintro_03_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce04 .phone {background:url(../../img/sub_appintro_04_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce05 .phone {background:url(../../img/sub_appintro_05_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce06 .phone {background:url(../../img/sub_appintro_06_phone.png)no-repeat 70px 10px / cover}
	#container .app_introduce06 .title a {font:bold 1.2em 'NanumSquareR','Malgun Gothic','맑은 고딕';letter-spacing:-2px}

	#container .app_introduce04 .explan {top:7%!important;width:90%}

	#container .appExplan > div > .explan {padding-top:135px}
	#container .appExplan > div .explan dt {padding:5px 0}
	#container .appExplan > div .title p {width:80%}
	#container .appExplan > div .half.title {top:15%;margin-top:0}

	/* FAQ */
	#container .faq_hgroup {background:url(../../img/sub_faq_bg01.jpg) no-repeat right bottom / contain;height:450px}
	#container .faq_hgroup h4 {width:40%}
	#container .faq_hgroup .line::after {width:45px}
	#container .faq_list {width:90%;margin:0 auto;border-bottom:none}
	#container .faq_list:last-child {border-bottom:1px solid #555}
	#container .faq_list .heading {font-size:1.12em}
	#container .faq_list .faq-input + .heading .faq_arw {width:8px;height:8px}
	#container .faq_list .faq-input + .heading .faq_ico {width:20px;height:20px;line-height:20px;background-size:cover;background-position:0 1px}
	#container .faq_list .content {font-size:1em}
	#container .faq_article {height:550px}
	
	#container article {padding-left:0px;}
}

@media only screen and
(min-width:1000px) and (max-width:1299px)
{
	#lnbWrap .depth2 .m_wrap {margin-left:28%;}
	#lnbWrap .depth1 ul {margin-left:20%;}
}

@media only screen and
(min-width:1300px) and (max-width:1700px)
{
	#lnbWrap .depth2 .m_wrap {margin-left:32%;}
	#lnbWrap .depth1 ul {margin-left:25%;}
}