@import url(/co/font/binggrae.css);
@import url(/co/font/notosanskr.css);
@import url(/co/font/NanumSquareRound.css);

*, :before, :after { box-sizing: border-box; margin: 0; padding: 0; word-break: keep-all; }
*:focus { outline: none; }
a { color: inherit; font: inherit; text-decoration: none; }
body { background: #ffffff; height: 100%; text-align: center; width: 100%; }
footer { width: 100%; }
header { width: 100%; }
html { height: 100%; width: 100%; }
img { border: 0; display: inline-block; vertical-align: middle; }
li { list-style: none; }
nav { display: none; }
section { width: 100%; }
strong { font-family: inherit; font-size: inherit; font-weight: bold; }
ul { list-style: none; }

.btn01 { background-color: #2b71b9; border:1px solid #2b71b9; border-radius: 4px; color: #ffffff; cursor: pointer; display: inline-block; font: 700 20px/32px 'NanumSquareRound'; padding: 15px; text-align: center; vertical-align: middle; }
.btn02 { background-color: #ed4d3d; border:1px solid #ed4d3d; border-radius: 4px; color: #ffffff; cursor: pointer; display: inline-block; font: 700 20px/32px 'NanumSquareRound'; padding: 15px; text-align: center; vertical-align: middle; }

.dsk { display: block; }
.mbi { display: none; }

.txt00 { color: #ed4d3d; font: 700 18px/30px 'NanumSquareRound'; }
.txt20 { color: #666666; font: 400 15px/24px 'NanumSquareRound'; letter-spacing: 0; }
.txt21 { color: #9e9e9e; font: 400 13px/23px 'NanumSquareRound'; letter-spacing: 0; }

.wrap { margin: 0 auto; position: relative; width: 1280px; }

footer.footer { background: linear-gradient(to bottom, #dddddd 0, #ffffff 1px, #ffffff 56px, #dddddd 57px, #FFFFFF 57px); height: 230px; margin: 100px 0 0 0; }
footer.footer .wrap .txt20 { line-height: 56px; text-align: left; }
footer.footer .wrap .fwrap { padding: 20px 0 40px 0; text-align: left; }
footer.footer .wrap .fwrap .iwrap { display: inline-block; vertical-align: top; }
footer.footer .wrap .fwrap .iwrap img { width: 110px; }
footer.footer .wrap .fwrap .twrap { display: inline-block; margin-left: 20px; text-align: left; vertical-align: top; }

header.header { background-color: rgba(255, 255, 255, 1); box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.1); height: 80px; left: 0; position: fixed; top: 0; z-index: 10; }
header.header .wrap { line-height: 80px; }
header.header .wrap .logo { float: left; }
header.header .wrap .logo img[alt=logo] { width: 150px; }
header.header .wrap .menubtnl { display: none; position: absolute; right: 20px; top: 7.5px; }
header.header .wrap .menubtn { display: none; }
header.header .wrap .menubtnl .btnmenu { display: block; width: 30px; height: 25px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; 	}
header.header .wrap .menubtnl .btnmenu span { display: block; position: absolute; height: 5px; width: 100%; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; 	}
header.header .wrap .menubtnl .btnmenu span:nth-child(1) { background-color: rgb(250, 62, 62); top: 0px; }
header.header .wrap .menubtnl .btnmenu span:nth-child(2),.btnmenu span:nth-child(3) { background-color: rgb(250, 62, 62); top: 10px; }
header.header .wrap .menubtnl .btnmenu span:nth-child(4) { background-color: rgb(0, 87, 184); top: 20px; }
header.header .wrap .menubtn:checked ~ .menubtnl { z-index: 2; }
header.header .wrap .menubtn:checked ~ .menubtnl .btnmenu span:nth-child(1) { left: 50%; top: 10px; width: 0%; }
header.header .wrap .menubtn:checked ~ .menubtnl .btnmenu span:nth-child(2) { transform: rotate(45deg); }
header.header .wrap .menubtn:checked ~ .menubtnl .btnmenu span:nth-child(3) { transform: rotate(-45deg); }
header.header .wrap .menubtn:checked ~ .menubtnl .btnmenu span:nth-child(4) { left: 50%; top: 10px; width: 0%; }
header.header .wrap .menubtn:checked ~ .menu { background: rgba(0, 0, 0, 0.7); display: block; float: none; height: 100%; opacity: 0.95; position: fixed; left: 0; top: 0; width: 100%; }
header.header .wrap .menubtn:checked ~ .menu ul { background: url(/co/res/logo/ybmpublwiz.png) no-repeat center 30px, linear-gradient(to bottom, #ffffff 0, #ffffff 100px, #23ac38 100px, #23ac38); background-size: 100px; height: 100%; padding-top: 100px; position: fixed; right: 0; top: 0; width: 90%; }
header.header .wrap .menubtn:checked ~ .menu ul li { background: ; display: block; margin: 0; }
header.header .wrap .menubtn:checked ~ .menu ul li a { color: #ffffff; display: block; }
header.header .wrap .menubtn:checked ~ .menu ul li a:hover { background-color: #e43052; }
header.header .wrap .menubtn:checked ~ .menu ul li a.active { background-color: #e43052; }
header.header .wrap .menu { float:right; }
header.header .wrap .menu ul { }
header.header .wrap .menu ul li { display: inline-block; margin: 0 20px; }
header.header .wrap .menu ul li a { color: #222222; font: 700 18px/30px 'NanumSquareRound'; letter-spacing: 0px; transition:.25s ease-in-out; }
header.header .wrap .menu ul li a:hover { color: #23ac38; }
header.header .wrap .menu ul li a.active { color: #23ac38; }

section { padding: 80px 0 0 0; }
section.s0 .wrap { height: 600px; width: 100%; }
section.s0 .wrap .swiper { left: 50%; margin: 0 auto; position: absolute; top: 0; transform: translate(-50%, 0); width: 1920px; z-index: 1; }
section.s0 .wrap .swiper .swiper-slide img { margin: 0 auto; text-align: center; }
section.s1 .wrap { height: 820px; }
section.s1 .tabwrap { align-items: center; display: flex; gap: 30px; justify-content: center; }
section.s1 .tabwrap .tab { flex: 1; }
section.s1 .samplewrap { margin: 30px 0 0 0; }
section.s1 .samplewrap iframe { border: 0; border-radius: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); height: 760px; width: 100%; }

/*@media (min-width:415px) and (max-width:1169px) {*/
@media (min-width: 603px) and (max-width: 1169px) {
    .dsk { display: none; }
    .mbi { display: block; }
    .wrap { padding: 0 10px; width: 768px; }

    header.header { height: 70px; }
    header.header .wrap { line-height: 70px; }
    header.header .wrap .logo img[alt=logo] { width: 100px; }
    header.header .wrap .menu ul li a { font: 700 15px/30px 'NanumSquareRound'; }

    section { padding: 70px 0 0 0; }
    section.s0 .wrap { height: 450px; }
    section.s0 .wrap .swiper { width: 100%; }
    section.s1 .wrap { height: 250px; }
}

/*@media (max-width:414px) {*/
@media (max-width: 602px) {

    .dsk { display: none; }
    .mbi { display: block; }
    a.mbi { font-size: 16px; height: 100px; line-height: 20px; }
    a.mbi img { display: block; margin: 5px auto; width: 40px; }
    .wrap { padding: 0 10px; width: 360px; }

    header.header { height: 50px; }
    header.header .wrap { line-height: 50px; }
    header.header .wrap .logo img[alt=logo] { width: 100px; }
    header.header .wrap .menubtnl { display: block; top: -50%; transform: translate(0, 50%); }
    header.header .wrap .menu { display: none; }
    header.header .wrap .menu ul li a { font-size: 25px; line-height: 40px; }

    section { padding: 50px 0 0 0; }
    section.s0 .wrap { height: 450px; }
    section.s0 .wrap .swiper { width: 100%; }
    section.s1 .wrap { height: 100px; }

    footer.footer .wrap .txt20 { text-align: center; }
    footer.footer .wrap .fwrap { text-align: center; }
    footer.footer .wrap .fwrap .twrap { font-size: 12px; margin: 10px 0; text-align: center; }
    footer.footer .wrap .fwrap .twrap .email { display: inline-block; }
}