@charset "utf-8";

/*common*/
.inner{max-width:160rem; margin:0 auto;}

/* Nuri - Txt */
#mafra-masthead{background-color: #edf1f5;position: relative;z-index: 10;}
#mafra-masthead .inner{position: relative;margin:0 auto;}
#mafra-masthead .nuri-txt{display: flex;gap:.5rem;padding: 0.5rem 0; font-size: 1.5rem; font-weight: 300; color: #1d1d1d; align-items: center;}
#mafra-masthead .nuri-txt::before{content: "";width: 2.4rem; display:block; height: 1.6rem; background: url('../../images/ico_flag.svg') center / contain no-repeat;}

/* header-container */
#mafra-header{position: relative;z-index: 100;background: #fff;border-bottom: 0.1rem solid #d8d8d8;}
#mafra-header .inner{display: flex;flex-direction: column;padding: 1.25rem 0 1rem;}
.header-utility .utility-list{margin: 0 auto 1rem;display: flex;justify-content: end;gap: 1rem;align-items: center;}
.header-utility .utility-list > li{position: relative;}
.header-utility .utility-list > li > a,
.header-utility .utility-list > li > button{display: flex;align-items: center;font-size:1.5rem;gap:0.5rem;color: #1e2124;}
.header-utility .utility-list > li > a:after{content:'';width: 1.3rem;height: 1.3rem;display: block;background-repeat:no-repeat;background-position:center;}
.header-utility .utility-list > li > button:before{content:'';width: 1.5rem;height: 1.1rem;display: block;background-repeat:no-repeat;background-position:center;position: relative;top: 0.1rem;left: -0.2rem;}
.header-utility .utility-list > li > a.new_blank:after{background-image:url('../../images/new_blank.png');}
.header-utility .utility-list > li > button.txt-size:before{background-image:url('../../images/ico_view_mode.png');}
.header-utility .utility-list > li + li{padding-left: 1.5rem;margin-left: 0.5rem;}
.header-utility .utility-list > li + li:before{content:'';position: absolute;width: 1px;height: 14px;display: block;background: #cdd1d5;left: 0;top: 50%;margin-top: -0.7rem;}

.head-body{display: flex;align-items: center;justify-content: space-between;}
.head-body .logo a{display: inline-block;}
.menu{position:absolute;right:0;top: -51.5rem;z-index: 101;}
.menu > ul{display:flex;gap: 5rem;justify-content: flex-end;}
.menu > ul a{font-size:2.3rem;font-weight: 600;color:#1e2124;position:relative;display: flex;justify-content: center;align-items: center;gap: 1.2rem;}
.menu > ul a.myWrite:before{content:'';width: 2.4rem;height: 2.4rem;background:url('../../images/myWrite.png') no-repeat;display: block;}
.menu > ul a.myCertif:before{content:'';width: 2.2rem;height: 2.3rem;background:url('../../images/myCertif.png') no-repeat;display: block;}


.contents{padding:6.5rem 0 8.5rem;}
.visual{height:39rem;margin: 0 auto;position:relative;overflow:hidden;}
.visual:after{content:'';width:100%;height:100%;background: url('../../images/visual.jpg') center no-repeat;background-size: cover !important;position:absolute;left:0;top:0;animation-name:vis;animation-duration: 12s;animation-fill-mode:both;animation-delay: 0.5s;}
.visual .slick-list,
.visual .slick-track{height:100%;}
.visual .inner{display: flex;justify-content: center;align-items: center;flex-direction: column;height:100%;gap: 3rem;position:relative;z-index:1;}
.visual .inner strong{font-weight:900;color:#fff;font-size:6rem;line-height:1;animation-name:vis2;animation-duration:1.25s;animation-fill-mode:both;position:relative;animation-delay: 0.5s;}
.visual .inner strong span{font-size:7rem;font-weight:400;line-height:1;position:relative;top:0.4rem;}
/**.visual .inner strong span:before{content:'';width:3.9rem;height:2rem;background:url('../../images/on-icon.png') no-repeat center;position: absolute;top: 50%;margin-top: -1rem;left: -0.75rem;animation-name:vis4;animation-duration:1.25s;animation-fill-mode:both;animation-delay: 1.75s;}**/
.visual .inner strong span:before{content:'';width:3.9rem;height:2rem;background:#00eb40;position:absolute;top:50%;margin-top:-1rem;left:-0.75rem;border-radius:1rem;animation-name:btn01;animation-fill-mode:both;animation-duration:1s;animation-delay: 0.5s;}
.visual .inner strong span:after{content:'';width:1.4rem;height:1.4rem;background:#fff;position:absolute;top:50%;left:-0.5rem;border-radius:50%;margin-top:-0.7rem;animation-name:btn02;animation-fill-mode:both;animation-duration:1s;animation-delay: 0.25s;}
.visual .inner p{color:#fff;font-size:2.1rem;text-align:center;animation-name:vis3;animation-duration:1.25s;animation-fill-mode:both;position:relative;animation-delay: 1.25s;}
.visual .inner p i{display:block;}
.visual .inner > ul {animation-name:vis3;animation-duration:1.25s;animation-fill-mode:both;position:relative;animation-delay: 1.5s;}
.visual .inner > ul > li{color:#fff;font-size:1.7rem;position:relative;}
.visual .inner > ul > li + li{margin-top: 0.75rem;}
.visual .inner > ul > li:before{content:'-';color:#fff;display:inline-block;vertical-align:middle;position:relative;left:-0.7rem;}

.visual.type2{background: url('../../images/visual2.jpg') center no-repeat;}
.visual.type3{background:none;height: 34rem;margin-top: 5rem;}
.visual.type3 .inner{background:url('../../images/visual3.jpg') center no-repeat;border-radius: 2.5rem;}
.visual.type3 .inner strong span{background:url('../../images/ico-on.png') no-repeat center;text-indent:-9999px;display:inline-block;width:11.1rem;height:6.1rem;top: 0.8rem;}
.visual.type3 .inner strong span:before{display: none;}
.visual.type4{background: url('../../images/visual4.jpg') center no-repeat;}

.visual.slide-type{background:#000;position: relative;overflow: hidden;}
.visual.slide-type .inner{position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);z-index: 1001;}
.visual.slide-type > ul{overflow: hidden;height: 100%;}
.visual.slide-type > ul .slick-slide{float:left;height: 100%;background-size:cover !important;}
.visual.slide-type > ul .slick-slide:nth-child(1){background:url('../../images/visual.jpg') no-repeat center;}
.visual.slide-type > ul .slick-slide:nth-child(2){background:url('../../images/visual.jpg') no-repeat center;}
.visual.slide-type > ul .slick-slide:nth-child(3){background:url('../../images/visual.jpg') no-repeat center;}
.visual.slide-type > ul .slick-slide img{width:100%;height:100%;object-fit: cover;}

.visual.slide-type .slick-arrow{width:4rem;height: 4rem;border-radius: 50%;position: absolute;right:0;bottom:3rem;z-index: 1002;text-indent: -9999px;}
.visual.slide-type .slick-arrow.slick-next{right: calc(calc(100% - 160rem) / 2 + 4.8rem);background:#fff url('../../images/visual-right.png') no-repeat center;}
.visual.slide-type .slick-arrow.slick-prev{right:calc(calc(100% - 160rem) / 2 + 9.5rem);background:#fff url('../../images/visual-left.png') no-repeat center;}

.numbering{background-color: #fff;padding: 0.75rem 1.5rem;border-radius: 5rem;position: absolute;right:calc(calc(100% - 160rem) / 2 + 14.3rem);bottom:3rem;z-index:1002;}
.numbering i{font-size:1.4rem;position: relative;}
.numbering span{color:#33363d;font-size:1.5rem;display: inline-block;margin: 0 0.25rem;}
.numbering span::before{content:'0';}
.numbering span.vis-now-text{color:#256ef4;font-weight: 500;}

.visual.slide-type .buttons button{width:4rem;height: 4rem;border-radius: 50%;position: absolute;right:calc(calc(100% - 160rem) / 2);bottom:3rem;z-index: 1002;text-indent: -9999px;}
.visual.slide-type .buttons .play{background:#fff url('../../images/visual-play.png') no-repeat center;}
.visual.slide-type .buttons .pause{background:#fff url('../../images/visual-pause.png') no-repeat center;}
.visual.slide-type .buttons ._on{display:none;}

@keyframes vis{
  0%{transform:scale(1.2);}
  100%{transform:scale(1);}
}

@keyframes btn01{
  0%{background:#bbb;}
  100%{background:#00eb40;}
}

@keyframes btn02{
  0%{left:-0.4rem;}
  100%{left:1.4rem;}
}

/**@keyframes vis2{
0%{opacity:0;transform:scale(0.8);top:0.5rem;}
100%{opacity:1;transform:scale(1);top:0;}
}

@keyframes vis3{
0%{opacity:0;top:0.5rem;}
100%{opacity:1;top:0;}
}

@keyframes vis4{
0%{opacity:0;transform:scale(0);margin-left:3.5rem;}
100%{opacity:1;transform:scale(1);margin-left:0;}
}**/

/* footer */
#mafra-footer{position: relative;z-index: 50;background-color: #f8f8f8;font-size:1.7rem;padding-bottom: 3rem;}
#mafra-footer .foot-quick{border-top: 0.1rem solid #cdd1d5; border-bottom: 0.1rem solid #cdd1d5; background-color: #fff; }
#mafra-footer .foot-quick .inner{display: flex; width: 100%;}
#mafra-footer .foot-quick .inner button{display: block;text-align: left;font-size: 1.7rem;height: 5.6rem;padding: 0 5.4rem 0 1.8rem;border-right: 0.1rem solid #cdd1d5;position: relative;width: 100%;cursor: pointer;color: #373737;}
#mafra-footer .foot-quick .inner button:first-child{border-left: 0.1rem solid #cdd1d5; }
#mafra-footer .foot-quick .inner button::after{display: block;content: "";width:2rem;height:2rem;background: url('../../images/ico_plus.svg') center / contain no-repeat ; position: absolute; right: 3rem; top:1.8rem;}
#mafra-footer .foot-quick .inner button:hover{background-color: #edf1f5; transition: 0.4s ease-in-out; }
#kdca-footer > .inner{display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; }
#mafra-footer .f-logo{margin: 4.5rem 0 3rem;height: 5rem;}
#mafra-footer .f-logo img{height: 100%;}
#mafra-footer .f-cnt{display: flex;}
#mafra-footer .f-cnt .f-link{display: flex;flex-direction: column;gap: 4rem;}
#mafra-footer .f-cnt .info-addr{font-size:1.6rem;color: #1e1e1e;}
#mafra-footer .f-cnt .f-info{display: flex;flex-direction: column;flex: 1;gap: 1.5rem;}
#mafra-footer .f-cnt .info-cs li{color: #1e1e1e;}
#mafra-footer .f-cnt .info-cs li + li{margin-top:1.25rem;}
#mafra-footer .f-cnt .info-cs li .strong{font-weight:700;}

#mafra-footer .f-cnt .f-link .link-go{display: flex;flex-direction: column;flex: 1;}
#mafra-footer .f-cnt .f-link .link-go a{font-weight: 700; height: 4rem; padding: 0 1.2rem; border-radius: 0.6rem; display: flex; align-items: center; gap: 0.4rem; transition: all .4s ease 0s; }
#mafra-footer .f-cnt .f-link .link-go a:hover{background-color: #edf1f5; }
#mafra-footer .f-cnt .f-link .link-go a::after{content: "";display: block;width: 2rem;height: 2rem;background: url('../../images/ico_angle.svg') no-repeat;transform: rotate(-90deg);}
#mafra-footer .f-cnt .f-link .link-sns{display: flex;gap: 0.8rem;}
#mafra-footer .f-cnt .f-link .link-sns a{width: 4rem;height: 4rem; border: 1px solid #cdd1d5; border-radius: 100%;}
#mafra-footer .f-btm{display: flex;flex-direction: column;padding-top: 3.5rem;border-top: 0.1rem solid #d8d8d8;margin-top: 3.5rem;}
#mafra-footer .f-btm .f-btm-text{display: flex;justify-content: space-between;align-items: center;}
#mafra-footer .f-btm .f-btm-text .f-menu{display: inline-flex;flex-wrap: wrap;}
#mafra-footer .f-btm .f-btm-text .f-menu a{display: inline-flex;align-items: center;padding: 0 1rem;}
#mafra-footer .f-btm .f-btm-text .f-menu a.point{font-weight: 700;color: #003675;}
#mafra-footer .f-btm .f-btm-text .f-menu a:hover{border-radius: 0.6rem; background-color: #edf1f5; transition: 0.4s ease-in-out; }
#mafra-footer .f-btm .f-btm-text .f-menu a:active{background-color: #cdd7e4; transition: 0.4s ease-in-out; }
#mafra-footer .f-btm .f-btm-text .f-copy{font-size: 1.5rem;color: #1e1e1e;font-weight: 500;}

@media all and (max-width: 1600px) {
  #mafra-masthead .nuri-txt{padding:0.5rem 1.5rem;}
  #mafra-header{padding:0 1.5rem;}
  .menu{top:-50rem;}
  .contents{padding:5rem 1.5rem 6rem;}
  .foot-content{padding:0 1.5rem;}
  .visual.type3{padding-left:2.5rem;padding-right:2.5rem;}
  .visual.slide-type .buttons button{right:1.5rem;}
  .visual.slide-type .slick-arrow.slick-next{right:6rem;}
  .visual.slide-type .slick-arrow.slick-prev{right:10.5rem;}
  .numbering{right:15rem;}
}

@media all and (max-width: 1023px) {
  #mafra-footer .foot-content .inner{padding:2.4rem 1.6rem;gap: 2.4rem;display: flex;align-items: normal;justify-content: flex-start;flex-direction: column;}
  #mafra-footer .foot-quick .inner{display:block;}
  #mafra-footer .f-logo{margin:0;height: 4rem;}
  #mafra-footer .f-cnt{display:block;}
  #mafra-footer .f-cnt .f-link .link-go a{padding:0;}
  #mafra-footer .f-btm .f-btm-text{display:block;}
  #mafra-footer .foot-quick .inner button{font-size: 1.6rem;border-right:0;padding-left: 1.2rem;}
  #mafra-footer .foot-quick .inner button + button{border-top: 0.1rem solid #cdd1d5;}
  #mafra-footer .foot-quick .inner button:first-child{border-left:0;}
  #mafra-footer .f-btm{padding-top:2.5rem;margin-top:0;}
  #mafra-footer .f-btm .f-btm-text .f-menu a{padding:1rem;}
  #mafra-footer .foot-quick .inner button::after{right:1rem;}
}

@media all and (max-width: 767px) {
  #mafra-masthead .nuri-txt{font-size:1.3rem;}
  .header-utility .utility-list{display:none;}
  .header-utility .utility-list > li > a:after{width:1rem;height:1rem;background-size:contain;top:-0.1rem;position:relative;}    
  .header-utility .utility-list > li > a, .header-utility .utility-list > li > button{font-size:1.4rem;}    
  .head-body .logo{width: 14rem;}
  #mafra-header .inner{padding:1.5rem 0;}
  #mafra-footer .foot-content .inner{padding: 3.5rem 0.5rem 0;}
  #mafra-footer .f-btm .f-btm-text .f-copy{margin-top: 1.75rem;}
  #mafra-footer .f-cnt .f-link{margin-top: 2.5rem;}
  #mafra-footer .f-btm .f-btm-text .f-menu a{background: none !important;padding-left: 0;padding-right: 1.5rem;line-height: 1;font-size: 1.6rem;padding-top: 0.75rem;padding-bottom: 0.75rem;}
  #mafra-footer .f-cnt .info-cs li{font-size:1.6rem;}
  #mafra-footer .f-cnt .info-cs li + li{margin-top:0.5rem;}
  #mafra-footer .f-cnt .f-link .link-go a{font-size:1.6rem;}
  .menu{top: -58.6rem;}
  .menu > ul a{font-size: 1.5rem;gap: 0.25rem;flex-direction: column;}    
  .menu > ul{gap: 1.5rem;flex-wrap: wrap;justify-content: flex-end;}
  .menu > ul a.myWrite:before,
  .menu > ul a.myCertif:before{width: 1.6rem;height: 1.6rem;background-size:contain;}
  .head-body .logo a{display:flex;}
  #mafra-footer .f-cnt .f-info{gap: 2.5rem;}
  .visual{height: 50rem;padding-left:0;padding-right:0;margin-top: 0;}  
  .visual:after{background:url('../../images/visual-mobile.jpg') no-repeat center;}
  .visual .inner{gap:1.5rem;width: 100%;}
  .visual .inner strong{font-size: 2.8rem;}    
  .visual .inner strong span{font-size: 3.3rem;top: 0.1rem;}    
  .visual .inner strong span:before{width: 1.6rem;height: 1.75rem;left: -0.4rem;background:url('../../images/on-icon.png') no-repeat center;animation:none;background-size:contain !important;}
  .visual .inner strong span:after{display:none;}
  .visual .inner p{font-size: 1.6rem;padding: 0 5rem;}
  .visual .inner p br{display: none;}
  .visual .inner > ul{padding: 0 6rem 0 6rem;margin-top: 1rem;}
  .visual .inner > ul > li{font-size: 1.4rem;line-height: 1.4;}
  .visual.type3 .inner strong span{width: 7rem;height: 3.8rem;background-size: contain;top: 1.1rem;}
  .visual .inner p i{display:inline-block;margin:0 0.25rem;}
  .visual .inner > ul > li:before{position:initial;margin-left:-1.3rem;margin-right:0.7rem;}
  .contents{padding-top:3.5rem;}
  .numbering{right:unset;left:calc(50% - 12.7rem);}
  .visual.slide-type > ul .slick-slide:nth-child(1){background:url('../../images/visual-mobile.jpg') no-repeat center;}
  .visual.slide-type > ul .slick-slide:nth-child(2){background:url('../../images/visual-mobile.jpg') no-repeat center;}
  .visual.slide-type > ul .slick-slide:nth-child(3){background:url('../../images/visual-mobile.jpg') no-repeat center;}
  .visual.slide-type .slick-arrow.slick-prev{right:unset;left:calc(50% - 2.5rem);}
  .visual.slide-type .slick-arrow.slick-next{right:unset;left:calc(50% + 2rem);}
  .visual.slide-type .buttons button{right:unset;left:calc(50% + 6.5rem);}
  #mafra-footer .f-btm{padding-top:3rem;}
}

/**fnct**/
.listWrap > ul > li > a{transition:all ease .2s;}
.listWrap > ul > li > a:hover{outline: 0.2rem solid #fff;outline-offset: 0;box-shadow: 0 0 0 0.4rem #256ef4;}
@media all and (max-width: 368px) {
  .board-util .strd{flex-wrap:wrap;gap: 0.5rem;}
  .board-util .strd > li{width:100%;}
}

.board-view .view .feeling > ul > li button{background-position:center 2.2rem;}
.board-view .view .feeling > ul > li button:hover{animation-name:like-ani;animation-fill-mode:both;animation-duration:0.85s;}

@keyframes like-ani{
  0%{background-position:center center;}
  15%{background-position:center 2.4rem;}
  50%{background-position:center 1.4rem;}
  100%{background-position:center center;}
}

@media all and (max-width: 767px) {
  .board-view .view .feeling > ul > li button:hover{animation:none;}
}