@charset "utf-8";
.content {padding-bottom: 60px;}
section h2 {padding-bottom: 35px; font-size: 32px; font-family: 'roboto'; font-weight: 600; line-height: 1; text-align: center;}

.main_bnr { position: relative; }
.main_bnr .main_bnr-container {width: 100%;background-color: #999; }
.main_bnr .slide-contents {width: 100%; height: 800px;position: relative; }
.main_bnr li .bnr_bx {display: block; position: relative; width: 100%; height: 1000px; }
.main_bnr li .bnr_bx .bg_vdo {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
.main_bnr li .bnr_bx .bg_vdo video {object-fit: cover; width: 100%; height: 100%; }
.main_bnr li .bnr_bx .desc {position: absolute; top: 395px; left: 50%; margin-left: -660px; color: #fff; text-align: left; line-height: 1.3; text-shadow: 3px 5px 20px #00000040;}
.main_bnr li .bnr_bx .desc .txt {display: block; margin-bottom: 10px;font-size: 30px;}
.main_bnr li .bnr_bx .desc .tit {margin-bottom: 10px; font-size: 53px; font-weight: 500; letter-spacing: -4px;}
.main_bnr .swiper-scrollbar {width: 1320px;height: 5px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 35px;background: rgba(255, 255, 255, 0.8);border-radius: 0px;-ms-touch-action: none;cursor: pointer; }
.main_bnr .swiper-scrollbar-drag {position: relative; left: 0; top: 0;  width: 100%; height: 100%; background: #3a5554; border-radius: 0px; }
.main_bnr .swiper-scrollbar-cursor-drag { cursor: move; }
.main_bnr .swiper-scrollbar-lock { display: none; }
.main_bnr .swiper-button-prev { left: 50%; margin-left: -750px;}
.main_bnr .swiper-button-next { right: 50%; margin-right: -750px; }

.main_news {position: relative; padding: 35px 0; margin-bottom: 110px; width: 100%; height: 100px; text-align: center; background-color: #f7f5f2; background: #f7f5f2; background: linear-gradient(137deg, #f7f5f2 0%, #e6e3dc 100%); font-weight: 700; color: #000; line-height: 30px;}
.main_news .newsTitle {font-size: 15px; }
.main_news .newsHead {display: inline-block; margin-right: 20px; font-size: 16px; line-height: 30px;}
.main_news .swiper-container {display: inline-block; width: auto; height: 30px; vertical-align: bottom;}
.main_news .swiper-slide {justify-content: start; width: 100%; background: none; text-align: left;}
.main_news .swiper-slide a {display: inline-block; width: auto;}
.main_news .swiper-slide .newsMore {font-size: 12px; }
.main_news .swiper-slide .newsMore:before {display: inline-block; width: 80px; vertical-align: 5px; margin: 0 40px; border-bottom: 1px solid #000; content: ''; }

.main_beauty {position: relative; height: 490px; margin-bottom: 100px;}
.main_beauty .guidewrap {display: flex; overflow: hidden; width: 1350px; max-width: auto; margin-top: 100px;}
.main_beauty .tit_area {width: 325px; height: 100%; padding-top: 90px; margin-right: 25px; z-index: 10; background-color: #fff;}
.main_beauty h2 {font-size: 43px; text-align: left; line-height: 60px;}
.main_beauty h3 {margin: 15px 0 35px; font-size: 17px; font-weight: normal;}

.main_beauty .swiper-wrap {width:1000px; }
.main_beauty .swiper-slide {width: 300px;}
.main_beauty .swiper-slide .thumb {display: block; margin-bottom: 8px;}
.main_beauty .swiper-slide .desc {text-align: left;}
.main_beauty .swiper-slide .desc dt {font-size: 19px; font-weight: 500; line-height: 35px; }
.main_beauty .swiper-slide .desc dd {font-size: 15px; line-height: 1.5; color:#777; font-weight:400; }

.main_beauty  .swiper-pagination-bullets {display: flex; width: 300px; text-align: left;}
.main_beauty .swiper-pagination-bullets .swiper-pagination-bullet {flex: 1; height: 4px; margin-right: 5px; border-radius: 0; opacity: 1; background-color: #d7d7d7; transition: .2s;}
.main_beauty .swiper-pagination-bullets .swiper-pagination-bullet:focus {outline-width: 0px}
.main_beauty .swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #3a5554;}

.main_best .bx {height: 585px; margin-bottom: 130px;}
.main_best .tit {float: left; display: flex; flex-direction: column;    justify-content: center; width: 25%; height: 100%; background-color: #3a5554; color: #fff;}
.main_best .tit dl {padding-left: 40%;}
.main_best .tit dt {font-size: 34px; font-weight: 200;}
.main_best .tit dd {font-size: 48px; font-weight: 600;}
.main_best .list_area {float: left; height: 100%; width: 75%;}
.main_best ul {height: inherit;}
.main_best li {position: relative; float: left; width: 33.33%; height: 50%; background-repeat: no-repeat; background-size: cover; background-position: center center; border: 1px solid #ddd;}
.main_best li.best1 {background-image: url(/Common/images/main/main_top_01.jpg?);}
.main_best li.best2 {background-image: url(/Common/images/main/main_top_02.jpg?);}
.main_best li.best3 {background-image: url(/Common/images/main/main_top_03.jpg?);}
.main_best li.best4 {background-image: url(/Common/images/main/main_top_04.jpg?);}
.main_best li.best5 {background-image: url(http://images.k-wonjin.co.kr/skin/main/main_top_5.jpg);}
.main_best li a {display: block; width: 100%; height: 100%;}
.main_best li .label {display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 43px; height: 43px; background-color: #9b9b9b; font-size: 15px; font-weight: 400; font-family: 'roboto'; color: #fff;}
.main_best li .desc {display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; padding-left: 65px;}
.main_best li .desc span {margin-bottom: 15px; font-size: 23px; font-weight: 300; line-height: 32px;}
.main_best li .desc strong {font-size: 28px; font-weight: 600; line-height: 1;}
.main_best li.best1 {height: 100%;}
.main_best li.best4,.main_best li.best5 {border-top: 0;}
.main_best li.best2,.main_best li.best4 {border-left: 0; border-right: 0;}

.main_tv {margin-bottom: 130px;}
.main_tv .guidewrap:after {display: block; clear: both; content: ' ';}
.main_tv .video iframe {width: 100%; height: 100%;}
.main_tv .select {float: left;}
.main_tv .select .video {width: 760px;height: 430px;}
.main_tv .list {overflow-y: auto; float: right; width: 530px; height: 429px; border: solid #000; border-width: 1px 0;}
.main_tv .list li {width: 100%; padding: 4px 0; border-bottom: 1px solid #ddd; transition: background-color .3s}
.main_tv .list li:hover {background-color: #f4f4f4; }
.main_tv .list li:first-child {padding-top: 10px;}
.main_tv .list li:last-child {padding-bottom: 10px; border-bottom: 0;}
.main_tv .list li:after {display: block; clear: both; content: '';}
.main_tv .list li .thumb {float: left; width: 168px; height: 95px; background: 50% 50% /cover; text-indent: -9999px; border: solid #Fff; border-width: 1px 0;}
.main_tv .list li .desc {display: flex; flex-direction: column; justify-content: center; float: left; width: 300px; height: 95px; margin-left: 15px; }
.main_tv .list li .desc .writer {display: flex; align-items: center; margin-bottom: 5px;}
.main_tv .list li .desc .writer .thumb {width: 30px; height: 30px; border-radius: 50%; -webkit-background-size: cover; background-size: cover; }
.main_tv .list li .desc .writer dd {margin-left: 3px; font-size: 15px; color: #888;}
.main_tv .list li .desc .txt {min-height: 40px; height: 46px; font-size: 17px; line-height: 1.4;}

.main_bridge {height: 600px; margin-bottom: 95px;}
.main_bridge .bx {width: 100%; height: 100%; background-attachment: fixed; background-image: url('/Common/images/main/main_attach.jpg')}
.main_bridge .txt {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; color: #fff; background-color: rgba(62, 75, 76, 0.45);}
.main_bridge .txt dt {margin-bottom: 50px; font-size: 43px; font-weight: 600;}
.main_bridge .txt dd {font-size: 20px; text-align: center;}

.main_selfie .bx ul {position: relative; padding-bottom: 37.5vw;}
.main_selfie .bx li {position: absolute; float: left; width: 12.5vw; height: 12.5vw;}
.main_selfie .bx li.img_x2 {width: 25vw; height: 25vw;}
.main_selfie .bx li.slf_01 {left: 0;}
.main_selfie .bx li.slf_02 {left: 12.5vw;}
.main_selfie .bx li.slf_03 {left: 25vw;}
.main_selfie .bx li.slf_04 {left: 37.5vw;}
.main_selfie .bx li.slf_05 {left: 50vw;}
.main_selfie .bx li.slf_06 {left: 62.5vw; }
.main_selfie .bx li.slf_07 {left: 87.5vw;}
.main_selfie .bx li.slf_08 {left: 0vw; top: 12.5vw;}
.main_selfie .bx li.slf_09 {left: 12.5vw; top: 12.5vw; }
.main_selfie .bx li.slf_10 {left: 37.5vw; top: 12.5vw;}
.main_selfie .bx li.slf_11 {left: 50vw; top: 12.5vw;}
.main_selfie .bx li.slf_12 {left: 87.5vw; top: 12.5vw;}
.main_selfie .bx li.slf_13 {left: 0vw; top: 25vw;}
.main_selfie .bx li.slf_14 {left: 37.5vw; top: 25vw;}
.main_selfie .bx li.slf_15 {left: 50vw; top: 25vw;}
.main_selfie .bx li.slf_16 {left: 62.5vw; top: 25vw;}
.main_selfie .bx li.slf_17 {left: 75vw; top: 25vw;}
.main_selfie .bx li.slf_18 {left: 87.5vw; top: 25vw;}
.main_selfie .bx li img {width: 100%; height: 100%;  transition: transform 0.5s linear;}
.main_selfie .bx li span {display: block; position: relative; overflow: hidden; width: 100%; height: 100%;}
/*
.main_selfie .bx li span:before {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #64b99e; background: linear-gradient(90deg, #e9fffb 0%, #64b99e 100%); opacity: 0;  transition: opacity 0.5s linear; z-index: 8; content: ' ';}
*/
.main_selfie .bx li span:after {display: flex; display: flex; align-items: center;  justify-content: center; position: absolute; top: 0; left: 25%; width: 50%; height: 100%; font-size: 17px; color: #fff; font-weight: 300; font-family: 'roboto'; text-align: center;  transform: scale(0); transition: transform 0.4s linear; z-index: 9; content: 'WJ WONJIN';}
.main_selfie .bx li.img_x2 span:after {font-size: 18px;}
.main_selfie .bx li span:hover:before {opacity: .7;}
.main_selfie .bx li span:hover:after {transform:scale(1)}
.main_selfie .bx li span:hover img {transform: scale(1.2);}

.popup-wrap {width: 400px;height: auto;position: absolute;z-index: 99999999;right: 50%;margin-right: -250px;top: 200px;background-color: #fff;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);border: 1px solid #f1f1f1; }
.popup-wrap .swiper-slide {text-align: center;background: #333;width: 400px;height: 480px;background-repeat: no-repeat;background-position: center center;background-size: cover; }
.popup-wrap .swiper-slide a {display: block;width: inherit;height: inherit;background-repeat: no-repeat;background-position: center center;background-size: cover; }
.popup-wrap .swiper-slide img { width: auto; }
.popup-wrap .swiper-scrollbar {border-radius: 0px;position: relative;-ms-touch-action: none;background: rgba(229, 229, 229, 1); }
.popup-wrap .swiper-container-horizontal > .swiper-scrollbar {position: absolute;bottom: 0;z-index: 50;height: 5px;right: 0;left: 0;cursor: pointer;width: 100%; }
.popup-wrap .swiper-scrollbar-drag {height: 100%;width: 100%;position: relative;background: rgba(215, 175, 133, 1);border-radius: 0px;left: 0;top: 0; }
.popup-wrap .swiper-scrollbar-cursor-drag { cursor: move; }
.popup-wrap .swiper-scrollbar-lock { display: none; }
.popup-wrap .popup-close {font-size: 14px;line-height: 4;padding: 0 20px;text-align: right;cursor: pointer;transition: 0.3s; }
.popup-wrap .popup-close:hover {color: #999; }