/*공통*/
/*Pattern*/
.miniWave_w {width: 67px; height: 22px; position: absolute; background: url(http://codediver.dothome.co.kr/PFimg/0/wave2.svg)no-repeat;}
.miniWave_p {display: block;width: 67px; height: 22px; background:url(http://codediver.dothome.co.kr/PFimg/0/wave3.svg)no-repeat;}
.miniWave_b {display: block;width: 67px; height: 22px; background:url(http://codediver.dothome.co.kr/PFimg/0/wave1.svg)no-repeat;}
.single_circle {display: block;width: 34px; height: 34px; border:4px solid #5896c0; border-radius: 50%;}
.double_circle {display: block;width: 34px; height: 34px; border:4px solid #5896c0; border-radius: 50%; position: relative;}
.double_circle:after {display: block;width: 34px; height: 34px; border:4px solid #5896c0; border-radius: 50%; position: absolute; top:6px; left: 8px}

/*GLOW BG*/
.BG_glow div {width: 1px; height:1px; position: absolute; border-radius: 50%;z-index: -2; background:rgb(88,150,192,1);}
/*c1~4:page1(PC)/c5~8:page2(PC)*/
.c1 { top:200px; left: 200px; box-shadow: 0px 0px 300px 300px #5896c0; animation: glowB 3s linear infinite alternate;}
.c2 { bottom:100px; right:100px; box-shadow: 0px 0px 250px 250px #555da6; animation: glowP 4s linear infinite alternate;}
.c3 { top:80px; right:80px; box-shadow: 0px 0px 200px 200px #567ab5; animation: glowPB 2s linear infinite alternate;}
.c4 { top:0; left: 0; box-shadow: 0px 0px 200px 200px #5896c0; opacity: .3 }
@keyframes glowP{
    to {box-shadow: 0px 0px 200px 200px #555da6;}
}
@keyframes glowPB{
    to {box-shadow: 0px 0px 150px 150px #567ab5;}
}
@keyframes glowB{
    to {box-shadow: 0px 0px 200px 200px #5896c0;}
}
.c5 { top:-180px; left:-90px; box-shadow: 0px 0px 150px 150px #5896c0; opacity: .3; z-index: 1 !important}
.c6 { top:0px; left:-90px; box-shadow: 0px 0px 150px 150px #555da6; opacity: .3 }
.c7 { bottom:80px; right:-150px; box-shadow: 0px 0px 200px 200px #5896c0; opacity:.25; }
.BG_glow .c7 {height: 200px }
.c8 { bottom:100px; right:-90px; box-shadow: 0px 0px 150px 150px #555da6; opacity:.3 }
@media screen and (max-width:950px){
    .Main_visual .BG_glow{display: none;}
    .Main_visual2 .c7, .Main_visual2 .c8 {display: none}
    .Main_visual2 .c5 { top:50%; left:50%;margin-left: 50px; box-shadow: 0px 0px 200px 200px #5896c0; opacity: .3; z-index:-1 !important}
    .Main_visual2 .c6 { top:50%; left:50%;margin-left: -50px; box-shadow: 0px 0px 200px 200px #555da6; opacity: .3;}
}
@media screen and (max-width:500px){
    .Main_visual2 .c5 { margin-left: 50px; box-shadow: 0px 0px 150px 150px #5896c0; }
    .Main_visual2 .c6 { margin-left: -50px; box-shadow: 0px 0px 150px 150px #555da6; }
}




/* :after // :before Setting */
.EJCD_Browser:before, .double_circle:after, .laptop:after, .laptop:before, .tab_box:after, .tab_box:before, .br_tap_hd:after, .br_tap_hd:before {content: ""; position: absolute;}

/*Page1*/
.Main_visual {height: 668px; max-width: 1200px;margin: 0 auto; position: relative;}
.MV_con {}
.MV_con .mv_txt{padding-left: 141px; padding-top:165px; }

.mv_txt > span:nth-child(1) {position: relative;font-size: 20px; font-weight: 300;}
.mv_txt > span:nth-child(1):after {content: ""; position: absolute; width:50px; height:7px; background: url(http://codediver.dothome.co.kr/PFimg/0/wave4.svg)no-repeat; top:-20px; left: 0;}
.mv_txt h5 {font-size:40px;position: relative}
.mv_txt h6 {font-size:24px; font-weight: 400; color:#3b6e91}
.mv_txt p {width:350px; font-size: 15px; line-height: 20px; font-weight: 300; margin: 60px 0 40px 0;}


.More_btn {display: block; width:54px; height:165px; position: absolute; top:560px; left:0}
.More_btn .More_btn_t{display: block; position: absolute; top:15px; right:10px; line-height: 54px; color:#5896c0;font-size: 14px; font-weight:500; transform: rotate(-90deg);}
.More_btn .bar-line { position: absolute; left: calc(50% - 2px); bottom: 20px; width: 2px; height: 70px; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.bar-line-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden;}
.bar-line-down { width: 2px; height: 58px; background-color: #5896c0; display: block; animation: slide-down 2s infinite; -webkit-animation: slide-down 2s infinite;}
@keyframes slide-down{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes slide-down{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{-webkit-transform:translateY(100%);transform:translateY(100%)}}


/**/
.EJCD_Browser{width: 529px; height:476px; position: absolute; top:85px; right:82px; background: #323639; border-radius:7px; border:1px solid #202124; }
.EJCD_Browser:before{width:373px; height:373px; background: url(http://codediver.dothome.co.kr/PFimg/0/bg3.png)no-repeat;top:195px; left:200px; z-index: -1}
.EJCD_Browser .miniWave_w{ top:-70px; right:-80px; transform: rotate(
-90deg); opacity: .8}/*BG*/
/*탭영역*/
.Browser_hd{height:52px; border-bottom:1px solid #202124; background:#202124; overflow: hidden; border-radius:7px 7px 0 0; }           
.br_tap_hd{height: 27px; position: relative }
.br_tap_hd:after, .br_tap_hd:before {width: 8px; height:8px; background:#5896c0; border-radius: 50%; position: absolute; top:10px; }
.br_tap_hd:after {left:15px }
.br_tap_hd:before {left:30px }
.br_tap_hd .tab_box{width: 105px;height: 22px; position: absolute; bottom:0; left:50px; background:#323639;border-radius:10px 10px 0 0; color:#fff; font-size: 9px; font-weight: 400; letter-spacing: 3px; line-height: 22px; font-family: arial; padding:0 15px}
.br_tap_hd .tab_box img {width:11px; height:11px; display: inline-block; margin:-3px 7px 0 0}
.tab_box:after {width: 7px; height: 7px; top:7px; right:10px; background: url(http://codediver.dothome.co.kr/PFimg/0/cr_add.svg)no-repeat; transform: rotate(45deg); opacity: .6;}/*탭 close*/
.tab_box:before {width: 8px; height: 8px; top:6px; right:-25px; background: url(http://codediver.dothome.co.kr/PFimg/0/cr_add.svg)no-repeat; opacity: .7;}/*탭 add*/
/*주소창*/
.br_tap_co{height: 24px; background:#323639; position: relative; padding:3px 45px 3px 75px}
.br_tap_co ul { width: 100%; height: 100%; position: absolute; top:0; left: 0; font-size: 0;}
.br_tap_co li {display: inline-block; position: absolute; top:7px;}
.br_tap_co li img {display: inline-block; width: 10px; height: 10px; }
.br_tap_co li:nth-child(1){left: 13px;transform: rotate(-180deg)}/*back*/
.br_tap_co li:nth-child(2){left: 33px;opacity: .5}/*next*/
.br_tap_co li:nth-child(3){left: 56px;}/*refresh*/
.br_tap_co li:nth-child(4){left: 83px; z-index: 1; opacity: .6;}/*security*/
.br_tap_co li:nth-child(5){right: 55px; z-index: 1; }/*favorite*/
.br_tap_co li:nth-child(6){right: 30px; opacity: .8;}/*account*/
.br_tap_co li:nth-child(7){right: 10px; opacity: .7;}/*more*/
.address_box{background: #282c2e; height: 100%; border-radius:9px; position: relative;}
.address_box span {display: block; padding:0 25px; line-height: 18px; color:#fff; font-size: 10px;font-family: arial; opacity: .7; letter-spacing:0}
/**/
.Browser_con{height:422px; padding:8px 0}/*29*/
.Browser_con > div {width: 100%; height: 100%; position: relative;} /*padding base*/
.Browser_con ul li {height:29px; line-height: 29px; font-family: Monospace; font-weight: 100; color:#888; padding-left: 20px }
.Browser_con ul li:nth-child(even){background: #363a3d;}
/*Browser-animation*/
.fakeScreen {position: absolute; top:0; left:0; width: 100%; height: 100%;}
.fakeScreen p {line-height:29px;position: relative; white-space: nowrap;overflow: hidden;width: 0; color:#c0c0c0; font-size:15px;font-family: Monospace;font-weight: 100; padding-left:80px}
.fakeScreen p.line0, .fakeScreen p.line13 {padding-left:50px}
.fakeScreen .c_style { color: #b2defb; }
.fakeScreen .d_style { color:#b2b9fc;}
.fakeScreen .cursor {font-weight: bold;}
.line0 {-webkit-animation: type .5s 0s steps(20, end) forwards;
           -moz-animation: type .5s 0s steps(20, end) forwards;
             -o-animation: type .5s 0s steps(20, end) forwards;
                animation: type .5s 0s steps(20, end) forwards;}
.line1 {-webkit-animation: type .5s 1s steps(20, end) forwards;
           -moz-animation: type .5s 1s steps(20, end) forwards;
             -o-animation: type .5s 1s steps(20, end) forwards;
                animation: type .5s 1s steps(20, end) forwards;}
.line2 {-webkit-animation: type .5s 2s steps(20, end) forwards;
           -moz-animation: type .5s 2s steps(20, end) forwards;
             -o-animation: type .5s 2s steps(20, end) forwards;
                animation: type .5s 2s steps(20, end) forwards;}
.cursor1 {-webkit-animation: blink 1s 1s 2 forwards;
             -moz-animation: blink 1s 1s 2 forwards;
               -o-animation: blink 1s 1s 2 forwards;
                  animation: blink 1s 1s 2 forwards;}
.line3 {-webkit-animation: type .5s 3s steps(20, end) forwards;
           -moz-animation: type .5s 3s steps(20, end) forwards;
             -o-animation: type .5s 3s steps(20, end) forwards;
                animation: type .5s 3s steps(20, end) forwards;}
.line4 {-webkit-animation: type .5s 4s steps(20, end) forwards;
           -moz-animation: type .5s 4s steps(20, end) forwards;
             -o-animation: type .5s 4s steps(20, end) forwards;
                animation: type .5s 4s steps(20, end) forwards;}
.line5 {-webkit-animation: type .5s 5s steps(20, end) forwards;
           -moz-animation: type .5s 5s steps(20, end) forwards;
             -o-animation: type .5s 5s steps(20, end) forwards;
                animation: type .5s 5s steps(20, end) forwards;}
.line6 {-webkit-animation: type .5s 6s steps(20, end) forwards;
           -moz-animation: type .5s 6s steps(20, end) forwards;
             -o-animation: type .5s 6s steps(20, end) forwards;
                animation: type .5s 6s steps(20, end) forwards;}
.line7 {-webkit-animation: type .5s 7s steps(20, end) forwards;
           -moz-animation: type .5s 7s steps(20, end) forwards;
             -o-animation: type .5s 7s steps(20, end) forwards;
                animation: type .5s 7s steps(20, end) forwards;}
.line8 {-webkit-animation: type .5s 8s steps(20, end) forwards;
           -moz-animation: type .5s 8s steps(20, end) forwards;
             -o-animation: type .5s 8s steps(20, end) forwards;
                animation: type .5s 8s steps(20, end) forwards;}
.line9 {-webkit-animation: type .5s 9s steps(20, end) forwards;
           -moz-animation: type .5s 9s steps(20, end) forwards;
             -o-animation: type .5s 9s steps(20, end) forwards;
                animation: type .5s 9s steps(20, end) forwards;}
.line10 {-webkit-animation: type .5s 10s steps(20, end) forwards;
            -moz-animation: type .5s 10s steps(20, end) forwards;
              -o-animation: type .5s 10s steps(20, end) forwards;
                 animation: type .5s 10s steps(20, end) forwards;
}
.line11 {-webkit-animation: type .5s 11s steps(20, end) forwards;
            -moz-animation: type .5s 11s steps(20, end) forwards;
              -o-animation: type .5s 11s steps(20, end) forwards;
                 animation: type .5s 11s steps(20, end) forwards;
}
.line12 {-webkit-animation: type .5s 12s steps(20, end) forwards;
            -moz-animation: type .5s 12s steps(20, end) forwards;
              -o-animation: type .5s 12s steps(20, end) forwards;
                 animation: type .5s 12s steps(20, end) forwards;
}
.line13 {-webkit-animation: type .5s 13s steps(20, end) forwards;
            -moz-animation: type .5s 13s steps(20, end) forwards;
              -o-animation: type .5s 13s steps(20, end) forwards;
                 animation: type .5s 13s steps(20, end) forwards;
}
.cursor2 {-webkit-animation: blink 1s 13s infinite;
             -moz-animation: blink 1s 13s infinite;
               -o-animation: blink 1s 13s infinite;
                  animation: blink 1s 13s infinite;}
@-webkit-keyframes blink {0% { opacity: 0;}40% { opacity: 0;}50% { opacity: 1;}90% { opacity: 1;}100% { opacity: 0;}}
@-moz-keyframes blink {0% { opacity: 0;}40% { opacity: 0;}50% { opacity: 1;}90% { opacity: 1;}100% { opacity: 0;}}
@-o-keyframes blink {0% { opacity: 0;}40% { opacity: 0;}50% { opacity: 1;}90% { opacity: 1;}100% { opacity: 0;}}
@keyframes blink {0% { opacity: 0;}40% { opacity: 0;}50% { opacity: 1;}90% { opacity: 1;}100% { opacity: 0;}}
@-webkit-keyframes type {to { width: 100%;}}
@-moz-keyframes type {to { width: 100%;}}
@-o-keyframes type {to { width: 100%;}}
@keyframes type {to { width: 100%;}}

@media screen and (max-width:1160px){
    .MV_con .mv_txt {padding-left: 82px;}
    .EJCD_Browser {width: 450px}
    .fakeScreen p {padding-left: 65px}
}
@media screen and (max-width:1020px){
    .MV_con .mv_txt {padding-left:50px;}
    .EJCD_Browser {right:50px}
}
@media screen and (max-width:950px){
    .Main_visual {max-width: 100%; height:720px; background: #7b9cd1; background: -moz-linear-gradient(-45deg,  #7b9cd1 0%, #6ca3cc 100%); background: -webkit-linear-gradient(-45deg,  #7b9cd1 0%,#6ca3cc 100%);background: linear-gradient(135deg,  #7b9cd1 0%,#6ca3cc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9cd1', endColorstr='#6ca3cc',GradientType=1 ); overflow: hidden}
    .Main_visual:after { display: block; content: ""; width: 100%; height: 15px; background: url(http://codediver.dothome.co.kr/PFimg/0/Layout_wave.png); position: absolute; bottom: 0; left: 0; background-size: 45px;}
    .Main_visual:before { display: block; content: ""; width: 1px; height:500px; position: absolute; top:80px; left: 60%; background: rgb(255,255,255,.8); transform: rotate(40deg); border-radius: 50%; box-shadow: 0px 0px 180px 180px rgb(255,255,255,.8);}
    .EJCD_Browser .miniWave_w{ top:-30px; right:50px; width:48px; opacity: .5; }
    .MV_con .mv_txt {position: relative; z-index: 1; color:#fff; padding-top: 62px; padding-left:70px }
    .mv_txt > span:nth-child(1):after {background: #fff; width: 3px; height: 93px; top: 5px; left: -15px;}
    .mv_txt > span:nth-child(1) {font-size: 18px;}
    .mv_txt h6 {font-size: 20px;color: #fff;font-weight: 300; line-height: 1}
    .mv_txt p {font-size: 13px; color:#000; line-height: 20px; margin:425px 0 0 0}
    .mv_txt .btnStyle_3 {position: absolute; bottom:85px; left: 50px;}
    .EJCD_Browser {width: 529px; height: 448px; right:-5%; top: 100px;}
    .Browser_con {height: 394px;}
    .fakeScreen p {font-size: 13px; line-height: 27px;}
    .Browser_con ul li { height: 27px; line-height: 27px;}
    .More_btn {display: none;}
}
@media screen and (max-width:750px){
    .EJCD_Browser {right:-100px;} 
    .br_tap_hd:after, .br_tap_hd:before, .tab_box:before, .tab_box:after, .br_tap_hd .tab_box img, .br_tap_co li img, .address_box span {display: none;}
    .br_tap_hd .tab_box {font-size: 0}
}
@media screen and (max-width:630px){
   .EJCD_Browser {right:-150px;} 
}
@media screen and (max-width:550px){
    .Main_visual {height: 630px}
    .MV_con .mv_txt {padding-left: 50px}
    .mv_txt h5 {font-size: 35px; line-height: 35px}
    .mv_txt h6 {font-size: 18px}
    .mv_txt p {margin: 390px 0 0 -10px;}
    .mv_txt > span:nth-child(1):after {height: 70px}
    .mv_txt .btnStyle_3 {bottom: 70px; left:25px}
    .EJCD_Browser {width: 529px; height: 378px;}
    .Browser_con {height: 324px;}
    .fakeScreen p {font-size: 11px; line-height: 22px;}
    .Browser_con ul li { height: 22px; line-height: 22px; font-size: 10px}
}
@media screen and (max-width:450px){
    .MV_con .mv_txt {padding-left: 40px} 
    .mv_txt p {width: calc(100% - 20px);}
}



/*Page2*/
.Main_visual2 {position: relative}
.Main_visual2 h5 {font-size:30px;text-align: center; margin-top: 125px;}
.Main_visual2 ul {text-align: center; margin-top: 52px; font-size: 0}
.Main_visual2 li {display: inline-block; width:127px;text-align: center;}
.Main_visual2 li img {width: 52px; height: 49px}
.Main_visual2 li span {display: block; font-size: 15px; font-weight:300; margin-top: 10px}

.Screen_wrap{margin-top: 55px; text-align: center;}
.laptop{display:inline-block; width: 600px; height: 483px; position: relative}
.laptop img {width: 100%;}
.laptop:after {display: block; width: 619px; height: 234px; background: url(http://codediver.dothome.co.kr/PFimg/0/long_wave_bg1.png)no-repeat; top:-196px; left:-399px; z-index: -1;}
.laptop:before {display: block; width: 638px; height:195px; background: url(http://codediver.dothome.co.kr/PFimg/0/long_wave_bg2.png)no-repeat; top:292px; right:-324px;z-index: -1;}
.screen{width: 456px; height: 285px; position: absolute; top:20px; left: 50%; margin-left:-228px; 
background: #5896c0;background: -moz-linear-gradient(left,  #5896c0 0%, #555da6 60%);background: -webkit-linear-gradient(left,  #5896c0 0%,#555da6 60%);background: linear-gradient(to right,  #5896c0 0%,#555da6 60%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5896c0', endColorstr='#555da6',GradientType=1 );overflow:hidden;}
.screen_text_wrap {width: 100%;height: 100%; position: absolute; top:0; left:0; color:#fff; font-weight: 700;}
.screen_text_wrap div:first-child {padding-top:105px;font-size: 30px;}
.screen_text_wrap .viewWork {display: inline-block; font-size:13px; background:none; border:2px solid #fff; color:#fff; margin-top: 10px;padding:10px 15px; transition:all .5s ease-in-out; }
.screen_text_wrap .viewWork:hover {background: #fff; color:#5896c0;}
.latest_wr {max-width: 1200px; margin: 0 auto;}
.Pattern_shape {opacity: .7;}
.Pattern_shape span{position: absolute;}
.Pattern_shape .miniWave_p{top:0; right:-50px;}
.Pattern_shape .single_circle{top:7px; right:-65px;z-index: -1; opacity: .8;}
.Pattern_shape .miniWave_b{top:240px; left:-140px; transform: rotate(-90deg);}
.Pattern_shape .double_circle{top:330px; left:-180px; opacity: .8;}


@media screen and (max-width:950px){
    .Pattern_shape .miniWave_p,
    .Pattern_shape .single_circle,
    .Pattern_shape .miniWave_b,
    .Pattern_shape .double_circle, 
    .laptop:after, 
    .laptop:before {display: none;}
}
@media screen and (max-width:900px){
    .Main_visual2 {}
    .Main_visual2 h5 {font-size:22px; margin-top: 70px;}
    .Main_visual2 li span{font-size: 13px; margin-top: 7px;}
    .Main_visual2 li img {width: 33px; height: auto;}
    .screen_text_wrap .viewWork:hover {background: none; color:#fff;}
}
@media screen and (max-width:680px){
    .laptop{width: 500px; height: auto;}
    .laptop:before {top: 212px;}
    .screen{width: 380px; height: 239px; top:19px; margin-left:-190px; }
    .screen_text_wrap div:first-child {padding-top: 75px;font-size: 25px; margin-bottom: 10px}
}
@media screen and (max-width:550px){
    .Main_visual2 li {width:110px;}
    .Main_visual2 li img {width: 30px;height: 29px}
    .laptop{width: 400px; }
    .laptop:before {top:173px; right:-377px;}
    .screen{width: 310px; height:198px; top:12px; margin-left:-155px; }
    .screen_text_wrap div:first-child {padding-top: 60px;font-size: 20px; margin-bottom: 0; letter-spacing: 1px}
}
@media screen and (max-width:450px){
    .Main_visual2 {text-align: center;}
    .Main_visual2 ul {display: inline-block; }
    .Main_visual2 li {width: 90px; float: left}
    .Main_visual2 li img {width: 28px}
    .Main_visual2 li span {font-size: 12px; font-weight: 600; line-height:12px}
    
    .laptop{width: 350px; }
    .screen{width: 269px; height:174px; top:10px; margin-left:-134px; }
    .screen_text_wrap div:first-child {padding-top: 50px;}
}