/*POP UP*/
.popup_container {position: absolute; top: 200px ; left:120px ; display:block; z-index: 90}
.popup_container .popup_item {float:left;background: #444;margin: 0 15px 0 0;background-size: contain;}
.popup_container .close {display: flex;height:0}
.popup_container span {color:#FFF;float:right;font-size: 16px}
.popup_container button {width:500px;float:right; z-index:99;float:right;padding:8px 10px 0 0}
.popup_container .popup_item img {display:flex;width: 500px; height:auto; }

/*.main_visual {height: 1030px;}*/
/* .main_visual */
.main_visual .slide img {width: 100%;padding : 0 0 20px 0 ;}
.main_visual .slick-arrow {position: absolute; top: 50%; transform: transtetranslateY(-50%); width: 40px; height: 100px; background-color: rgba(1,1,1,0.2); background-repeat: no-repeat; background-position: center center;}
.main_visual .slick-prev {left: 0; background-image: url(../images/main/arrow_prev.png);}
.main_visual .slick-next {right: 0; background-image: url(../images/main/arrow_next.png);}
.main_visual .slick-dots {left: 50%; transform: translateX(-50%); bottom: 100px; height: 33px;}
.main_visual .slick-dots li {margin: 0 10px; width: 10px; height: 10px; padding: 17px 0 0 0; vertical-align: top;}
.main_visual .slick-dots li button {width: 10px; height: 10px; border-radius: 50%; background-color: #fff;}
.main_visual .slick-dots .slick-active {width: 20px; height: 33px; padding: 0;}
.main_visual .slick-dots .slick-active button {width: 100%; height: 100%; border-radius: 0; background: url(../images/main/dot_on.png) no-repeat 0 0;}

.portfolio {position: relative; padding:40px;}
.portfolio .inner {position: relative;}
/* .portfolio .p_right {float:right} */
.portfolio .txt_box {position: relative; text-align: center; z-index: 2;}
.portfolio .txt_box h2 {display: block; margin: 0 0 5px 0; font-size: 40px; font-weight: 400; color: #111;}
.portfolio .txt_box h2 em {font-weight: 900;}
.portfolio .txt_box p {font-size: 20px; color: #666;}
.portfolio .container {padding:40px 0 0 0 ; display:flex; justify-content:center; width:100%;height:auto;}
.portfolio .boxes_depth1 {display: grid;grid-template-rows: 700px ;grid-template-columns: 345px 10px 345px 10px 345px 10px 345px}
.portfolio .col1 {display: grid;grid-template-rows: 345px 10px 345px ;grid-template-columns: 345px}
.portfolio .col2 {display: grid;grid-template-rows: 167.5px 10px 545px ;grid-template-columns: 345px}
.portfolio .col2_2row {display: grid;grid-template-rows: 167.5px ;grid-template-columns: 167.5px 10px 167.5px}
.portfolio .col4 {display: grid;grid-template-rows: 167.5px 10px 167.5px ;grid-template-columns: 167.5px 10px 167.5px}

.portfolio .border {background : #FFFF ;display: flex; ; align-items: center; justify-content: center}
.portfolio .item {background: #444;border: 1px solid #555;display: flex; align-items: center; justify-content: center; color: #AAA;}
.portfolio .box_big {width : 345px; height:345px;}
.portfolio .box_big img {width : 345px; height:345px;}
.portfolio .box_small {width : 167.5px; height:167.5px;}
.portfolio .box_small img {width : 167.5px; height:167.5px;}
.portfolio .vid_portrait {width:345px; height:522.5px}


.view_media {position: relative; margin: 10px 0 0 0 ; padding: 50px 0  150px 0;background-color:#f4eaf5}
.view_media .txt_box {position: relative; text-align: center; z-index: 2;}
.view_media .txt_box h2 {display: block; margin: 0 0 5px 0; font-size: 40px; font-weight: 400; color: #111;}
.view_media .txt_box h2 em {font-weight: 900;}
.view_media .txt_box p {font-size: 20px; color: #666;}
.view_media .tit_box .tit {float: left; margin: 0 0 0 90px; font-family: 'Vidaloka'; font-style: italic; font-size: 30px; font-weight: 400; color: #333;}
.view_media .con_box {padding : 40px 0 0 0;}
.view_media .con_box:after {display: block; clear: both; *zoom: 1; content: '';}
.view_media .con_box .sns_logo {float:left;width: 200px; height: 522px;}
.view_media .con_box .sns_logo h3 {text-align:center; color: #FFF }
.view_media .con_box .sns_logo li:hover h3 {visibility:hidden}
.view_media .con_box .sns_logo h4 {text-align:center; color: #FFF }
.view_media .con_box .sns_logo li:hover h4 {visibility:hidden}
.view_media .con_box .sns_logo p {padding-top: 50px; text-align:center; color: #9b2fa5; visibility:hidden; font-size:18px}
.view_media .con_box .sns_logo li:hover p {visibility:visible; transition: all 0.5s ease-in-out;}
.view_media .con_box .sns_logo .sns_fb {width : 200px ; height : 150px;background: #FFF;}
.view_media .con_box .sns_logo li:hover {width : 200px ; height : 150px;background: #FFF; background-image: none !important; transition: all 0.5s ease-in-out;}
.view_media .con_box .sns_logo .sns_insta {margin: 36px 0 0 0;width : 200px ; height : 150px;background: #FFF;}
.view_media .con_box .sns_logo .sns_youtube {margin: 36px 0 0 0;width : 200px ; height : 150px;background: #FFF;}

.view_media .con_box .current_media {float: right; width: 950px; height: 522px; margin: 0 15px 0 0}
/* .view_media .con_box .current_media { width: 1090px; height: 568px; margin: 0 15px 0 0} */
.view_media .con_box .current_media img {display: block;width: 930px; height: 522px}
/* .view_media .con_box .current_media img {display: block;width: 100%; height: 100%;} */
.view_media .con_box .media_list {float: right; margin-right: 0;}
.view_media .con_box .media_list li {position: relative; width: 210px; height: 118px; margin: 16px 0 0 0; transition: all 0.3s ease-in-out; cursor: pointer;}
/* .view_media .con_box .media_list li {position: relative; width: 300px; height: 130px; margin: 16px 0 0 0; transition: all 0.3s ease-in-out; cursor: pointer;} */
.view_media .con_box .media_list li:first-child {margin: 0;}
.view_media .con_box .media_list li img {display: block; width: 210px; height: 118px; transition: all 0.3s ease-in-out;}
/* .view_media .con_box .media_list li img {display: block; width: 100%; height: 100%; transition: all 0.3s ease-in-out;} */
.view_media .con_box .media_list li .txt_box {visibility: visible; opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); transition: all 0.3s ease-in-out;}
.view_media .con_box .media_list li .txt_box p {position: absolute; left: 20px; bottom: 15px; font-size: 18px; font-weight: 500; color: #fff;}
.view_media .con_box .media_list li .btn_play {visibility: hidden; opacity: 0; position: absolute; bottom: 20px; left: 0; width: 210px; padding: 0 0 15px 20px; font-size: 18px; font-weight: 500; color: #333; border-bottom: 1px solid #333; background: url(../images/main/arrow_play.png) no-repeat 0 5px; transition: all 0.3s ease-in-out; text-align: left;}
.view_media .con_box .media_list li:hover img {display:none}
.view_media .con_box .media_list li:hover .txt_box {visibility: hidden; opacity: 0;}
.view_media .con_box .media_list li:hover .btn_play {visibility: visible; opacity: 1;}

.view_profile {margin: 220px 0 0 0; overflow: hidden;}
.profile_slide {width: 1545px;}
.profile_slide .slick-list {overflow: visible;}
.profile_slide .slick-slide {position: relative;}
.profile_slide .slick-slide:before {display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); content: '';}
.profile_slide .slick-slide.slick-current:before {display: none;}
.profile_slide .slick-slide > div {height: 563px;}
.profile_slide .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 30px; background-repeat: no-repeat; background-position: center center;}
.profile_slide .slick-prev {display: none;}
.profile_slide .slick-next {right: -120px; background-image: url(../images/main/arrow_next.png);}
.view_profile .inner {position: absolute; margin: -94px 0 0 0; z-index: 1;}
.view_profile .txt_box {margin: 0 240px 0 auto; box-sizing: border-box; width: 450px; height: 140px; padding: 20px 40px; text-align: right; background-color: #9b2fa5; box-shadow: 0 12px 30px rgba(179,66,175,0.4);}
.view_profile .txt_box h2 {display: block; margin: 0 0 5px 0; font-size: 34px; font-weight: 400; color: #fff;}
.view_profile .txt_box h2 em {font-weight: 900;}
.view_profile .txt_box p {line-height: 22px; font-size: 16px; color: #e4bae8;}

.main_grid {margin: 210px 0 0 0;}
.model_area {height: 620px; background: url(../images/main/model_img.jpg) no-repeat right center;}
.model_area .inner {position: relative;}
.model_area .txt_box {position: absolute; top: 70px; right: 120px; text-align: right;}
.model_area .txt_box span {display: block; font-style: italic; font-size: 30px; font-weight: 500; color: #fff;}
.model_area .txt_box strong {display: block; line-height: 1; font-family: 'Vidaloka'; font-style: italic; font-size: 70px; font-weight: 400; color: #fff;}
.model_area .txt_box p {margin: 10px 0 0 0; line-height: 1.4; font-size: 20px; font-weight: 500; color: #ffeebc;}
.model_area .txt_box button {margin: 30px 0 0 0; width: 450px; height: 60px; font-family: 'Vidaloka'; font-style: italic; font-size: 20px; color: #fff; text-align: center; background-color: #fdb63b; border-top: 1px solid #fff; border-bottom: 1px solid #fff; transition: all 0.3s ease-in-out;}
.model_area .txt_box button:hover {background-color: #fff; color: #fdb63b;}
.before_area {position: relative; margin: -240px 0 0 0; height: 570px;}
.before_area:before {display: block; position: absolute; top: 0; left: 0; width: 1425px; height: 800px; background-color: #f4eaf5; content: ''; z-index: -1;}
.before_area .inner {position: relative; height: 570px;}
.before_area .before_box {position: absolute; top: 0; right: 120px; width: 570px; height: 570px; background: url(../images/main/before_after.jpg) no-repeat 0 0;}
.before_area .before_box .txt_box {position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; box-sizing: border-box; width: 550px; padding: 40px 0; background-color: rgba(0,0,0,0.6); text-align: center;}
.before_area .before_box .txt_box h2 {line-height: 1; font-family: 'Vidaloka'; font-style: italic; font-size: 50px; color: #fff;}
.before_area .before_box .txt_box p {font-size: 20px; font-weight: 500; color: #fff;}
.view_area {margin: 30px 0 0 0; background-color: #f6f6f6;}
.view_area:after {display: block; clear: both; *zoom: 1; content: '';}
.view_area > div {position: relative; float: left; overflow: hidden; width: calc((100% - 30px)/2); height: 570px;}
.view_area .star_box {margin: -140px 0 0 0; background: url(../images/main/star_img.jpg) no-repeat 0 0;}
.view_area .tube_box {float: right; background: url(../images/main/tube_img.jpg) no-repeat center center;}
.view_area .tube_box a {display: block; width: 100%; height: 100%;}
.view_area .txt_box {position: absolute; bottom: 10px; box-sizing: border-box; width: 550px; height: 160px; padding: 40px 0; background-color: rgba(0,0,0,0.6); text-align: center;}
.view_area .txt_box h2 {line-height: 1; font-family: 'Vidaloka'; font-style: italic; font-size: 50px; color: #fff;}
.view_area .txt_box p {font-size: 20px; font-weight: 500; color: #fff;}
.view_area .star_box .txt_box {right: 10px;}
.view_area .tube_box .txt_box {left: 10px;}

/* .view_accidents {padding: 169px 0 280px; text-align: center; background: #f6f6f6 url(../images/main/230608_world_view_2_pc_vn.jpg) no-repeat center bottom;} */
.view_accidents {padding: 169px 0 280px; text-align: center; background: #f6f6f6 url(../images/main/vn_common_footer_pc.jpg) no-repeat center bottom;}
.view_accidents strong {display: block; line-height: 1.1; font-family: 'Vidaloka'; font-style: italic; font-size: 80px; font-weight: 400; color: #333;}
.view_accidents strong em {font-family: 'Vidaloka'; font-style: italic; color: #9b2fa5;}
.view_accidents p {margin: 30px 0 0 0; line-height: 1.4; font-size: 20px; font-weight: 500; color: #666;}

.center_area {padding: 140px 0; background: url(../images/main/bg_notice.jpg) no-repeat right 0;}
.center_area ul li {margin: 40px 0 0 0;}
.center_area ul li:first-child {margin: 0;}
.center_area ul li a {display: block; box-sizing: border-box; width: 810px; height: 160px; padding: 36px 70px; border: 10px solid #f4eaf5; background-color: #fff; transition: all 0.3s ease-in-out;}
.center_area ul li h2 {display: block; margin: 0 0 5px 0; font-family: 'Vidaloka'; font-style: italic; font-size: 30px; font-weight: 400; color: #333; transition: all 0.3s ease-in-out;}
.center_area ul li p {font-size: 18px; font-weight: 500; color: #666; transition: all 0.3s ease-in-out;}
.center_area ul li a:hover {margin: 0 0 0 30px; background-color: #9b2fa5; border: 10px solid #9b2fa5; box-shadow: 0 12px 30px rgba(179,66,175,0.4);}
.center_area ul li a:hover h2 {color: #fff;}
.center_area ul li a:hover p {color: #fff;}

.partner_area {box-sizing: border-box; height: 120px; padding: 20px 0; background-color: #fbfbfb; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.partner_slide {width: 1200px; margin: 0 auto;}
.partner_slide .slide {box-sizing: border-box; padding: 0 15px;}
.partner_slide .slide a {display: block; box-sizing: border-box; height: 80px; border: 1px solid #ddd;}
.partner_slide .slide a img {display: block; width: 100%; height: 100%;}
.partner_slide .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 30px; background-repeat: no-repeat; background-position: center center;}
.partner_slide .slick-prev {left: -105px; background-image: url(../images/main/arrow_prev02.png);}
.partner_slide .slick-next {right: -105px; background-image: url(../images/main/arrow_next02.png);}