@import url("normalize.css");
@import url("examples.css");
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;600&family=Noto+Sans+KR:wght@300;400;500;700&family=Raleway:wght@200;400;600;700&display=swap');

.font__type-notobold{font-family:'Noto Sans KR',sans-serif;font-weight:700}
.font__type-raleway{font-family:'Raleway',sans-serif;font-weight:700}
.font__type-josefin{font-family:'Josefin Sans',sans-serif;font-weight:300}

body{font-family:'Noto Sans KR',sans-serif;font-size:1rem;font-weight:400;font-size:1rem;color:#333333;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body,html{height:100%}
h1,h2,h3,h4{font-family:'Noto Sans KR',sans-serif;padding:0;margin:0}
a,a:visited{text-decoration:none}
a:hover{text-decoration: underline}
.touchonly{display:none}
html.touch .touchonly{display:block}
.noselect,.noselect *{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none}
.doselect,.doselect *:not(.noselect){user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-o-user-select:text}
.clearfix:after{content: ".";display:block;clear:both;visibility:hidden;height:0;line-height:0}
.clearfix{display:inline-block}
html[xmlns] .clearfix{display:block}
* html .clearfix{height:1%}
li{list-style:none}
strong,em{font-weight:normal;font-style:normal}
ul,ol,li,p,dt,dd,figure{padding:0;margin:0}

/* common */
#pinContainer{overflow:hidden;width:100%;height:100%;-webkit-perspective:1000;perspective:1000}
#slideContainer{width:500%;height:100%}
.panel{overflow:hidden;height:100%;width:100%}

/* loading */
#loader-wrapper{overflow:hidden;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;opacity:0.9}
#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#7278ff;animation:spin 1.7s linear infinite;z-index:11}
#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#a850ee;animation:spin-reverse .6s linear infinite}
#loader:after {content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#9599e2;animation:spin 1s linear infinite}

@keyframes spin {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

@keyframes spin-reverse {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(-360deg);
	}
}

#loader-wrapper .loader__section{position:fixed;top:0;z-index:10;width:50%;height:100%;background:#000}
#loader-wrapper .loader__section.left{left:0}
#loader-wrapper .loader__section.right{right:0}
.loaded #loader-wrapper .loader__section.left{transform:translateX(-100%);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000)}
.loaded #loader-wrapper .loader__section.right{transform:translateX(100%);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000)}
.loaded #loader{opacity:0;transition:all 0.3s ease-out}
.loaded #loader-wrapper{visibility:hidden;transform:translateY(-100%);transition:all 0.3s 1s ease-out}

#loader-wrapper .loader__title{position:absolute;top:50%;left:50%;z-index:10;display:block;width:200px;height:40px;margin-top:-20px;margin-left:-100px;font-size:0.8571rem;text-align:center;color:#fff;text-align:center}
#loader-wrapper .loader__title strong{display:inline-block;width:50px;border:1px solid #ffffff;border-radius:5px;padding:3px 5px;margin:0 30px;font-size:1rem}
#loader-wrapper .loader__title span{display:block;margin-top:3px}

/* intro */
.intro{background-color:#8f94fb;background-image:linear-gradient(140deg, #7278ff 0%, #a850ee 90%, #9599e2 100%) !important}
.intro__text{font-family:'Raleway',sans-serif}
.intro__text-title{display:block;padding:100px 80px;margin-bottom:40px;border-bottom:1px solid rgba(250,250,250,0.3);font-weight:600;font-size:3.5714rem;color:#ffffff;text-transform:uppercase}
.intro__text-title strong,.intro__text-item strong{font-family: 'Josefin Sans',sans-serif;font-weight:100}
.intro__text-item{padding:0 80px;font-weight:400;font-size:1.429rem;color:#ffffff;letter-spacing:1px}
.intro__text-item:last-child{font-weight:200;font-size:1rem;opacity:0.8}
.intro__text-item em{font-family:'Noto Sans KR',sans-serif;font-weight:500}

.intro__bg{display:block;overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:100vh;opacity:0.7}
.intro__bg li{position:absolute;display:block;width:20px;height:20px;background:rgba(255, 255, 255, 0.2);animation:animate 25s linear infinite;bottom:-150px}
.intro__bg li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}
.intro__bg li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}
.intro__bg li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}
.intro__bg li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}
.intro__bg li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}
.intro__bg li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}
.intro__bg li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}
.intro__bg li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}
.intro__bg li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}
.intro__bg li:nth-child(10){left:85%;width:150px;height:150px;animation-delay:0s;animation-duration:11s}
@keyframes animate {
	0%{
		transform:translateY(0) rotate(0deg);
		opacity:1;
		border-radius:0;
	}
	100%{
		transform:translateY(-1000px) rotate(720deg);
		opacity:0;
		border-radius:50%;
	}
}
.scroll{position:absolute;bottom:30px;left:50%;margin-left:-15px;width:30px;height:50px}
.scroll__mouse{width:3px;padding:10px 15px;height:35px;border:2px solid #ffffff;border-radius:25px;opacity:0.75;box-sizing:content-box}
.scroll__mouse-scroller{width:3px;height:10px;border-radius:25%;background-color:#ffffff;animation-name:scroll;animation-duration:2.2s;animation-timing-function:cubic-bezier(.15,.41,.69,.94);animation-iteration-count:infinite}
@keyframes scroll {
	0% {opacity:0}
	10% {transform:translateY(0);opacity:1}
	100% {transform:translateY(15px);opacity:0}
}

/* index */
.index__content{position:absolute}
.index__content.profile{top:80px;left:6%}
.index__content.education{left:36%;top:230px}
.index__content.experience{left:66%;top:350px}
.index__content.title{left:6%}
.index__content-title{margin-bottom:10px;font-family:'Raleway',sans-serif;font-weight:700;font-size:1.286rem !important;text-transform:uppercase}
.index__content-text{padding:5px 0;font-size:0.8571rem !important;color:#888888;line-height:1.25}

/* about */
.about{background-color:#fafafa;padding:0 6%}
.about__skill{overflow:hidden}
.about__skill-icon{float:left;width:100px;font-size:3rem !important}
.about__content-text{margin-bottom:10px;font-family:'Raleway',sans-serif;font-weight:400;font-size:1.875rem !important;text-transform:uppercase}
.about__content-text strong{font-weight:700}

.about .index__content,.about .index__content-title{position:relative;left:0}
.about .index__content{margin-top:40px}
.about .index__content-text{font-size:1rem !important}
.index__content.skill{top:220px}

.welcomeHand{width:56px;height:56px;object-fit:contain;margin-top:48px;animation-name:handshake;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-duration:1.8s;animation-delay:1s}
@keyframes handshake{
	0%{transform: rotate(0deg)}
	30%{transform: rotate(45deg)}
	50%{transform: rotate(0deg)}
}

/* ux ui */
.uxui{background-color:#f2efdc}
.uxui .content__image{position:absolute;top:50%;right:-260px;z-index:2;display:inline-block;width:1000px;height:603px;background-image:url('../img/image-uxui.png');background-repeat:no-repeat;margin-top:-300px}

/* bx */
.bx{background:url('../img/bg_bx.jpg') no-repeat;background-size:cover}
.bx .content__inner-title{color:#ffffff}
.bx .content__inner-subtext{color:#a1a1a1}

.bx__content{display:flex;margin-top:40px}
.bx__content-item{width:220px;height:120px;padding:0 20px;margin-left:10px;margin-bottom:20px;background-color:#ffffff;border-radius:15px;text-align:center}
.bx__content-item:first-child{margin-left:0}
.bx__content-ci{display:inline-block;width:200px;height:120px;margin:0 auto;background-repeat:no-repeat;background-position:center;background-size:80%}
.bx__content-ci.strm{background-image:url('../img/ci_strm.png')}
.bx__content-ci.cld{background-image:url('../img/ci_cld.png')}
.bx__content-ci.ijg{background-image:url('../img/ci_ijg.png')}
.bx__content-ci.vw{background-image:url('../img/ci_vw.png')}
.bx__content-ci.mc{background-image:url('../img/ci_mc.png')}
.bx .strips__line{background:rgba(250,250,250,0.3)}

/* contact */
.panel.contact{z-index:10}
.contact{background-color:#8f94fb;background-image:linear-gradient(140deg, #7278ff 0%, #a850ee 90%, #9599e2 100%) !important}
.contact__text{margin-top:250px;margin-left:8%;font-family:'Raleway',sans-serif;font-weight:200;font-size:4.286rem !important;text-align:left;text-transform:uppercase;opacity:0.8}
.contact__text strong{font-size:4.286rem !important;font-weight:400}
.contact__subtext{margin-top:15px;margin-left:8%;font-family:'Noto Sans KR',sans-serif;font-weight:300;font-size:1rem !important;text-align:left;opacity:0.7}
.contact__copyright{position:absolute;bottom:40px;right:7%;opacity:0.5;font-size:1rem}
.contact .strips__line{background:rgba(250,250,250,0.3)}
.contact__button{margin-top:40px;margin-left:8%;text-align:left}
.contact__button-item{position:relative;margin-right:10px;padding:0.875em 1.428571429em;font-family:'Raleway',sans-serif;font-weight:400;font-size:1rem;color:#DAA25A;line-height:1.4;letter-spacing:0.3em;transition:all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s}
.contact__button-item::after{content:"";display:block;position:absolute;width:80%;left:50%;height:1px;bottom:0;background:#DAA25A;transform:translatex(-50%);transition:width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s}
.contact__button-item span{display:block;position:absolute;width:100%;top:0;left:0;transition:all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9)}
.contact__button-item span::before,.contact__button-item span::after{content:"";display:block;position:absolute;background:#DAA25A;transition:transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9)}
.contact__button-item span:first-child{height:100%}
.contact__button-item span:first-child::before,.contact__button-item span:first-child::after{width:1px;height:100%;bottom:0;transform:scale3d(1, 0, 1);transform-origin:bottom center;transition:transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s}
.contact__button-item span:first-child::before{left:0}
.contact__button-item span:first-child::after{right:0}
.contact__button-item span:last-child{width:100%;height:1px}
.contact__button-item span:last-child::before,.contact__button-item span:last-child::after{width:100%;height:1px;bottom:0;transform: scale3d(0, 1, 1);transition:transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s}
.contact__button-item span:last-child::before{left:0;transform-origin:bottom left}
.contact__button-item span:last-child::after{right:0;transform-origin:bottom right}
.contact__button-item:hover{opacity:1;outline:0;color:#ffffff !important;text-decoration:none;transition:color 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;opacity:0.8}
.contact__button-item:hover::after{width:100%;background:#ffffff;transition:width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;opacity:0.8}
.contact__button-item:hover span:first-child::before,.contact__button-item:hover span:first-child::after{transform:scale3d(1, 1, 1);background:#ffffff;transition:transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;opacity:0.8}
.contact__button-item:hover span:last-child::before,.contact__button-item:hover span:last-child::after{transform:scale3d(1, 1, 1);background:#ffffff;transition:transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;opacity:0.8}
.contact__button-item:focus{background:#ffffff;color:#7278ff !important;transition:all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);opacity:0.8}
.contact__button-item:focus::after{opacity:0}

/* common */
.strips__line{position:absolute;top:0;width:1px;height:100vh;z-index:1;background:rgba(0,0,0,0.1)}
.strips__line:nth-child(1){left:5%}
.strips__line:nth-child(2){left:35%}
.strips__line.type01:nth-child(2){left:35%}
.strips__line:nth-child(3){left:65%}
.strips__line:nth-child(4),.strips__line.end{left:95%}

.contact__content{display:block;width:100%;color:#ffffff;text-align:center}
.content__inner{position:absolute;top:80px;left:8%;z-index:1}
.content__inner-title{font-family:'Raleway',sans-serif;font-weight:700;font-size:1.286rem !important;text-transform:uppercase}
.content__inner-subtext{margin-top:5px;font-size:0.8571rem !important;color:#888888}
.content__inner-list{margin-top:20px}
.content__inner-list li{margin-top:10px;font-size:0.8571rem;color:#888888}
.content__inner-list li:before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;background-image:url('../img/ico-check.svg');background-size:100%;background-repeat:no-repeat;background-position:100% 0%;opacity:0.5}
.content__inner-list li>span{position:relative;left:-2px;z-index:10;font-size:0.8571rem !important}
.content__inner-list li>span:hover{color:#835d2e;text-decoration:underline}

.content__inner-btn{position:absolute;right:0;top:8px;display:inline-block;padding:10px 40px 10px 20px;margin-left:90px;background:url('../img/arrow-right.svg') no-repeat right 8px center;border:1px solid #888888;border-radius:5px;font-size:0.75rem;color:#888888;line-height:1.1;cursor:pointer}
.content__inner-btn:before{content:'';position:absolute;top:16px;left:-120px;display:inline-block;width:120px;height:1px;background-color:#888888}
.content__inner-btn:hover{background-cololr:#fff}

.l-25p{left:25% !important}

.m-t-0{margin-top:0 !important}
.m-t-3{margin-top:3px !important}
.m-t-4{margin-top:4px !important}
.m-t-5{margin-top:5px !important}
.m-t-10{margin-top:10px !important}
.m-t-15{margin-top:15px !important}
.m-t-20{margin-top:20px !important}
.m-t-25{margin-top:25px !important}
.m-t-30{margin-top:30px !important}
.m-t-35{margin-top:35px !important}
.m-t-40{margin-top:40px !important}
.m-t-45{margin-top:45px !important}
.m-t-50{margin-top:50px !important}

.modal{display:none;overflow:auto;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgb(0,0,0);background-color: rgba(0,0,0,0.6)}
.modal__inner{overflow:hidden;width:1010px;max-height:800px;padding-bottom:15px;background-color:#f2efdc;border-radius:10px;margin:4% auto;box-shadow:0 0 8px rgba(0,0,0,0.3);box-sizing:border-box}
.modal__close{display:inline-block;width:28px;height:28px;padding:5px;border:2px solid #aaaaaa;border-radius:50%;color:#aaaaaa;text-align:center;line-height:26px;transition:all ease 0.3s;cursor:pointer}
.modal__close:hover,.modal__close:focus{border-color:#b392d2;color:#b392d2;text-decoration:none;cursor:pointer;transform:rotate(180deg);transition:all ease 0.3s}
.modal__content{position:relative;width:100%;text-align:center;border-top:1px solid #a49d71;border-bottom:1px solid #a49d71}
.modal__inner-head{display:block;width:100%;padding:20px;background-color:#17171A;text-align:right;box-sizing:border-box}

.modal__website{position:absolute;top:0;right:0;display:inline-block;padding:5px 10px;margin-right:5px;border:1px solid rgba(250,250,250,0.8);border-radius:5px;font-size:0.875rem;color:rgba(250,250,250,0.8);text-align:center;line-height:1.25;cursor:pointer}

.close-button{position:relative;display:inline-block;width:50px;height:50px;box-sizing:border-box;line-height:50px}
.close-button:before,.close-button:after{content:"";display:block;position:absolute;top:50%;left:50%;height:10px;width:50px;margin-top:-5px;margin-left:-25px;background-color:#fff;transform:rotate(-45deg);transition:all 0.25s ease-out}
.close-button:after{transform:rotate(-135deg)}
.close-button:hover:before,.close-button:hover:after{transform:rotate(0deg)}

.tooltip:before,.tooltip:after{display:block;opacity:0;pointer-events:none;position:absolute;transform:translate3d(0,-10px,0);transition:all .15s ease-in-out}
.tooltip:after{content:'';height:0;top:20px;left:20px;width:0;border-right:6px solid transparent;border-bottom:6px solid rgba(0,0,0,.75);border-left:6px solid transparent}
.tooltip:before{content:attr(data-title);top:26px;padding:6px 10px;background:rgba(0,0,0,.75);border-radius:3px;font-size:0.8571rem !important;color:#ffffff;white-space:nowrap}
.tooltip:hover:after,.tooltip:hover:before{opacity:1;transform:translate3d(0,0,0)}

.modal__inner::-webkit-scrollbar{width:10px;}
.modal__inner::-webkit-scrollbar-thumb{background-color:#2f3542;border-radius:5px}
.modal__inner::-webkit-scrollbar-track{background-color:#dddddd;border-radius:10px;box-shadow:inset 0px 0px 5px #ffffff}

.participation{position:absolute;left:30px;top:14px;display:inline-block;width:250px;padding:10px;border:1px solid #666666;border-radius:5px}
.participation li{position:relative;padding-left:12px;font-size:0.875rem;text-align:left;box-sizing:border-box}
.participation li:before{content:'';display:inline-block;position:absolute;top:7px;left:0;width:6px;height:6px;border-radius:50%}
.participation li:nth-child(1):before{background-color:#b768d3}
.participation li:nth-child(2):before{background-color:#6090e3}
.participation li:nth-child(3):before{background-color:#666666}

.owl-carousel .owl-nav.disabled{display:block;float:right}
.owl-theme .owl-nav.disabled+.owl-dots{float:left;margin-top:25px;margin-left:20px}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#666666;}
.owl-theme .owl-dots .owl-dot span{background:#b5b5b5}

.owl-carousel.owl-drag .owl-item .item a{position:absolute;top:33px;left:380px;display:inline-block;width:100px;padding:10px 30px 10px 10px;background:url('../img/arrow-right.svg') no-repeat right 8px center;border-color:#666666;color:#666666}
.owl-carousel.owl-drag .owl-item .item a:before{content:'';position:absolute;top:19px;left:-80px;display:inline-block;width:80px;height:1px;background-color:#888888}

.owl-nav{margin-right:20px}
.owl-nav button{width:30px;height:30px;border:1px solid #666666 !important;border-radius:5px;background-repeat:no-repeat !important;background-position:center !important;background-size:100%}
.owl-nav button.owl-prev{background-image:url('../img/arrow-left.svg') !important}
.owl-nav button.owl-next{background-image:url('../img/arrow-right.svg') !important}

.owl-nav button span{display:none}

.owl-theme .owl-dots .owl-dot span:before{position:absolute;display:none;top:-52px;left:36px;font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:1.25rem;color:#f2efdc}
.owl-theme .owl-dots .owl-dot.active span:before{display:block}
.owl-theme .owl-dots .owl-dot:nth-child(1) span:before{content:'스테리움 웹사이트(제천/서천/변산)'}
.owl-theme .owl-dots .owl-dot:nth-child(2) span:before{content:'플러스앤 여행 복지몰'}
.owl-theme .owl-dots .owl-dot:nth-child(3) span:before{content:'임진각 평화누리 캠핑장'}
.owl-theme .owl-dots .owl-dot:nth-child(4) span:before{content:'마이캠핑(안드로이드-vue)'}
.owl-theme .owl-dots .owl-dot:nth-child(5) span:before{content:'플러스앤 웹사이트'}
.owl-theme .owl-dots .owl-dot:nth-child(6) span:before{content:'마레보리조트'}
.owl-theme .owl-dots .owl-dot:nth-child(7) span:before{content:'플러스앤 엑스트라넷(larabel)'}
.owl-theme .owl-dots .owl-dot:nth-child(8) span:before{content:'플러스앤 회원권(nuxt)'}
.owl-theme .owl-dots .owl-dot:nth-child(9) span:before{content:'창조트레저 웹사이트'}
.owl-theme .owl-dots .owl-dot:nth-child(10) span:before{content:'창조트레저 마이크로 사이트'}
.owl-theme .owl-dots .owl-dot:nth-child(11) span:before{content:'DMC Ville 웹사이트'}
.owl-theme .owl-dots .owl-dot:nth-child(12) span:before{content:'리앤이 MGM 웹사이트'}
.owl-theme .owl-dots .owl-dot:nth-child(13) span:before{content:'카카오 항공권 검색'}
.owl-theme .owl-dots .owl-dot:nth-child(14) span:before{content:'노랑풍선 해외호텔'}
.owl-theme .owl-dots .owl-dot:nth-child(15) span:before{content:'ATRAVEL 여행협동조합 웹사이트'}

.o-h{overflow:hidden !important}
.dn{display:none !important}

@media (max-width:991.98px) {
	.intro__text-title{padding:100px 20px}
	.intro__text-item{padding:0 20px}
	.index__content.profile,.index__content.education,.index__content.experience{left:8%}
	.index__content.profile{top:20px}
	.index__content.education{top:170px}
	.index__content.experience{top:280px}
	.index .strips__line{display:none}
	.index .strips__line:nth-child(1){display:block}

	.uxui .content__image{display:none}

	.content__inner{top:40px;width:83%}
	.content__inner-list li,.content__inner-list li>span{font-size:0.7857rem !important}
	.content__inner-list li{margin-top:5px}
	.contact__text{margin-top:40px}
}