@charset "utf-8";

/* --------------------- Unisef-PMS Released 2022.08.31 --------------------- */
/* ------------------------ Published by 4m Creative ------------------------ */


/* ------------------------------------ Montserrat ----------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-weight: 100;
  src: local(※),
  url(../font/Montserrat-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 200;
  src: local(※),
  url(../font/Montserrat-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 300;
  src: local(※),
  url(../font/Montserrat-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 350;
  src: local(※),
  url(../font/Montserrat-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: local(※),
  url(../font/Montserrat-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 450;
  src: local(※),
  url(../font/Montserrat-ExtraBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  src: local(※),
  url(../font/Montserrat-Black.ttf) format('truetype');
}


/* ------------------------------------ NanumSquare ----------------------------------- */
@font-face {
  font-family: 'NanumSquare';
  font-weight: 400;
  src: local('☺'),
        url(../font/NanumSquareR.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 700;
  src: local('☺'),
        url(../font/NanumSquareB.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 800;
  src: local('☺'),
        url(../font/NanumSquareEB.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 300;
  src: local('☺'),
        url(../font/NanumSquareL.ttf) format('truetype');
}


/* ------------------------------------ common ----------------------------------- */
html, body, div, p, span, strong, b, em, iframe, pre,
h1, h2, h3, h4, h5, h6,
img, dl, dt, dd,
fieldset, form, legend, label,
table, caption, thead, tbody, tfoot, tr, th, td,
ul, ol, li, a, input, select, textarea {margin: 0;padding: 0; border: 0 none; }

html, body { position: relative; height: 100%; }
body {font-family: 'NanumSquare',sans-serif; font-weight: 400; line-height: 1; font-size: 16px; }

ul, ol, li {list-style: none;}
em, address {font-style: normal;}
img {border: 0 none; font-size: 0;line-height: 0;}
sup {position: relative;top: 2px;font-size: 11px;line-height: 100%;}

table {border-collapse: collapse; border-spacing:0; }
caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
th, td { vertical-align: middle;/* white-space: nowrap */}

a {color: #333; text-decoration: none; line-height: 1;}
a:hover, a:focus, a:active {text-decoration: underline;}
a:visited {color: #333;}
*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

* {-webkit-text-size-adjust:none; -webkit-tap-highlight-color:transparent;}
*::-webkit-scrollbar {background-color:#fff; width:5px; height:8px; border-radius:8px; display: none; }
*::-webkit-scrollbar-thumb {background:#eee; border-radius:15px;}
*::-webkit-scrollbar-track {background:transparent; border-radius:8px;}
*:hover::-webkit-scrollbar-thumb {background:#07b5ff;}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner {display:none !important;}


/* ------------------------------------ swiper ----------------------------------- */
.swiper { width:100%; height:100%; }
.swiper-slide { overflow-y: auto; }
#unicef_card .swipe-box { width:100vw; max-width:600px; height:100vh; position:fixed; top:0; left:0; right: 0; bottom: 0; margin: auto; z-index:99; text-align:center; background:rgba(0,0,0,.7); opacity:0; transition:all ease .7s; }
#unicef_card .swipe-box.on { opacity:1; }
#unicef_card .swipe-box div { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display: none; }
#unicef_card .swipe-box img.icon-ver { width:27px; margin:0 auto 35px; }
#unicef_card .swipe-box img.icon-hor { width:114px; margin:0 auto 70px; }
#unicef_card .swipe-box img.icon-hand { position:absolute; left:50%; top:50%; width:53px; }
#unicef_card .swipe-box img.hand-ver { margin-left:21px; margin-top:-38px; }
#unicef_card .swipe-box.on img.hand-ver.on { animation:mouseUp .7s .5s alternate; }
#unicef_card .swipe-box img.hand-hor { margin-top:-45px; }
#unicef_card .swipe-box.on img.hand-hor.on { animation:mouseRight .7s .5s alternate; }
#unicef_card .swipe-box p { font-size:16px; letter-spacing:-.03px; color:#fff; position:relative; width:fit-content; margin:0 auto; }
#unicef_card .swipe-box p::before { content:''; display:block; width:25px; height:23px; background:url(../img/swipe-tip.png) 0 0/contain no-repeat; position:absolute; top:-15px; left:-25px; }
#unicef_card .swipe-box p b { color:#07b5ff; font-weight:700; }
#unicef_card .gradient { width: 100%; position: fixed; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); z-index: 9; opacity: 1; transition: all ease .2s; }
#unicef_card .gradient.off { opacity: 0; }

/* ------------------------------------ card ----------------------------------- */
#unicef_card { max-width:600px; width:100%; margin:0 auto; height: 100%; position: relative; }
#unicef_card .slide-img { display:block; width:100%; object-fit:contain;}
#unicef_card p { word-break:keep-all; font-size:16px; line-height:1.5; color:#555; letter-spacing:-.32px; }
#unicef_card .s_img_wrap { position:relative; height:fit-content; }
#unicef_card .s_img_wrap .slide-img { margin:0; padding:0; font-size:0; line-height:0; border:0; }
#unicef_card .name-tit { font-size:21px; font-weight:700; }
#unicef_card .name { font-weight:800; color:#07b5ff; }
#unicef_card .con-wrap { width: 100%; }
#unicef_card .info { position:absolute; top:12px; right: 12px; z-index:21; }
#unicef_card .paging-num { background:rgba(0,0,0,.5); width:fit-content; height:20px; border-radius:19px; padding:3px 6px; color:#999; text-align:center; font-family:'Montserrat'; font-weight:200; margin:0 auto; }
#unicef_card .paging-num span { font-family:'Montserrat'; font-weight:350; color:#fff; }
#unicef_card .logo { background:url(../img/unicef-logo.png) no-repeat center/contain; width:87px; height:11px; opacity:1 !important; position:absolute; top:15px; left:20px; }
#unicef_card .txt-box { clear:both; position:relative; z-index:9; background:#fff; padding:25px 20px; }
#unicef_card .txt-box .txt-bg { color:#07b5ff; font-weight:700; font-family:'NanumSquare'; background:#f0faff; padding:15px; line-height:1.56; margin:18px 0; transform:skew(-.03deg); }
#unicef_card .btn_wrap { width:100%; margin-top:25px; }
#unicef_card .btn_wrap a { display:block; width:100%; height:43px; line-height:43px; text-align:center; color:#fff; font-size:16px; font-weight:700; background:#07b5ff; text-decoration: none; }
#unicef_card .btn_wrap a+a { margin-top:10px; }

/* ------------------------------------ animation ----------------------------------- */
@keyframes fadeout{
  0%,70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mouseUp{
  0% {
    opacity:0;
    transform:translateY(0);
  }
  70% {
    opacity:1;
    transform:translateY(-60px);
  }
  100% {
    opacity:1;
  }
}
@keyframes mouseRight{
  0% {
    opacity:0;
    transform:translateX(0);
  }
  70%{
    opacity:1;
    transform:translateX(60px);
  }
  100%{
    opacity:1;
  }
}