@charset "utf-8";


/* 메인 비주얼 */
#visual{width:100%; height:877px; overflow:hidden; position:relative;}
#visual .mainVisual{display:flex; justify-content:center; width:100%; height:100%; position:relative;}
#visual .mainVisual .visualItem{display:inline-block; width:246px; height:100%; position:relative; overflow:hidden;}
#visual .mainVisual .visualItem:first-child, #visual .mainVisual .visualItem:last-child{width:calc((100% - 738px) / 2);}
#visual .mainVisual .visualItem .textBox{display:flex; flex-wrap:wrap; align-content:flex-start; width:100%; max-width:246px; height:auto; position:absolute; bottom:50px; left:0; z-index:5; text-align:left; color:#fff; transition:all 0.3s linear;}
#visual .mainVisual .visualItem .textBox a{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; width:100%;}
#visual .mainVisual .visualItem .textBox img{display:block; flex-shrink:0; margin-bottom:60px;}
#visual .mainVisual .visualItem .textBox p{width:100%; height:auto; font-size:20px; font-weight:300; letter-spacing:-0.05em; line-height:1.431; color:#ccc; margin-bottom:105px; text-align:center;}
#visual .mainVisual .visualItem .textBox p strong{display:inline-block; vertical-align:top; font-size:28px; font-weight:700; letter-spacing:-0.05em; color:#fff;}
#visual .mainVisual .visualItem .textBox img.arrow{margin-bottom:0;}
#visual .mainVisual .visualItem .overlay{width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,.5); z-index:3; opacity:1; transition:all 0.1s linear;}
#visual .mainVisual .visualItem .visualImg{width:auto; max-width:none; height:1000px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:all 0.3s linear;}
#visual .mainVisual .visualItem:first-child .visualImg{left:unset; transform:translateY(-50%); right:0;}
#visual .mainVisual .visualItem:last-child .visualImg{left:-50px; transform:translateY(-50%);}
#visual .mainVisual .visualItem:first-child  .textBox{left:auto; right:30px;}
#visual .mainVisual .visualItem:hover .textBox{bottom:141px;}
#visual .mainVisual .visualItem:hover .overlay{opacity:0;}
#visual .mainVisual .visualItem:hover .visualImg{margin-left:40px; }
#visual .mainVisual .visualItem:first-child:hover .visualImg{margin-left:unset; margin-right:-40px;}
#visual .visualScroll{display:inline-block; position:absolute; bottom:115px; left:50%; margin-left:680px; text-align:center; z-index:10; cursor:pointer;}
#visual .visualScroll span{display:block; font-size:14px; font-weight:700; letter-spacing:0; line-height:16px; color:#fff; margin-bottom:5px;}
#visual .visualScroll img{display:block; margin:0 auto;}

#container{width:100%; height:auto; overflow:hidden;}
