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

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



/* 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:#214f8a; 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:#214f8a; 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;}

}


.container .sub.snow {background:#b1c9e9 url(../img/contents_sub_bg.jpg) left top no-repeat; padding-bottom:142px; 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; background:url(../img/contents_sub_snowman.png) 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;}
}



/* 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;}

}
/* layout end */



/* main start */
/* visual */
.main .visual {background:url(../img/main_visual_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;}

.main .visual .date .num {font-size:10em; position:relative; margin-top:-42px;}
.main .visual .date .num:before {content:""; position:absolute; left:0; top:50%; width:calc(50% - 150px); height:12px; background:#fff; transform:translateY(-50%);}
.main .visual .date .num:after {content:""; position:absolute; right:0; top:50%; width:calc(50% - 150px); 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:-111px; height:640px; padding:64px 12px 88px 12px; box-sizing:border-box; position:relative; background:url(../img/main_slick_bg.png) 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:#214f8a; 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:700; margin-top:3px;}
.main .visual .slick .text em {font-size:1.333em; color:#5b7799; font-weight:700; margin-top:12px; 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% - 150px);}

}

@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;}

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

    .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){

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

    .main .visual .date .eng {font-size:1em;}

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

    .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;}
    .main .visual .slick .box {padding:26px 10px 20px 10px;}

    .main .visual .slick .text span {font-size:1em;}
    .main .visual .slick .text h3 {font-size:1.714em;}
    .main .visual .slick .text em {font-size:1em;}

    .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:#214f8a; color:#fff; font-size:56px; border-radius:100%; margin-left:13px; font-weight:700; line-height:80px;
}
.main .contents .title > span.eng: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; margin-right: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;}


.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:#214f8a; 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;}

@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:#043763; 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:#214f8a; 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:#4D73FF; padding-left:53px;}
.sub .inner.fp .text span {color:#ABBDFF;}
.sub .inner.fp .text span2 {color:#f87731;}
@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 */