/* 사이드 이펙트 */
.side1 {position: relative; perspective: 600px; display: block;}
.side1 .front {
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 0.5s ease-in-out;
  backface-visibility: hidden;
}
.side1 .back{position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; z-index: -1;
  transform-style: preserve-3d;
  color: #fff;
  background: #4038dc;
  transform: rotateY(-180deg);
  transition: all 0.5s ease-in-out;
  backface-visibility: hidden;
}
.side1 .back i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 60px;}
.side1:hover .front {transform: rotateY(180deg);}
.side1:hover .back {transform: rotateY(0deg); z-index: 1;}

/* 새로운 영화 */
.new {padding: 100px 0; position: relative;}
.new h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left {position: relative; margin-right: 423px; height: 500px; background: #ccc url(/MegaBox/img/new01.jpg) center center; background-size: cover;}
.new .new_left .play {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; cursor: pointer;}
.new .new_left .play .st0 {fill: #fff; opacity: 0.3}
.new .new_left .play .st1 {fill: #fff;}
.new .new_right {position: absolute; right: 0; top: 165px; width: 400px; height: 500px; padding: 34px; box-sizing: border-box; background: #f0f0f0;}
.new .new_right .title {font-size: 28px; color: #000;}
.new .new_right .release {font-size: 12px; color: #333;}
.new .new_right .star {padding: 13px 0;}
.new .new_right .star strong {font-size: 15px; padding-left: 5px;}
.new .new_right .star span {display: inline-block; width: 20px; height: 20px; vertical-align: -3px;}
.new .new_right .star .star1 {background-position: -393px 0;}
.new .new_right .star .star2 {background-position: -412px 0;}
.new .new_right .star .star0 {background-position: -374px 0;}

.new .new_right .summary {font-size: 14px;}
.new .new_right .genre {padding-bottom: 3px;}
.new .new_right .age {padding-bottom: 10px;}
.new .new_right .desc {margin-bottom: 20px; height: 108px; overflow: hidden;}

.new .new_right .select {overflow: hidden;}
.new .new_right .select .s1 {float: left; width: 49%; background: #000; margin-right: 2%;}
.new .new_right .select .s2 {float: left; width: 49%; background: #000;}
.new .new_right .select .s3 {float: left; width: 100%; margin-top: 2%;}
.new .new_right .btn {overflow: hidden; margin-top: 2%; text-align: center;}
.new .new_right .btn a {float: left; width: 49%; box-sizing: border-box; display: block; padding: 10px 30px 12px 30px;}
.new .new_right .btn a.white {background-color: #fff; margin-right: 2%; color: #3a0e6a; border: 1px solid #3a0e6a;}
.new .new_right .btn a.purple {background-color: #3a0e6a; color: #fff; border: 1px solid #6e40c4;}

(function($){
    (function handleTrailer() {
        // 셀렉터 캐시
        var $selector = {
            body: $( "body" ),
            overlay: $( "#blackout" ),
            modal: $( "#trailerModal" ),
            showButton: $( "#showTrailer" ),
            hideButton: $( "#hideTrailer" ),
        };
        
        // 플레이어
        var player = {
            obj: null, // 플레이어 오브젝트
            query : {
                theme: "dark",
                color: "white",
                controls: 1, 
                autoplay: 1,
                enablejsapi: 1,
                modestbranding: 0, // YouTube 로고 감춤
                rel: 0,  // 관련 동영상 표시
                showinfo: 0, // 제목, 업로더 감춤
                iv_load_policy: 3 // 특수효과 감춤
            },
            visible: false
        };

        // 화면 크기에 비례해 iframe의 크기 조절
        function resizePlayer() {
            var viewport = {}, frame = {}, modal = {};

            viewport.width = $( window ).width();
            viewport.height = $( window ).height();

            frame.width = viewport.width;
            frame.height = frame.width / 1.6; // 16 : 10

            modal.top = ( ( viewport.height - frame.height ) / 2 ) + "px";
            modal.left = "0px";

            $selector.modal.css( modal );

            player.obj.setSize( frame.width, frame.height );
        }
    })();

})(jQuery);