@charset "utf-8";
/* 웹폰트 CSS */

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR');

@font-face {
    font-family: 'NanumMyeongjo';
    font-weight: 400;
    src: url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjo.eot);/* ie9 호환성 보기 */
    src: local("☺"), /* 로컬에서 그 어떤 폰트도 불러오지 않도록 한다. */
    url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjo.eot?#iefix) format('embedded-opentype'),/* IE 6-8 */
    url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjo.woff) format('woff'); /* 표준 브라우저 */
}

@font-face {
    font-family: 'NanumMyeongjo';
    font-weight: 700;
    src: url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjoBold.eot);/* ie9 호환성 보기 */
    src: local("☺"), /* 로컬에서 그 어떤 폰트도 불러오지 않도록 한다. */
    url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjoBold.eot?#iefix) format('embedded-opentype'),/* IE 6-8 */
    url(https://file.valofe.com/Valofe_file/web/fonts/NanumMyeongjo/NanumMyeongjoBold.woff) format('woff'); /* 표준 브라우저 */
}
@font-face {
    font-family: 'Noto Serif KR';
    font-weight: 400;
    src: url(https://file.valofe.com/Valofe_file/web/fonts/noto-serif-kr-v6-latin_korean/noto-serif-kr-v6-latin_korean-regular.eot);/* ie9 호환성 보기 */
    src: local("☺"), /* 로컬에서 그 어떤 폰트도 불러오지 않도록 한다. */
    url(https://file.valofe.com/Valofe_file//web/fonts/noto-serif-kr-v6-latin_korean/noto-serif-kr-v6-latin_korean-regular?#iefix) format('embedded-opentype'),/* IE 6-8 */
    url(https://file.valofe.com/Valofe_file//web/fonts/noto-serif-kr-v6-latin_korean/noto-serif-kr-v6-latin_korean-regular.woff) format('woff'); /* 표준 브라우저 */
}

:lang(tw) {font-family: 'FontAwesome', 'Microsoft JhengHei', sans-serif}
:lang(ko) {font-family: 'FontAwesome', 'Noto Serif KR', 'NanumMyeongjo', serif; word-break: keep-all;}
:lang(tr) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(fr) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(de) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(jp) {font-family: 'FontAwesome', 'osaka', 'noto sans', 'NotoKr', sans-serif}
:lang(en) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
/* :lang(ja) {font-family:osaka, sans-serif} */

/*  Reset CSS  */
html{scroll-behavior: smooth;}
*{box-sizing:border-box;}
*, body, div, ul, li { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}

/* CSS RESET 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
    font:12px/1.6 arial; color:#555;
    font-family:'Noto Serif KR', "NanumMyeongjo", serif;
    font-weight:400;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
}

h1{font-style:normal;font-weight:700;}
html{font-size: 16px;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block;
    -webkit-font-smoothing: antialiased;
}

ul, li{ list-style:none;}
a{
    margin:0;
    padding:0;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;
}
img{
    object-fit: cover;
    vertical-align:top;
}
hr{
    display:block;
    height:2px;
    border:0;
    margin:0;
    padding:0;
}
.skip-navi, .skip{position: absolute;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;visibility: hidden;}
.hidden{position:absolute;width:1px;height:1px;top:-1px;left:-1px;text-indent:-9999px;}
.clearfix{clear:both;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.mb-show{display:none;}
.mb-show2{display:none;}
.mb-show578{display:none;}
#wrapper{width:100%;overflow:hidden;position:relative;margin:0;padding:0;background:#131A24;}

/************************************************************/
/* ///////////////////////// 헤더 ///////////////////////// */
#header{position: fixed;display: block;z-index: 9800;top: 0;right: 0;left: 0;width: 100%;height: 83px;text-align:center;box-sizing:border-box;}
#nav-bottom{display:none}
#btnHome{position: fixed;right: 1rem;top:1rem;display: inline-block;padding: 8px 22px;height:40px;line-height: 19px;vertical-align: middle; background: rgba(21,25,39,0.65);
     border: 2px solid #939396;;border-radius: 20px; color:#939396;font-size: 12px;}
#btnHome span{display:inline-block;width:19px;height:16px;position:relative;margin-right:10px;vertical-align:top;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/icon-home.png) 0 0 no-repeat;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;}
#btnToday{cursor:pointer;z-index:8000;position:fixed;right:1rem;top:4rem/*121px*/;display:inline-block;vertical-align:middle;height:40px;line-height:19px;font-size:12px;color:#939396;border:2px solid #939396;border-radius:20px;padding:8px 20px;background:rgba(21,25,39,0.65);}
#btnToday span{display:inline-block;width:17px;height:17px;position:relative;margin-right:10px;vertical-align:sub;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/icon-close.png) 0 0 no-repeat;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;}
#btnHome:hover{color:#e0c2fa;border:2px solid #a583d5;}
#btnToday:hover{color:#e0c2fa;border:2px solid #a583d5;}
#btnToday:hover span{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/icon-close-on-min.png) 0 0 no-repeat;}
#btnHome:hover span{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/icon-home-on-min.png) 0 0 no-repeat;}

/* lnb */
.lnb{position:fixed;left:1rem;top: 145px;z-index:30;box-sizing:border-box;}
#lnb-1{display:none;width:132px;height:484px; border:1px solid #7d5dce; box-shadow: 0 0 2px #1a0b41;}
#lnb-1.show, #lnb-2.show{display:block;}
#lnb-1 li{width:100%;}
#lnb-1 li.logo{height:89px;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) 0 0 no-repeat;}
#lnb-1 li.logo a {display: inline-block; width: 100%; height: 100%;}
#lnb-1 li a{box-sizing:border-box; text-align:center; padding-top:10px; font-size: 14px; line-height: 1.2; color:#fff; font-weight:normal;}
#lnb-1 li.event0 a{display:block;height:131px;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) left -89px no-repeat;}
#lnb-1 li.event1 a{display:block;height:131px;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) left -220px no-repeat;}
#lnb-1 li.event2 a{display:block;height:131px;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) left -351px no-repeat;}
#lnb-1 li.event3 a{display:block;height:131px;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) left -482px no-repeat;}
#lnb-1 li.event0 a:hover, #lnb-1 li.event0.on a{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) -132px -89px no-repeat; color:#d2b2ff;}
#lnb-1 li.event1 a:hover, #lnb-1 li.event1.on a{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) -132px -220px no-repeat; color:#d2b2ff;}
#lnb-1 li.event2 a:hover, #lnb-1 li.event2.on a{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) -132px -351px no-repeat; color:#d2b2ff;}
#lnb-1 li.event3 a:hover, #lnb-1 li.event3.on a{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-min.png) -132px -482px no-repeat; color:#d2b2ff;}

/* lnb Controller */
#lnb-control{position:absolute;left:132px;top:10px;width:41px;height:80px;}
#lnb-control a, #lnb-control a:focus, #lnb-control a:visited{display:block;width:100%;height:100%;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-close-min.png) 0 0 no-repeat;}
#lnb-control a.close, #lnb-control a.close:focus, #lnb-control a.close:visited{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-open-min.png) 0 0 no-repeat;}
#lnb-control a:hover{display:block;width:100%;height:100%;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-close-on-min.png) 0 0 no-repeat;}
#lnb-control a.close:hover{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/lnb-open-on-min.png) 0 0 no-repeat;}



/************************************************************/
/* ////////////////////// 공통 요소  ////////////////////// */
section{position:relative;}
.row-w{width:100%; max-width: 1920px; margin:0 auto;}
.pull-right{float:right}
.pull-left{float:left}
p.text{color:rgba(255,255,255,0.85);font-size:1.0625rem;font-weight:normal;line-height:1.2}
p.text em{color: #f9a1ff;font-size:1.0625rem;font-weight:normal;}
.sub-title-wrap {margin-top:12vh;}
img.tit-top2 {height:6vh; max-height:64px;}
img.tit-sec {height:6.15vh; max-height:65px; vertical-align: middle;}
img.tit-sec.mb {height:auto;max-height:unset;max-width:287px;}
img.subtit {height:6vh; max-height:64px;}
.divider {margin-top:7vh;}

@keyframes bammZigZag {
    0% {transform:translate(0, 0)}
    10% {transform:translate(-5.5px, -22px)}
    20% {transform:translate(0%, 5.5px)}
    30% {transform:translate(5.5px, 0%)}
    40% {transform:translate(0%, 0%)}
    50% {transform:translate(-2.2px, 2.2px)}
    60% {transform:translate(0% , 0%)}
    70% {transform:translate(1.1px , 1.1px)}
    80% {transform:translate(0% , 0%)}
}



/* title */
.sec1 article{width:100%;position:relative;height:100%;/*min-height:55vw;*/}
.sec1 .title-wrap {position:absolute; top:43%; transform: translateY(-50%); right:17%; text-align: center;}
.sec1 .title-wrap > div {position:relative;}
.sec1 .title-wrap-mb {display: none;}
.deco-tit .deco-l {height: 5.7vh;max-height:60px;vertical-align: middle;}
.deco-tit .deco-r {height: 5.7vh;max-height:60px;vertical-align: middle;}
.title .tit-mer {height: 26.7vh;max-height:282px;margin-top:-4vh;margin-right: -1vh;}
.title .tit-lin {height: 26.7vh;max-height:282px;margin-top:-4vh;margin-left: -1vh;}
.title .deco-tk {position:absolute; top:9.2vh;left:15.7vh;height:4.6vh;}
.tit-update {height: 11.25vh;max-height:119px;margin-top:-8vh;}

/* 타이틀 사라지는 */
@keyframes displayNone {
    0% {opacity: 1}
    100% {opacity: 0}
}
@-webkit-keyframes displayNone { 0% {opacity: 1} 100% {opacity: 0}}
@-moz-keyframes displayNone { 0% {opacity: 1} 100% {opacity: 0}}
@-ms-keyframes displayNone { 0% {opacity: 1} 100% {opacity: 0}}
@-o-keyframes displayNone { 0% {opacity: 1} 100% {opacity: 0}}

/* after 빛 빤짝 */
@keyframes fadeInTwinkle {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadeInTwinkle { 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes fadeInTwinkle { 0% {opacity: 0;} 100% {opacity: 1;} }
@-ms-keyframes fadeInTwinkle { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fadeInTwinkle { 0% {opacity: 0;} 100% {opacity: 1;} }

/* 서브타이틀 */
@keyframes slideInDown {
    0% {margin-top: -1rem;}
    100% {margin-top: 0;}
}
@-webkit-keyframes slideInDown { 0% {margin-top: -1rem;} 100% {margin-top: 0;} }
@-moz-keyframes slideInDown { 0% {margin-top: -1rem;} 100% {margin-top: 0;} }
@-ms-keyframes slideInDown { 0% {margin-top: -1rem;} 100% {margin-top: 0;} }
@-o-keyframes slideInDown { 0% {margin-top: -1rem;} 100% {margin-top: 0;} }
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-ms-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

/* 마우스 스크롤 이미지 */
/* 마우스 */
.mouse{z-index:2000;position:absolute;display:inline-block;bottom:50px;/*left:50%;margin-left:-283px;*/width:100%; text-align: center;}
.mouse img:first-child {display: block; width:29.75%; margin:0 auto; min-width:460px;}
.mouse img:nth-child(2) {/*width:38px;*/ margin-top:6px;width:2%; min-width:26px;}
.aniBounce {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;}
@keyframes bounce {
    from {
        transform: translateY(25px);
    }
    to {
        transform: translateY(5px);
    }
}
@-webkit-keyframes bounce { from {transform: translateY(25px);} to {transform: translateY(5px);} }


/* 배경 */
.sec1{width:100%;/* height:100vh;*/overflow:hidden;background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec1/bg-min.jpg) 0 0 no-repeat; background-size:cover;}
.sec2{width:100%; /*min-height:100vh;*/ background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec2/bg-cont2-min.jpg) center no-repeat; background-size:cover;}
.sec3{width:100%; /*min-height:100vh;*/ background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec3/bg-cont3-min.jpg) center no-repeat; background-size:cover;}
/* content */
.sec1 .cont{height:100vh;}
.sec2 .cont {display:block;  margin-top:0px;  width:100%; text-align: center; padding-bottom:16vh;}
.sec3 .cont {display:block;  margin-top:0px; /*height:100vh;*/ width:100%;text-align: center; padding-bottom:16vh;}
.sec2 .cont article, .sec3 .cont article {overflow:hidden;display:block;height:100%;width:100%;text-align: center;}
/* 캐릭터 */
.sec1 #chrMain {position:absolute;z-index:0;bottom:0;left:2%;height:100vh;}
.sec3 #chr3_1 {position:absolute;bottom:16vh;left:-23vh;z-index:0;height:102.2vh; max-height:1080px;}
.sec3 #chr3_1 img {height:100%;}
.sec3 #chr3_1:before{content:''; position:absolute; bottom:0; right:13vh; display: inline-block; width:209px; height:7.4vh; max-height:79px; min-height: 50px; background:url(https://file.valofe.com/Valofe_file/web/at/jp/images/landing/merlin/sec3/name-gold.png)no-repeat center / auto 100%;}
.sec3 #chr3_1:after {content:''; position:absolute; top:13vh; right:9vh; display: inline-block; width:116px; max-height:116px; height:11vh; background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec3/light-gold-min.png)no-repeat center right / auto 100%; animation: fadeInTwinkle 2s 0s infinite alternate ease-in-out;}
.sec3 #chr3_2 {position:absolute;bottom:16vh;right:-22vh;z-index:0;height:102.2vh; max-height:1080px;}
.sec3 #chr3_2 img {height:100%;}
.sec3 #chr3_2:before{content:''; position:absolute; bottom:0; left:19vh; display: inline-block; width:209px; height:7.4vh; max-height:79px; min-height: 50px; background:url(https://file.valofe.com/Valofe_file/web/at/jp/images/landing/merlin/sec3/name-silver.png)no-repeat center / auto 100%;}
.sec3 #chr3_2:after {content:''; position:absolute; top:13vh; left:16vh; display: inline-block; width:116px; max-height:116px; height:11vh; background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec3/light-silver-min.png)no-repeat center left / auto 100%; animation: fadeInTwinkle 2s 0s infinite alternate ease-in-out;}


/************************************************************/
/* ///////////////////////// sec1 ///////////////////////// */
.sec1 .stone {position:absolute; bottom:-18vh; height:75.2vh; animation: aniStone 2s 4s infinite alternate;pointer-events: none;}
@keyframes aniStone {
    0% {transform: translateY(0)}
    100% {transform: translateY(-30px)}
}
@-webkit-keyframes aniStone { 0% {transform: translateY(0)} 100% {transform: translateY(-30px)} }
@-moz-keyframes aniStone { 0% {transform: translateY(0)} 100% {transform: translateY(-30px)} }
@-ms-keyframes aniStone { 0% {transform: translateY(0)} 100% {transform: translateY(-30px)} }
@-o-keyframes aniStone { 0% {transform: translateY(0)} 100% {transform: translateY(-30px)} }
.sec1 .row-w {max-width: none;}
.sec1 .cont{position:relative;width:100%; }/* 캐릭터 이미지는 .cont 헤잇에 맞추어 정해짐 */



/************************************************************/
/* ///////////////////////// sec2 ///////////////////////// */
.sec2 .row-w{z-index:1;}
#result {margin-top:3vh;min-height:84px;}
#result p {display: inline-block;font-size:18px;font-size:1.125rem;font-family:'Noto Serif KR','NanumMyeongjo',serif; font-weight:400;color:#faeaff;text-shadow: 0 0 3px #0f003c;}

.sec2 .text .tit-desc {display: block; margin:2rem auto;}
.sec2 p.skill1{font-size: 24px;line-height:1.2;color:#b48fdc; margin-top:4.5vh;margin-bottom:0px;}
.sec2 p.skill2{font-size: 24px;line-height:1.2;color:#b48fdc; width:1114px; margin:10vh auto 10px;text-align:center;}

/* 스킬 표 */
.sec2 .tb-wrapper{display:none}
.sec2 table{max-width:1114px;width:70%;margin:0 auto;border:0;border-collapse:collapse;table-layout:fixed;}
.sec2 #skillDesc{display:none}
.sec2 #skillDesc .text{padding:0; width: 100%; background:transparent}
table .flexible{width:auto;}
table .col1{width:6.0625rem;width:80px;}
table .col1 img{height:80px;}
table .col2{width:15.3125rem;width:245px}
table .col2 img{height:80px;}
.sec2 table th{border:0;}
.sec2 table td{position:relative; padding:0.425rem 0; text-align:left;border:0; background:none; text-shadow:none; vertical-align:top;}
.sec2 table td.flexible{padding-left:1rem;}
.sec2 table td:nth-child(2){vertical-align:top;}
.sec2 table td dl{display:inline;}
.sec2 table td dt{padding-top:0px;padding-left:16px;font-size:18px; color:#faeaff;}
.sec2 table td dd{padding-left:16px; font-size:16px; font-size:1rem; color:#d0b2ff;text-shadow:0 0 15px rgba(0,0,0,0.85);word-break: keep-all;}
.sec2 table td dd.btn-skills {display:none;}
.sec2 table td img{margin:0;padding:0;text-shadow:none;border:none; }
.sec2 table td img.opp-camp{height:90px;vertical-align:top}
.sec2 table td img.camp-arrow{height:90px; margin-left:-20px; vertical-align:top}
.sec2 table td img.my-camp{height:90px; margin-left:-26px;vertical-align:top}
.opp-camp-txt,.my-camp-txt{position:absolute;bottom:0;font-size:14px;color:#faeaff;text-shadow:0 0 15px rgba(0,0,0,0.85);}
.opp-camp-txt{left:18px; left:7%;top:80px;}
.my-camp-txt{left:134px; left:55%;top:80px;}


/************************************************************/
/* ///////////////////////// sec3 ///////////////////////// */
.sec3 .cont article p.text .date{width:auto;display:inline-block;box-sizing:border-box; margin-bottom: 7px; padding:2px 4px; border-radius: 3px; font-size:1rem; background:#b48fdc; color:rgba(0,0,0,0.85); }
.sec3 .text{color:#b48fdc; font-size:23px; text-align:center; text-shadow: 0 0 15px rgba(0,0,0,0.85); margin-top:30px;margin-bottom:50px;}
.period {max-height: 60px;height: 5.68vh;}
.period.mb {max-height: unset;height: auto;}
#item {max-height:711px;height: 71.1vh;}
#item.mb {max-height: unset;height:auto; width:100%; max-width:459px;}

/************************************************************/
/* //////////////////////// footer //////////////////////// */
.footer{position:relative;z-index:20;overflow:hidden;width:100%;margin-top:0px;padding-top:24px;padding-bottom:24px;padding-top:1.5rem;padding-bottom:1.5rem;background-color:#070d16;color:#696868;text-align:center;}
.footer .row-w{ margin:0 auto;text-align:center;}
.footer .copyright{display:inline-block;}
.footer .copyright .footer-logo{float:left;display:inline-block;vertical-align:middle;width:80px;height:40px;margin-top: 16px; margin-right:16px;}
.footer .copyright .footer-logo a{display:inline-block;width:100%;height:100%;text-indent:-9999px; transition:none;}
.footer .copyright .logo{display:inline-block;vertical-align:middle;width:100%;height:100%;background:url(https://file.valofe.com/Valofe_file/web/vfun-ko/images/logoVALOFE_transparent.png) 0 0 no-repeat; background-size:contain;}
.footer .copyright p{display:inline-block;float:left;vertical-align:middle;font-size:13px;font-family:dotum; font-size:11px;height:40px;line-height:53px;}


@media all and (max-width : 1440px) {
    html{font-size:16px;font-size:1rem;}

    .lnb{bottom: 282px;}
    /* 캐릭터 위치 */
    .sec3 img.pull-right{position:absolute;bottom:0;right:-5%;z-index:0;height:107%;}
    .sec3 img.pull-left{position:absolute;bottom:0;left:-5%;z-index:0;height:107%;}

    /* 텍스트 사이즈 */
    .sec2 p.skill1{text-align:center; margin-left:auto; margin-right:auto; font-size:1rem;}
    .sec2 p.skill1 .basic{height:9.5rem;}
    .sec2 p.skill1 #subtit1, .sec2 p.skill2 #subtit2 {height:3.6rem;}
    .sec3 .text{font-size:1.5rem;}

    /* sec2 테이블 사이즈 */
    .sec2 table{width:60%;}
    table .flexible{width:auto;}
    table .col1{width:5rem;width:80px;}
    table .col2{width:12.5rem; width:200px}
    .sec2 table td dt, .sec2 table td dd{font-size:1rem;}
    .sec2 table th img{height:5rem;}
    .sec2 table td img{height:5rem;}
    .sec2 table td img.opp-camp{height:5rem;width:auto;}
    .sec2 table td img.camp-arrow{height:5rem;width:auto;}
    .sec2 table td img.my-camp{height:5rem;width:auto;}
    .opp-camp-txt, .my-camp-txt{top: 4.1875rem;}
}
@media all and (max-width : 1280px) {
    /* lnb 위치 */
    .lnb{bottom: 282px;}

    /* main tit 위치 */
    .sec1 .title-wrap {top: 45%; right:12%;}

    /* 섹션 높이 */
    .sec2 #tit2, .sec3 #tit3{margin-top:60px;}

    /* item */
    .period {min-height: 38px;}

    .sec2 p.skill1{margin-top:28px;}
    .sec2 p.skill1 .basic{height: 7rem;}
    .sec2 table td dd {font-size: 15px;}
}
@media all and (max-width : 1024px) {
    .mouse {display: none;}
    .mb-show2 {display: block;}

    /* lnb */
    .lnb{top: 105px; bottom:auto;}
    #lnb-1.show {width:80px;height:180px;}
    #lnb-1 li{width:100%;}
    #lnb-1 li.logo{height:40px;background:#371845 url("https://file.valofe.com/Valofe_file/web/at/ko/images/landing/spartacus/common/logo-top.png") center center no-repeat no-repeat; background-size:contain;}
    #lnb-1 li a{border:1px solid rgba(106, 82, 184, 0.6); font-size: 10px;color:#adb9d0;}
    #lnb-1 li.event0 a{padding-top:7px;height:40px;background:#371845;}
    #lnb-1 li.event1 a{padding-top:7px;height:40px;background:#371845;}
    #lnb-1 li.event2 a{height:58px;background:#371845;}
    #lnb-1 li.event3 a{height:40px;background:#371845;}
    #lnb-1 li.event0 a:hover, #lnb-1 li.event0.on a{background:#6a52b8;}
    #lnb-1 li.event1 a:hover, #lnb-1 li.event1.on a{background:#6a52b8;}
    #lnb-1 li.event2 a:hover, #lnb-1 li.event2.on a{background:#6a52b8;}
    #lnb-1 li.event3 a:hover, #lnb-1 li.event3.on a{background:#6a52b8;}
    #lnb-control{left:80px;}

    /* sec2 */
    .sec2 .cont article{padding-top:5%}
    /*.sec2 .text {font-size: 1.25rem;}*/
    .sec2 p.skill1 {margin-top:50px;}
    .sec2 p.skill1 .basic {height: 7.5rem;}
    .sec2 p.skill2 {width: 90%;}
    .sec2 p.skill2 #subtit2 {margin-top:30px;}

    /* 스킬표 */
    .sec2 table td.col1 img { height:4rem;}
    .sec2 table td.flexible {height:86px;}
    .opp-camp-txt, .my-camp-txt {top:3.875rem;}
    .sec2 table{width:90%;table-layout: fixed}
    .sec2 table td img.opp-camp, .sec2 table td img.camp-arrow, .sec2 table td img.my-camp{margin-top: -13px;}
    .sec2 table td dl{padding-top:5px;}

    /* sec3 */
    .sec3 img.pull-left {left:-12%;}
    .sec3 img.pull-right{right:-12%;}

}
@media all and (max-width : 962px) {
    /*nav bottom */
    #btnHome{display:none;}
    #btnToday{display:none;}
    #nav-bottom{display:block;height: 48px;width: 100%;position: fixed;bottom: 0; z-index: 21;}

    #bnb {display:inline-block;width:100%;margin:0 auto;}
    #bnb ul{width:100%;clear:both}
    #bnb ul li{float:left;width:50%;height:auto;}
    #bnb ul li:last-child{float:right; border-right:1px solid #a98c57;}
    #bnb ul li a{display:inline-block;width:100%;height:auto;color:#fff;text-indent:-9999px;height:103px;
        -webkit-transition: all .25s ease-in;
        -moz-transition: all .25s ease-in;
        -o-transition: all .25s ease-in;
        -ms-transition: all .25s ease-in;
        transition: all .25s ease-in;
    }

    #bnb ul{display:block;}
    #bnb ul li a {height: 48px; line-height:48px; text-indent: 0; font-size: 14px; text-align:center;}
    #bnb ul li a .fa{font-size:18px;margin-top:-1px;vertical-align:middle; -webkit-transition: all .25s ease-in;
        -moz-transition: all .25s ease-in;
        -o-transition: all .25s ease-in;
        -ms-transition: all .25s ease-in;
        transition: all .25s ease-in; color:#fff;}

    #bnb ul li.btn-bnb1 a, #bnb ul li.btn-bnb1 a:visited .fa{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/bg-nav-bottom-min.jpg) center;background-repeat: no-repeat; background-size: cover; color: #fff;}
    #bnb ul li.btn-bnb2 a, #bnb ul li.btn-bnb2 a:visited .fa{background:url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/common/bg-nav-bottom-min.jpg) center;background-repeat: no-repeat; background-size: cover; color: #fff;}
    #bnb ul li.btn-bnb1 a:hover, #bnb ul li.btn-bnb1 a:active, #bnb ul li.btn-bnb1 a:hover .fa, #bnb ul li.btn-bnb1 a:active .fa{color:#fff}
    #bnb ul li.btn-bnb2 a:hover, #bnb ul li.btn-bnb2 a:active, #bnb ul li.btn-bnb2 a:hover .fa, #bnb ul li.btn-bnb2 a:active .fa{color:#fff}

    .sec2 .text .tit-desc + img {width: 100%; height: 4px;}

}
@media all and (max-width : 800px) {

}
@media all and (max-width : 768px) {
    .row-w {width:90%;}
    /* 배경 */
    .sec1 {background: url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec1/bg-mb-min.jpg) no-repeat center top /cover;}
    .sec2 {background: url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec2/bg-cont2-mb-min.jpg) no-repeat center top /cover;}

    /* 타이틀 */
    .deco-tit .deco-l {height:auto; width:14%;}
    .deco-tit .deco-r {height:auto; width:14%;}
    img.tit-sec {height:auto; width:70%;}

    /* sec1 */
    .sec1 #chrMain, .stone , .title-wrap{display:none;}
    .sec1 .title-wrap-mb {display: block; position:absolute; bottom:18vh; width: 100%; text-align: center;}
    .sec1 article .title-wrap-mb p img {/*width:54.1%;*/min-width: 250px;}
    #result {min-height:75px;}
    #result p {font-size:1rem;}
    .divider {width:80%;}

    /* sec2 */
    .sec2 .cont {padding-bottom:16vh;}
    .sec2 table td.flexible {padding-left:0;}
    .sec2 table td dt {font-size:14px;}
    .sec2 .cont article p.skill2 {margin:2vh auto 10px;}

    /* 모바일 스킬 팝업 */
    .sec2 table td dd.btn-skills {display:block;}
    .sec2 table td dd.btn-skills a {display:inline-block;margin-top:0.25rem;padding:0.1rem 0.35rem 0.2rem;background:#6a52b8;color: #fff;font-size:13px;}
    .sec2 table td dd.btn-skills a i {color:#fff; margin-left:5px;}
    .sec2 table td dd:not(.btn-skills) {display:none;}
    /* 모바일 스킬 */
    #skillDesc.on{display:block;box-sizing:border-box;position:absolute;top:50%;width:80%;left:10%;padding:20px 30px 30px;margin-top:-80px;text-align:center;background:#2d2441;border-radius: 16px; box-shadow: 0 0 8px rgba(0,0,0,0.85)}
    #skillDesc .text{display:none;position:relative;text-align:left;font-size:14px; color: #a999af;font-weight:normal;line-height: 1.5; word-break:keep-all;}
    #skillDesc .text b{display:block; width:100%; padding-bottom:12px; margin-bottom:20px; font-size:16px;border-bottom:1px solid #a999af; color: #c2b1c8; font-weight:bold}
    #skillDesc .text b img{height:48px;margin-right:10px;vertical-align:middle}
    #skillDesc.on .text.on{display:block;}
    .btn-close-desc {position:absolute;top: -10px; right: 0; color:rgba(255,255,255,0.35); font-size:18px;}
    .btn-close-desc .fa {color:#a999af;}

    /* sec3 */
    .sec3 img.pull-left {left:-25%;}
    .sec3 img.pull-right{right:-25%;}
    .sec3 .text{font-size:1rem}
    .period {width:100%;max-width:476px;}
    .sec3 #chr3_1,.sec3 #chr3_2 {display: none;}

    /* footer */
    .footer{padding-bottom: 70px;}
    .footer .copyright {text-align: center;margin-top: 0px;margin-bottom: 0px;}
    .footer .copyright .footer-logo{display:block;width:100%;text-align:center; margin-right:0;}
    .footer .copyright .footer-logo .logo{position:absolute;left:50%;margin-left:-34.5px;width:69px;}
    .footer .copyright p{width:100%;margin-left:0;clear:left;height: auto; line-height:inherit;}
}
@media all and (max-width : 640px) {
    .mb-show{display:inline-block;}
    .mouse{bottom:inherit;top:45vh}
    img.tit-top2 {height: auto;max-height: unset;width: 63%;}

    /* sec1 */

    /* sec2 */
    .sec2 .cont article{padding-top:0}
    .sec2 p.skill1{text-align:center; margin-left:auto; margin-right:auto;margin-top:20px;padding:0;background:none;}
    .sec2 p.skill2{width:100%; padding:0;background:none;}
    .sec2 p.skill1 #subtit1{height: auto;width: 100%;max-width: 340px;}
    .sec2 p.skill2 #subtit2{height: auto;width: 100%;max-width: 340px;margin-top:0px;}

    /* 테이블 사이즈 */
    .sec2 table {/*width:94%; margin-left:6%;*/ width:400px}
    table .col1{width:4rem;width:64px;}
    .opp-camp-txt, .my-camp-txt{font-size:11px; font-weight:normal}
    .my-camp-txt {left:58%}
    /* 모바일 스킬 */
    #skillDesc.on{width:90%;left:5%;padding:20px;}
    #skillDesc .text b img{height:36px;}

    /* sec3 */
    .sec3 .cont article p.text {margin-top: 30px; margin-bottom: 50px;}
    .sec3 img.pull-left {display: none;}
    .sec3 img.pull-right{display: none;}
    .sec3 .text .tit-desc {width:100%;}

}
@media all and (max-width : 460px) {
    /*
    #btnHome {top: 81px;}
    #btnToday{top: 130px;}
    */
    .sec1 article .title-wrap-mb p img {width:80%;}
    #result {min-height:125px;}

    /* 테이블 사이즈 */
    .sec2 table {width:320px;}
    table .col1 {width:48px;}
    .sec2 table td.col1 img {height:3rem}

    table .col2 {width:146px;}
    .sec2 table td img.opp-camp, .sec2 table td img.camp-arrow, .sec2 table td img.my-camp {height:4rem;}

    .sec2 #tit2 {margin-top: 80px; width:100%;}
    .sec3 #tit3 {margin-top: 80px; width:100%;}
    .sec3 .cont article p.text{margin-top:50px;}
    .sec3 img.pull-left {height:35%; bottom:auto; top:10%;}
    .sec3 img.pull-right {height:35%;}
}

@media all and (max-width : 375px) {
    img.tit-sec {width:69%;}

    .sec2 table {width: 300px; margin-left: calc( (100% - 300px) / 2 + 10px);}
    .sec2 p.skill1 #subtit1{height:2rem;}
    .sec2 p.skill2 #subtit2{height:2rem;}
}

/* iphone XS 1125x2436*/
@media (min-width: 1025px) and (orientation: portrait) {
    .sec1 {background: url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/spartacus/common/bg_main_mb.jpg); background-size:cover;}
    .sec1 .title-wrap {/*position:absolute; top:auto; bottom: 0;*/ top:74%; left:50%; margin-left: -38%; width:76%; height:42vh; transform:unset;/*margin: 0 auto;*/}
    .sec1 article p {transform:translateX(50%);}
    .sec1 article p.title-sub {top:0; right:50%; /*bottom:41.4vh;*/ width:74%;width: 42vh;}
    .sec1 article p.title {top:6vh; right:50%; /*bottom:46vh;*/ width: 58vh;}
    .sec1 article p.title img {width:100%; top:auto;}
    .sec1 article p.title img:first-child {position:relative;}
    .sec1 article p.title-sub-sub {top:27vh; right:50%; /*bottom:8vh;*/ width:35vh;}
}
/* ipad pro 1024x1280*/
@media (min-width: 768px) and (max-width : 1024px) and (orientation: portrait) {
    .sec1 .title-wrap {/*position:absolute; top:auto; bottom: 0;*/ top:55%; left:50%; margin-left: -38%; width:76%; height:42vh; transform:unset;/*margin: 0 auto;*/}
    .sec1 #chrMain {left:-14%;}
    /*.sec1 article p {transform:translateX(50%);}*/
    .sec1 article p.title-sub {top:0; right:50%; /*bottom:41.4vh;*/ width:74%;width: 42vh;}
    .sec1 article p.title img {width:100%; top:auto;}
    .sec1 article p.title img:first-child {position:relative;}
    .sec1 article p.title-sub-sub {top:27vh; right:50%; /*bottom:8vh;*/ width:35vh;}

    /* sec2 ~ 3 */
    .deco-tit .deco-l {height:auto; width:14%;}
    .deco-tit .deco-r {height:auto; width:14%;}
    img.tit-sec {height:auto;max-height:unset;width:70%;}
    .sec2 img.tit-sec {max-width:565px;}

    /* sec2 */
    .sec2 .cont {padding-bottom:20vh;}
    .sec2 .cont article p.skill2 {margin: 2vh auto 10px;}

    /* sec3 */
    #item {height:auto; width:90%;max-height: unset;}
    .sec3 #chr3_1, .sec3 #chr3_2 {bottom:21vh;}
    .sec3 #chr3_1:before {bottom:auto; top:-4vh; right:11vh; background: url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec3/name-gold-mb-min.png)no-repeat center / auto 100%;}
    .sec3 #chr3_2:before {bottom:auto; top:-4vh; left:16vh; background: url(https://file.valofe.com/Valofe_file/web/at/ko/images/landing/merlin/sec3/name-silver-mb-min.png)no-repeat center / auto 100%;}
    .sec3 #chr3_1:after {top:10vh; right:7vh;}
    .sec3 #chr3_2:after {top:10vh; left:12vh;}
}
/* 800 x 1280 */
@media (min-width: 768px) and (max-width : 800px) and (orientation: portrait) {
        .sec1 #chrMain {left:-33%;}

    .sec3 #chr3_1 {left:-22vh;height: 66.2vh;}
    .sec3 #chr3_2 {right:-20vh;height: 66.2vh;}
    .sec3 #chr3_1:before{right:7vh;max-height: 66px;}
    .sec3 #chr3_2:before{left: 11vh;max-height: 66px;}
    .sec3 #chr3_1:after {top: 8vh;right: 5vh;}
    .sec3 #chr3_2:after {top: 8vh;left: 9vh;}
}