@charset "UTF-8";

#startup .main{
position:relative;
width:100%;
max-width:980px;
margin:0 auto 50px;
z-index:2;}
@media screen and (max-width:1100px){#startup .main{width:90%;}}
@media screen and (max-width:480px){#startup .main{width:96%;}}

.copy{color:#fff; font-size:13px; margin:20px auto;}

/*
================================================================================================================
PAGE01/게임 준비
================================================================================================================
*/
#startup.page01 .title{
display:flex;
width:100%;
color:#fff;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/startup/num_bg.png");
background-repeat:no-repeat;
background-position:left -20px center;
/*background-size:auto 100%;*/
padding:20px 0 20px 40px;
margin:20px auto 60px;}
#startup.page01 .title:first-child,
#startup.page01 .title:nth-child(3),
#startup.page01 .title:nth-child(8),
#startup.page01 .title:nth-child(11){margin:20px auto 0;}

#startup.page01 .title p span{display:block; font-weight:bold;}
#startup.page01 .title p:first-child{width:80px;}
#startup.page01 .title p:first-child img{width:100%;}
#startup.page01 .title p:nth-child(2){width:calc(100% - 90px); margin-left:10px;}
#startup.page01 .title p span:first-child{
font-size:26px;
margin:10px auto;
text-shadow:2px 1px 6px rgba(39,65,128,0.5),-2px -1px 6px rgba(39,65,128,0.5),
            2px 2px 3px rgba(39,65,128,0.5),-2px -2px 3px rgba(39,65,128,0.5),
            0px 0px 3px rgba(39,65,128,0.3),-1px -1px 3px rgba(39,65,128,0.3),
            1px 1px 3px rgba(39,65,128,0.3);}
#startup.page01 .title p span:nth-child(2){
font-size:15px;
text-shadow:2px 2px 3px rgba(0,0,0,0.9),-2px -2px 3px rgba(0,0,0,0.9),
            0px 0px 3px rgba(0,0,0,0.9),-1px -1px 3px rgba(0,0,0,0.9),
            1px 1px 3px rgba(0,0,0,0.9);}

#startup.page01 .btn-two{display:flex; width:100%; max-width:660px; margin:0 auto 60px;}
#startup.page01 .btn-two a{display:block; width:50%; text-align:center;}
#startup.page01 .btn-two img{width:100%; max-width:274px;}
#startup.page01 .btn-one{text-align:center; margin:0 auto 60px;}
#startup.page01 .btn-one img{width:100%; max-width:664px;}

#startup.page01 .btn-two img,
#startup.page01 .btn-one img{
-webkit-filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));
-moz-filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));
filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));}

#startup.page01 .btn-two a:hover img,
#startup.page01 .btn-one a:hover img{
-webkit-filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));
-moz-filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));
filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));}

/*인계*/
#startup.page01 .update{
width:100%;
max-width:800px;
background-color:rgba(0,0,0,0.5);
font-size:15px;
line-height:160%;
border:1px solid #136982;
border-radius:10px;
padding:20px;
margin:0 auto 60px;}
#startup.page01 .update strong{display:block; background-color:#136982; font-size:18px; font-weight:bold; text-align:center; padding:5px 0; margin:0 auto 10px;}
#startup.page01 .update p{padding:0 20px;}
#startup.page01 .update p span{display:block; font-size:13px; margin-top:10px;}

@media screen and (max-width:640px){
#startup.page01 .title{margin:20px auto;}
#startup.page01 .btn-two{margin:0 auto 20px;}
#startup.page01 .btn-one{margin:0 auto 20px;}

#startup.page01 .update{margin:0 auto 20px;}
#startup.page01 .update strong{font-size:15px;}

#startup.page01 .title p span:first-child{font-size:20px;}
#startup.page01 .title p span:nth-child(2){font-size:13px;}}

@media screen and (max-width:480px){
#startup.page01 .title{background-size:150px auto; background-position:left -15px top -10px; padding:20px 0;}
#startup.page01 .title p:first-child{width:50px;}
#startup.page01 .title p:nth-child(2){width:calc(100% - 60px);}
#startup.page01 .title p span:first-child{font-size:15px; margin-bottom:5px;}
#startup.page01 .title p span:nth-child(2){font-size:12px;}

#startup.page01 .update{font-size:14px; padding:10px;}
#startup.page01 .update p{padding:0 10px;}
#startup.page01 .update p span{font-size:12px;}}

/*텍스트 링크*/
#startup.page01 .title p a{color:#fff; text-decoration:underline;
text-shadow:2px 1px 3px rgba(0,216,255,0.1),-2px -1px 3px rgba(0,216,255,0.1),
            2px 2px 3px rgba(0,216,255,0.1),-2px -2px 3px rgba(0,216,255,0.1),
            0px 0px 3px rgba(0,216,255,0.1),-1px -1px 3px rgba(0,216,255,0.1),
            1px 1px 3px rgba(0,216,255,0.1);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;}
#startup.page01 .title p a:hover{text-decoration:none;
text-shadow:2px 1px 10px rgba(0,216,255,0.5),-2px -1px 10px rgba(0,216,255,0.5),
            2px 2px 6px rgba(0,216,255,0.5),-2px -2px 6px rgba(0,216,255,0.5),
            0px 0px 6px rgba(0,216,255,0.3),-1px -1px 6px rgba(0,216,255,0.3),
            1px 1px 6px rgba(0,216,255,0.3);}

#startup.page01 .inner{
width:100%;
max-width:640px;
background-color:rgba(0,0,0,0.5);
font-size:13px;
border:1px solid #136982;
border-radius:10px;
padding:20px;
margin:0 auto 20px;}
#startup.page01 .inner em{display:block; font-size:15px;}
#startup.page01 .inner img{width:100%; max-width:596px; margin:20px auto 0;}

@media screen and (max-width:700px){
#startup.page01 .inner{width:96%; padding:10px;}}

@media screen and (max-width:480px){
#startup.page01 .inner{font-size:11px;}
#startup.page01 .inner em{font-size:13px;}}

/*
================================================================================================================
PAGE02/작동 환경
================================================================================================================
*/
#startup.page02 #table{color:#fff; background-color:#000; border-radius:20px; margin:40px auto;}
#startup.page02 #table .cat{display:flex; /*border-bottom:1px solid #222;*/}
#startup.page02 #table .cat p:first-child{width:20%; font-size:18px; font-weight:bold; /*border-right:1px solid #222;*/ padding:20px;}
#startup.page02 #table .cat p:nth-child(2){width:80%; font-size:13px; padding:20px;}
#startup.page02 #table .cat p:nth-child(2) strong{display:block; font-size:18px; margin-bottom:10px;}
#startup.page02 #table .cat p:nth-child(2) em{display:block;}
#startup.page02 #table .cat p:nth-child(2) span{display:block; padding:10px 20px 0 20px;}

#startup.page02 #table .cat:last-of-type{border-bottom:none;}
#startup.page02 #table .cat:nth-of-type(3) p:nth-child(2) span{padding:10px 20px 40px 20px !important;}
#startup.page02 #table .cat:last-of-type p:nth-child(2) span{line-height:30px;}

#startup.page02 #table .cat a{color:#01d7ff; text-decoration:underline;}
#startup.page02 #table .cat a:hover{text-decoration:none;}

@media screen and (max-width:800px){
#startup.page02 #table{margin:20px auto 40px;}}

@media screen and (max-width:640px){
#startup.page02 #table .cat{flex-wrap:wrap;}
#startup.page02 #table .cat p:first-child{width:100%; font-size:18px; font-weight:bold; border-right:none; padding:20px 20px 0;}
#startup.page02 #table .cat p:nth-child(2){width:100%;}
#startup.page02 #table .cat p:nth-child(2) span{display:block; padding:10px 10px 0 10px;}}

/*
================================================================================================================
PAGE03/INFINITAS 기본 코스
================================================================================================================
*/
#startup.page03 .cat{
position:relative;
width:100%;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/startup/basic_bg.png");
background-repeat:no-repeat;
background-position:center top;
text-align:center;
margin:0 auto;
text-shadow:2px 1px 10px rgba(0,0,0,1),-2px -1px 10px rgba(0,0,0,1),
            2px 2px 5px rgba(0,0,0,0.5),-2px -2px 5px rgba(0,0,0,0.5),
            0px 0px 3px rgba(0,0,0,0.3),-1px -1px 3px rgba(0,0,0,0.3),
            1px 1px 3px rgba(0,0,0,0.3);}
#startup.page03 .cat strong{display:block; font-size:26px; padding:70px 0 20px;}
#startup.page03 .cat strong br{display:none;}
#startup.page03 .cat a{display:block; width:100%; max-width:666px; margin:50px auto;}

#startup.page03 .btn-one img{width:100%; max-width:664px;}

#startup.page03 a img{
/*width:100%;*/
-webkit-filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));
-moz-filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));
filter:drop-shadow(0px 0px 10px rgba(0,150,255,0.4));}

#startup.page03 a:hover img{
-webkit-filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));
-moz-filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));
filter:drop-shadow(0px 0px 10px rgba(0,150,255,1));}

@media screen and (max-width:600px){
#startup.page03 .cat:nth-child(2) strong{line-height:120%; padding:50px 0 20px;}
#startup.page03 .cat strong br{display:block;}}

@media screen and (max-width:480px){
#startup.page03 .cat{background-size:500px auto; font-size:13px;}
#startup.page03 .cat strong{font-size:20px; padding:30px 0 20px;}
#startup.page03 .cat:nth-child(2) strong{padding:20px 0 20px;}
#startup.page03 .cat a{margin:30px auto;}}

@media screen and (max-width:380px){
#startup.page03 .cat{background-size:700px auto;}
#startup.page03 .cat strong{font-size:18px; padding:45px 0 20px;}
#startup.page03 .cat:nth-child(2) strong{padding:35px 0 20px;}}

/*
================================================================================================================
PAGE04/FAQ
================================================================================================================
*/
#startup.page04 .cat{
position:relative;
width:100%;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/startup/num_bg.png");
background-repeat:no-repeat;
background-position:left -20px top -20px;
padding:30px 0;}
#startup.page04 .cat > p{
width:90%;
font-size:24px;
font-weight:bold;
padding:20px 0;
margin:0 auto;
text-shadow:2px 1px 6px rgba(39,65,128,0.5),-2px -1px 6px rgba(39,65,128,0.5),
            2px 2px 3px rgba(39,65,128,0.5),-2px -2px 3px rgba(39,65,128,0.5),
            0px 0px 3px rgba(39,65,128,0.3),-1px -1px 3px rgba(39,65,128,0.3),
            1px 1px 3px rgba(39,65,128,0.3);}
#startup.page04 .cat > p:first-letter{color:#02f5f8; font-size:32px;}
#startup.page04 .cat .inner{width:94%; color:#000; background-color:#fff; font-size:13px; line-height:180%; border-radius:20px; padding:20px 30px; margin:0 auto;}
#startup.page04 .cat .inner strong{
display:block;
background-color:#eee;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/startup/faq_bg.png");
background-position:left center;
background-repeat:no-repeat;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
padding:20px;
margin:30px auto 10px;}
#startup.page04 .cat .inner strong:first-child{margin:0 auto 10px;}
#startup.page04 .cat .inner a{display:inline-block; color:#0050a1; text-decoration:underline;}
#startup.page04 .cat .inner a:hover{text-decoration:none;}

#startup.page04 .cat .inner p.error{
display:inline-block;
color:#333;
background-color:#ddd;
border:1px solid #333;
padding:10px;
margin:5px 0;}

#startup.page04 .cat .inner div.link{display:flex; flex-wrap:wrap; width:100%; justify-content:flex-end;}
#startup.page04 .cat .inner div.link a{
color:#fff;
background-color:#0050a1;
border-radius:5px;
padding:5px 10px;
margin-bottom:5px;
text-decoration:none;
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
transition:all 0.6s ease;}
#startup.page04 .cat .inner div.link a:hover{color:#0050a1; background-color:#00fcff;}

#startup.page04 .cat .inner div.link span{display:block; width:100%; color:#f00; font-size:12px; text-align:right;}

@media screen and (max-width:480px){
#startup.page04 .cat{background-size:150px auto; background-position:left -15px top -20px; padding:10px 0 20px;}
#startup.page04 .cat > p{font-size:16px; padding:10px 0;}
#startup.page04 .cat > p:first-letter{font-size:24px;}
#startup.page04 .cat .inner{width:100%; border-radius:10px; padding:10px;}
#startup.page04 .cat .inner strong{background-size:auto 40px; padding:10px 0 10px 20px; margin:20px auto 10px;}
/*#startup.page04 .cat .inner{padding:10px;}*/}