@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); 
/*
font-family: 'Montserrat', sans-serif;
family: 'Noto Sans KR', sans-serif;
*/

/* common */
* { margin: 0; padding: 0;}
a { text-decoration: none;}
li { list-style: none;}
img { vertical-align: top;}

.montb { font-family: 'Montserrat', sans-serif; font-weight: 700;}
.montn { font-family: 'Montserrat', sans-serif; font-weight: 500;}

html { overflow: hidden;}
html, body { height: 100%; font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 400; color: #2f2f2f; letter-spacing: -0.015em;}
.wrap { position: relative;}
ul:after , wrap:after { content: ""; clear: both; display: block;}
h2 { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0;}


/* header */
header h1 { position: fixed; top: 0; left: 0; width: 130px; height: 130px; z-index: 500;}
header h1 a { display: block; line-height: 130px; text-align: center;}
header h1 a img { vertical-align: middle; width: 60px;}


/* #menu */
#topmenu { position: fixed; top: 0; right: 0; z-index: 500;}
#topmenu_chk { display: none;}
#topmenu label { position: relative; display: block; z-index: 400; width: 130px; height: 130px; cursor: pointer; opacity: 1; transition: .7s; background: #2f2f2f;}
#topmenu label.white { opacity: 0;}
#topmenu label span { position: absolute; display: block; width: 20%; height: 4px; transition: all .3s ease-in-out; background: #fff;}
#topmenu label span:nth-child(1) { top: 42%; left: 40%;}
#topmenu label span:nth-child(2) { bottom: 42%; left: 40%;}
/* 메뉴애니제어*/
#topmenu_chk:checked + label span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg);}
#topmenu_chk:checked + label span:nth-child(2) { bottom: 48%; transform: translateY(-50%) rotate(-45deg);}


#topmenu_full { position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%;}
#topmenu_full ul { width: 100%; height: 100%;}
#topmenu_full ul li { position: relative; float: left; width: 25%; height: 100%;}
#topmenu_full ul li a { position: absolute; overflow: hidden; display: flex; justify-content: center; align-items: center; z-index: 10; top: 0; width: 0; height: 100%; transition: .7s; background: #2f2f2f;}
#topmenu_full ul li a span { position: relative; display: inline-block; padding: 20px 30px; opacity: 0; transition: .7s .5s; transform: scale(1); filter:blur(0); font-size: 40px; color: #fff;}
#topmenu_full ul li a span i { position: absolute; top: 0; left: 0;display: block; width: 100%; height: 100%;}

#topmenu_full ul li a span:before , 
#topmenu_full ul li a span:after ,
#topmenu_full ul li a span i:before ,
#topmenu_full ul li a span i:after {
    content:""; position: absolute; display: block; width: 0; height: 0; transition: .7s; background: #fff;
}

#topmenu_full ul li a span:before { top: 0; left: 0;}
#topmenu_full ul li a span:after { top: 0; left: 0;}
#topmenu_full ul li a span i:before { bottom: 0; right: 0;}
#topmenu_full ul li a span i:after { bottom: 0; right: 0;}

/* 메뉴 호버시 */
#topmenu_full ul li a.on span { transform: scale(1.2); color: #f94c4c;}
#topmenu_full ul li a.on span:before,
#topmenu_full ul li a.on span i:before { 
    width: 30px; height: 4px; background: #f94c4c;
}
#topmenu_full ul li a.on span:after,
#topmenu_full ul li a.on span i:after { 
    width: 4px; height: 30px; background: #f94c4c;
}

/* 호버 외 블러 */
#topmenu_full ul li a.blur span { filter:blur(7px);}
/* 메뉴 켜고 닫을때 글자 opacity */
#topmenu_full ul li a span.show { opacity: 1; transition: .7s;}



/* index.html */
#index { position: relative; width: 100%; height: 100%;}
#index .wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#index #indextxt { position: absolute; width: 60%; top: 25%; left: 50%; margin-left: -30%; text-align: center;}
#index #indextxt #indexlogo { position: relative; padding-bottom: 6%; opacity: 0;}
#index #indextxt #indexlogo img { width: 60px;}
#index #indextxt h3 { position: relative; z-index: 100; top: 100px; margin: 0 auto; text-align: center;}
#index #indextxt h3 span { display: inline-block; font-size: 28px; margin: 0 0.5%; opacity: 0; filter:blur(10px); transition: .3s;}
#index #indextxt h3 span:nth-child(6),
#index #indextxt h3 span:nth-child(8) { margin-left: 30px;}
#index #indextxt p { position: relative; top: 100px; padding: 6% 0 7%; line-height: 1.8; font-size: 16px; opacity: 0;}

#index #indextxt b { position: relative; display: block; top: 100px; opacity: 0;}
#index #indextxt b .btn { display: inline-block; padding: 1.5% 0; font-size: 20px; transition: color .5s; color: #2f2f2f;}
#index #indextxt b .btn:hover { color: #f94c4c;}
#index #indextxt i { position: relative; display: block; padding-top: 2%; opacity: 0; font-style: normal; font-size: 14px; color: #666;}

#index #indexline { width: 40%; height: 90%; margin: 3% auto 0; box-sizing: border-box; border: 4px solid #2f2f2f; transition: .7s ease-out; opacity: 1;}
#index #indexline.wd { width: 1500px; opacity: 0;}
#index #indexline.blur { filter:blur(10px); opacity: 0;}

#index #indexbg { z-index: -1;}
#index #white { position: absolute; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; background: #fff;}




/* subframe.html (포트폴리오) */
#portnext { position: fixed; bottom: 0; z-index: 100; width: 100%; height: 22%; opacity: 1; transition: all .5s;}
#portnext .blank{ width: 42%; height: 100%;}
#portnext nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 42%; background: #2f2f2f;}
#portnext nav .btn { position: absolute; width: 100px; height: 100%; left: -100px; top: 0;}
#portnext nav .btn a { display: flex; justify-content: center; align-items: center; width: 100px; height: 50%; background: rgba(47,47,47,0.4); font-size: 28px; color: #fff;}
#portnext nav .frame { position: relative; overflow: hidden; left: 100px; width: 750px; height: 100%;}
#portnext nav .frame:after { content:""; position: absolute; display: block; top: 0; right: 0; z-index: 10; width: 400px; height: 100%; background: linear-gradient( to right, rgba(47,47,47,0) 30%, rgba(47,47,47,1) 80%);}
#portnext nav .frame ul { position: absolute; top: 28%; left: 0; width: 2400px;}
#portnext nav .frame ul li { position: relative; float: left; width: 250px; margin-right: 100px; padding-left: 50px; color: #ccc;}

#portnext nav .frame ul li strong { position: absolute; top: 0; left: 0; font-size: 18px; transition: .7s;}
#portnext nav .frame ul li h3 { padding-bottom: 15px; font-size: 18px; transition: .7s;}
#portnext nav .frame ul li p { font-size: 15px; line-height: 1.8;}
#portnext nav .frame ul li.select strong { color: #f94c4c;}
#portnext nav .frame ul li.select h3 { color: #fff;}



#portfolio { position: relative; width: 100%; height: 100%;}
#portfolio #port_page { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; right: 0; z-index: 50; width: 130px; height: 100%; border-left: 1px solid rgba(153,153,153,0.3); box-sizing: border-box;}
#portfolio #port_page ul { position: relative; top: -5%; right: 0; transition: all .5s;}
#portfolio #port_page ul li { margin: 50px 0;}
#portfolio #port_page ul li a { transition: 0.5s; color: rgba(153,153,153,0.5);}
#portfolio #port_page ul li.select a { color: #2f2f2f;}
#portfolio #port_page > a  { position: absolute; display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; transition: all .7s; font-size: 40px; color: #fff;}
#portfolio #port_page #port_page_prev { top: 0; right: 0; background: none;}
#portfolio #port_page #port_page_top { bottom: 0; right: -130px; flex-direction: column; background: rgb(153, 153, 153,0.5);}
#portfolio #port_page #port_page_top span { font-size: 16px;}





#portfolio #portslide { position: absolute; left: 0; width: 500%; height: 100%;}
#portfolio #portslide:after { content:""; clear: both; display: block;}
#portfolio #portslide .port { position: relative; float: left; width: 20%; height: 100%;}
#portfolio #portslide .port:after { content:""; clear: both; display: block;}
#portfolio #portslide .port .portline_l { position: absolute; overflow: hidden; left: 0; bottom: -5%; width: 130px; height: 80%; z-index: 100; text-align: center;}
#portfolio #portslide .port .portline_l img { vertical-align: bottom; height: 100%; margin: 0 auto;}
#portfolio #portslide .port .mainv { position: relative; float:left; width: 42%; height: 100%; left: 0; transition: .7s;  background: #999;}
#portfolio #portslide .port .detail { position: relative; float: left; width: 58%; height: 100%; left: 0; transition: .7s;}
#portfolio #portslide .port .detail .txt { position: relative; z-index: 10; padding-top: 150px; padding-left: 100px; width: 100%; transition:.7s; }
#portfolio #portslide .port .detail .txt p { position: relative; transition:.7s; font-size: 18px; color: #f94c4c;}
#portfolio #portslide .port .detail .txt h3 { position: relative; padding-top: 2%; transition: .7s; line-height: 1.3; font-size: 60px; color: #2f2f2f;}
#portfolio #portslide .port .detail .txt h3:after { content: ""; display: block; width: 70px; height: 4px; margin: 2% 0 3%; transition:.7s; background: #f94c4c;}
#portfolio #portslide .port .detail .txt h3 b { font-size: 1.5vw;}
#portfolio #portslide .port .detail .txt span { position: relative; transition: .7s; line-height: 1.8;}
#portfolio #portslide .port .detail .txt span b { display: inline-block; width: 1px; height: 14px; margin: 0 10px; background: #2f2f2f;}
#portfolio #portslide .port .detail .txt span i { position: absolute; display: inline-block; left: 125px; white-space: nowrap; font-size: 17px; font-style: normal;}
#portfolio #portslide .port .detail .txt .btn { padding-top: 3%;}
#portfolio #portslide .port .detail .txt .btn a { position: relative; display: inline-block; margin-right: 50px; padding: 10px 0; transition: color .7s; font-size: 18px; letter-spacing: -0.015em; color: #2f2f2f;}
#portfolio #portslide .port .detail .txt .btn a:hover { color: #f94c4c;}

#portfolio #portslide .port .detail .bg { position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; opacity: 0; transition: opacity .5s;}
#portfolio #portslide .port .detail .scroll { position: relative; z-index: 5; top: -30px; font-size: 48px; margin-top: 3%; opacity: 0; transition: .5s;}
#portfolio #portslide .port .detail .scroll i { display: block; line-height: 0.3;}

#portfolio #portslide .port .detail_img { display: none; width: 100%; overflow-x: hidden;}
#portfolio #portslide .port .detail_img img { display: block; width: 100%;}



/* 포트폴리오 첫 진입시 넥스트 애니메이트*/
#portfolio #portslide #port1 { opacity: 0;}
#portnext.ani { bottom: -22%; opacity: 0;}


/* .show 상세페이지 애니메이트 제어 */
html.show { overflow-y: visible;}
#portnext.show { bottom: -22%;} 
#portfolio #port_page ul.show { right: -130px;}
#portfolio #port_page #port_page_prev.show { top: 130px;}
#portfolio #port_page #port_page_top.show { right: 0;}
#portfolio #portslide .port.show .portline_l { position: fixed;} 
#portfolio #portslide .port.show .mainv { width: 0;}
#portfolio #portslide .port.show .detail { width: 100%;}
#portfolio #portslide .port.show .detail .txt { padding-left: 360px;}
#portfolio #portslide .port.show .detail .scroll { top: 0; opacity: 1; transition:.7s .7s;}
#portfolio #portslide .port.show .detail .bg { opacity: 1; transition:.7s .7s;}
#portfolio #portslide .port.show .detail_img { display: block;}

/* 페이지별 포인트컬러 변경 */
#portfolio #port_page #port_page_prev.port1 { background: #db5657;}
#portfolio #portslide .port.port1 .detail .txt p { color: #db5657;}
#portfolio #portslide .port.port1 .detail .txt h3:after { background: #db5657;}
#portfolio #portslide .port.port1 .detail .txt .btn a:hover { color: #db5657;}

#portfolio #port_page #port_page_prev.port2 { background: #00346a;}
#portfolio #portslide .port.port2 .detail .txt p { color: #00346a;}
#portfolio #portslide .port.port2 .detail .txt h3:after { background: #00346a;}
#portfolio #portslide .port.port2 .detail .txt .btn a:hover { color: #00346a;}

#portfolio #port_page #port_page_prev.port3 { background: #ffba00;}
#portfolio #portslide .port.port3 .detail .txt p { color: #ffba00;}
#portfolio #portslide .port.port3 .detail .txt h3:after { background: #ffba00;}
#portfolio #portslide .port.port3 .detail .txt .btn a:hover { color: #ffba00;}

#portfolio #port_page #port_page_prev.port4 { background: #00a99d;}
#portfolio #portslide .port.port4 .detail .txt p { color: #00a99d;}
#portfolio #portslide .port.port4 .detail .txt h3:after { background: #00a99d;}
#portfolio #portslide .port.port4 .detail .txt .btn a:hover { color: #00a99d;}

#portfolio #portslide #port1 .mainv { background: url(../images/port1_mainv.jpg) no-repeat center/cover;}
#portfolio #portslide #port1 .detail .bg { background: url(../images/port1_detailbg.jpg) no-repeat bottom right;}

#portfolio #portslide #port2 .mainv { background: url(../images/port2_mainv.jpg) no-repeat center/cover;}
#portfolio #portslide #port2 .detail .bg { background: url(../images/port2_detailbg.jpg) no-repeat bottom right;}

#portfolio #portslide #port3 .mainv { background: url(../images/port3_mainv.jpg) no-repeat center/cover;}
#portfolio #portslide #port3 .detail .bg { background: url(../images/port3_detailbg.jpg) no-repeat bottom right;}

#portfolio #portslide #port4 .mainv { background: url(../images/port4_mainv.jpg) no-repeat center/cover;}
#portfolio #portslide #port4 .detail .bg { background: url(../images/port4_detailbg.jpg) no-repeat bottom right;}

#portfolio #portslide #port1_c .mainv { background: url(../images/port1_mainv.jpg) no-repeat center/cover;}

/* about.html */
#about { height: 100%; width: 100%;}
#about .scroll > div { position: absolute;}

#about .full { height: 100%;}
#about .mid { width: 450px; height: 620px;}
#about .sm { width: 300px; height: 300px;}
#about img { position: absolute;}
#about img.trst { transition: 1s; opacity: 1;}

#about .top h3 { font-size: 60px; padding-bottom: 3%;}
#about .top h4 { position: relative; ;padding-left: 65px; padding-bottom: 2%; font-size: 18px; color: #f94c4c;}
#about .top h4:before { content:""; position: absolute; width: 50px; height: 4px; left: 0; top: 9px; background: #f94c4c;}
#about .top h5 { padding: 2% 0 4%; font-size: 18px;}
#about .top p { font-size: 17px; line-height: 1.8;}

/* #ab_first */
#about #ab_first { position: fixed; bottom: 0; right: -130px; transition: .5s;}
#about #ab_first a { display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; color: #2f2f2f;}
#about #ab_first a i { font-size: 40px;}
#about #ab_first.show { right: 0;}

/* #ab1 */
#about .front #ab1 { display: flex; align-items: center; flex-direction: column; left: 300px; top: 50%; margin-top: -150px; height: 300px; }
#about .front #ab1 h3 { position: relative; left: 100px; opacity: 0; color: #f94c4c; padding-bottom: 5%;}
#about .front #ab1 p { position: relative; left: 100px; opacity: 0; font-size: 24px; font-weight: bold; line-height: 1.5;}
#about .back #ab1_bg1 { left: 1100px;}
#about .back #ab1_bg1.fade { opacity: 0;}

/* #scroll */
#about .front #scroll { left: 870px; top: 50%; opacity: 0; margin-top: -9px;}
#about .front #scroll span { font-size: 18px;}
#about .front #scroll span:after { content: ""; position: absolute; display: block; top: 10px; right: -100px; width: 80px; height: 4px; background: #2f2f2f;}

/* #ab2 */
#about .front #ab2 { left: 2000px; bottom: 13%;}
#about .middle #ab2_bg1 { left: 1500px; bottom: 4%; width: 1000px; height: 35%; background: #fff; transition: 1s; opacity: 0;}
#about .middle #ab2_bg1.show { opacity: 1;}

/* #ab3 */
#about .front #ab3 { left: 3500px; bottom: 11%;}
#about .front #ab3 div { padding-top: 5%;}
#about .front #ab3 #skills li { position: relative; width: 530px; margin: 20px 0;}
#about .front #ab3 #skills li strong { position: absolute; display: inline-block; width: 400px; height: 4px; right: 0; top: 9px; background: rgba(153, 153, 153, 0.3);}
#about .front #ab3 #skills li strong:after { content:""; position: absolute; display: block; width: 0; height: 100%; transition: 1.5s; background: #f94c4c;}
#about .front #ab3 #skills li:nth-child(1) strong:after { transition: 1.5s .1s;}
#about .front #ab3 #skills li:nth-child(2) strong:after { transition: 1.5s .2s;}
#about .front #ab3 #skills li:nth-child(3) strong:after { transition: 1.5s .3s;}
#about .front #ab3 #skills li:nth-child(4) strong:after { transition: 1.5s .4s;}
#about .front #ab3 #skills li:nth-child(5) strong:after { transition: 1.5s .5s;}
#about .front #ab3 #skills li:nth-child(1) strong.on:after { width: 90%;}
#about .front #ab3 #skills li:nth-child(2) strong.on:after { width: 75%;}
#about .front #ab3 #skills li:nth-child(3) strong.on:after { width: 85%;}
#about .front #ab3 #skills li:nth-child(4) strong.on:after { width: 75%;}
#about .front #ab3 #skills li:nth-child(5) strong.on:after { width: 65%;}
#about .front #ab3 #others { padding-top: 5%;}
#about .front #ab3 #others li { float: left; text-align: center; margin-right: 50px;}
#about .front #ab3 #others li i { position: relative; display: block; width: 100px; margin-bottom: 20px; line-height: 90px;  box-sizing: border-box; transition: .3s; font-size: 50px; color: #ccc;}
#about .front #ab3 #others li:hover i { color: #f94c4c;}
#about .front #ab3 #others li i b,
#about .front #ab3 #others li i strong { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
#about .front #ab3 #others li i b:before,
#about .front #ab3 #others li i b:after,
#about .front #ab3 #others li i strong:before,
#about .front #ab3 #others li i strong:after{ 
    content:""; position: absolute; display: block; background: #ccc;
}
#about .front #ab3 #others li i b:before { width: 30px; height: 4px; top: 0; left: 0;}
#about .front #ab3 #others li i b:after { width: 4px; height: 30px; top: 0; left: 0;}
#about .front #ab3 #others li i strong:before { width: 30px; height: 4px; bottom: 0; right: 0;}
#about .front #ab3 #others li i strong:after { width: 4px; height: 30px; bottom: 0; right: 0;}

/* #ab4 */
#about .front #ab4 { left: 4700px; bottom: 10%;}
#about .front #ab4 #psn { margin-top: 5%;}
#about .front #ab4 #psn li { position: relative; left: 150px; margin-bottom: 5%; opacity: 0;}
#about .front #ab4 #psn li:after { content:""; clear: both; display: block;}
#about .front #ab4 #psn li .psnimg { float: left; width: 150px; height: 150px; margin-right: 30px; background: #999;}
#about .front #ab4 #psn li:nth-child(1) .psnimg { background: url(../images/per1.jpg) no-repeat center/cover;}
#about .front #ab4 #psn li:nth-child(2) .psnimg { background: url(../images/per2.jpg) no-repeat center/cover;}
#about .front #ab4 #psn li:nth-child(3) .psnimg { background: url(../images/per3.jpg) no-repeat center/cover;}
#about .front #ab4 #psn li .txt { float: left;}


/* #ab5 */
#about .front #ab5 { left: 7700px; bottom: 350px;}
#about .front #ab5 .title { position: fixed; left: 1000px; bottom: 635px;  opacity: 0; transition: 1s;}
#about .front #ab5 .title.on { opacity: 1; bottom: 585px;}
#about .front #ab5_bg3 { left: 7300px; bottom: 0;}
#about .front #ab5_bg3.fade { opacity: 0;}
#about .middle  #ab5_bg2 { left: 4800px; bottom: 0;}
#about .middle  #ab5_bg2.fade { opacity: 0;}
#about .back #ab5_bg1 { left: 3400px;}
#about .back #ab5_bg1.fade { opacity: 0;}

/* #ab6 */
#about .front #ab6 { left: 9250px; bottom: 350px;}
#about .middle #ab6_bg2 { left: 6100px; bottom: 0;}
#about .middle #ab6_bg2.fade  { opacity: 0;}
#about .back #ab6_bg1 { left: 4500px;}
#about .back #ab6_bg1.fade { opacity: 0;}

/* #ab7 */
#about .front #ab7 { left: 11300px; bottom: 350px;}
#about .middle #ab7_bg2 { left: 7000px; bottom: 0;}
#about .middle #ab7_bg2.fade { opacity: 0;}
#about .back #ab7_bg1 { left: 5600px;}
#about .back #ab7_bg1.fade { opacity: 0;}

/* #ab8 */
#about .front #ab8 { left: 13000px; top: 50%; margin-top: -158px;}
#about .front #ab8 .txt span { display: block; padding-top: 30px; font-size: 24px; font-weight: bold;}


/* contact.html */

#contact { position: relative; width: 100%; height: 100%;}
#contact #white { position: fixed; display: none; z-index: 600; width: 100%; height: 100%; top: 0; left: 0; background: #fff;}
#contact .img { position: absolute; top: 0; left: 22%; width: 20%; height: 0; filter: blur(0); background: url(../images/contactbg.jpg) no-repeat fixed 22% 0; transition: filter 1s;}
#contact .img.blur { filter: blur(10px);}
#contact .txt { position: absolute; bottom: 28%; left: 45%;}
#contact .txt h3 { position: relative; left: 100px; opacity: 0; font-size: 60px;}
#contact .txt h3:after { content:""; display: block; width: 50px; height: 4px; margin: 30px 0 40px; background: #f94c4c;}
#contact .txt h4 { position: relative; left: 100px; opacity: 0; font-size: 24px; padding-bottom: 40px;}
#contact .txt h4 span { display: inline-block; padding: 0 10px; font-size: 18px;}
#contact .txt ul li { position: relative; left: 100px; width: 500px; margin-bottom: 15px; opacity: 0; font-size: 18px;}
#contact .txt ul li a { color: #2f2f2f;}
#contact .txt ul li a i { position: absolute; display: block; top: 0; left: 200px; font-style: normal;}
#contact .btn { margin-top: 85px;}
#contact .btn a { position: relative; display: inline-block; left: 100px; margin-right: 50px; transition: color .5s; opacity: 0; font-size: 18px; color: #2f2f2f;}
#contact .btn a:hover { color: #f94c4c;}