@import url('../../../../css/common.css');
@import url('/kr/css/webfont.css');

body, ul, li, ol, dl, dt, dd, p, div, h1, h2, h3, h4, h5{margin:0px;padding:0;list-style:none}
body{overflow-x:hidden;color:#000}
::selection{color:#000 !important}
#section{width:100%;height:100%;-webkit-text-size-adjust:none;font-size:15px;font-family:'samsungonelatin400';text-align:justify;line-height:24px;letter-spacing:-0.5px}
img{width:100%}
#section > div{background-color:#fff;background-size:100% auto}
#section div > p span{letter-spacing:0}
#section .main .close{width:45px;height:45px;display:block;position:fixed;top:0;right:0;z-index:1000}
#section > a img{display:block;width:100%}
#section .sub> div{position:relative}
#section .sub .back{display:block;position:fixed;width:15%;height:auto;left:0;top:0;z-index:10}

/* info_rotate */
.acc_tag{position:absolute;left:-9999px;top:-9999px;visibility:hidden;height:0;width:0;text-indent:-9999px;font-size:0}
.show{display:block}
.hide{display:none}
.ib{display:inline-block}
.m_txt{margin:0 3%;padding:0 6.4%}

/* intro */
.video-intro{position:relative;height:136.25vw;padding-top:29.6vw;text-align:center;background:url(../img/bg-intro.jpg) no-repeat 50% 50%;background-size:cover;box-sizing:border-box;}
.video-intro h1{color:#9cfbef;font-size:39px;font-family:'samsungonelatin600';font-weight:normal;line-height:1;letter-spacing:2px}
.video-intro h1 span{display:block;color:#f8e069}
.video-intro .btn-video-intro{display:inline-block;width:52px;height:52px;margin:33px 0 35px 0;background:url(../img/btn-play-video.png) no-repeat;background-size:cover;}
.video-intro .btn-video-intro span{text-indent:-9999px;font-size:0;}
.video-intro p{font-size:16px;line-height:24px;color:#fff;}
.txt-intro{padding:25px 30px;font-size:15px;line-height:24px;}

/* section */
.sec-1{height:140.625vw;padding-top:90.4vw;background:url(../img/bg-playful-design.jpg) repeat;background-size:cover;text-align:center;box-sizing:border-box;}
.sec-1 dt{margin-bottom:15px;font-family:'samsungonelatin600';font-size:25px;line-height:1;letter-spacing:4px;color:#000;}

.sec-3{height:140.625vw;padding-top:98.4vw;background:url(../img/bg-useful-function.jpg) repeat;background-size:cover;text-align:center;box-sizing:border-box;}
.sec-3 dt{margin-bottom:15px;font-family:'samsungonelatin600';font-size:25px;line-height:1;letter-spacing:4px;color:#000;}

.sec-1 dt,
.sec-1 dd,
.sec-3 dt,
.sec-3 dd{position:relative;top:15vw;opacity:0;transition:all 0.5s ease-in;}

.sec-1.on dt,
.sec-1.on dd,
.sec-3.on dt,
.sec-3.on dd{top:0;opacity:1;}

.desc-gear360{padding-bottom:40px;}
.desc-gear360 dl{padding:0 30px;}
.desc-gear360 dt{margin:30px 0 18px 0;font-family:'samsungonelatin200';font-size:26px;line-height:30px;text-align:left;}
.desc-gear360 dt strong{display:block;margin-bottom:8px;font-family:'samsungonelatin1000';font-size:14px;line-height:14px;letter-spacing:3px;white-space:nowrap;}
.desc-gear360 li:first-child dt{margin-top:40px;}

.sec-4 .desc-gear360 .annotation{margin-top:15px;font-size:12px;line-height:16px;color:#666;}

.desc-playful-design li:nth-child(1) p:last-child{margin-top:30px;}

.desc-playful-design .continuous-grip{overflow:hidden;width:100%;background:url(../img/bg-playful-design02.gif) no-repeat 50% 50%;background-size:100% auto;}
.desc-playful-design .continuous-grip img{position:relative;left:100%;opacity:0;transition:all .8s .4s;}
.desc-playful-design .continuous-grip.on img{left:0;opacity:1;}

.desc-playful-design .family-look{position:relative;}
.desc-playful-design .family-look img{opacity:0;transition:all .8s .4s;}
.desc-playful-design .family-look img:nth-child(2){position:absolute;top:0;left:0;transition-delay:.8s;}
.desc-playful-design .family-look.on img{opacity:1;}

.desc-playful-design .iconic-design{position:relative;height:88.75vw;margin-top:20px;background:url(../img/img-playful-design04.jpg) no-repeat;background-size:cover;}
.desc-playful-design .iconic-design .ico{position:absolute;display:inline-block;width:15vw;transition: top 0.4s cubic-bezier(.17,.67,.73,1.77);opacity:0;}
.desc-playful-design .iconic-design .ico:nth-child(1){right:5%;top:22.5vw;transition-delay:0.2s;}
.desc-playful-design .iconic-design .ico:nth-child(2){right:37.5%;top:61.3vw;transition-delay:0.4s;}
.desc-playful-design .iconic-design.on .ico{opacity:1;}
.desc-playful-design .iconic-design.on .ico:nth-child(1){top:12.5vw;}
.desc-playful-design .iconic-design.on .ico:nth-child(2){top:51.3vw;}

.desc-useful-function .sns-live{position:relative;height:93.9vw;background:url(../img/img-useful-function01.jpg) no-repeat;background-size:cover;}
.desc-useful-function .sns-live .ico{position:absolute;display:inline-block;width:15vw;transition: top 0.4s cubic-bezier(.17,.67,.73,1.77);opacity:0;}
.desc-useful-function .sns-live .ico:nth-child(1){left:31.25vw;top:64.22vw;width:19.22vw;transition-delay:0.2s;}
.desc-useful-function .sns-live .ico:nth-child(2){right:11.09vw;top:75.78vw;width:10.78vw;transition-delay:0.4s;}
.desc-useful-function .sns-live.on .ico{opacity:1;}
.desc-useful-function .sns-live.on .ico:nth-child(1){top:54.22vw;}
.desc-useful-function .sns-live.on .ico:nth-child(2){top:65.78vw;}

.desc-useful-function .high-resolution{position:relative;}
.desc-useful-function .high-resolution p{width:1px;overflow:hidden;transition:width 0.8s .4s;}
.desc-useful-function .high-resolution p img{width:100vw;}
.desc-useful-function .high-resolution .photo2nd{position:absolute;top:0;left:0;opacity:0;}
.desc-useful-function .high-resolution span{position:absolute;bottom:0;right:0;width:50%;opacity:0;transition:opacity .2s 1.2s;}
.desc-useful-function .high-resolution.on p{width:100%;}
.desc-useful-function .high-resolution.on span{opacity:1;}
.desc-useful-function .high-resolution.on .photo2nd{animation: rolling 5s 4s infinite alternate;}

.desc-useful-function .fun-easy{position:relative;background:url(../img/bg-fun-easy.jpg) no-repeat;background-size:100% auto;}
.desc-useful-function .fun-easy img{opacity:0;}
.desc-useful-function .fun-easy .ico{position:absolute;display:inline-block;opacity:0;}
.desc-useful-function .fun-easy .ico:nth-child(2){left:14.84vw;top:4.69vw;width:17.81vw;}
.desc-useful-function .fun-easy .ico:nth-child(3){left:45.63vw;top:42.97vw;width:22.66vw;}
.desc-useful-function .fun-easy.on img{animation: fadein 1s 2s;animation-fill-mode: forwards;}
.desc-useful-function .fun-easy.on .ico:nth-child(2){animation: fadein .2s 2.6s;animation-fill-mode: forwards;}
.desc-useful-function .fun-easy.on .ico:nth-child(3){animation: fadein .2s 3s;animation-fill-mode: forwards;}


.outro{padding-bottom:40px;}
.outro dl{padding:0 30px;}
.outro dt{margin-bottom:10px;font-family:'samsungonelatin600';font-size:24px;line-height:28px;text-align:center;}
.outro .btn_area{margin-top:25px;text-align: center;}
.outro .btn_area img{width:100%;}
.outro .btn_area > span{display: inline-block;width:50%;box-sizing:border-box;}
.outro .btn_area > span:nth-child(1){padding-right:5px;}
.outro .btn_area > span:nth-child(2){padding-left:5px;}

.txt-ani{transition:all .8s .2s;}
.fade{opacity:0;}
.fade.on{opacity:1;}
.mv-up{position:relative;top:150px;}
.mv-up.on{top:0;}

@keyframes rolling {
    0% {opacity:0}
    30% {opacity:0}
    60% {opacity:1}
    100% {opacity:1}
}

@keyframes fadein {
    from{opacity:0;}
    to{opacity:1;}
}