@import url("common.css");







h3{font-size:53px; font-weight:700; color:var(--colorBlack); letter-spacing:-1pt; line-height:120%; word-break:keep-all; padding:0 0 24px;}
h4{font-size:23px; font-weight:500; color:var(--colorBlack); letter-spacing:-0.55pt; line-height:150%;}
.mTxt{display:block; font-size:13px; font-family:var(--engFont); color:var(--mainColor); font-weight:700; letter-spacing:0; line-height:120%; padding: 0 0 12px;}
.txt{font-size:1rem; letter-spacing:-0.35pt; line-height:160%; word-break:keep-all;}

.btnArea{padding:70px 0 0;}

.moreBtn{display:block; width:140px; height:52px; line-height:52px; text-align:center; box-sizing:border-box; border-radius:52px; font-size:13px; font-weight:600; color:var(--colorBlack); letter-spacing:0; transition:all .3s linear; position:relative; overflow:hidden;}
.moreBtn:hover{color:#fff !important; background:transparent !important;}
.moreBtn:before{content:''; display:block; width:0; height:100%; box-sizing:border-box; border-radius:52px; position:absolute; left:0; top:0; transition:all .3s linear; background:var(--gradient); z-index: -1;}
.moreBtn:hover:before{width:100% !important;}
.moreBtn:after{content:''; display:block; border:1px solid #ddd; width:100%; height:100%; box-sizing:border-box; border-radius:52px; position:absolute; left:0; top:0; transition:all .3s linear;}
.moreBtn:hover:after{opacity: 0 !important;}


/* Visual */
#visual{position:relative; width:100%; height:100vh; background:#000; overflow:hidden; }
#visual:after{content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:url('https://binishop.iwinv.net/sample/06/img/visual_hover.png') no-repeat center top/100% auto; }
#visual .visual_in{position: relative; width:100%; height:100%;}
#visual .visual_in .roll{position: absolute; left:0; top:0; width:100%; height:100vh;}
#visual .visual_in .roll .v_txt{position:absolute; left:50%; bottom:185px; transform:translateX(-50%); z-index:9999;}
#visual .visual_in .roll .v_txt h2{font-size:68px; font-weight:800; color:#fff; font-family:var(--engFont); line-height:120%; transform:translateY(60px); opacity:0; transition:all .6s .3s linear;}
#visual .visual_in .roll .v_txt p{font-size:20px; font-weight:300; color:#fff; letter-spacing:-0.5pt; line-height:150%; word-break:keep-all; padding:28px 0 0; transform:translateY(60px); opacity:0; transition:all .6s .6s linear;}
#visual .visual_in .roll .v_bg{position: absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); transition:all 1.8s ease-in-out;}
#visual .visual_in .roll .v_bg:after{content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.1);}


#visual .visual_bar{width:100%; height:4px; position:absolute; left:0; margin-left:0; bottom:0; z-index:9999; background:rgba(255,255,255,.2);}
#visual .visual_bar:after{content:''; width:0; height:100%; background:var(--gradient); position:absolute; left:0; top:0;}
#visual .visual_bar.bar_ani:after{animation: visual_bar 10s linear;}

@keyframes visual_bar{
    0%{width:0;}
    100%{width:100%;}
}

#visual .scr{display:inline-block; font-size:12px; font-family:var(--engFont); color:rgba(255,255,255,.7); letter-spacing:0; line-height:38px; position:absolute; left:50%; bottom:30px; margin-left:-675px; z-index:9999; transition:all .3s linear;}
#visual .scr:hover{color:#fff;}
#visual .scr span{display:inline-block; vertical-align: middle; width:26px; height:38px; box-sizing:border-box; border-radius:26px; border:3px solid #fff; position:relative; margin:0 10px 0 0;}
#visual .scr span:after{content:''; display:inline-block; width:4px; height:7px; border-radius:4px; background:#fff; position:absolute; left:50%; top:10px; margin-left:-2px;}


#visual .slick-dots{position:absolute; left:50%; bottom:40px; margin-left:-675px; transform:translateX(164px); z-index:9999;}
#visual .slick-dots li{display:inline-block; cursor:pointer; background:rgba(255,255,255,.3); vertical-align:middle; margin:0 10px 0 0; width:10px; height:10px; border-radius:50%; box-sizing:border-box;}
#visual .slick-dots li:last-child{margin:0;}
#visual .slick-dots li.slick-active{width:14px; height:14px; background:none; border:3px solid #fff;}
#visual .slick-dots li button{font-size:0; padding:0; outline:none; background:none; border:0; cursor:pointer;}


#visual .visual_in .roll.action .v_bg{-webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}


/* BUSINESS AREA */
#business{position:relative; overflow:hidden;}
#business .business_in{}
#business .business_in .roll{display:flex; flex-wrap:wrap;}
#business .business_in .roll > div{box-sizing:border-box;}
#business .business_in .roll .txtArea{width: calc(50% - 100px); display:flex; justify-content: flex-end; padding:120px 0;}
#business .business_in .roll .txtArea > div{max-width:600px; padding:0 50px 0 25px; box-sizing:border-box; width:100%;}
#business .business_in .roll .txtArea .mTxt{transform:translateY(60px); opacity:0; transition:all .6s .3s linear;}
#business .business_in .roll .txtArea h3{ transform:translateY(60px); opacity:0; transition:all .6s .6s linear;}
#business .business_in .roll .txtArea .txt{ transform:translateY(60px); opacity:0; transition:all .6s .9s linear;}
#business .business_in .roll .txtArea .btnArea{ transform:translateY(60px); opacity:0; transition:all .6s 1.2s linear;}
#business .business_in .roll .imgArea{width: calc(50% + 100px); background-repeat:no-repeat; background-size:cover; background-position:center; opacity:0; transition:all .6s 0.6s linear;}


#business .btn-wrap{width:120px; height:104px; position:absolute; left:50%; bottom:180px; z-index:9999; margin-left: -156px; display:flex; align-items: center; justify-content: center;}
#business .btn-wrap:before{content:''; display:block; width:70px; height:70px; border-radius:50%; background:var(--mainColor); position:absolute; left:50%; top:-60px; margin-left:-35px;}
#business .btn-wrap .dot{display:block; width:100%; height:100%; border-radius:50%; background:var(--subColor); position:absolute; left:0; top:0;}
#business button{padding:0; font-size:0; cursor:pointer; outline:none; border:0; background:none; width:8px; height:12px; display:inline-block; vertical-align:middle; position:relative; z-index:9999; margin:0 20px;}
#business button:after{content:''; display:inline-block; width:1px; height:12px; background:rgba(255,255,255,.2); position:absolute; right:-20px; top:50%; margin-top:-6px;}
#business button.next-btn:after{display:none;}
#business .prev-btn{background:url('https://binishop.iwinv.net/sample/06/img/arrow_p_w.svg') no-repeat center/100% auto;}
#business .next-btn{background:url('https://binishop.iwinv.net/sample/06/img/arrow_n_w.svg') no-repeat center/100% auto;}

#business .business_in .roll.action .txtArea .mTxt{transform:translateY(0); opacity:1;}
#business .business_in .roll.action .txtArea h3{transform:translateY(0); opacity:1;}
#business .business_in .roll.action .txtArea .txt{transform:translateY(0); opacity:1;}
#business .business_in .roll.action .txtArea .btnArea{transform:translateY(0); opacity:1;}
#business .business_in .roll.action .imgArea{opacity:1;}




#port{position:relative; width:100%; height:100vh; overflow:hidden; background:#000;}
#port .port_roll{position:relative; width:100%; height:100%;}
#port .port_roll .roll{position: absolute; left:0; top:0; width:100%; height:100vh;}
#port .port_roll .roll .txtArea{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; z-index:9999;}
#port .port_roll .roll .txtArea > div{max-width:540px; width:100%;}
#port .port_roll .roll .txtArea .mTxt{color:#fff; transform:translateY(60px); opacity:0; transition:all .6s .3s linear;}
#port .port_roll .roll .txtArea h3{color:#fff; transform:translateY(60px); opacity:0; transition:all .6s .6s linear;}
#port .port_roll .roll .txtArea .txt{color:rgba(255,255,255,.7); transform:translateY(60px); opacity:0; transition:all .6s .9s linear;}
#port .port_roll .roll .txtArea .btnArea{transform:translateY(60px); opacity:0; transition:all .6s 1.2s linear;}
#port .port_roll .roll .txtArea .moreBtn{background:#fff; color:var(--mainColor);}
#port .port_roll .roll .txtArea .moreBtn:after{border-color:#fff;}
#port .port_roll .roll .bgArea{position:absolute; left:0; top:0; width:100%; height:100%;}
#port .port_roll .roll .bgArea:after{content:''; display:block; width:35%; height:100%; background:var(--mainColor); position:absolute; left:0; top:0;}
#port .port_roll .roll .bgArea .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat: no-repeat; background-position:center; background-size:cover; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); transition:all 1.8s ease-in-out;}

#port .slick-arrow{padding:0; font-size:0; background:none; border:0; outline:none; cursor:pointer; width:14px; height:9px; position:absolute; left:100px; top:50%; z-index:99991; transition:all .3s linear; margin-top:-4px;}
#port .slick-arrow:hover{opacity:0.7;}
#port .slick-prev{background:url('https://binishop.iwinv.net/sample/06/img/arrow_u.svg') no-repeat center/100% auto; transform:translateY(-80px);}
#port .slick-next{background:url('https://binishop.iwinv.net/sample/06/img/arrow_d.svg') no-repeat center/100% auto; transform:translateY(80px);}

#port .slick-dots{position:absolute; left:66px; top:50%; z-index:99991; margin-top:15px; transform:translateY(-50%) rotate(-90deg); }
#port .slick-dots li{display:none;}
#port .slick-dots li.slick-active{display:block;}
#port .slick-dots li button{padding:0; border:0; background:none; outline:none; cursor:pointer; font-size:17px; font-weight:600; color:#fff;} 

#port .port_roll .roll.action .txtArea .mTxt{transform:translateY(0); opacity:1;}
#port .port_roll .roll.action .txtArea h3{transform:translateY(0); opacity:1;}
#port .port_roll .roll.action .txtArea .txt{transform:translateY(0); opacity:1;}
#port .port_roll .roll.action .txtArea .btnArea{transform:translateY(0); opacity:1;}
#port .port_roll .roll.action .bgArea .bg{-webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}






#notice{padding:180px 0 240px; background:url('https://binishop.iwinv.net/sample/06/img/notice_bg.jpg') no-repeat center/cover;}
#notice h3{padding:0;}
#notice .notice_roll{margin:45px -15px 0; width:calc(100% + 30px);}
#notice .notice_roll:after{content:''; display:block; clear:both;}
#notice .notice_roll .roll{padding:0 15px;}
#notice .notice_roll .roll a{display:block; box-sizing:border-box; background:#fff; border:5px solid #fff; padding:55px 50px;}
#notice .notice_roll .roll a:hover{background:rgba(255,255,255,.6);}
#notice .notice_roll .roll a dl{display:flex; align-items:center; margin:0 0 12px;}
#notice .notice_roll .roll a dl dt{font-size:14px; font-weight:700; font-family:var(--engFont); line-height:120%; padding:0 27px 0 0; position:relative;}
#notice .notice_roll .roll a dl dt.notice{color:var(--subColor);}
#notice .notice_roll .roll a dl dt.news{color:var(--mainColor);}
#notice .notice_roll .roll a dl dt:after{content:''; display:block; width:1px; height:10px; background:rgba(221,221,221,.3); position:absolute; right:13px; top:50%; margin-top:-5px;}
#notice .notice_roll .roll a dl dd{font-size:14px; font-family:var(--engFont); line-height:120%;}
#notice .notice_roll .roll a h4{line-height:1.6em; height:3.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin:0 0 10px;}
#notice .notice_roll .roll a p{font-size:17px; letter-spacing:-0.35pt; line-height:1.6em; height:6.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}

#notice .slick-arrow{padding:0; font-size:0; background:none; border:0; cursor:pointer; outline:none; width:17px; height:29px; transition:all .3s linear; position:absolute; top:-100px; opacity:0.67;}
#notice .slick-arrow:hover{opacity:1;}
#notice .slick-prev{left:15px; background:url('https://binishop.iwinv.net/sample/06/img/arrow_p.svg') no-repeat center/100% auto;}
#notice .slick-next{right:15px; background:url('https://binishop.iwinv.net/sample/06/img/arrow_n.svg') no-repeat center/100% auto;}




/*******************************************************************************
    @media 1700px
*******************************************************************************/
@media all and (max-width:1700px){



#port .slick-arrow{left:35%; margin-left: -40px; margin-top:0; top:auto; bottom:120px;}
#port .slick-dots{left:35%; margin-left: -73px;  margin-top:0; top:auto; bottom:90px;}





}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){


.txt br{display:none;}


/* Visual */
#visual{}
#visual .scr{margin-left:0; left:25px;}
#visual .slick-dots{left:25px; margin-left:0;}




}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){



h3{font-size:40px;}
h4{font-size:20px;}
.btnArea{padding:50px 0 0;}


#notice{padding:140px 0 200px;}
#notice .notice_roll .roll a{padding:45px 40px;}
#notice .slick-arrow{top:-90px;}



/* Visual */
#visual{}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .v_txt{bottom:140px;}
#visual .visual_in .roll .v_txt h2{font-size:58px;}
#visual .visual_in .roll .v_txt p{font-size:18px; padding:20px 0 0;}

#visual .scr{line-height:29px;}
#visual .scr span{width:20px; height:29px;}
#visual .scr span:after{width:3px; height:5px; top:6px; margin-left:-2px;}

#visual .slick-dots{transform:translateX(140px);}
#visual .slick-dots li{width:8px; height:8px;}
#visual .slick-dots li.slick-active{width:12px; height:12px;}



/* BUSINESS AREA */
#business{}
#business .business_in{}
#business .business_in .roll{}
#business .business_in .roll .txtArea{width: calc(50% - 50px); padding:100px 0;}
#business .business_in .roll .txtArea > div{padding:0 40px 0 25px;}
#business .business_in .roll .imgArea{width: calc(50% + 50px);}

#business .btn-wrap{width:90px; height:90px; bottom:140px; margin-left: -96px;}
#business .btn-wrap:before{width:50px; height:50px; top:-40px; margin-left:-25px;}
#business button{margin:0 15px;}
#business button:after{right:-15px;}



#port .port_roll .roll .txtArea{}
#port .port_roll .roll .txtArea > div{max-width:400px;}
#port .port_roll .roll .bgArea{}
#port .slick-arrow{width:12px; height:8px;}
#port .slick-prev{transform:translateY(-60px);}
#port .slick-next{transform:translateY(60px);}
#port .slick-dots{margin-left: -71px; bottom:77px;}
#port .slick-dots li button{font-size:15px;} 



}

/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/
@media all and (max-width:980px){



h3{font-size:30px; padding:0 0 20px;}
h4{font-size:18px;}
.mTxt{font-size:12px; padding: 0 0 8px;}
.btnArea{padding:30px 0 0;}
.moreBtn{width:120px; height:44px; line-height:44px; font-size:12px;}


/* Visual */
#visual{}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .v_txt{bottom:120px;}
#visual .visual_in .roll .v_txt h2{font-size:40px;}
#visual .visual_in .roll .v_txt p{font-size:16px; padding:15px 0 0;}
#visual .visual_in .roll .v_txt p br{display:none;}

#visual .scr{font-size:11px; bottom:20px; left:3%;}
#visual .scr span{margin:0 8px 0 0; border-width:2px;}

#visual .slick-dots{left:3%; bottom:30px; transform:translateX(130px);}
#visual .slick-dots li{width:6px; height:6px;}
#visual .slick-dots li.slick-active{width:10px; height:10px; border-width:2px;}


/* BUSINESS AREA */
#business{}
#business .business_in{}
#business .business_in .roll{}
#business .business_in .roll .txtArea{padding:80px 0;}
#business .business_in .roll .txtArea > div{padding:0 30px 0 3%;}

#business .btn-wrap{width:70px; height:70px; bottom:120px; margin-left: -86px;}
#business .btn-wrap:before{width:40px; height:40px; top:-30px; margin-left:-20px;}
#business button{width:6px; height:9px; margin:0 10px;}
#business button:after{height:9px; right:-10px; margin-top:-4px;}




#port .port_roll .roll .txtArea{}
#port .port_roll .roll .txtArea > div{max-width:350px;}
#port .port_roll .roll .bgArea{}
#port .slick-arrow{margin-left: -30px; bottom:80px;}
#port .slick-prev{transform:translateY(-50px);}
#port .slick-next{transform:translateY(50px);}
#port .slick-dots{margin-left: -55px; bottom:62px;}
#port .slick-dots li button{font-size:13px;} 





#notice{padding:120px 0 160px;}
#notice .notice_roll{margin:30px -10px 0; width:calc(100% + 20px);}
#notice .notice_roll .roll{padding:0 10px;}
#notice .notice_roll .roll a{padding:35px 30px;}
#notice .notice_roll .roll a dl{margin:0 0 10px;}
#notice .notice_roll .roll a dl dt{font-size:13px; padding:0 20px 0 0;}
#notice .notice_roll .roll a dl dt:after{height:8px; right:10px; margin-top:-4px;}
#notice .notice_roll .roll a dl dd{font-size:13px;}
#notice .notice_roll .roll a h4{margin:0 0 8px;}
#notice .notice_roll .roll a p{font-size:15px;}

#notice .slick-arrow{width:14px; height:24px; top:-70px;}
#notice .slick-prev{left:10px;}
#notice .slick-next{right:10px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


h3{font-size:24px; padding:0 0 15px;}
h4{font-size:18px;}
.mTxt{font-size:11px;}
.btnArea{padding:20px 0 0;}
.moreBtn{width:100px; height:40px; line-height:40px; font-size:11px;}

.fp-section{height: calc(var(--vh, 1vh) * 100) !important;}


/* Visual */
#visual{height: calc(var(--vh, 1vh) * 100) !important;}
#visual .visual_in{height: calc(var(--vh, 1vh) * 100) !important;}
#visual .visual_in .roll{height: calc(var(--vh, 1vh) * 100) !important;}
#visual .visual_in .roll .v_txt h2{font-size:30px;}
#visual .visual_in .roll .v_txt p{font-size:14px; padding:12px 0 0;}
#visual .visual_bar{height:3px;}


/* BUSINESS AREA */
#business{padding:0 !important;}
#business .business_in{}
#business .business_in .roll{display:block;}
#business .business_in .roll .txtArea{width:100%; padding:80px 0 40px;}
#business .business_in .roll .txtArea > div{max-width:100%; padding:0 3%;}
#business .business_in .roll .imgArea{width:100%; height:250px;}

#business .btn-wrap{width:50px; height:50px; bottom:226px; margin-left: 0; left:auto; right:3%;}
#business .btn-wrap:before{width:30px; height:30px; top:-20px; margin-left:-15px;}



#port{height:100vh;}
#port .port_roll{}
#port .port_roll .roll{height:100vh;}
#port .port_roll .roll .txtArea{top:auto; bottom:0; transform:translateX(-50%); background:var(--mainColor); padding:40px 3% 80px;}
#port .port_roll .roll .txtArea > div{max-width:100%;}
#port .port_roll .roll .bgArea{}
#port .port_roll .roll .bgArea:after{display:none;}
#port .slick-arrow{left:auto; right:4%; margin-left: 0; bottom:70px;}
#port .slick-dots{left:auto; right:4%; margin-left: 0; margin-right:-27px; bottom:52px;}





#notice{padding:80px 0 90px;}
#notice .notice_roll{margin:30px -5px 0; width:calc(100% + 10px);}
#notice .notice_roll .roll{padding:0 5px;}
#notice .notice_roll .roll a{border-width:3px; padding:25px 20px;}
#notice .notice_roll .roll a dl dt{font-size:12px;}
#notice .notice_roll .roll a dl dd{font-size:12px;}
#notice .notice_roll .roll a p{font-size:13px;}

#notice .slick-arrow{width:12px; height:20px; top:-60px;}
#notice .slick-prev{left:5px;}
#notice .slick-next{right:5px;}

}
/*******************************************************************************
    @media ~480px                body,html{font-size:13px; }
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}