@charset "UTF-8";

.main.walter {font-family: "brandon-grotesque";}
.walter p {margin:0;}
.blind{overflow: hidden;position: absolute;left: -9999em;width: 1px;height: 1px;margin: 0;padding: 0;background: none;text-indent: -9999em;}
.pc_only{display: block;}
.mo_only{display: none !important;}
@media only all and (max-width: 767px){
    .pc_only{display: none !important}
    .mo_only{display: block !important;}
}
/* bubble */
.ap_bubble_wrap {position: relative;}
.background-wrap .ap_bubble_wrap {width:100%; height:100%;}
.ap_bubble {position: absolute; top:0; background: #e2f6fc; border-radius: 100%;z-index: 10;}

.main.walter .intro_wrap {position: relative; width:100%; height:100%; background:#d2eef6;}
.main.walter .bubble_bg { position: absolute; overflow:hidden; top: 0;  bottom: 0; left:0; right:0; z-index: 0; }
.main.walter .background-wrap {position:absolute;}
.main.walter .background-wrap.style01 {top:0; bottom:0; left:0;  width:20%;}
.main.walter .background-wrap.style02 {top:0; right:0; bottom:0; width:20%;}
.main.walter .background-wrap.style03 {top:0; right:0; bottom:0; left:0;}

@media only all and (max-width: 767px){
    .main.walter .bubble_bg { position: absolute; overflow:hidden; top: 0;  bottom: 165px; bottom:22vw; left:0; right:0; z-index: 0; }
}

.intro_wrap {position:relative;}
.intro-background {background:url('../image/brand/walter-friends/intro-bg.png') repeat-x bottom;}
.story-background {background:#a8d2ed url('../image/brand/walter-friends/story-bg.png') repeat-x bottom;}
.walter-friends-intro {max-width:1920px; margin:0 auto;}
.walter-friends-intro .inner {max-width: 1440px; margin:0 auto;}
.walter-friends-intro .logo h1 {padding-top:92px; padding-bottom:40px; text-align: center;}
.walter-friends-intro .logo h1 img {width:290px; height:203px;}
.walter-friends-intro .logo .logo-img {padding-top:92px; padding-bottom:40px; text-align: center;}
.walter-friends-intro .logo .logo-img img {width:290px; height:203px;}
.walter-friends-intro .title {color:#282641; text-align: center;}
.walter-friends-intro .title h2 { font-size:24px; font-weight: 700; letter-spacing: -0.025em;}
.walter-friends-intro .title h2 span {position: relative; z-index: 2;}
.walter-friends-intro .title h2 span:after {position: absolute; height:16px; right:-2px; bottom:5px; left:-3px; background:#B4CDFF; opacity: 0.6; content:''; z-index: -1;}
.walter-friends-intro .title p {margin-top:3px;font-size: 19px;font-weight:600;line-height: 28px;letter-spacing: -0.01em;}
.walter-friends-inner {position:relative;}
.walter-friends-inner .walter {position: absolute;}
.walter-friends-inner .walter.st01 {width:48px; height:69px; top:-105px; left:329px; -webkit-animation: walterAnim-1 5s linear infinite both;  animation: walterAnim-1 5s linear infinite both; }
.walter-friends-inner .walter.st02 {width:61px; height:69px; top:5px; left:579px; -webkit-animation: walterAnim-2 4s linear infinite both;  animation: walterAnim-2 4s linear infinite both;}
.walter-friends-inner .walter.st03 {width:57px; height:61px; top:-113px; left:1051px; -webkit-animation: walterAnim-1 4s linear infinite both;  animation: walterAnim-1 4s linear infinite both;}
.walter-friends-inner [class*='note'] {position: absolute;}
.walter-friends-inner .note1 {width:15px; height:17px;}
.walter-friends-inner .note2 {width:17px; height:17px;}
.walter-friends-inner .note3 {width:17px; height:17px;}
.walter-friends-inner [class*='note'].st01 {top:52px; left:264px; -webkit-animation: noteAnim01 2s linear infinite; -moz-animation: noteAnim01 2s linear infinite;  animation: noteAnim01 2s linear infinite;}
.walter-friends-inner [class*='note'].st02 {top:120px; left:465px; -webkit-animation: noteAnim02 3s linear infinite; -moz-animation: noteAnim02 3s linear infinite; animation: noteAnim02 3s linear infinite;}
.walter-friends-inner [class*='note'].st03 {top:28px; left:684px; -webkit-animation: noteAnim03 3.5s linear infinite; -moz-animation: noteAnim03 3.5s linear infinite;  animation: noteAnim03 3.5s linear infinite;}
.walter-friends-inner [class*='note'].st04 {top:-36px; left:798px; -webkit-animation: noteAnim01 3s linear infinite; -moz-animation: noteAnim01 3s linear infinite; animation: noteAnim01 3s linear infinite;}
.walter-friends-inner [class*='note'].st05 {top:46px; left:868px; -webkit-animation: noteAnim02 3s linear infinite; -moz-animation: noteAnim02 3s linear infinite;  animation: noteAnim02 3s linear infinite;}
.walter-friends-inner [class*='note'].st06 {top:147px; left:1166px; -webkit-animation: noteAnim03 3.5s linear infinite; -moz-animation: noteAnim02 3.5s linear infinite;  animation: noteAnim03 3.5s linear infinite;}

.walter-friends-inner .walking-wrap {position: relative; width:1440px; margin-top:71px; padding-top:374px;}
.walter-friends-inner .walking {position: absolute; top:0; width:1440px;}
.walter-friends-inner .flag {position: absolute; top:69px; left:286px; -webkit-animation: flagAnim 2s linear infinite; -moz-animation: flagAnim 2s linear infinite; animation: flagAnim 2s linear infinite;} 

/* flag animation */
@-webkit-keyframes flagAnim { 
    0% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }
    50% { 
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
        left:265px;
    }
    100% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }    
}

@-moz-keyframes flagAnim { 
    0% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }
    50% { 
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        transform: rotate(-15deg);
        left:265px;
    }
    100% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }        
}

@keyframes flagAnim { 
    0% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }
    50% { 
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        transform: rotate(-15deg);
        left:265px;
    }
    100% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        left:286px;
    }        
}
/* flag 1440 animation */
    
@-webkit-keyframes flagAnim1440 { 
    0% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }
    50% { 
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        transform: rotate(-15deg);
        left:265px; left:18.4027vw;
    }
    100% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }    
}

@-moz-keyframes flagAnim1440 { 
    0% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }
    50% { 
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        transform: rotate(-15deg);
        left:265px; left:18.4027vw;
    }
    100% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }        
}

@keyframes flagAnim1440 { 
    0% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }
    50% { 
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        transform: rotate(-15deg);
        left:265px; left:18.4027vw;
    }
    100% { 
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        left:286px; left:19.8611vw;
    }        
}

/* flag 750 animation */
@-webkit-keyframes flagAnim750 { 
    0% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }
    50% { 
        transform: rotate(-15deg);
        left:21px; left:2.8vw;
    }
    100% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }    
}

@-moz-keyframes flagAnim750 { 
    0% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }
    50% { 
        transform: rotate(-15deg);
        left:21px; left:2.8vw;
    }
    100% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }        
}

@keyframes flagAnim750 { 
    0% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }
    50% { 
        transform: rotate(-15deg);
        left:21px; left:2.8vw;
    }
    100% { 
        transform: rotate(0deg);
        left:37px; left:4.9333vw;
    }        
}

/* note animation */
@-webkit-keyframes noteAnim01 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(5px) rotate(-10deg); -moz-transform:translateX(5px) rotate(-10deg); -ms-transform:translateX(5px) rotate(-10deg); transform:translateX(5px) rotate(-10deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }    
}

@-moz-keyframes noteAnim01 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(5px) rotate(-10deg); -moz-transform:translateX(5px) rotate(-10deg); -ms-transform:translateX(5px) rotate(-10deg); transform:translateX(5px) rotate(-10deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }     
}

@keyframes noteAnim01 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(5px) rotate(-10deg); -moz-transform:translateX(5px) rotate(-10deg); -ms-transform:translateX(5px) rotate(-10deg); transform:translateX(5px) rotate(-10deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }        
}
@-webkit-keyframes noteAnim02 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(7px) rotate(-40deg); -moz-transform:translateX(7px) rotate(-40deg); -ms-transform:translateX(7px) rotate(-40deg); transform:translateX(7px) rotate(-40deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }    
}

@-moz-keyframes noteAnim02 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(7px) rotate(-40deg); -moz-transform:translateX(7px) rotate(-40deg); -ms-transform:translateX(7px) rotate(-40deg); transform:translateX(7px) rotate(-40deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }            
}

@keyframes noteAnim02 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }
    50% { 
        -webkit-transform:translateX(7px) rotate(-40deg); -moz-transform:translateX(7px) rotate(-40deg); -ms-transform:translateX(7px) rotate(-40deg); transform:translateX(7px) rotate(-40deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(0deg); -moz-transform:translateX(0px) rotate(0deg); -ms-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);
    }        
}
@-webkit-keyframes noteAnim03 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); -ms-transform:translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }
    50% { 
        -webkit-transform:translateX(10px) rotate(20deg); -moz-transform:translateX(10px) rotate(20deg); -ms-transform:translateX(10px) rotate(20deg); transform:translateX(10px) rotate(20deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); -ms-transform:translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }        
}

@-moz-keyframes noteAnim03 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); -ms-transform:translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }
    50% { 
        -webkit-transform:translateX(10px) rotate(20deg); -moz-transform:translateX(10px) rotate(20deg); -ms-transform:translateX(10px) rotate(20deg); transform:translateX(10px) rotate(20deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); -ms-transform:translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }        
}

@keyframes noteAnim03 { 
    0% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); -ms-transform:translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }
    50% { 
        -webkit-transform:translateX(10px) rotate(20deg); -moz-transform:translateX(10px) rotate(20deg); -ms-transform:translateX(10px) rotate(20deg); transform:translateX(10px) rotate(20deg);        
    }
    100% { 
        -webkit-transform:translateX(0px) rotate(-10deg); -moz-transform:translateX(0px) rotate(-10deg); translateX(0px) rotate(-10deg); transform:translateX(0px) rotate(-10deg);
    }       
}
/* walter animation */

@-webkit-keyframes walterAnim-1 {
    0% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
    25% {
        -webkit-transform: translate(10px, -10px);
        -moz-transform: translate(10px, -10px);
        -ms-transform: translate(10px, -10px);
                transform: translate(10px, -10px);
    }
    50%{
        -webkit-transform: translate(15px, -5px);
        -moz-transform: translate(15px, -5px);
        -ms-transform: translate(15px, -5px);
                transform: translate(15px, -5px);        
    }
    75% {
        -webkit-transform: translate(10px, -15px);
        -moz-transform:translate(10px, -15px);
        -ms-transform:translate(10px, -15px);
                transform: translate(10px, -15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
}
@-moz-keyframes walterAnim-1 {
    0% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
    25% {
        -webkit-transform: translate(10px, -10px);
        -moz-transform: translate(10px, -10px);
        -ms-transform: translate(10px, -10px);
                transform: translate(10px, -10px);
    }
    50%{
        -webkit-transform: translate(15px, -5px);
        -moz-transform: translate(15px, -5px);
        -ms-transform: translate(15px, -5px);
                transform: translate(15px, -5px);        
    }
    75% {
        -webkit-transform: translate(10px, -15px);
        -moz-transform:translate(10px, -15px);
        -ms-transform:translate(10px, -15px);
                transform: translate(10px, -15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
}
@keyframes walterAnim-1 {
    0% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
    25% {
        -webkit-transform: translate(10px, -10px);
        -moz-transform:translate(10px, -10px);
        -ms-transform:translate(10px, -10px);
                transform: translate(10px, -10px);
    }
    50%{
        -webkit-transform: translate(15px, -5px);
        -moz-transform:translate(15px, -5px);  
        -ms-transform:translate(15px, -5px);  
                transform: translate(15px, -5px);        
    }
    75% {
        -webkit-transform: translate(10px, -15px);
        -moz-transform:translate(10px, -15px);
        -ms-transform:translate(10px, -15px);
                transform: translate(10px, -15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
                transform: translate(0);
    }
}

@-webkit-keyframes walterAnim-2 {
    0% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
                transform: translate(0);
    }
    25% {
        -webkit-transform: translate(-10px, 10px);
        -moz-transform:translate(-10px, 10px);
        -ms-transform:translate(-10px, 10px);
                transform: translate(-10px, 10px);
    }
    50%{
        -webkit-transform: translate(-15px, 5px);
        -moz-transform:translate(-15px, 5px);
        -ms-transform:translate(-15px, 5px);
                transform: translate(-15px, 5px);        
    }
    75% {
        -webkit-transform: translate(-10px, 15px);
        -moz-transform: translate(-10px, 15px);
        -ms-transform: translate(-10px, 15px);
                transform: translate(-10px, 15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
                transform: translate(0);
    }
}
@-moz-keyframes walterAnim-2 {
    0% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
                transform: translate(0);
    }
    25% {
        -webkit-transform: translate(-10px, 10px);
        -moz-transform:translate(-10px, 10px);
        -ms-transform:translate(-10px, 10px);
                transform: translate(-10px, 10px);
    }
    50%{
        -webkit-transform: translate(-15px, 5px);
        -moz-transform:translate(-15px, 5px);
        -ms-transform:translate(-15px, 5px);
                transform: translate(-15px, 5px);        
    }
    75% {
        -webkit-transform: translate(-10px, 15px);
        -moz-transform: translate(-10px, 15px);
        -ms-transform: translate(-10px, 15px);
                transform: translate(-10px, 15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
                transform: translate(0);
    }
}
@keyframes walterAnim-2 {
    0% {
    -webkit-transform: translate(0);
    -moz-transform:translate(0);
    -ms-transform:translate(0);
            transform: translate(0);
    }
    25% {
    -webkit-transform: translate(-10px, 10px);
    -moz-transform:translate(-10px, 10px);
    -ms-transform:translate(-10px, 10px);
            transform: translate(-10px, 10px);
    }
    50%{
        -webkit-transform: translate(-15px, 5px);
        -moz-transform:translate(-15px, 5px);
        -ms-transform:translate(-15px, 5px);
                transform: translate(-15px, 5px);        
    }
    75% {
        -webkit-transform: translate(-10px, 15px);
        -moz-transform:translate(-10px, 15px);
        -ms-transform:translate(-10px, 15px);
                transform: translate(-10px, 15px);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform:translate(0);
        -ms-transform:translate(0);
            transform: translate(0);
    }
}

  
.walter-friends-story {max-width: 1920px; margin:0 auto; padding-top:50px; padding-bottom:253px;}
.walter-friends-story .inner {position:relative; max-width:1100px; margin: 0 auto;}
.walter-friends-story .story-box {position: relative; width:100%; padding:12px 16px; background:#c5d8ee; border-radius:14px; box-sizing: border-box;}
.walter-friends-story .story-box-inner {padding:43px 20px 52px;color:#282641;font-size:18px;/* font-weight:600; */line-height:25px;letter-spacing: -0.025em;text-align: center;background: #f2fcff;border-radius: 15px;}
.walter-friends-story .story-box-inner p ~ p {margin-top:23px;}
.walter-friends-story .blue-line {background:#b4cdff99;}
.walter-friends-story .story-friends {position: absolute; width:134px; top:0; right:-121px; bottom:0;}
.walter-friends-story .story-friends img {width:auto; height:100%;}
.walter .friends-wrap {position: relative; background:#ebf4fa;}
.walter .story-friends-bg {max-width: 1920px; margin:0 auto;}
.walter .friends-bg {position: relative; max-width: 1920px; top:-94px; margin:0 auto; background: url('../image/brand/walter-friends/friends_bg01.png') no-repeat center top; background-size:cover;}
.walter .friends-bg + .friends-bg { padding-bottom:130px; background: url('../image/brand/walter-friends/friends_bg02.png') no-repeat center top; background-size:cover;}
.walter .friends-bg:before {position: absolute; top:0px; left:0; right:0; bottom:0; background:#ebf4fa; content: ''; z-index: -1;}
.walter .friends-bg + .friends-bg:before {top:0px;}
.walter .friends {max-width: 1440px; margin:0 auto; text-align: center; }
.walter .friends:after {display:block; content: ''; clear: both;}
.walter .friends.walter {padding-top:175px;}
.walter .friends.dambi {padding-top:145px;}
.walter .friends.seal {padding-top:94px;}
.walter .friends.noon {padding-top:187px;}

.walter .friends .inner-left {display: inline-block;}
.walter .friends .inner-left .f-img {float: left;}
.walter .friends .inner-left .f-info {float: left; text-align: left;}
.walter .friends .inner-right .f-img {float: right;}
.walter .friends .inner-right .f-info {float: right; text-align: right;}
.walter .friends .f-img {position:relative;}
.walter .friends.walter .f-img {width:476px; height:476px; background: url('../image/brand/walter-friends/friends-walter-bg.png') no-repeat center;}
.walter .friends.dambi .f-img {width:625px; height:625px; background: url('../image/brand/walter-friends/friends-dambi-bg.png') no-repeat center;}
.walter .friends.seal .f-img {display: inline-block; width:554px; height:554px; background: url('../image/brand/walter-friends/friends-seal-bg.png') no-repeat center;}
.walter .friends.noon .f-img {display: inline-block; width:522px; height:522px; background: url('../image/brand/walter-friends/friends-noon-bg.png') no-repeat center;}
.walter .friends .f-img-name {position: absolute; width:100%; top:46px; line-height: 1.1;}
.walter .friends .f-img-name span {display:block;}
.walter .friends .f-img img {position: absolute; top:0; left:0; right:0; bottom:0;}
.walter .friends .f-img .default {opacity: 1;}
.walter .friends .f-img .active {opacity: 0;}
.walter .friends .f-img:hover .default {opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.walter .friends .f-img:hover .active {opacity: 1; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.walter .friends .f-info {letter-spacing: -0.025em;}
.walter .friends.walter .f-info {margin-left:41px;}
.walter .friends.dambi .f-info {margin-top:75px; margin-right:35px;}
.walter .friends.noon .f-info {margin-top:12px; margin-left:55px;}
.walter .friends .f-name {font-weight: 700;}
.walter .friends .f-name .f-kr {color:#2c82b9; font-size:36px;}
.walter .friends .f-name .f-en {color:#4a9ed3; font-family:"brandon-grotesque"; font-size:36px; letter-spacing: -0.025em;}
.walter .friends .f-name .f-kr ~ .f-en,
.walter .friends .f-name .f-en ~ .f-kr {padding-left:10px; padding-right:10px;}
.walter .friends .f-info .f-name + p {color:#3c3c3c; font-size:20px; line-height: 28px; letter-spacing: -0.025em;}
.walter .friends .f-hashtag {margin-top:14px;}
.walter .friends .f-hashtag span {display: inline-block; height:23px; margin-bottom:3px; padding:0 3px 0 2px; color:#fff; font-size:18px; line-height: 23px; letter-spacing: -0.025em; background:#55a1d2;}
.walter .friends.dambi .f-hashtag span {background:#368bc3;}
.walter .friends.seal .f-hashtag span {background:#2276ab;}
.walter .friends.noon .f-hashtag span {background:#2e729e;}

.walter .friends .f-hashtag span ~ span {margin-left:3px;}
.walter .friends .f-detail {width:653px; margin-top: 41px; background: #f8fbfc; border:2px solid #c0dde7; border-radius: 14px; box-sizing: border-box;}
.walter .friends .inner-right .f-detail {text-align: left;}
.walter .friends .f-detail .btn-wrap,
.walter .friends .f-detail .detail-btn {display: none;}
.walter .friends .f-detail dl {position: relative; padding:25px 39px 20px; color:#575757; font-size:18px; line-height: 28px; letter-spacing: -0.025em;}
.walter .friends .f-detail dl dt {position: absolute; display: inline-block; width:95px; height:38px; top:-5px; left:-28px; color:#fff; font-size:16px; font-weight:600; line-height: 38px; text-align: center; background: url('../image/brand/walter-friends/friends-walter-tag01-01.png') no-repeat center top; background-size:95px 38px !important;}
.walter .friends .f-detail dl + dl dt {width:149px; height:36px; top:-5px; left:-28px; color:#fff; font-size:16px; font-weight:600; line-height: 36px; text-align: center; background: url('../image/brand/walter-friends/friends-walter-tag01-02.png') no-repeat center top; background-size:149px 36px !important;}
.walter .friends.dambi .f-detail dl dt {background: url('../image/brand/walter-friends/friends-walter-tag02-01.png') no-repeat center top;}
.walter .friends.dambi .f-detail dl + dl dt {background: url('../image/brand/walter-friends/friends-walter-tag02-02.png') no-repeat center top;}
.walter .friends.seal .f-detail dl dt {background: url('../image/brand/walter-friends/friends-walter-tag03-01.png') no-repeat center top;}
.walter .friends.seal .f-detail dl + dl dt {background: url('../image/brand/walter-friends/friends-walter-tag03-02.png') no-repeat center top;}
.walter .friends.noon .f-detail dl dt {background: url('../image/brand/walter-friends/friends-walter-tag04-01.png') no-repeat center top;}
.walter .friends.noon .f-detail dl + dl dt {background: url('../image/brand/walter-friends/friends-walter-tag04-02.png') no-repeat center top;}
.walter .friends .f-detail dl ul li {position: relative; padding-left:10px; word-break: keep-all;}
.walter .friends .f-detail dl ul li:before {position: absolute; display:block; top:13px; left:0; width:2px; height:2px; background:#82b9d5; content: '';}
.walter .friends.seal .f-info {margin-top:-25px; text-align: center;}
.walter .friends.seal .f-info .half {display:inline-block; width:513px; text-align: right;}
.walter .friends.seal .f-info .half + .half {display:inline-block; width:540px; margin-left:178px; text-align: left;}
.walter .friends.seal .f-detail {width:100%; text-align: left;}
.walter .friends.seal .half + .half .f-detail dl {padding:25px 25px 20px 27px;}

.walter-friends-wallpaper {background:#f8fbfc;}
.wallpaper-inner {max-width:1920px; margin:0 auto; padding:127px 0 164px; }
.walter-friends-wallpaper .title {margin-left:100px; padding-left:40px; color:#253867; font-size:30px; font-weight: 700; background:url('../image/brand/walter-friends/wallpaper-tit.png') no-repeat left center;}

.walter-friends-wallpaper .wallpaper-slick {max-width:1920px; padding-left:100px; padding-right:100px; box-sizing: border-box;}
.walter-friends-wallpaper .slick-slide {position:relative; }
.walter-friends-wallpaper .wallpaper-slick .slick-slide .slick-img {padding:15px;}
.walter-friends-wallpaper .more-btn {position:absolute; display:block; width:58px; height:58px; right:30px; bottom:29px; background:url('../image/brand/walter-friends/wallpaper-more.png') no-repeat center; background-size:58px; background-size:contain;}
.walter-friends-wallpaper .slick-arrow {font-size: 0;}
.walter-friends-wallpaper .slick-next {position: absolute; top:50%; right:-80px; width:29px; height:55px; background:url('../image/brand/walter-friends/wallpaper-arr-r.png') no-repeat center; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%);transform: translate(-50%, 0%); }
.walter-friends-wallpaper .slick-prev {position: absolute; top:50%; left:-50px; width:29px; height:55px; background:url('../image/brand/walter-friends/wallpaper-arr-l.png') no-repeat center; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%);transform: translate(-50%, 0%); }
.walter-friends-wallpaper .slick-disabled {display: none !important;}

.wallpaper-popup-wrap {display:none; position: absolute; top:0; left: 0; right:0; bottom:0; background:rgba(11, 10, 10, 0.7); z-index: 100; }
.wallpaper-popup-wrap.active {display:block;}
.wallpaper-popup_box {position: fixed; overflow: hidden; top:50%; left:50%; width: 872px; height:745px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); background:url('../image/brand/walter-friends/wallpaper-popup-bg.jpg') no-repeat center; border:2px solid #6fc4e4; box-sizing: border-box;}
.wallpaper-popup_box .inner {overflow:hidden; padding:36px 0px 30px;}
.wallpaper-popup_box .popup-slick-container {width:100%; height:100%; box-sizing: border-box;}
.wallpaper-popup_box .slick-wrapper {width:100%;}
.wallpaper-popup_box .slick-initialized .slick-slide {overflow: hidden;}
.wallpaper-popup_box .slick-initialized .slick-slide .slick-bottom {display: none;}
.wallpaper-popup_box .slick-slide.slick-active .slick-bottom {display: block;}
.wallpaper-popup_box .slick-list {height:660px; width:868px}
.wallpaper-popup_box .slick-cont {text-align: center;}
.wallpaper-popup_box .slick-tit {color:#282641; font-size:26px; font-weight: 700; letter-spacing: -0.025em;}
.wallpaper-popup_box .slick-tit em {color:#3378a4}
.wallpaper-popup_box .slick-img {display: inline-block; width:235px; margin-top:22px;}
.wallpaper-popup_box .slick-bottom {width:257px; margin:41px auto 0;}
.wallpaper-popup_box .slick-bottom:after{display:block; content: ''; clear: both;}
.wallpaper-popup_box .slick-bottom .mobile {float: left; width:160px; height:40px; padding-left:45px; background:url('../image/brand/walter-friends/wallpaper-mobile-icon.png') no-repeat center left; background-size: 21px 37px; text-align: left;}
.wallpaper-popup_box .slick-bottom .mobile strong {display: block; color:#282641; font-size:18px; line-height: 1;}
.wallpaper-popup_box .slick-bottom .mobile span {color:#969696; font-family:"brandon-grotesque"; font-size:16px;}
.wallpaper-popup_box .slick-bottom a {display: block; float:right; width:40px; height:40px; background:url('../image/brand/walter-friends/wallpaper-download.png') no-repeat center; background-size:40px;}
.wallpaper-popup_box .slick-arrow {font-size:0;}
.wallpaper-popup_box .slick-next {position: absolute; top:50%; right:26px; width:22px; height:48px; background:url('../image/brand/walter-friends/pop-wallpaper-arr-r.png') no-repeat center; background-size:22px 48px; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%);transform: translate(-50%, 0%); z-index: 10;}
.wallpaper-popup_box .slick-prev {position: absolute; top:50%; left:26px; width:22px; height:48px;  background:url('../image/brand/walter-friends/pop-wallpaper-arr-l.png') no-repeat center;background-size:22px 48px; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%);transform: translate(-50%, 0%); z-index: 10;}
.wallpaper-popup_box .slick-disabled {display: none !important;}
.wallpaper-popup_box .popup-close {position: absolute; top:0; right:0; z-index: 10;}

@media only all and (max-width: 1920px){
    .intro-background {background-size:contain;}
    .story-background {background-size:contain;}
    .walter-friends-wallpaper .wallpaper-slick {padding-left:100px; padding-left:5.2083vw; padding-right:100px; padding-right:5.2083vw;}
    .walter-friends-wallpaper .wallpaper-slick .slick-slide .slick-img {padding:15px; padding:0.7812vw;}
    .walter-friends-wallpaper .more-btn {width:58px; width:3.0208vw; height:58px; height:3.0208vw; right:30px; right:1.5625vw; bottom:29px; bottom:1.5104vw; background-size:3.0208vw;}
    .walter-friends-wallpaper .slick-next {right:-80px; right:-4.1666vw; width:29px; width:1.5104vw; height:55px; height:2.8645vw; background-size:cover;}
    .walter-friends-wallpaper .slick-prev {left:-50px; left:-2.6041vw; width:29px; width:1.5104vw; height:55px; height:2.8645vw;  background-size:cover;}
}

@media only all and (max-width: 1440px){

    .walter-friends-intro .logo h1 {padding-top:92px; padding-top:6.3888vw; padding-bottom:40px; padding-bottom:2.7777vw;}
    .walter-friends-intro .logo h1 img {width:290px; width:20.1388vw; height:203px; height:14.0972vw;}
    .walter-friends-intro .logo .logo-img {padding-top:92px; padding-top:6.3888vw; padding-bottom:40px; padding-bottom:2.7777vw;}
    .walter-friends-intro .logo .logo-img img {width:290px; width:20.1388vw; height:203px; height:14.0972vw;}
    .walter-friends-intro .title h2 {font-size:24px; font-size:1.6666vw;}
    .walter-friends-intro .title h2 span:after {height:16px; height:1.1111vw; right:-2px; right:-0.1388vw; bottom:5px; bottom:0.3472vw; left:-3px; left:-0.2083vw;}
    .walter-friends-intro .title p {margin-top:3px; margin-top:0.2083vw; font-size:18px; font-size:1.25vw; line-height: 28px; line-height:1.9444vw;}
    .walter-friends-inner .walter.st01 {width:48px; width:3.3333vw; height:69px; height:4.7916vw; top:-105px; top:-7.2916vw; left:329px; left:22.8472vw;}
    .walter-friends-inner .walter.st02 {width:61px; width:4.2361vw; height:69px; height:4.7916vw; top:5px; top:0.3472vw; left:579px; left:40.2083vw;}
    .walter-friends-inner .walter.st03 {width:57px; width:3.9583vw; height:61px; height:4.2361vw; top:-113px; top:-7.8472vw; left:1051px; left:72.9861vw;}
    .walter-friends-inner .note1 {width:15px; width:1.0416vw; height:17px; height:1.1805vw;}
    .walter-friends-inner .note2 {width:17px; width:1.1805vw; height:17px; height:1.1805vw;}
    .walter-friends-inner .note3 {width:17px; width:1.1805vw; height:17px; height:1.1805vw;}
    .walter-friends-inner [class*='note'].st01 {top:52px; top:3.6111vw; left:264px; left:18.3333vw;}
    .walter-friends-inner [class*='note'].st02 {top:120px; top:8.3333vw; left:465px; left:32.2916vw;}
    .walter-friends-inner [class*='note'].st03 {top:28px; top:1.9444vw; left:684px; left:47.5vw;}
    .walter-friends-inner [class*='note'].st04 {top:-36px; top:-2.5vw; left:798px; left:55.4166vw;}
    .walter-friends-inner [class*='note'].st05 {top:46px; top:3.1944vw; left:868px; left:60.2777vw;}
    .walter-friends-inner [class*='note'].st06 {top:147px; top:10.2083vw; left:1166px; left:80.9722vw;}
    
    .walter-friends-inner .walking-wrap {width:1440px; width:100vw; margin-top:71px; margin-top:4.9305vw; padding-top:374px; padding-top:25.9722vw;}
    .walter-friends-inner .walking {width:1440px; width:100vw;}
    .walter-friends-inner .flag {width:132px; width:9.1666vw; height:218px; height:15.1388vw; top:69px; top:4.7916vw; left:286px; left:19.8611vw; -webkit-animation: flagAnim1440 2s linear infinite; -moz-animation: flagAnim1440 2s linear infinite;  animation: flagAnim1440 2s linear infinite;} 

    .walter-friends-story {padding-top:25px; padding-top:1.7361vw; padding-bottom:253px; padding-bottom:17.5694vw;}
    .walter-friends-story .inner {width:76.3888vw;}
    .walter-friends-story .story-box {padding:12px 16px; padding:0.8333vw 1.1111vw; border-radius:14px; border-radius:0.9722vw;}
    .walter-friends-story .story-box-inner {padding:43px 20px 52px; padding:2.9861vw 1.3888vw 3.6111vw; font-size:18px; font-size:1.25vw; line-height:25px; line-height: 1.7361vw; border-radius: 15px; border-radius: 1.0416vw;}
    .walter-friends-story .story-box-inner p ~ p {margin-top:23px; margin-top:1.5972vw;}
    .walter-friends-story .blue-line {background:#b4cdff99;}
    .walter-friends-story .story-friends {width:134px; width:9.3055vw; right:-121px; right:-8.4027vw;}
    .walter .friends-bg {top:-94px; top:-6.5277vw;}
    .walter .friends-bg + .friends-bg {padding-bottom:130px; padding-bottom:9.0277vw;}
    .walter .friends.walter {padding-top:175px; padding-top:12.1527vw;}
    .walter .friends.dambi {padding-top:145px; padding-top:10.0694vw;}
    .walter .friends.seal {padding-top:94px; padding-top:6.5277vw;}
    .walter .friends.noon {padding-top:187px; padding-top:12.9861vw;}
    
    .walter .friends.walter .f-img {width:476px; width:33.0555vw; height:476px; height:33.0555vw; background-size:33.0555vw;}
    .walter .friends.dambi .f-img {width:625px; width:43.4027vw; height:625px; height:43.4027vw; background-size:43.4027vw;}
    .walter .friends.seal .f-img {width:554px; width:38.4722vw; height:554px; height:38.4722vw; background-size:38.4722vw;}
    .walter .friends.noon .f-img {width:522px; width:36.25vw; height:522px; height:36.25vw; background-size:36.25vw;}
    .walter .friends .f-img-name {top:46px; top:3.1944vw;}
    .walter .friends.walter .f-info {margin-left:41px; margin-left:2.8472vw;}
    .walter .friends.dambi .f-info {margin-top:75px; margin-top:5.2083vw; margin-right:35px; margin-right:2.4305vw;}
    .walter .friends.noon .f-info {margin-top:12px; margin-top:0.8333vw; margin-left:55px; margin-left:3.8194vw;}
    .walter .friends .f-name .f-kr {font-size:36px; font-size:2.5vw;}
    .walter .friends .f-name .f-en {font-size:36px; font-size:2.5vw;}
    .walter .friends .f-name .f-kr ~ .f-en,
    .walter .friends .f-name .f-en ~ .f-kr {padding-left:10px; padding-left:0.6944vw; padding-right:10px; padding-right:0.6944vw;}
    .walter .friends .f-info .f-name + p {font-size:20px; font-size:1.3888vw; line-height: 28px; line-height:1.9444vw;}
    .walter .friends .f-hashtag {margin-top:14px; margin-top:0.9722vw;}
    .walter .friends .f-hashtag span {height:23px; height:1.5972vw; margin-bottom:3px; margin-bottom:0.2083vw; padding:0 3px 0 2px; padding:0 0.2083vw 0 0.1388vw; font-size:18px; font-size:1.25vw; line-height: 23px; line-height:1.5972vw;}

    .walter .friends .f-hashtag span ~ span {margin-left:3px; margin-top:0.2083vw}
    .walter .friends .f-detail {width:653px; width:45.3472vw; margin-top: 41px; margin-top:2.8472vw; border:2px solid #c0dde7; border:0.1388vw solid #c0dde7; border-radius: 14px; border-radius: 0.9722vw;}
    .walter .friends .f-detail dl {padding:25px 39px 20px; padding:1.7361vw 2.7083vw 1.3888vw; font-size:18px; font-size:1.25vw; line-height: 28px; line-height:1.9444vw;}
    
    .walter .friends .f-detail dl dt {width:95px; width:6.5972vw; height:38px; height:2.6388vw; top:-5px; top:-0.3472vw; left:-28px; left:-1.9444vw; font-size:16px; font-size:1.1111vw; line-height: 38px; line-height: 2.6388vw; background: url('../image/brand/walter-friends/friends-walter-tag01-01.png') no-repeat center top; background-size:6.5972vw 2.6388vw !important;}
    .walter .friends .f-detail dl + dl dt {width:149px; width:10.3472vw; height:36px; height:2.5vw; top:-5px; top:-0.3472vw; left:-28px; left:-1.9444vw; font-size:16px; font-size:1.1111vw; line-height: 36px; line-height:2.5vw; background: url('../image/brand/walter-friends/friends-walter-tag01-02.png') no-repeat center top; background-size:10.3472vw 2.5vw !important;}

    .walter .friends .f-detail dl ul li {padding-left:10px; padding-left:0.6944vw;}
    .walter .friends .f-detail dl ul li:before {top:13px; top:0.9027vw; width:2px; width:0.1388vw; height:2px; height:0.1388vw;}
    .walter .friends.seal .f-info {margin-top:-25px; margin-top:-1.7361vw;}
    .walter .friends.seal .f-info .half {width:513px; width:35.625vw;}
    .walter .friends.seal .f-info .half + .half {width:540px; width:37.5vw; margin-left:178px; margin-left:12.3611vw;}
    .walter .friends.seal .half + .half .f-detail dl {padding:25px 25px 20px 27px; padding:1.7361vw 1.7361vw 1.3888vw 1.875vw;}

    .wallpaper-inner {padding:127px 0 164px; padding:8.8194vw 0 8.5416vw;}
    .walter-friends-wallpaper .title {margin-left:100px; margin-left:6.9444vw; padding-left:40px; padding-left:2.7777vw; font-size:30px; font-size:2.0833vw; background-size:28px 38px; background-size:1.9444vw 2.6388vw;}
    
    .wallpaper-popup_box {width: 872px; width:60.5555vw; height:745px; height:51.7361vw; border:2px solid #6fc4e4; border:0.1388px solid #6fc4e4; background-size: 868px 750px; background-size: 60.2777vw 52.0833vw;}
    .wallpaper-popup_box .inner {padding:36px 0px 30px; padding:2.5vw 0 2.0833vw;}
    .wallpaper-popup_box .slick-list {width:868px; width:60.2777vw; height:660px; height:45.8333vw; overflow: visible;}
    .wallpaper-popup_box .slick-cont {width:868px; width:60.2777vw; height:652px; height:45.2777vw;}
    .wallpaper-popup_box .slick-tit {font-size:26px; font-size:1.8055vw;}
    .wallpaper-popup_box .slick-img {width:235px; width:16.3194vw; margin-top:22px; margin-top:1.5277vw;}
    .wallpaper-popup_box .slick-bottom {width:257px; width:17.8472vw; margin:41px auto 0; margin:1.8472vw auto 0;}
    .wallpaper-popup_box .slick-bottom .mobile {width:160px; width:11.1111vw; height:40px; height:2.7777vw; padding-left:45px; padding-left:3.125vw; background-size: 21px 37px;  background-size: 1.4583vw 2.5694vw;}
    .wallpaper-popup_box .slick-bottom .mobile strong {font-size:18px; font-size:1.25vw;}
    .wallpaper-popup_box .slick-bottom .mobile span {font-size:16px; font-size:1.1111vw;}
    .wallpaper-popup_box .slick-bottom a {width:40px; width:2.7777vw; height:40px; height:2.7777vw; background-size:40px; background-size:2.7777vw;}
    .wallpaper-popup_box .slick-next {right:26px; right:1.8055vw; width:22px; width:1.5277vw; height:48px; height:3.3333vw; background-size:22px 48px; background-size: 1.5277vw 3.3333vw;}
    .wallpaper-popup_box .slick-prev {left:26px; left:1.8055vw; width:22px; width:1.5277vw; height:48px; height:3.3333vw; background-size:22px 48px; background-size: 1.5277vw 3.3333vw;}
    
}

@media only all and (max-width: 767px){
    .story-background {background:#a8d2ed url('../image/brand/walter-friends/story-bg_mo.png') no-repeat center bottom; background-size: 100vw; }
    .walter-friends-intro .logo h1 {padding-top:82px; padding-top:10.9333vw; padding-bottom:54px; padding-bottom:7.2vw;}
    .walter-friends-intro .logo h1 img {width:320px; width:42.6666vw; height:224px; height:29.8666vw;}
    .walter-friends-intro .logo .logo-img {padding-top:82px; padding-top:10.9333vw; padding-bottom:54px; padding-bottom:7.2vw;}
    .walter-friends-intro .logo .logo-img img {width:320px; width:42.6666vw; height:224px; height:29.8666vw;}
    .walter-friends-intro .title {padding:0; margin-bottom:-44px; margin-bottom:-6.1111vw; word-break: keep-all;}
    .walter-friends-intro .title h2 {padding:0 88px; padding:0 12.2222vw; font-size:38px; font-size:5.0666vw; line-height:1.5;}
    .walter-friends-intro .title h2 span:after {height:100%; right:0; bottom:0; left:0;}
    .walter-friends-intro .title p {margin-top:31px; margin-top:4.1333vw; font-size:32px; font-size:4.2666vw; line-height: 46px; line-height:6.1333vw;}
    .walter-friends-intro .intro-bg img {width:100%; height:auto;}
    .walter-friends-inner .walter.st01 {width:56px; width:7.4666vw; height:80px; height:10.6666vw; top:-580px; top:-77.3333vw; left:75px; left:10vw;}
    .walter-friends-inner .walter.st02 {width:61px; width:8.1333vw; height:69px; height:9.2vw; top:-96px; top:-12.8vw; left:185px; left:24.6666vw;}
    .walter-friends-inner .walter.st03 {width:63px; width:8.4vw; height:68px; height:9.0666vw; top:-351px; top:-46.8vw; left:654px; left:87.2vw;}
    .walter-friends-inner .note1 {width:18px; width:2.4vw; height:20px; height:2.6666vw;}
    .walter-friends-inner .note2 {width:20px; width:2.6666vw; height:19px; height:2.5333vw;}
    .walter-friends-inner .note3 {width:20px; width:2.6666vw; height:20px; height:2.6666vw;}
    .walter-friends-inner [class*='note'].st01 {display: none;}
    .walter-friends-inner [class*='note'].st02 {top:0; left:67px; left:8.9333vw;}
    .walter-friends-inner [class*='note'].st03 {top:10px; top:1.3333vw; left:303px; left:40.4vw;}
    .walter-friends-inner [class*='note'].st04 {top:-75px; top:-9.3333vw; left:432px; left:57.6vw;}
    .walter-friends-inner [class*='note'].st05 {top:23px; top:3.0666vw; left:515px; left:68.6666vw;}
    .walter-friends-inner [class*='note'].st06 {top:50px; top:6.6666vw; left:686px; left:91.4666vw;}
    .walter-friends-inner .walking-wrap {margin-top:141px; margin-top:18.8vw; padding-top:176px; padding-top:23.4666vw;}
    .walter-friends-inner .flag {width:100px; width:13.3333vw; height:166px; height: 22.1333vw; top:53px; top:7.0666vw; left:37px; left:4.9333vw; -webkit-animation: flagAnim750 2s linear infinite; -moz-animation: flagAnim750 2s linear infinite;  animation: flagAnim750 2s linear infinite;} 
    .walter .story-friends-bg img {width:100%; height:auto;}
    .walter-friends-story {padding-bottom:292px; padding-bottom:38.9333vw;}
    .walter-friends-story .inner {width:auto; margin:39px 40px 0; margin:5.2vw 5.3333vw 0;}
    .walter-friends-story .story-box {padding:15px; padding:2vw; border-radius: 15px; border-radius:2vw;}
    .walter-friends-story .story-box-inner {padding:60px 30px; padding:8vw 4vw; font-size:30px; font-size:4vw; line-height: 40px; line-height:5.3333vw; border-radius: 15px; border-radius:2vw;}
    .walter-friends-story .story-box-inner p ~ p {margin-top:38px; margin-top:5.0666vw;}
    .walter .friends-bg {top:0; background:none;}
    .walter .friends.walter {padding-top:0;}
    .walter .friends ~ .friends,
    .walter .friends.seal {padding-top:158px; padding-top:21.0666vw;}
    .walter .friends .inner-left {width:100%;}
    .walter .friends .inner-left .f-img {float:none; margin: 0 auto;}
    .walter .friends .inner-left .f-info,
    .walter .friends.dambi .f-info,
    .walter .friends.seal .f-info {float:none; margin: 20px auto 0; margin:2.6666vw auto 0; padding:0 40px; padding:0 5.3333vw; text-align: center;}
    .walter .friends.walter {background:url('../image/brand/walter-friends/friends-walter-bg_mo.png') no-repeat center top; background-size: 100%;}
    .walter .friends.dambi {background:url('../image/brand/walter-friends/friends-dambi-bg_mo.png') no-repeat center top; background-size: 100%;}
    .walter .friends.seal {background:url('../image/brand/walter-friends/friends-seal-bg_mo.png') no-repeat center top; background-size: 100%;}
    .walter .friends.noon {background:url('../image/brand/walter-friends/friends-noon-bg_mo.png') no-repeat center top; background-size: 100%;}
    .walter .friends.walter .f-img {width:514px; width:68.5333vw; height:514px; height:68.5333vw; background-size:514px; background-size:68.5333vw;}
    .walter .friends .f-name .f-kr {font-size:55px; font-size:7.3333vw;}
    .walter .friends .f-name .f-en {font-size:55px; font-size:7.3333vw;}
    .walter .friends .f-name .f-kr ~ .f-en,
    .walter .friends .f-name .f-en ~ .f-kr {padding-left:15px; padding-left:2vw; padding-right:15px; padding-right:2vw;}
    .walter .friends .f-info .f-name + p {font-size:34px; font-size:4.5333vw; line-height:42px; line-height:5.6vw;}
    .walter .friends .f-hashtag {margin-top:20px; margin-top:2.6666vw;}
    .walter .friends .f-hashtag span {height:38px; height:5.0666vw; margin-top:0; margin-bottom: 6px; margin-bottom:0.9722vw; padding:0 8px; padding:0 1.0666vw; font-size:30px; font-size:4vw; line-height:38px; line-height: 5.0666vw;}
    .walter .friends .f-hashtag span ~ span {margin-left:5px; margin-left:0.6666vw; margin-top:0;}
    .walter .friends .f-detail {width:100%; margin-top:40px; margin-top:5.3333vw; border: 2px solid #c0dde7; border:0.2666vw solid #c0dde7; border-radius:14px; border-radius:1.8666vw;}
    .walter .friends .f-detail .btn-wrap {display:block; width:100%; height:90px; height:12vw; padding:0 35px; padding:0 4.6666vw; box-sizing: border-box;}
    .walter .friends .f-detail .detail-btn {display:block; width:100%; height:100%; text-align: center; background:url('../image/brand/walter-friends/detail-btn-open.png') no-repeat center right; background-size:35px 19px; background-size:4.6666vw 2.5333vw; box-sizing: border-box; font-family: "brandon-grotesque";}
    .walter .friends .f-detail .detail-btn span {color:#2c82b9; font-size:30px; font-size:4vw; font-weight: 700; letter-spacing: -0.05em;}
    .walter .friends .f-detail dl {display: none; padding:16px 20px 16px 30px; padding:2.1333vw 2.6666vw 2.1333vw 4vw; font-size: 30px; font-size:4vw; line-height: 38px; line-height:5.0666vw; text-align: left;}
    .walter .friends .f-detail dl ~ dl {margin-top:48px; margin-top:6.4vw; padding-bottom:57px; padding-bottom:7.6vw;}
    .walter .friends .f-detail dl dt {width:156px; width:21.6666vw; height:52px; height:7.2222vw; top:-40px; top:-5.3333vw; left:-12px; left:-1.6vw; font-size:26px; font-size: 3.4666vw; line-height:52px; line-height:7.2222vw; background-size: 156px 52px !important; background-size: 21.6666vw 7.2222vw !important;}
    .walter .friends .f-detail dl + dl dt {width:217px; width:30.1388vw; height:58px; top:-40px; top:-5.3333vw; left:-12px; left:-1.6vw;  height:8.0555vw; font-size:26px; font-size: 3.4666vw; line-height:58px; line-height:8.0555vw; background-size:217px 58px !important; background-size:30.1388vw 8.0555vw !important;}
    .walter .friends .f-detail dl + dl dd {margin-top:0.6944vw;}
    .walter .friends .f-detail dl ul li {padding-left:30px; padding-left:4vw;}
    .walter .friends .f-detail dl ul li:before {width:8px; width:1.0666vw; height:8px; height:1.0666vw; top:15px; top:2vw; border-radius: 50%;}
    .walter .friends .f-detail.open dl {display: block;}
    .walter .friends .f-detail.open .btn-wrap {padding:0 30px; padding:0 4vw; text-align: right;}
    .walter .friends .f-detail.open .detail-btn {display: inline-block; width:45px; width:6vw; height: 100%; background:url('../image/brand/walter-friends/detail-btn-close.png') no-repeat center; background-size:35px 19px; background-size:4.6666vw 2.5333vw;}
    .walter .friends .f-detail.open .detail-btn span {display: none;}
    .walter .friends.active .f-img .default {opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
    .walter .friends.active .f-img .active {opacity: 1; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
    .walter .friends .f-img:hover .default {opacity: 1; -webkit-transition: none; -o-transition: none; transition: none;}
    .walter .friends .f-img:hover .active {opacity: 0; -webkit-transition: none; -o-transition: none; transition: none;}
    .walter .friends.dambi .f-img {float:none; width:623px; width:83.0666vw; height:623px; height:83.0666vw; margin:0 auto; background-size:623px; background-size: 83.0666vw;}
    .walter .friends.seal .f-img {width:609px; width:81.2vw; height:609px; height:81.2vw; background-size:609px; background-size:81.2vw;}
    .walter .friends .f-img-name {top:52px; top:7.2222vw;}
    .walter .friends .f-img-name .f-kr {font-size:45px; font-size:6vw;}
    .walter .friends .f-img-name .f-en {font-size:45px; font-size:6vw;}
    .walter .friends.seal .f-info .half {width:100%; padding-bottom: 85px; padding-bottom:11.3333vw;}
    .walter .friends.seal .f-info .half + .half {width:100%; margin:0; padding-top:85px; padding-top:11.3333vw; padding-bottom:0; border-top:4px solid #c3dbea; border-top:0.5333vw solid #c3dbea;}
    .walter .friends.seal .f-info .half .half-bg {padding-right: 200px; padding-right:26.6666vw; background:url('../image/brand/walter-friends/friends-sue.png') no-repeat center right; background-size:168px 205px; background-size:22.4vw 27.3333vw;}
    .walter .friends.seal .f-info .half + .half .half-bg {padding-left: 192px; padding-left:25.6vw; padding-right: 0; background:url('../image/brand/walter-friends/friends-mae.png') no-repeat center left; background-size:190px 196px; background-size:25.3333vw 26.1333vw;}
    .walter .friends.seal .f-info .half .f-hashtag {text-align: center;}
    .walter .friends.seal .half .f-detail dl,
    .walter .friends.seal .half + .half .f-detail dl { padding: 16px 20px 16px 30px; padding:2.1333vw 2.6666vw 2.1333vw 4vw;}
    .walter .friends.seal .half .f-detail dl ~ dl,
    .walter .friends.seal .half + .half .f-detail dl ~ dl { padding: 16px 20px 57px 30px; padding:2.1333vw 2.6666vw 7.6vw 4vw;}
    .walter .friends.noon .inner-left .f-img {width:575px; width:76.6666vw; height:575px; height:76.6666vw; background-size: 575px; background-size:76.6666vw;}
    .walter .friends-bg + .friends-bg {margin-bottom:0; background:none;}

    .walter-friends-wallpaper {padding:130px 0 209px; padding:17.3333vw 0 27.8666vw;}
    .walter-friends-wallpaper .title {margin-left:40px; margin-left:5.3333vw; padding-left:40px; padding-left:5.3333vw; font-size:40px; font-size: 5.3333vw; background-size:25px 34px; background-size:3.3333vw 4.5333vw;}
    .walter-friends-wallpaper .slick-container {margin-left:40px;padding:0;}
    .walter-friends-wallpaper .slick-list {max-width: 630px; height:511px;  overflow: visible;}
    .walter-friends-wallpaper .slick-slide {width: 630px !important; }
    .walter-friends-wallpaper .slick-slide .slick-img {width:580px; height:511px;}
    .walter-friends-wallpaper .more-btn {width:78px; height:78px; right:55px; bottom:30px; background-size: 78px; background-size:contain;}
    .walter-friends-wallpaper .slick-next {width:80px; height:38px; top:inherit; right:4px; bottom:-65px; background: url('../image/brand/walter-friends/wallpaper-arr-r_mo.png') no-repeat center; background-size: 80px 38px;}
    .walter-friends-wallpaper .slick-prev {width:80px; height:38px; top:inherit; left:46px; bottom:-65px; background: url('../image/brand/walter-friends/wallpaper-arr-l_mo.png') no-repeat center; background-size: 80px 38px;}
    .walter-friends-wallpaper .slick-counter {position: absolute; width:60px; bottom:-75px; left:44%; font-size:30px; font-size:4vw; color:#253867; font-family:"brandon-grotesque"; font-weight: 700;}
    .walter-friends-wallpaper .slick-counter .current {color:#8d98b3;}

    .wallpaper-popup_box {width:670px; width:89.3333vw; height:1000px; height:138.8888vw; background-image:none; background-color:#f7fbfc; border:1px solid #6fc4e3; box-sizing: border-box;}
    .wallpaper-popup_box .inner {padding:85px 0 0; padding:9.3333vw 0 0;}
    .wallpaper-popup_box .popup-close {width:62px; width:8.2666vw; height:62px; height:8.2666vw;}
    .wallpaper-popup_box .slick-list {width:668px; width:89.0666vw; height:921px; height:124.8vw;}
    .wallpaper-popup_box .slick-cont {width:668px; width:89.0666vw; height:921px; height:124.8vw;}
    .wallpaper-popup_box .slick-tit {font-size:40px; font-size:5.3333vw; line-height: 1.25;}
    .wallpaper-popup_box .slick-img {width:310px; width:41.3333vw; margin-top:34px; margin-top:4.5333vw;}
    .wallpaper-popup_box .slick-next {right:43px; right:5.7333vw; width:29px; width:3.8666vw; height:53px; height:7.0666vw; background-size:29px 53px; background-size:3.8666vw 7.0666vw;}
    .wallpaper-popup_box .slick-prev {left:43px; left:5.7333vw; width:29px; width:3.8666vw; height:53px; height:7.0666vw; background-size:29px 53px; background-size:3.8666vw 7.0666vw;}
    .wallpaper-popup_box .slick-bottom {width:309px; width:41.2vw;}
    .wallpaper-popup_box .slick-bottom .mobile {width:210px; width:22.8vw; height:65px; height:8.6666vw; padding-left:60px; padding-left:8vw; background:url('../image/brand/walter-friends/wallpaper-mobile-icon_mo.png') no-repeat center left; background-size:37px 65px; background-size:4.9333vw 8.6666vw;}
    .wallpaper-popup_box .slick-bottom .mobile strong {font-size:32px; font-size:4.2666vw;}
    .wallpaper-popup_box .slick-bottom .mobile span {font-size:25px; font-size:3.3333vw;}
    .wallpaper-popup_box .slick-bottom a {width:65px; width:8.6666vw; height:65px; height:8.6666vw; background:url('../image/brand/walter-friends/wallpaper-download_mo.png') no-repeat center; background-size: 65px; background-size:8.6666vw;}
    .wallpaper-popup_box .slick-tit em {display: block;}
}
@media only all and (max-width: 750px){
.wallpaper-inner {padding:0;}
.walter-friends-wallpaper .slick-container.mo_only {margin-top:70px; margin-top:9.3333vw; margin-left:40px; margin-left:5.3333vw; padding:0;}
.walter-friends-wallpaper .slick-list {max-width: 630px; max-width:84vw; height:511px; height:68.1333vw; overflow: visible;}
.walter-friends-wallpaper .slick-slide {width: 630px !important; width:84vw !important;}
.walter-friends-wallpaper .slick-slide .slick-img {width:580px; width:77.3333vw; height:511px; height:68.1333vw;}
.walter-friends-wallpaper .more-btn {width:78px; width:10.4vw; height:78px; height:10.4vw; right:55px; right:10.3333vw; bottom:30px; bottom:4vw; background-size: 78px; background-size:10.4vw;}
.walter-friends-wallpaper .slick-next {width:80px; width:10.6666vw; height:38px; height:5.0666vw; top:inherit; right:4px; right:0.5333vw; bottom:-65px; bottom:-8.6666vw; background: url('../image/brand/walter-friends/wallpaper-arr-r_mo.png') no-repeat center; background-size: 80px 38px; background-size:10.6666vw 5.0666vw;}
.walter-friends-wallpaper .slick-prev {width:80px; width:10.6666vw; height:38px; height:5.0666vw; top:inherit; left:46px; left:6.1333vw; bottom:-65px; bottom:-8.6666vw; background: url('../image/brand/walter-friends/wallpaper-arr-l_mo.png') no-repeat center; background-size: 80px 38px; background-size:10.6666vw 5.0666vw;}
.walter-friends-wallpaper .slick-counter {width:60px; width:8vw; bottom:-75px; bottom:-10vw; left:44%; font-size:30px; font-size:4vw; color:#253867; font-family:"brandon-grotesque"; font-weight: 700;}
}



.load01_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :1s;
    -moz-transition-delay :1s;
    -ms-transition-delay :1s;
    transition-delay :1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.load01_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :1s;
    -moz-transition-delay :1s;
    -ms-transition-delay :1s;
    transition-delay :1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.load02_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :2.5s;
    -moz-transition-delay :2.5s;
    -ms-transition-delay :2.5s;
    transition-delay :2.5s;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}
.load02_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :2.5s;
    -moz-transition-delay :2.5s;
    -ms-transition-delay :2.5s;
    transition-delay :2.5s;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}
.load03_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :4s;
    -moz-transition-delay :4s;
    -ms-transition-delay :4s;
    transition-delay :4s;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}
.load03_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :4s;
    -moz-transition-delay :4s;
    -ms-transition-delay :4s;
    transition-delay :4s;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}

/* IE intro */

.IE .load01_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :3s;
    -moz-transition-delay :3s;
    -ms-transition-delay :3s;
    transition-delay :3s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.IE .load01_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :3s;
    -moz-transition-delay :3s;
    -ms-transition-delay :3s;
    transition-delay :3s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.IE .load02_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :4s;
    -moz-transition-delay :4s;
    -ms-transition-delay :4s;
    transition-delay :4s;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}
.IE .load02_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :4s;
    -moz-transition-delay :4s;
    -ms-transition-delay :4s;
    transition-delay :4s;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}
.IE .load03_as {
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition-delay :6s;
    -moz-transition-delay :6s;
    -ms-transition-delay :6s;
    transition-delay :6s;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}
.IE .load03_to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay :6s;
    -moz-transition-delay :6s;
    -ms-transition-delay :6s;
    transition-delay :6s;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}