@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
* { margin:0; padding:0; font:inherit; color:inherit; } 
*, :after, :before { box-sizing:border-box; flex-shrink:0; } 
:root { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; cursor:default; line-height:1.5; overflow-wrap:break-word; -moz-tab-size:4; tab-size:4 } 
html, body { height:100%; line-height: 1; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -0.025em; } 
img, picture, video, canvas, svg { display: block;  } 
video { box-sizing: border-box; } 
input { box-sizing: border-box; background: transparent; } 
button { background:none; border:0; cursor:pointer; box-sizing: border-box; background: transparent; } 
a { text-decoration:none; transition: 0.3s; } 
table { border-collapse:collapse; border-spacing:0 } 
ul, ol, li { list-style: none; } 
pre {white-space: pre-wrap;}

input[type=text], input[type=number], input[type=email], button, textarea, select , input[type=button], input[type=submit], input[type=reset] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
select { background: transparent url("../Images/sel_arrow.svg") no-repeat calc(100% - 1.18rem) 50%; } 
input,
input:focus {outline: none;}

:root {
    --cir1-width: 60%;
    --cir2-width: 88%;
    --cir3-width: 76%;
    --lg-gap : 40px;
    --vSlider-li-h : 100px;
    --vSlider-li-gap : 20px;
}


header > nav > button,
header > nav a {display: flex; color: #fff; background: #393939; width: 60px; height: 60px; justify-content: center; align-items: center; font-size: 22px; transition: 0.3s;}
header > nav > #csBtn,
header > nav > #ham {background: #fff; color: #393939;}
header > nav a:hover,
header > nav button:not(#ham):hover { opacity: 0.8;}

#wrap::before {content: ''; width: 100%; height: 100%; position: fixed; background: #111; z-index: -1; opacity: 0; transition: 0.4s;}
#hamSlideNav {position: fixed;  top: 0; right: 0;  display: flex; flex-direction: column; width: 90% ; max-width: 350px; height: 100vh; background: #111; transform: translateX(100%); transition: 0.3s; visibility: hidden; padding: 50px 0;}
#hamSlideNav > div {display: flex; flex-direction: column; border-bottom:  1px solid #ffffff3b; padding: 30px 25px;}
#hamSlideNav > div .depth-1 {color: #fff; font-size: 2.6vw; font-weight: 100; opacity: 0.7; padding-bottom: 15px;}
#hamSlideNav > div a.depth-1:hover { opacity: 1;}
#hamSlideNav > .closeHam { position: absolute ; top: 30px; right: 30px; color: #fff ; font-size: 36px; opacity: 0.7;}
#hamSlideNav > div:nth-of-type(2) {display: flex; gap: 10px;}
#hamSlideNav > div a.depth-2 {font-size: 16px; color: #fff; opacity: 0.8; position: relative; padding-left: 12px;} 
#hamSlideNav > div a.depth-2::before {content: '-'; position: absolute; top: 0; left: 0;}
#hamSlideNav > div a.depth-2:hover {opacity: 1;}
#hamSlideNav > div:nth-of-type(3) img {filter: grayscale(100%); opacity: 0.6; transition: 0.3s;}
#hamSlideNav > div:nth-of-type(3) a:hover img {opacity: 1; filter: grayscale(0%);}
#hamSlideNav > div:last-of-type {border-bottom: 0;}
#hamSlideNav > div:last-of-type p {color: #fff; line-height: 168%; opacity: 0.6;}
#hamSlideNav > div:last-of-type p > span {opacity: 0.5; font-weight: 100;}

#wrap.hamOn::before { z-index: 90; opacity: 0.6; visibility: visible;} 
#wrap.hamOn #hamSlideNav {transform: translateX(0); visibility: visible; z-index: 99;}

main {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%;} 
main > section {display: flex; width: 100%; align-items: center; justify-content: center; transition: 0.5s; position: relative; }
main > section > .secCon {position: absolute; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center;  }

.con1 { --theme-color: #123269; }
.con2 { --theme-color: #774945; }
.con3 { --theme-color: #227070; }
main > section:not(.mouseOn) {overflow: hidden;}

main > section > .secCon > .cirCon {display: flex; justify-content: center; align-items: center; border-radius: 100%;  position: relative; transition: 0.5s; z-index: 3; width: var(--cir1-width); 
    background-color: color-mix(in srgb, var(--theme-color) 30%, transparent);
}

main > section > .secCon  .cirCon::before {content: ''; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); display: block;  width: var(--cir2-width); height: var(--cir2-width); border-radius: 50%; z-index: 2;
    background-color: color-mix(in srgb, var(--theme-color) 50%, transparent);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%25' ry='50%25' stroke='%23ffffff65' stroke-width='1' stroke-dasharray='4, 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
main > section > .secCon  .cirCon > div {display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); justify-content: center; align-items: center; align-content: center; border-radius: 50%; text-align: center; width: var(--cir3-width); height: var(--cir3-width); z-index: 3;  
    background-color: color-mix(in srgb, var(--theme-color) 90%, transparent);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%25' ry='50%25' stroke='%23FFFFFF80' stroke-width='2' stroke-dasharray='4, 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

main > section .cirCon > div h2 {color: #fff; font-size: 1.8vw; width: 100%; padding-top: 12px; letter-spacing: 0;}
main > section .cirCon > div > span:nth-of-type(1) {order: -1; font-size: 1vw; color: #fff; opacity: 0.9; }
main > section .cirCon > div > span:last-of-type {margin-top: 20%; color: #fff; font-weight: 300; position: relative; opacity: 0.8; font-size: 0.8vw;}
main > section .cirCon > div > span:last-of-type::after { content: ''; width: 100%; height: 1px; background: #fff; display: block; position: absolute; opacity: 0.5; bottom: 0; left: 50%; transform: translate(-50%, 7px);}

main > section .cirCon::after {content: ''; display: block; padding-bottom: 100%;}



footer ul li::before {content: ''; display: block; background-size: cover;  background-position: center center; background-repeat: no-repeat;}
@media (min-width: 1548px) {    
    footer ul.swiper-wrapper {padding: 0 40px; gap: 60px}
    footer ul.swiper-wrapper li.swiper-slide {font-size: 17px;}

}

@media (max-width: 1440px) {  
    :root {
        --cir1-width: 80%;
    }
    #hamSlideNav > .closeHam {font-size: 26px;}
    #hamSlideNav > div {padding: 25px;}
    #hamSlideNav > div:first-of-type {padding-bottom: 10px;}
    main > section > .secCon > nav::before {font-size: 1.4vw;}
    main > section > .secCon > nav {width: 60%;}
    main > section > .secCon > nav a {font-size: 14px; height: 38px;}
    header > nav > #csBtn, header > nav > #ham {font-size: 16px;}
    header > nav > button, 
    header > nav a {width: 40px; height: 40px;}
    header > nav button > img,
    header > nav a > img {width: 100%;}


    footer ul.swiper-wrapper {gap: 22px}
    footer ul li.swiper-slide {font-size: 15px;}
    footer ul li.swiper-slide::before { width:15px; height: 15px; }
}
@media (max-width: 1180px) {  
    footer ul.swiper-wrapper {gap: 14px}
    footer ul li.swiper-slide {font-size: 14px; letter-spacing: -0.05em;}
    footer ul li.swiper-slide > span {display: none;}
    footer ul li::before { width:13px; height: 13px; }
} 

@media (min-width: 991px) {    
    #wrap {width: 100vw; max-width:1920px; margin: 0 auto; position: relative; padding: 0; overflow: hidden;}
    header > h1 {position: absolute; top: 25px; left: 36px; z-index: 80;}
    header > nav {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 9;}     
    main > section { height: 100vh; }
    main > section.mouseOn .cirCon {opacity: 0; z-index: 0;}
    main > section.mouseOn {overflow: visible;}
    main > section.mouseOn > img {z-index: 1;  filter: brightness(1); }
    main.onHas > section:not(.mouseOn) .cirCon,
    main.onHas > section:not(.mouseOn) .cirCon::before,
    main.onHas > section:not(.mouseOn) .cirCon > div {background: transparent; }
    main.onHas > section:not(.mouseOn) .cirCon > div {opacity: 0.4;}
    main.onHas > section:not(.mouseOn) .cirCon > div span:last-of-type {opacity: 0;}    
    
    main > section > .secCon > nav { position: absolute; z-index: 0; transition: 0.4s; display: flex; flex-direction: column; justify-content: flex-start;  align-items: center; color: #fff; width: 40%; gap: 7px; visibility: hidden; opacity: 0;}
    main > section.con1 > .secCon > nav::before { content: 'YOFLEX';}
    main > section.con2 > .secCon > nav::before { content: 'Education & Consulting';}
    main > section.con3 > .secCon > nav::before { content: 'E-Learning';}

    main > section.mouseOn > .secCon nav {opacity: 1; visibility: visible; z-index: 4;  }

    main > section > .secCon > nav::before {font-size: 32px; font-weight: 700; position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 20px)); white-space: nowrap; color: #fff;}
    main > section > .secCon > nav > a {border: 1px solid #ffffff85; width: 100%; text-align: center;  display: flex; justify-content: center; align-items: center; height: 46px; font-size: 16px; font-weight: 500; transition: 0.3s;} 
    main > section > .secCon > nav > a:hover {background: #3c7df3; border-color: transparent;}

    main > section > img {position: absolute; z-index: 0; filter: brightness(0.8);}
    main > section.con1 > img { top: 50%; left: 0; transform: translateY(-50%);}
    main > section.con2 > img { top: 50%; left: 50%; transform: translate(-50%,-50%);}
    main > section.con3 > img { top: 50%; right: 0; transform: translateY(-50%);}
    

    footer {position: fixed ; bottom: 0; left:50%; transform: translateX(-50%); z-index: 5; width: 100%; background: rgba(23, 51, 70, 0.8); }    
    footer ul { display: flex; justify-content: center; width: 100%; gap:40px;}
        
    footer ul li::before {width:16px; height: 16px; }
    footer ul li.li1::before {background-image: url('/img/pb_logo07.png'); }
    footer ul li.li2::before {background-image: url('/img/pb_logo04.png'); }
    footer ul li.li3::before {background-image: url('/img/pb_logo06.png'); }
    footer ul li.li4::before,
    footer ul li.li5::before {background-image: url('/img/pb_logo05.png'); }

    footer ul li.swiper-slide {width: auto; display: flex; color: #fff; display: flex; justify-content: center; align-items: center; height: 50px; font-size: 16px; opacity: 0.8;gap:4px; width: auto;}

}

@media (min-width:1124px) and (min-height: 880px) {
    main > section .cirCon { transform: translateY(-22%);  }
    main > section > .secCon > nav {height: 30%;}
}

@media (max-width: 990px) {
    :root {
        --cir1-width: 30%;
    }
    #wrap{ width: 100%; overflow-x: hidden;display: flex; flex-direction: column;}
    main {display: flex;flex-direction: column;}
    header {background: #121212; display: flex; justify-content: space-between; align-items: center; order: -10;}   
    header > nav a,
    header > nav button:not(#ham) {display: none;}
    header > h1 {width: 150px; padding-left: 24px;}
    header > h1 > img {width: 100%;}
    header > nav #ham {width: 52px; height: 52px; line-height:52px; font-size: 18px; }
    main > section  {width: 100%;}
    main > section > .secCon {width: 100%; min-height: 33vh; position: relative; height: auto; z-index: 1; flex-direction: column;}
    main > section > .secCon > nav { width: 100%; flex-wrap: wrap; display:flex; max-height: 0; transition: 0.5s; overflow: hidden; } 
    main > section.mobHas > .secCon > nav { max-height: 1000px;}
    
    main > section > .secCon > .cirCon > div {position: absolute; gap:1vw}
    main > section .cirCon > div > span:nth-of-type(1) {font-size: 1.4vw;}
    main > section .cirCon > div h2 {font-size: 2.5vw; padding: 0;}

    main > section > .secCon > nav a {display: flex; width: 50%; border: 0;transition: 0s; justify-content: center; align-items: center; min-height: 100px; color: #fff; background-size: cover; /*border-color: #ffffff50; border-style: solid; border-bottom-width:1px; */font-size: 2.5vw; background-color: color-mix(in srgb, var(--theme-color) 90%, transparent);}
    main > section > .secCon > nav a:nth-of-type(1),
    main > section > .secCon > nav a:nth-of-type(3) {border-right-width: 1px;}

    /*mob bg*/
    main > section.con1 > .secCon > nav a:nth-of-type(1) {background-image: url('/img/con1_bg0.jpg'); }
    main > section.con1 > .secCon > nav a:nth-of-type(2) {background-image: url('/img/con1_bg1.jpg'); }
    main > section.con1 > .secCon > nav a:nth-of-type(3) {background-image: url('/img/con1_bg2.jpg'); }
    main > section.con1 > .secCon > nav a:nth-of-type(4) {background-image: url('/img/con1_bg3.jpg'); }
    main > section.con1 > .secCon > nav a:nth-of-type(5) {background-image: url('/img/con1_bg5.jpg'); }
    main > section.con1 > .secCon > nav a:nth-of-type(6) {background-image: url('/img/con1_bg4.jpg'); }

    main > section.con2 > .secCon > nav a:nth-of-type(2) {background-image: url('/img/con2_bg2.jpg'); }
    main > section.con2 > .secCon > nav a:nth-of-type(3) {background-image: url('/img/con2_bg1.jpg'); }
    main > section.con2 > .secCon > nav a:nth-of-type(1) {background-image: url('/img/con2_bg3.jpg'); }

    main > section.con3 > .secCon > nav a:nth-of-type(1) {background-image: url('/img/con3_bg1.jpg'); }
    main > section.con3 > .secCon > nav a:nth-of-type(2) {background-image: url('/img/con3_bg2.jpg'); }
    main > section.con3 > .secCon > nav a:nth-of-type(3) {background-image: url('/img/con3_bg3.jpg'); }
    main > section.con3 > .secCon > nav a:nth-of-type(4) {background-image: url('/img/con3_bg4.jpg'); }
    
    
    main > section.con2 > .secCon > nav a:first-of-type {width:100%;}
    main > section > img {position: absolute; object-fit: cover; width: 100%; height: 100%;}
    main > section .cirCon > div > span:last-of-type {display: none;}
    
    footer {background-color: #f1f1f1; order: -9; padding: 0; }
    footer .footer-slider { overflow: hidden; width: 100%;}
    footer ul.swiper-wrapper { gap: 0; } 
    footer .swiper-wrapper li.swiper-slide{color: #343434; width: 100%; white-space: normal; height: auto; font-size: 2.6vw; display: flex; justify-content: center; align-items: center; text-align: center; height: 50px; line-height: 50px; gap: 6px; font-weight: 600; font-size: 16px; } 
    footer ul li > span { display: inline; } 
    footer ul li::before {width:18px; height: 18px; }
    footer ul li.li1::before {background-image: url('/img/pb_logo07_cr.png'); }
    footer ul li.li2::before {background-image: url('/img/pb_logo04_cr.png'); }
    footer ul li.li3::before {background-image: url('/img/pb_logo06_cr.png'); }
    footer ul li.li4::before,
    footer ul li.li5::before {background-image: url('/img/pb_logo05_cr.png'); }
}
@media (max-width: 640px) {
    :root {
        --cir1-width: 50%;
    }
    #hamSlideNav > div .depth-1 {font-size: 8vw;}
    main > section .cirCon > div h2 {font-size: 4vw;}
    #hamSlideNav > div:last-of-type p {font-size: 13px;}
    #hamSlideNav > div:nth-of-type(3) img {max-width: 100px;}
}

@media (max-width: 420px) {
    main > section .cirCon > div > span:nth-of-type(1) {font-size: 2vw;}
    main > section > .secCon > nav a { font-size: 3.5vw; min-height: 55px; min-height: 100px;} 
    main > section.con2 > .secCon > nav a:first-of-type {background-position: center center;}
    main > section.con2 > .secCon > nav a:nth-last-of-type(2){background-position: center right;}
}