/* layout start */
/* wrap */
.wrap {max-width:1400px; margin:0 auto;}
.sub.video .wrap {max-width:1200px; margin:0 auto;}

.popup1{
    display: none;
}

@media all and (max-width:1440px){
    .wrap {margin:0 20px;}
}


.event_content{
    border: 5px solid #fff;
    
}

.visual .num .num_text{
    font-size: 90px;
    display: inline !important;
    color: rgb(17, 18, 116) !important;
}

.video {
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    border-radius: 30px;
    background-color: #f0f0f0;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0px 8px 33px #999;
    
  }
   
  .video-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 50%;
  }
   
  iframe {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px;
  }


.share{
    border: 2px solid #fff;
    display: inline-block;
    width: 150px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    padding: 10px 0px;
    background: rgba(0, 0, 0, 0.2);
}

.share img{
    width: 15px;
    filter: drop-shadow(0px 0px 15px #fff);
}

.share span{
    margin-left: 10px;
}

.share_area{
    width: 100%;
    text-align: center;
    margin-top: 50px;
  
}

.popup_area{
    position: relative;
}

.popup {
    display: none;
    transform: translate(-50%);
    position: absolute;
    left: 50%;
    width: 80%;
    z-index: 500;
    max-width: 500px;
    padding: 20px;
    margin: 0 auto;
    background: #333;
    border-radius: 25px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, .15);
    z-index: 100;bottom: 50px;
}

.popup h2{
    font-weight: bold;
}

.popup.show {
    display: block;
    transition: all 0.5s;
}

.popup .popup_close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 25px;
    color: gray;
    transition: all 0.5s;
    width: 30px;
    text-align: center;
}

.popup a.popup_close:hover {
    color: #fff;
}

.popup hr {
    display: block;
    border: none;
    border-bottom: 1px dashed silver;
    padding: 5px 0;
}

.popup ul {
    height: auto;
}

.popup h2{
    color: #fff;
}

.popup ul li {
    width: 50%;
    float: left;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
}


.popup ul li img {
    height: 42px;
    margin: 10px;
    border-radius: 10px;
    vertical-align: middle;
}


.event_button{
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    display: none;
    position: fixed;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%);
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    border: 5px solid #fff;
    z-index: 101;
    background: rgb(226, 166, 36);
    font-weight: bold;
    box-shadow: 0px 0px 5px rgb(174, 174, 174);
    bottom: 30px;
}

.event_button:hover{
    box-shadow: 0px 0px 10px rgb(238, 238, 238);
}


/* skip */
.skip ul > li > a {display:block; width:100%; text-align:center; line-height:30px; font-size:14px; font-weight:700; color:#fff; background:#222; position:absolute; left:0; top:-110%; z-index:900;}
.skip ul > li > a:focus {top:0;}



/* header */
header {position:fixed; left:0; top:0; width:100%; height:100px; box-sizing:border-box; border-bottom:1px solid #d6d6d6; background:rgba(255,255,255,0.3); z-index:300; transition:0.3s;}
header.active {background:#fff;}
header.sub {background:#fff; border-bottom:1px solid #214f8a;}

header .left {float:left;}
header .right {float:right; font-size:0; margin-top:25px;}

header .logo {font-size:0;}
header .logo a {display:block;}
header .logo img {vertical-align:top; margin-right:20px;}
header .logo img:last-child {margin:0;}

header .history {display:inline-block; padding:12px 29px; background:#fff; border-radius:50px; color:#222; vertical-align:middle; box-shadow:0 0 10px rgba(0,0,0,0.3); font-size:18px;}

header nav {display:inline-block; vertical-align:middle;}

header .sitemap_open {display:inline-block; width:50px; height:50px; border-radius:100%; background:rgb(17, 18, 116); box-shadow:0 0 10px rgba(0,0,0,0.3); position:relative; margin-left:5px;}
header .sitemap_open .icon {position:absolute; width:100%; height:auto; left:0; top:50%; transform:translateY(-50%);}
header .sitemap_open .icon span {display:block; width:40%; margin:0 auto 12% auto; height:2px; background:#fff;}
header .sitemap_open .icon span:last-child {margin:0 auto;}

header .sitemap {display:none; position:fixed; right:0; top:0; width:100%; height:100%;}
header .sitemap .inner {position:fixed; right:-110%; top:0; width:33.33%; min-width:320px; height:100%; background:#fff; z-index:302; transition:0.3s;}
header .sitemap .inner.active {right:0;}
header .sitemap .list {font-size:24px; line-height:1.3em; text-align:center; color:#222; font-weight:700; padding-top:71px;}
header .sitemap .list > li {margin-bottom:19px;}
header .sitemap .list > li > a {position:relative; padding-bottom:7px;}
header .sitemap .list > li > a:after {content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#214f8a; transition:0.3s;}
header .sitemap .list > li > a:hover, header .sitemap .list > li > a:focus {color:#214f8a;}
header .sitemap .list > li > a:hover:after, header .sitemap .list > li > a:focus:after {width:100%;}
header .sitemap .list > li > a > span {font-size:0; position:relative;}
header .sitemap .list > li > a > span:before {
    content:"e"; font-size:24px; line-height:1; width:24px; height:24px; background:#222; color:#fff; display:inline-block; vertical-align:middle; border-radius:100%; transition:0.3s; margin-right:2px;
}
header .sitemap .list > li > a:hover > span:before, header .sitemap .list > li > a:focus > span:before {background:#214f8a;}
header .sitemap .bg {position:absolute; right:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:301; display:none;}

header .sitemap_close {display:block; width:30px; height:30px;     background: rgb(17, 18, 116); font-size:0; line-height:0; position:absolute; right:15px; top:15px; border-radius:100%;}
header .sitemap_close:before {content:""; position:absolute; width:50%; height:3px; background:#fff; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg);}
header .sitemap_close:after {content:""; position:absolute; width:50%; height:3px; background:#fff; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg);}

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

    header {height:80px;}

    header .right {margin-top:19px;}

    header .logo img {height:80px; width:auto; margin-right:10px;}

    header .history {font-size:16px; padding:10px 29px;}

    header .sitemap_open {width:45px; height:45px;}

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

    header {height:60px;}

    header .right {margin-top:11px;}

    header .logo img {height:60px; width:auto;}

    header .history {font-size:14px; padding:8px 19px;}

    header .sitemap_open {width:30px; height:30px;}

    header .sitemap .list {font-size:18px; padding-top:61px;}
    header .sitemap .list > li {margin-bottom:10px;}

    header .sitemap .list > li > a > span:before {width:18px; height:18px; font-size:18px;}

}



/* sub */
.container .sub {margin-top:100px; padding-top:100px;}
.container .sub .contents {font-size:24px; color:#000; font-weight:300; line-height:1.75em; letter-spacing:0.05em;}
.container .sub .inner {max-width:988px; box-sizing:border-box; margin:0 auto;}
@media all and (max-width:1024px){

    .container .sub {margin-top:80px;}
    .container .sub .contents {font-size:21px;}

}

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

    .container .sub {margin-top:60px; padding-top:80px;}
    .container .sub .contents {font-size:18px;}
    .video {
        padding: 20px;
      }

}


.container .sub.snow {background:#ffffff url(../img/contents_sub_bg.jpg) left top no-repeat; padding-bottom:125px; position:relative; overflow:hidden;}
.container .sub.snow .deco {position:absolute; left:0; bottom:0; width:auto; height:auto;}
.container .sub.snow .deco .snowman {
    position:absolute; right:10%; bottom:0; width:478px; height:436px; z-index:50; pointer-events:none;  right center no-repeat; background-size:cover;
}
@media all and (max-width:1440px){
    .container .sub.snow .deco .snowman {right:0; width:400px; height:364px;}
}
@media all and (max-width:1020px){
    .container .sub.snow .deco .snowman {width:380px; height:346px;}
}
@media all and (max-width:768px){
    .container .sub.snow {padding-bottom:200px;}
    .container .sub.snow .deco .snowman {width:330px; height:301px;}
}
@media all and (max-width:640px){
    .container .sub.snow .deco .snowman {width:274px; height:250px;}
}
@media all and (max-width:480px){
    .container .sub.snow .deco .snowman {width:219px; height:200px;}
    .video {
        padding: 10px;
      }

    .video iframe{
        border-radius: 20px;
    }
}



/* footer */
footer .sns {background:#333; padding:15px 0; position:relative; z-index:100;}
footer .sns ul {font-size:0; text-align:center;}
footer .sns ul li {display:inline-block; vertical-align:top; margin-right:10px;}
footer .sns ul li:last-child {margin:0;}
footer .sns ul li > a {display:block; line-height:1;}

footer .info {background:#222; height:200px; text-align:center; font-size:0.778em;}
footer .f_logo {display:inline-block;}
footer .f_logo > img {display:block; margin:0 auto; padding-top:30px;}
footer address {margin-top:15px;}
footer p {margin-top:2px; font-size:0.722em;}

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

    footer .info {height:180px;}

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

    footer .sns {padding:10px 0;}
    footer .sns ul li img {width:25px; height:25px;}

    footer .info {height:150px;}
    footer .f_logo > img {width:170px; padding-top:20px;}
    footer address {margin-top:11px;}
    .visual .num .num_text{font-size: 80px;}

}
/* layout end */



/* main start */
/* visual */
.main .visual {background:url(../img/main_slick_bg.jpg) center center no-repeat; background-size:cover; overflow:hidden;}

.main .visual .inner {padding:130px 100px 80px 100px; position:relative;}

.main .visual .date {text-align:center; position:relative; z-index:102;}

.main .visual .date span {display:block; font-family:"Rajdhani"; color:#fff; font-weight:700;}

.main .visual .date .eng {font-size:1.333em; color: #043763; margin-bottom: 10px;}

.main .visual .date .num {font-size:6em; position:relative; margin-top:-12px; color: rgb(17, 18, 116);}
.main .visual .date .num:before {content:"";position:absolute;left:0;top:50%;width: calc(50% - 200px);height:12px;background:#fff;transform:translateY(-50%);}
.main .visual .date .num:after {content:"";position:absolute;right:0;top:50%;width: calc(50% - 200px);height:12px;background:#fff;transform:translateY(-50%);}

.main .visual .slick-wrap {position:relative;}
.main .visual .slick-deco {width:109.85%; height:100%; position:absolute; bottom:0; left:50%; background:url(../img/main_slick_deco.png) left bottom no-repeat; background-size:contain; transform:translateX(-50%);
    z-index:102; pointer-events:none;
}

.main .visual .slick {
    margin-top:-76px; height:640px; padding:64px 12px 88px 12px; box-sizing:border-box; position:relative; background:url(../img/main_sub_bg.jpg) center center no-repeat; background-size:cover;
}
.main .visual .slick:after {content:""; width:100%; height:100%; box-sizing:border-box; position:absolute; left:0; top:0; border:12px solid #fff; border-top:none; z-index:100;}

.main .visual .slick .slick-list {position:relative; z-index:101;}

.main .visual .slick .item {text-align:center; margin:0 45px;}

.main .visual .slick .border {padding:9px; border:1px solid #fff; position:relative; width:720px; box-sizing:border-box;}

.main .visual .slick .badge {font-size:1.333em; font-weight:700; color:#fff; padding:10px 39px; background:rgb(17, 18, 116); border-radius:50px; position:relative; z-index:101; top:16px;}
.main .visual .slick .badge > span {font-size:0; line-height:1; display:inline-block; position:relative;}
.main .visual .slick .badge > span:before {content:"e"; display:inline-block; width:24px; height:24px; background:#fff; color:#214f8a; font-size:24px; border-radius:100%; margin-right:2px;}

.main .visual .slick .box {background:rgba(255,255,255,0.4); padding:71px 0 40px 0;}

.main .visual .slick .text span {color:#0d2b50; font-size:2.667em; font-weight:400; display:block;}
.main .visual .slick .text h3 {color:#222;font-size:3.333em;font-weight: 900;margin-top:3px;}
.main .visual .slick .text em {font-size:1.333em;color:#5b7799;font-weight:700;margin-top: 26px;word-break: break-word;display:block;}

.main .visual .slick .more {
    display:inline-block; font-size:0.889em; color:#222; font-weight:700; border:2px solid #fff; border-radius:50px; border-radius:50px; padding:6px 26px; margin-top:44px; position:relative; overflow:hidden;
}
.main .visual .slick .more:after {content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#fff; transition:0.3s; z-index:-1;}
.main .visual .slick .more:hover:after {width:100%;}

.main .visual .arrows {position:absolute; left:0; top:55%; width:100%; height:auto; z-index:102; transform:translateY(-50%); pointer-events:none;}
.main .visual .arrows a {display:inline-block; width:50px; height:88px; font-size:0; line-height:0; position:relative; pointer-events:all;}
.main .visual .arrows a:last-child {margin:0;}

.main .slick-prev {background:url(../img/main_slick_prev.png) left center no-repeat; background-size:cover; float:left; left:0;}
.main .slick-next {background:url(../img/main_slick_next.png) right center no-repeat; background-size:cover; float:right; right:0;}

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

    .main .visual .date .num:after {right:1px;width: calc(50% - 200px);}

}

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

    .main .visual .inner {padding:167px 5% 80px 5%;}

    .main .visual .date {top:-32px;}    

    .main .visual .date .eng {font-size:1.125em;/* background: red; */padding-bottom: 20px;}

    .main .visual .date .num {font-size: 7em;margin-top:-26px;}
    .main .visual .date .num:before {width: calc(50% - 180px);}
    .main .visual .date .num:after {width: calc(50% - 180px);}

    .main .visual .slick {height:500px;}

    .main .visual .slick .border {width:500px;}

    .main .visual .slick .badge {font-size:1.125em; top:12px;}
    .main .visual .slick .badge > span:before {width:18px; height:18px; font-size:18px; margin-right:2px;}

    .main .visual .slick .box {padding:45px 0 40px 0;}

    .main .visual .slick .text span {font-size:1.8em;}
    .main .visual .slick .text h3 {font-size:2.25em;}
    .main .visual .slick .text em {font-size:1.125em;}

    .main .visual .slick .more {margin-top:35px;}

    .main .visual .arrows a {width:40px; height:70px;}
    .main .slick-prev {left:-10px;}
    .main .slick-next {right:-10px;}
}

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

    .main .visual .inner {padding:159px 5% 60px 5%;}

    .main .visual .date {top:-43px;}

    .main .visual .date .num:before {height:8px;}
    .main .visual .date .num:after {height:8px;}

    .main .visual .slick {height:430px; padding:57px 12px 88px 12px;}
    .main .visual .slick:after {border:8px solid #fff; border-top:none;}

    .main .visual .slick .border {width:480px;}

    .main .visual .slick .badge {top:10px;}

    .main .visual .slick .box {padding:34px 0 30px 0;}

    .main .visual .slick .text em {margin-top:9px;}

    .main .visual .slick .more {margin-top:27px;}

    .main .visual .arrows a {width:15px; height:61px;}
    .main .slick-prev {left:-5px;}
    .main .slick-next {right:-5px;}
    

}

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

    .main .visual .slick {height:370px;}

    .main .visual .slick .border {width:350px;}

    .main .visual .slick .text span {font-size:1.857em;}
    .main .visual .slick .text h3 {font-size:2em;}

}

@media all and (max-width:480px){
    .visual .num .num_text{
        font-size: 60px;
    }
    .main .visual .date {top:-64px;}

    .main .visual .date .eng {font-size:1em;padding-bottom: 0px;}

    .main .visual .date .num {font-size: 5em;margin-top: 2px;}
    .main .visual .date .num:before {height:4px;width: calc(50% - 150px);}
    .main .visual .date .num:after {height:4px;width: calc(50% - 150px);}

    .main .visual .slick {height:350px; padding:37px 10px 0px 10px;}
    .main .visual .slick:after {border:4px solid #fff; border-top:none;}

    .main .visual .slick .border {width:220px;/* width: 82%; */}
    .main .visual .slick .box {padding:26px 10px 20px 10px;/* margin: 0 auto; */}

    .main .visual .slick .text span {font-size:1em;}
    .main .visual .slick .text h3 {font-size:1.714em;}
    .main .visual .slick .text em {font-size:0.8em;     word-break: keep-all;}

    .main .visual .slick .more {margin-top:17px;}

    .main .slick-prev {left:-10px;}
    .main .slick-next {right:-10px;}

}



/* contents */
.main .contents {margin-top:96px; text-align: center;}
.main .contents .title {font-size:3.556em; color:#000; font-weight:300;}
.main .contents .title > span {font-size:0; line-height:1; display:inline-block; position:relative;}
.main .contents .title > span:after {
    content:""; display:inline-block; width:80px; height:80px; background:rgb(17, 18, 116); color:#fff; font-size:56px; border-radius:100%; margin-left:13px; font-weight:700; line-height:80px;
}

.main .contents .title > span.eng{color: #fff !important; font-family:"Noto Sans"; font-weight: bold;}
.main .contents .title > span.eng:after {content:"人";}

.main .contents .title > span.eng2{color: #fff !important; font-weight: bold;}
.main .contents .title > span.eng2:after {content:"in";}
.main .contents .title > span.chn:after {content:"人"; font-family:"Noto Sans JP";}

.main .contents .list {margin-top:60px; font-size:0;}
.main .contents .list > li {display:inline-block; font-size:18px; width:calc(33.33% - 26.66px); vertical-align:top;}

.main .contents .list > li:nth-child(4){
    margin-top: 40px;
}


.main .contents .list > li:nth-child(5){
    margin-top: 40px;
}


.main .contents .list > li:nth-child(6){
    margin-top: 40px;
}

.main .contents .list > li:last-child {margin:0;}
.main .contents .list > li.char {position:relative;}
.main .contents .list > li.char > div {width:100%; height:100%;}
.main .contents .list > li.char span {display:block; position:absolute; width:100%; height:auto;}
.main .contents .list > li.char span > img {width:auto; height:auto; max-width:100%; max-height:100%;}
.main .contents .list > li.char span.date {left:0; top:0;}
.main .contents .list > li.char span.snowman {right:0; bottom:0;}

.main .contents .list > li.char .mobile {display:none;}

.main .contents .list img {display:block; width:100%; height:auto;}

.add_margin{
    margin-right: 40px;
}

.main .contents .text {
    background:#fff; padding:61px 40px 40px 40px; width:calc(100% - 30px); margin:-40px auto 0 auto; box-sizing:border-box; box-shadow:10px 10px 10px rgba(0,0,0,0.2); position:relative; z-index:200;
    border-bottom:2px solid #214f8a;
}
.main .contents .text:before {content:""; position:absolute; left:0; bottom:0; width:100%; height:0%; background:#214f8a; z-index:-1; transition:0.3s;}
.main .contents .list > li > a:hover .text:before {height:100%;}

.main .contents .badge {
    display:block; width:50%; background:rgb(17, 18, 116); border-radius:50px; color:#fff; line-height:50px; position:absolute; left:50%; top:-25px; transform:translateX(-50%); font-size:1.111em; transition:0.3s;
}
.main .contents .badge > span {font-size:0; line-height:1; display:inline-block; position:relative;}
.main .contents .badge > span:before {
    content:"e"; display:inline-block; width:20px; height:20px; background:#fff; color:#214f8a; font-size:20px; border-radius:100%; margin-right:2px; font-weight:700; transition:0.3s;
}
.main .contents .list > li > a:hover .badge {background:#fff; color:#214f8a;}
.main .contents .list > li > a:hover .badge > span:before {background:#214f8a; color:#fff;}

.main .contents h3 {font-size:1.556em; font-weight:400; color:#222; transition:0.3s;}
.main .contents p {margin-top:22px; transition:0.3s;}
.main .contents .list > li > a:hover h3 {color:#fff;}
.main .contents .list > li > a:hover p {color:#fff;}

.main .contents:last-child {padding-bottom:140px; background:url(../img/main_contents_bg.jpg) bottom center no-repeat; background-size: contain}

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

    .main .contents .title > span:after {width:71px; height:71px; font-size:49px; line-height:71px;}

    .main .contents .list > li {font-size:16px; width:calc(50% - 20px); margin:0 40px 40px 0;}
    .main .contents .list > li:nth-child(2n) {margin:0 0 40px 0;}

    .main .contents .badge > span:before {width:17px; height:17px; font-size:17px;}

}

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

    
    .main .contents {margin-top:77px;}

    .main .contents .title {font-size:38px;}
    .main .contents .title > span:after {width:47px; height:47px; font-size:30px; line-height:47px;}

    .main .contents .list {margin-top:50px;}

    .main .contents .list > li {font-size:14px; width:calc(50% - 15px); margin:0 30px 30px 0;}
    .main .contents .list > li:nth-child(2n) {margin:0 0 30px 0;}

    .main .contents .text {padding:52px 30px 30px 30px; margin:-30px auto 0 auto;}

    .main .contents .badge > span:before {width:15px; height:15px; font-size:15px;}

    .main .contents p {margin-top:12px;}

    .main .contents:last-child {padding-bottom:120px;}

}

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

    .main .contents .list > li {display:block; width:100%; margin:0 0 40px 0;}
    .main .contents .list > li:last-child {margin:0;}
    .main .contents .list > li.char .pc {display:none;}
    .main .contents .list > li.char .mobile {display:block;}

}
/* main end */



/* contents start */
/* sub 공통 */
.sub .tab {font-size:0; text-align:center; margin-bottom:52px;}
.sub .tab > li {display:inline-block; vertical-align:top;}
@media all and (max-width:768px){
    .sub .tab {margin-bottom:32px;}
}

.sub .tab a {display:block; width:50px; height:50px; background:rgb(17, 18, 116); border-radius:100%; position:relative;}
.sub .tab a.prev{margin-right:20px;}
.sub .tab a.next{margin-left:20px;}
@media all and (max-width:768px){
    .sub .tab a {width:40px; height:40px;}
    .sub .tab a.prev{margin-right:15px;}
    .sub .tab a.next{margin-left:15px;}
}

.sub .tab a:before {
    content:""; width:10px; height:10px; box-sizing:border-box; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg);
}
.sub .tab a.prev:before {border-left:2px solid #fff; border-bottom:2px solid #fff;}
.sub .tab a.next:before {border-right:2px solid #fff; border-top:2px solid #fff;}

.sub .name {display:inline-block; font-size:24px; font-weight:700; color:#fff; padding:10px 40px; background:rgb(17, 18, 116); border-radius:50px;}
.sub .name > span {position:relative; font-size:0; position:inline-block;}
.sub .name > span:before {content:"e"; font-size:24px; width:24px; height:24px; display:inline-block; border-radius:100%; background:#fff; color:#214f8a; vertical-align:middle; line-height:1; margin-right:4px;}
@media all and (max-width:1024px){
    .sub .name {font-size:21px; padding:11px 40px;}
    .sub .name > span:before {font-size:21px; width:21px; height:21px;}
}
@media all and (max-width:768px){
    .sub .name {font-size:18px; padding:9px 30px;}
    .sub .name > span:before {font-size:18px; width:18px; height:18px;}
}

.sub .title {text-align:center; font-weight:400; margin-bottom:47px;}
.sub .title > h4 {font-size:2em; color:#222; margin-bottom:11px;}
.sub .title > p {color:#222;}
@media all and (max-width:768px){
    .sub .title {margin-bottom:37px;}
    .sub .title > h4 {margin-bottom:6px;}
}

.sub .imgwrap > img {width:100%; height:auto;}

.sub section {margin-bottom:50px;}
.sub section:last-child {margin-bottom:120px;}
@media all and (max-width:768px){
    .sub section {margin-bottom:30px;}
    .sub section:last-child {margin-bottom:80px;}
}

.sub section .text {padding:0px 0;}
@media all and (max-width:768px){
    .sub section .text {padding:42px 0;}
}

.sub section .text h5 {font-family:"Jua"; font-size:1.25em; position:relative; margin-bottom:20px;}
.sub section .text h3 {font-family:'BM DoHyeon OTF'; font-size:1.25em; position:relative; margin-bottom:20px;}
.sub section .text span {font-size:1.932em; position:absolute; left:0; top:50%; width:auto; height:auto; transform:translateY(-50%);}
.sub section .text strong {font-weight:800;}
@media all and (max-width:768px){
    .sub section .text h5 {margin-bottom:15px;}
}
@media all and (max-width:480px){
    .sub section .text span {position:static; transform:none; display:block;}
}

.sub section .imglist {font-size:0;}
.sub section .imglist > li {font-size:24px; display:inline-block; vertical-align:top;}
.sub section .imglist > li > img {width:100%; height:auto;}
.sub section .imglist.type1 > li {width:calc(50% - 8px); margin-right:14px;}
.sub section .imglist.type1 > li:last-child {margin:0;}
.sub section .imglist.type2 >li:nth-child(1) {width:calc(42.51% - 8px); margin-right:14px;}
.sub section .imglist.type2 >li:nth-child(2) {width:calc(57.49% - 8px); margin:0;}
.sub section .imglist.type2 >li p {font-size:0.833em; text-align:right;}
@media all and (max-width:1024px){
    .sub section .imglist > li {font-size:21px;}
}
@media all and (max-width:768px){
    .sub section .imglist > li {font-size:18px;}
}
@media all and (max-width:640px){
    .sub section .imglist > li {display:block;}
    .sub section .imglist.type1 > li {width:100%; margin:0 0 15px 0;}
    .sub section .imglist.type2 > li:nth-child(1) {width:100%; margin:0 0 15px 0;}
    .sub section .imglist.type2 > li:nth-child(2) {width:100%;}
    .sub section .imglist.type2 > li p {text-align:center;}
}

.sub section .textbox {background:#fff8c8; padding:40px; border-radius:30px;}
.sub section .textbox > img {float:left; margin-right:40px;}
@media all and (max-width:768px){
    .sub section .textbox {padding:30px;}
    .sub section .textbox > img {margin-right:30px;}
}
@media all and (max-width:640px){
    .sub section .textbox {text-align:center;}
    .sub section .textbox > img {float:none; margin:0 0 30px 0; height:200px; width:auto;}
    .sub section .textbox > p {text-align:left;}
}

.sub .contents.swiper {position:relative;}

.sub .swiper-slide {overflow:hidden; box-sizing:border-box; border:10px solid #fff; box-shadow:none; position:relative;}
.sub .swiper-slide:after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.5);}
@media all and (max-width:480px){
    .sub .swiper-slide {border:5px solid #fff;}
}

.sub .swiper-slide > img {display:block; width:100%; height:auto;}

.sub .swiper-slide.swiper-slide-active {box-shadow:0 0 10px rgba(0,0,0,0.3); max-width:none; max-height:none;}
.sub .swiper-slide.swiper-slide-active:after {display:none;}

.sub .swiper-button {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:auto; z-index:1; pointer-events:none;}
.sub .swiper-button > a {font-size:0; display:block; width:42px; height:80px; position:relative; z-index:2; pointer-events: all;}
.sub .swiper-button > a:after {content:""; width:55px; height:55px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg);}
.sub .swiper-button > a.swiper-button-prev:after {border-left:2px solid #fff; border-bottom:2px solid #fff;}
.sub .swiper-button > a.swiper-button-next:after {border-right:2px solid #fff; border-top:2px solid #fff;}
.sub .swiper-button > a.swiper-button-prev {float:left; position:relative; left:0;}
.sub .swiper-button > a.swiper-button-next {float:right; position:relative; right:0;}
@media all and (max-width:768px){
    .sub .swiper-button > a {width:34px; height:65px;}
    .sub .swiper-button > a:after {width:44px; height:44px;}
}
@media all and (max-width:480px){
    .sub .swiper-button > a {width:26px; height:50px;}
    .sub .swiper-button > a:after {width:34px; height:34px;}
}

.sub .swiper-pagination {width:100%; height:auto; position:static; margin-top:24px;}
.sub .swiper-pagination > span {width:8px; height:8px; border-radius:100%; background:#cfe2ff; opacity:1; vertical-align:middle;}
.sub .swiper-pagination > span.swiper-pagination-bullet-active {width:12px; height:12px; background:#214f8a;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin:0 7px;}
@media all and (max-width:768px){
    .sub .swiper-pagination {margin-top:4px;}
}

.sub .videowrap {padding-bottom:300px;}
.sub .videowrap .borderbox {border:10px solid #fff; box-sizing:border-box; position:relative;}
.sub .videowrap .borderbox:after {content:""; display:block; padding-bottom:56.25%;}
.sub .videowrap iframe {position:absolute; left:0; top:0; width:100%; height:100%; border:none;}
@media all and (max-width:1024px){
    .sub .videowrap {padding-bottom:250px;}
}
@media all and (max-width:768px){
    .sub .videowrap {padding-bottom:130px;}
}
@media all and (max-width:640px){
    .sub .videowrap {padding-bottom:60px;}
}
@media all and (max-width:480px){
    .sub .videowrap {padding-bottom:15px;}
    .sub .videowrap .borderbox {border:5px solid #fff;}
}



/* 04 식약지킴이 */
.sub .inner.fp .text h5 {color:#fe9e7f; padding-left:53px;}
.sub .inner.fp .text span {color:#ffd6c9;}
.sub .inner.fp .text span2 {color:#2caea7;}
@media all and (max-width:1024px){
    .sub .inner.fp .text h5 {padding-left:51px;}
}
@media all and (max-width:768px){
    .sub .inner.fp .text h5 {padding-left:46px;}
}
@media all and (max-width:480px){
    .sub .inner.fp .text h5 {padding-left:0;}
}

.sub .inner.fp .imglist.type2 {margin:40px 0 28px 0;}
@media all and (max-width:768px){
    .sub .inner.fp .imglist.type2 {margin:30px 0 18px 0;}
}

.sub .inner.fp .imgwrap.mg {margin:40px 0;}
@media all and (max-width:768px){
    .sub .inner.fp .imgwrap.mg {margin:30px 0;}
}
.sub .inner.fp .twocut {font-size:0;}
.sub .inner.fp .twocut li {display:inline-block; vertical-align:middle; width:calc(50% - 29px); margin-right:54px;}
.sub .inner.fp .twocut li:last-child {margin:0;}
.sub .inner.fp .twocut li.text {font-size:24px;}
.sub .inner.fp .twocut li.imgwrap {width:calc(50% - 27px);}
@media all and (max-width:1024px){
    .sub .inner.fp .twocut li.text {font-size:21px;}
}
@media all and (max-width:768px){
    .sub .inner.fp .twocut li {display:block; width:100%; margin:0;}
    .sub .inner.fp .twocut li.imgwrap {width:100%;}
    .sub .inner.fp .twocut li.text {font-size:18px;}
}



/* 05 알쓸식약 */
.sub .inner.mask .text h3 {color:#226e7d;}
.sub .mask_wrap {padding-bottom:60px;}
.sub .inner.mask {border:16px solid #ffe8bf; border-radius:30px;}
@media all and (max-width:768px){
    .sub .inner.mask {border:8px solid #ffe4db;}
}
@media all and (max-width:480px){
    .sub .inner.mask {word-break:break-all;}
}

.sub .inner.mask section {padding:0 30px;}
@media all and (max-width:768px){
    .sub .inner.mask section {padding:0 20px;}
}

.sub .inner.mask .text h5 {color:#1e4d8e; padding-left:86px;}
.sub .inner.mask .text span {color:#afd0fd;}
@media all and (max-width:1024px){
    .sub .inner.mask .text h5 {padding-left:75px;}
}
@media all and (max-width:768px){
    .sub .mask_wrap {padding-bottom:40px;}
    .sub .inner.mask .text h5 {padding-left:65px;}
}
@media all and (max-width:480px){
    .sub .inner.mask .text h5 {padding-left:0;}
}

.sub .inner.mask .twocut {font-size:0;}
.sub .inner.mask .twocut li {display:inline-block; vertical-align:middle; width:calc(50% - 29px); margin-right:54px;}
.sub .inner.mask .twocut li:last-child {margin:0;}
.sub .inner.mask .twocut li.text {font-size:24px;}
.sub .inner.mask .twocut li.imgwrap {width:calc(50% - 27px);}
@media all and (max-width:1024px){
    .sub .inner.mask .twocut li.text {font-size:21px;}
}
@media all and (max-width:768px){
    .sub .inner.mask .twocut li {display:block; width:100%; margin:0;}
    .sub .inner.mask .twocut li.imgwrap {width:100%;}
    .sub .inner.mask .twocut li.text {font-size:18px;}
}
/* contents end */