update
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.cuadro_navegacion { background-color: #fff!important; border-radius: 25px; }
|
||||
.cuadro_navegacion .card-header { border: 1px solid #657380; }
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100 pt-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10 text-center">
|
||||
<p>Antes de iniciar, identifica la funcionalidad de los elementos que encontrarás a lo largo del curso.</p>
|
||||
</div>
|
||||
<div class="col-10 cuadro_navegacion shadow">
|
||||
<div class="row justify-content-center align-items-start">
|
||||
<div class="col-4 mb-2 text-center">
|
||||
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||||
<div class="row h-100">
|
||||
<div class="col-12 mb-2"><img src="img/guia_navegacion/1.png" loading="lazy" alt=""></div>
|
||||
<div class="col-12">
|
||||
Con estos botones podrás regresar o avanzar a un tema específico.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 mb-2 text-center">
|
||||
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||||
<div class="row h-100">
|
||||
<div class="col-12 mb-2"><img src="img/guia_navegacion/2.png" loading="lazy" alt=""></div>
|
||||
<div class="col-12">
|
||||
Al dar clic en este botón podrás refrescar la página.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 mb-2 text-center">
|
||||
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||||
<div class="row h-100">
|
||||
<div class="col-12 mb-2"><img src="img/guia_navegacion/3.png" loading="lazy" alt=""></div>
|
||||
<div class="col-12">
|
||||
Al dar clic en el botón Menú identificarás el contenido que se abarca dentro del curso.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center align-items-start">
|
||||
<div class="col-4 mb-2 text-center">
|
||||
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||||
<div class="row h-100">
|
||||
<div class="col-12 mb-2"><img src="img/guia_navegacion/4.png" loading="lazy" alt=""></div>
|
||||
<div class="col-12">
|
||||
Con este botón puedes regresar a la pantalla inicial del módulo.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 mb-2 text-center">
|
||||
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||||
<div class="row h-100">
|
||||
<div class="col-12 mb-2"><img src="img/guia_navegacion/7.png" loading="lazy" alt=""></div>
|
||||
<div class="col-12">
|
||||
Algunos botones se identificarán por medio de un parpadeo. Da clic en ellos para visualizar su contenido.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
instruccion(1);
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.cuadro_navegacion { background-color: #00263a!important; border-radius: 25px; }
|
||||
.cuadro_navegacion .card-header { border: 1px solid #657380; }
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.obj { position: absolute; }
|
||||
.obj1 { top: 3%; left: 11%; }
|
||||
.btn-comenzar { display: inline-block; }
|
||||
.anim { opacity: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container pl-0 h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-5 align-self-end">
|
||||
<img src="img/1.png" class="anim anim1" alt="">
|
||||
</div>
|
||||
<div class="col-6 text-center align-self-center">
|
||||
<div class="main-txt pt-4 anim anim3">
|
||||
<h2>Prevención y Detección de Operaciones con Recursos de Procedencia Ilícita</h2>
|
||||
<div class="btn-comenzar mt-3"><img src="img/template/btn-comenzar.svg" class="d-block mx-auto" width="268" height="64"></div>
|
||||
</div>
|
||||
<div class="position-absolute anim3" style="right: 0;top: 328px;font-size: 16px;text-align: left;">
|
||||
<p><em>MAPFRE México S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la Federación el 19 de Noviembre del 2020.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim3", 1,{opacity:0,y:-300,rotationX:-180,rotationY:180},{opacity:1,y:0,rotationX:0,rotationY:0});
|
||||
tl.call(fn_end);
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(2);
|
||||
$('.btn-comenzar').addClass('animated infinite pulse');
|
||||
}
|
||||
|
||||
$(".btn-comenzar").click(function(event) {
|
||||
/* Act on the event */
|
||||
instruccion(1);
|
||||
__siguiente()
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.fullvideo {
|
||||
width: 1365px;
|
||||
height: 767px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="fullback w-100 h-100">
|
||||
<video class="fullvideo" src="video/clip_1.mp4" buffered id="vdo" ></video>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
$(".sco").addClass('hasvideo');
|
||||
vdo = document.getElementById("vdo");
|
||||
vdo.play();
|
||||
});
|
||||
$(".fullvideo").on("ended",function(){
|
||||
instruccion(1);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.sec0 .card { border:none; border-radius: 25px; background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); }
|
||||
.cuadro_navegacion { background-color: #00263a!important; border-radius: 25px; }
|
||||
.cuadro_navegacion .card-header { border: 1px solid #657380; }
|
||||
.main-txt { margin-left: -140px; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="card shadow p-3 anim anim1 text-white">
|
||||
<p class="text-center">Los <b>temas</b> que revisaremos a lo largo del curso son los siguientes:</p>
|
||||
<ul class="text-left">
|
||||
<li>Aspectos generales</li>
|
||||
<li>Conceptos previstos en las nuevas disposiciones</li>
|
||||
<li>Aspectos centrales en las nuevas Disposiciones de PLD/FT</li>
|
||||
<li>Operaciones Inusuales, Relevantes e Internas Preocupantes</li>
|
||||
<li>Estructuras internas</li>
|
||||
<li>Reservas de confidencialidad</li>
|
||||
<li>Otras obligaciones</li>
|
||||
<li>Intercambio de información</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_3 = newSound("audio/Audio_3_Marcos.mp3");
|
||||
Audio_3.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_3);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/sprites/marco_1.png" alt="">
|
||||
<img src="img/sprites/marco_2.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
¡Buenos días! Soy Marcos Aguilar, el nuevo colaborador de MAPFRE. Me interesa mucho conocer las nuevas disposiciones
|
||||
sobre Prevención de Lavado de Dinero y Financiamiento al Terrorismo para poderme actualizar. ¿Puedes apoyarme?
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_1 d-none"></div>
|
||||
<div class="personaje_r_2"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_1 d-none"></div>
|
||||
<div class="personaje_m_2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_4 = newSound("audio/Audio_4_Marcos.mp3");
|
||||
var Audio_R1 = newSound("audio/Audio_1_Ruben.mp3");
|
||||
var txt1 = "¡Buen día! Te estábamos esperando Marcos. Yo soy Rubén Gutiérrez y con gusto te guiaré para que conozcas mejor estas disposiciones.";
|
||||
|
||||
Audio_4.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R1);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').addClass('d-none');
|
||||
$('.personaje_m_1').removeClass('d-none');
|
||||
$('.personaje_r_2').addClass('d-none');
|
||||
$('.personaje_r_1').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_R1.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_r_1').removeClass('play')
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_4);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg5.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Lo primero que debes saber acerca de estas <b>nuevas disposiciones</b> es que existen para <b>detectar y
|
||||
prevenir operaciones</b> en las que puedan verse involucrados nuestros clientes y que afecten a nuestras
|
||||
instituciones, por lo que es importante dar seguimiento a sus operaciones y <b>conservar su información</b>
|
||||
para nuestra seguridad. Acompáñame por favor, mientras te platico en qué consisten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 anim anim2">
|
||||
<div class="row h-100">
|
||||
<div class="col-6 align-self-end"><div class="personaje_r_3"></div></div>
|
||||
<div class="col-6 align-self-end"><img src="img/sprites/h5.png" class="mx-auto d-block" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R2 = newSound("audio/Audio_2_Ruben.mp3");
|
||||
|
||||
Audio_R2.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_r_3').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R2);
|
||||
$('.personaje_r_3').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Observa el siguiente video, para que al igual que Marcos, puedas conocer los <b>aspectos</b>
|
||||
<b>generales</b> para la prevención y detección de operaciones con recursos de procedencia ilícita.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_01.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R3 = newSound("audio/Audio_3_Ruben.mp3");
|
||||
|
||||
Audio_R3.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R3);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.carousel-style { border: 6px solid #68ABC1; border-radius:25px;}
|
||||
.carousel-item p { margin: 0;}
|
||||
.carousel-item .rounded { border-radius: 25px!important;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center mt-3 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
|
||||
<p class="m0">
|
||||
Ahora que gracias a tu ayuda, ya conozco de qué tratan los aspectos generales y qué personas se ven involucradas en ellos, <b>¿qué más debo saber?</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center anim anim3">
|
||||
<div class="col-10">
|
||||
<div class="card-body p-0 carousel-style">
|
||||
<div class="btn_ponter buttonss0" style="display: none;" href="#carru0" role="button" data-slide="prev">
|
||||
<img src="img/guia_navegacion/arrow_left.png">
|
||||
</div>
|
||||
<div id="carru0" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/4.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8 text-left">
|
||||
<h5>Cliente</h5>
|
||||
<p>
|
||||
Un cliente es la persona física, moral, o institución fiduciaria, que tenga el carácter
|
||||
de: contratante, asegurado, fideicomitente, comitente, mandante, obligado a pagar una
|
||||
contraprestación y/o comprador de salvamento.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/5.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Beneficiario</h5>
|
||||
<p>
|
||||
Un beneficiario es la persona designada por el Asegurado o por la Ley, para que se le
|
||||
abone el dinero o se le presten los servicios a cargo de la aseguradora. También puede
|
||||
poseer el carácter de acreedor y/o fideicomisario.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/6.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Dispositivo</h5>
|
||||
<p>
|
||||
Es un equipo que permite acceder a Internet, el cual puede ser utilizado para celebrar Operaciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/7.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Grado de Riesgo</h5>
|
||||
<p>
|
||||
Refiere a la clasificación de los Clientes que realiza la Aseguradora o la Afianzadora con base en la evaluación de su Riesgo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/8.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Mitigantes</h5>
|
||||
<p>
|
||||
Son las políticas y los procedimientos de cada Aseguradora o Afianzadora que contribuyan a administrar
|
||||
y disminuir la exposición a los Riesgos identificados en la metodología de Enfoque Basados en Riesgos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/9.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Operaciones</h5>
|
||||
<p>
|
||||
Se clasifican en operaciones para Seguros y operaciones para Fianzas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/10.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Propietario real</h5>
|
||||
<p>
|
||||
Es la persona física que no siendo el Cliente o el Beneficiario, obtiene los beneficios
|
||||
derivados de un contrato u operación celebrado con la Aseguradora o la Afianzadora.
|
||||
También comprende a las personas que ejerzan el control sobre una persona moral.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row align-items-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/11.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Proveedor de recursos</h5>
|
||||
<p>
|
||||
Es la persona que, sin ser el Cliente en una operación de seguros con componente
|
||||
de ahorro e inversión, aporta los recursos sin obtener los beneficios económicos
|
||||
derivados de esta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><img src="img/13.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8">
|
||||
<h5>Riesgo</h5>
|
||||
<p>
|
||||
Es la probabilidad de que la Institución pueda ser utilizada por los Clientes para
|
||||
realizar actos u Operaciones a través de los cuales pudiesen cometerse delitos de
|
||||
operaciones con recursos de procedencia ilícita y el financiamiento al terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 mb-2"><a class="btn-pdf locked" href="material/mapfre_pld_conceptos.pdf" target="_blank" download><img src="img/12.png" class="mx-auto d-block" alt=""></a></div>
|
||||
<div class="col-8">
|
||||
<p>
|
||||
Si deseas recordar y/o conservar estas definiciones, te invitamos a descargar el siguiente
|
||||
glosario para que nunca las olvides.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_ponter buttonss1" href="#carru0" role="button" data-slide="next">
|
||||
<img src="img/guia_navegacion/arrow_right.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-2 anim anim2">
|
||||
<div class="col-8">
|
||||
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Pues bien, Marcos. Es importante que sepas a qué nos referimos con operación, beneficiario, grado de riesgo,
|
||||
entre otros <b>conceptos clave</b>. A continuación, podrás revisarlos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_5 = newSound("audio/Audio_5_Marcos.mp3");
|
||||
var Audio_R4 = newSound("audio/Audio_4_Ruben.mp3");
|
||||
|
||||
Audio_5.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
stopAllSoundsAndPlay(Audio_R4);
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
});
|
||||
Audio_R4.on("end", function() {
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl2.call(fn_slide);
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
instruccion(3);
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_5);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_slide(){
|
||||
console.log('wubba dubba');
|
||||
var items = 0;
|
||||
$(".buttonss0").click(function(event) {
|
||||
__click.play();
|
||||
items--;
|
||||
|
||||
if (items < 1) {
|
||||
$(".buttonss0").hide();
|
||||
$(".buttonss1").show();
|
||||
}else{
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").show();
|
||||
}
|
||||
});
|
||||
|
||||
$(".buttonss1").click(function(event) {
|
||||
__click.play();
|
||||
items++;
|
||||
|
||||
if (items >= 9) {
|
||||
//$(".buttonss1").removeClass('animated pulse infinite');
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").hide();
|
||||
instruccion(17);
|
||||
if ($('.btn-pdf').hasClass('locked')) {
|
||||
$('.btn-pdf img').addClass('animated pulse infinite');
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.btn-pdf').click(function(){
|
||||
$(this).removeClass('locked');
|
||||
$('.btn-pdf img').removeClass('animated pulse infinite');
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,426 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sec1 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sco .swal2-container { background-color: rgba(22,40,68,1)!important; }
|
||||
.btn_ { position: absolute; bottom: -11%; left: 72%; }
|
||||
.card_intro { background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff); border: 0; border-top-left-radius:25px; border-top-right-radius: 25px; }
|
||||
.bg-blanco { background-image: url(img/fondos/bg0.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bg_actividad { background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); border-top-right-radius: 25px;}
|
||||
.bg-gris { background-image: url(img/actividad/bg_gris.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.cuadro_gris { position: relative; background-image: url(img/actividad/gris.png); background-repeat: no-repeat; background-size: 100% 100%; margin: 0 auto; }
|
||||
.opcion { position: relative; padding-top: 10px; cursor: pointer; padding-left: 18px; }
|
||||
.opcion:hover { font-weight: bold; background-color: #D67E72; }
|
||||
.opcion:hover:before { background-color: #fff; }
|
||||
.opcion:before { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid #fff; top: 61%; left: -13px; border-radius: 25px; transform: translateY(-50%); }
|
||||
.opcion.selected:hover { content: ""; position: absolute; background-image: url(img/actividad/2.png); width: 52px; height: 52px; background-repeat: no-repeat; top: 0; left: -60px; }
|
||||
.sec2.good { background-image: url(img/fondos/bg8.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sec2.bad { background-image: url(img/fondos/bg9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.text-rojo-1 { color: #b9230f; font-weight: bold; }
|
||||
.swal2-popup.popup-class { height: 100%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 align-self-end animated bounceInLeft">
|
||||
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="">
|
||||
</div>
|
||||
<div class="col-8 animated zoomIn">
|
||||
<div class="card card_intro shadow p-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 text-center">
|
||||
<p class="text-rojo-1 f33"><b><i>¡Bienvenido a la actividad de Aprendizaje!</i></b></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
En esta ocasión necesito de tu ayuda para recordar los <b>conceptos necesarios</b> para comprender
|
||||
de mejor manera las nuevas disposiciones en materia de Prevención y Detección de Operaciones
|
||||
con Recursos de Procedencia Ilícita.
|
||||
</p>
|
||||
<p>
|
||||
Para hacerlo, deberás determinar si los conceptos que se te presentan son <b>falsos o verdaderos.</b>
|
||||
</p>
|
||||
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_">
|
||||
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-11 mb-3">
|
||||
<p>
|
||||
<b class="text-rojo-2">Instrucciones:</b> lee atentamente cada uno de los conceptos que se te presentan y determina si son verdaderos o falsos seleccionando alguna de las opciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7 bg_actividad text-white py-3">
|
||||
<div class="qtxt"></div>
|
||||
<div class="row wopciones mt-3"></div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/sprites/marcos_actividad.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none;">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-7">
|
||||
<div class="card bg-transparent p-2 shadow-none border-0">
|
||||
<div class="row">
|
||||
<!-- <div class="col-12 text-center mb-2">
|
||||
<img class="img_change">
|
||||
</div> -->
|
||||
<div class="col-12 text-center mb-2">
|
||||
<div class="txt_final"></div>
|
||||
<div class="cuadro_gris py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja pl-1">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Total de preguntas:</div>
|
||||
<div id="totalp" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Correctas:</div>
|
||||
<div id="totalc" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Incorrectas:</div>
|
||||
<div id="totali" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Calificación:</div>
|
||||
<div id="cal" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center align-self-end">
|
||||
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center align-self-end">
|
||||
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="">
|
||||
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
<div class="d-none">
|
||||
<div id="pop0" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/3.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Muy bien!</h4>
|
||||
<div class="txt_retro_bien"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/4.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Incorrecto!</h4>
|
||||
<div class="txt_retro_mal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var audio6 = newSound("audio/Audio_6_Marcos.mp3");
|
||||
var preguntas;
|
||||
var quiz_object = new Object();
|
||||
quiz_object.preguntaActual = 0;
|
||||
quiz_object.maxPreguntas = 6;
|
||||
quiz_object.correctas = 0;
|
||||
quiz_object.incorrectas = 0;
|
||||
quiz_object.oportunidades = 2;
|
||||
$(".layer-load").show();
|
||||
$(document.querySelector('.wcontainer')).waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
stopAllSoundsAndPlay(audio6);
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio6.on("play",function(){
|
||||
$(".personaje").addClass('play');
|
||||
});
|
||||
|
||||
audio6.on("end",function(){
|
||||
$(".personaje").removeClass('play').addClass('stop');
|
||||
instruccion(2);
|
||||
$(".btn_comenzar").show();
|
||||
$(".btn_comenzar").addClass('animated pulse infinite');
|
||||
ImportFile();
|
||||
});
|
||||
|
||||
function ImportFile() {
|
||||
//$(".quiz-loader").show();
|
||||
var excelUrl = "excel/actividad_1.xlsx";
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.open("GET", excelUrl, true);
|
||||
oReq.responseType = "arraybuffer";
|
||||
oReq.onload = function(e) {
|
||||
var arraybuffer = oReq.response;
|
||||
var data = new Uint8Array(arraybuffer);
|
||||
var arr = new Array();
|
||||
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
||||
var bstr = arr.join("");
|
||||
var workbook = XLSX.read(bstr, { type: "binary" });
|
||||
var first_sheet_name = workbook.SheetNames[0];
|
||||
var worksheet = workbook.Sheets[first_sheet_name];
|
||||
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||||
shuffleArray(preguntas);
|
||||
transformer_options();
|
||||
quiz_object.preguntas = preguntas;
|
||||
if (quiz_object.maxPreguntas == -1) { quiz_object.maxPreguntas = quiz_object.preguntas.length;
|
||||
} else {
|
||||
quiz_object.preguntas = preguntas;
|
||||
}
|
||||
}
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
function transformer_options() {
|
||||
$.each(preguntas, function(index, pregunta) {
|
||||
var opciones = new Array();
|
||||
if (pregunta.patron != undefined) {
|
||||
var patron = pregunta.patron.split(",");
|
||||
} else {
|
||||
var patron = [];
|
||||
}
|
||||
|
||||
$.each(Object.keys(pregunta), function(index, key) {
|
||||
if (key.toLowerCase().indexOf("opcion") >= 0) {
|
||||
var opcion = new Object();
|
||||
opcion.text = pregunta[key];
|
||||
if (patron.length > 0) {
|
||||
opcion.valor = Number(patron[index - 1]);
|
||||
} else {
|
||||
if (key.toLowerCase().indexOf("correcta") >= 0) {
|
||||
opcion.valor = 1;
|
||||
} else {
|
||||
opcion.valor = 0;
|
||||
}
|
||||
}
|
||||
|
||||
opciones.push(opcion);
|
||||
}
|
||||
});
|
||||
if (pregunta.aleatoria == "1") {
|
||||
pregunta.opciones = shuffleArray(opciones);
|
||||
} else {
|
||||
pregunta.opciones = opciones;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
$(".btn_comenzar").click(function(event) {
|
||||
__click.play();
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(8);
|
||||
$(".sec0").hide();
|
||||
$(".sec1").show();
|
||||
siguientePregunta();
|
||||
});
|
||||
|
||||
function siguientePregunta() {
|
||||
// body...
|
||||
instruccion(8);
|
||||
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
||||
$(".qtxt").html(pregunta.pregunta);
|
||||
$(".numero").html(quiz_object.preguntaActual+1);
|
||||
$(".wopciones").html("");
|
||||
$(".btn-enviar").hide();
|
||||
$(".btn-siguiente-quiz").hide();
|
||||
console.log(quiz_object.preguntaActual);
|
||||
$.each(pregunta.opciones, function(index, opcion) {
|
||||
$(".wopciones").append('<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' + '<div data-val="' + opcion.valor + '" class="opcion">'+ opcion.text + '</div></div>');
|
||||
});
|
||||
TweenMax.staggerFromTo(".wopciones-info", 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
||||
$(".opcion").click(function(event) {
|
||||
__click.play();
|
||||
$(".opcion").removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
$(".txt_retro_bien").html(pregunta.retro_correcta);
|
||||
$(".txt_retro_mal").html(pregunta.retro_incorrecta);
|
||||
var valor = $(this).data("val");
|
||||
if (Number(valor) > 0) {
|
||||
var pop_bien = $("#pop0").html();
|
||||
quiz_object.correctas++;
|
||||
Swal.fire({
|
||||
title: '',
|
||||
html: pop_bien,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: document.querySelector('.sco'),
|
||||
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
||||
background: '#162844',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
customClass:{popup:'popup-class'},
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {
|
||||
},
|
||||
onOpen: function () {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
instruccion(7);
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
if (quiz_object.preguntaActual == quiz_object.maxPreguntas - 1) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
quiz_object.incorrectas++;
|
||||
var pop_mal = $("#pop1").html();
|
||||
Swal.fire({
|
||||
title: '',
|
||||
html: pop_mal,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: document.querySelector('.sco'),
|
||||
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
||||
background: '#162844',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
customClass:{popup:'popup-class'},
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {
|
||||
},
|
||||
onOpen: function () {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
instruccion(7);
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
if (quiz_object.preguntaActual == quiz_object.maxPreguntas - 1) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
$(".btn-siguiente-quiz").show();
|
||||
quiz_object.preguntaActual++;
|
||||
});
|
||||
}
|
||||
|
||||
function finActividad() {
|
||||
// body...
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
var calificacion = Math.floor(round((quiz_object.correctas * 100) / (quiz_object.correctas + quiz_object.incorrectas)));
|
||||
$("#totalp").html(quiz_object.correctas + quiz_object.incorrectas);
|
||||
$("#totalc").html(quiz_object.correctas);
|
||||
$("#totali").html(quiz_object.incorrectas);
|
||||
$("#cal").html(calificacion + "%");
|
||||
if (calificacion >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
//$(".img_change").attr("src","img/actividad2/7.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Con tu ayuda, he conseguido recordar los conceptos clave de las nuevas disposiciones!</p>");
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
instruccion(1);
|
||||
} else {
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no hemos conseguido recordar los conceptos clave de las nuevas disposiciones, pero no te preocupes, puedes intentarlo de nuevo.</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".btn_re").removeClass('d-none');
|
||||
instruccion(15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".btn_re").click(function(event) {
|
||||
__click.play();
|
||||
__loadsco();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.obj { position: absolute;}
|
||||
.obj1 { top: 4%; left: 27%;}
|
||||
.obj2 { top: 40%; left: 31%;}
|
||||
.obj3 { top: 72%; left: 29%;}
|
||||
.nota { position: absolute; bottom: 10%; right: 2%; z-index: 10;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100">
|
||||
<div class="col-9 offset-2 mt-2">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">Y dime Rubén, ¿en MAPFRE contamos con algún <b>Manual de Cumplimiento</b> para prevenir y detectar operaciones con recursos de procedencia ilícita? Me gustaría revisarlo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 align-self-end anim anim2">
|
||||
<div class="row">
|
||||
<div class="col-6 align-self-end"><div class="personaje_r_1 stop mx-auto"></div></div>
|
||||
<div class="col-6 align-self-end"><div class="personaje_m_2"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 align-self-center">
|
||||
<div class="position-relative anim anim3" style="z-index: 2;"><img src="img/14.png" alt=""></div>
|
||||
<div class="obj obj1 anim anim3"><img src="img/15.png" alt=""></div>
|
||||
<div class="obj obj2 anim anim4"><img src="img/16.png" alt=""></div>
|
||||
<div class="obj obj3 anim anim5"><img src="img/17.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nota btn_nota animated pulse infinite d-none" data-popid="#pop0"><img src="img/nota.png" alt=""></div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-3"><img src="img/img_nota.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8 text-left text-white">
|
||||
<p class="m-0">
|
||||
Recuerda que estos aspectos integran el <b>Manual de Cumplimiento</b>, mismo que cada <b>Institución debe tener</b> y una vez que sea <b>aprobado</b>,
|
||||
primero por su Comité de Comunicación y Control y, después, por su Comité de Auditoría, tendrá que enviarse a <b>registro de la CNSF </b>y, a través
|
||||
del medio que elijan, las Instituciones deberán ponerlo a <b>disposición</b> de los Intermediarios de seguros y de fianzas con quienes tengan contrato.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_7 = newSound("audio/Audio_7_Marcos.mp3");
|
||||
var Audio_R5 = newSound("audio/Audio_5_Ruben.mp3");
|
||||
var txt1 = "Por supuesto, se compone de tres aspectos fundamentales, los cuales son:";
|
||||
|
||||
Audio_7.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R5);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').removeClass('play').addClass('personaje7 stop');
|
||||
$('.personaje_r_1').removeClass('stop').addClass('play');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 5.572);
|
||||
tl2.fromTo(".anim4",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 8.257);
|
||||
tl2.fromTo(".anim5",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 10.980) ;
|
||||
});
|
||||
Audio_R5.on("end", function() {
|
||||
$('.personaje_r_1').removeClass('play').addClass('stop');
|
||||
$('.nota').removeClass('d-none');
|
||||
instruccion(16);
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_7);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
}
|
||||
|
||||
$(".btn_nota").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var imgbackdrop = $(this).data("imgbackdrop");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
//backdrop: '#fff url("img/' + imgbackdrop + '") center center no-repeat',
|
||||
background: '#4a7d8f',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn_nota").length == $(".btn_nota.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg10.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje4 { position: relative; z-index: 3;}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; margin-top: -57px;
|
||||
}
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.obj { position: absolute;}
|
||||
.obj1 { top: 9%; left: 10%;}
|
||||
.obj2 { top: 46%; left: 28%;}
|
||||
.txt-info { position: absolute;}
|
||||
.txt-info1 { top: 111px; left: 64px; width: 61%;}
|
||||
.txt-info2 { top: 83px; left: 64px; width: 66%;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-6">
|
||||
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del Cliente</h5>
|
||||
<div class="personaje personaje_m_4 mx-auto anim anim2"></div>
|
||||
<div class="bubble shadow px-3 pt-5 pb-2 anim anim1">
|
||||
<p>
|
||||
Ahora que conozco que existe un manual, me gustaría saber, ¿cómo puedo <b>identificar</b>
|
||||
a los clientes? ¿Se cuenta con alguna <b>herramienta</b> donde pueda consultar sus datos?
|
||||
¿Qué debo hacer en caso de tratar con personas físicas y morales?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 h-100">
|
||||
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#b9230f">
|
||||
<img src="img/18.png" alt="">
|
||||
<div class="txt-info txt-info1 text-center">¿En qué consiste la Política de Identificación del cliente?</div>
|
||||
</div>
|
||||
<div class="obj obj2 btn-pop anim anim4" data-popid="#pop1" data-backcolor="#eba452">
|
||||
<img src="img/19.png" alt="">
|
||||
<div class="txt-info txt-info2 text-center">¿Cuántos regímenes de identificación prevén las nuevas disposiciones?</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>¿En qué consiste la Política de Identificación del cliente?</b></p>
|
||||
<p>
|
||||
Consiste en <b>integrar y conservar un expediente de cada Cliente </b>y, en algunos casos, de su cónyuge y dependientes,
|
||||
de los Beneficiarios, del/los Propietario(s) Real(es) (cuando haya) y de/los Proveedor(es) de Recursos (cuando haya), con
|
||||
<b>datos y documentos</b>, los cuales se deben recabar de forma previa a la celebración del Contrato en el que se formalice
|
||||
la Operación y, de acuerdo a lo que adelante se indica.
|
||||
</p>
|
||||
<p class="m-0">
|
||||
También consiste en <b>completar esos datos y documentos </b>al momento en que el Cliente o los Beneficiarios se
|
||||
presenten a ejercer sus derechos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p>Se prevén <b>tres regímenes de identificación</b>, el <b>Régimen de Excepción</b>, el <b>Régimen Ordinario </b>y el <b>Régimen Especial</b>, integrado por: </p>
|
||||
<p class="m-0">a) Operaciones no presenciales; </p>
|
||||
<p class="m-0">b) Simplificado (para organismos y dependencias sean del Gobierno Federal, de gobiernos Estatales o gobiernos Municipales, así como sus organismos y dependencias, al igual que para entidades del sector financiero y organizaciones auxiliares del crédito), </p>
|
||||
<p class="m-0">c) Alto Riesgo y </p>
|
||||
<p>d) Fideicomisos.</p>
|
||||
<p class="m-0">En esta ocasión <b>sólo exploraremos </b>el Régimen de Excepción, el Régimen Ordinario y el Régimen Especial (Alto Riesgo). </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_8 = newSound("audio/Audio_8_Marcos.mp3");
|
||||
|
||||
Audio_8.on("end", function() {
|
||||
$('.personaje_m_4').removeClass('play').addClass('stop');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 1);
|
||||
tl2.fromTo(".anim4",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 2);
|
||||
tl2.call(fn_pops);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_8);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
instruccion(11);
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.personaje>div {margin-left: 100px;}
|
||||
.info { position: relative; opacity: 0; border: 5px solid #63a7bf; background: #fff; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; display: none; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del Cliente</h5>
|
||||
</div>
|
||||
<div class="col-2 personaje anim anim1">
|
||||
<div class="personaje_r_4"></div>
|
||||
</div>
|
||||
<div class="col-9 align-self-center mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow pl-4 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Además de lo que comentas, es importante conocer cuándo estamos ante la presencia
|
||||
de cierto régimen y qué datos o documentos solicitar. Para ello, debemos considerar
|
||||
lo siguiente:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<div class="btn-group">
|
||||
<div id="btn-item1" class="btn1 anim anim3" data-obj="1"><img src="img/20.png" alt=""></div>
|
||||
<div id="btn-item2" class="btn2 anim anim3" data-obj="2"><img src="img/21.png" alt=""></div>
|
||||
<div id="btn-item3" class="btn3 anim anim3" data-obj="3"><img src="img/22.png" alt=""></div>
|
||||
<div id="btn-item4" class="btn4 anim anim3" data-obj="4"><img src="img/23.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 mt-3 anim anim2">
|
||||
<div id="info0" class="info b1 p-2">
|
||||
<p class="mb-0">
|
||||
El <b>Régimen de Excepción o Umbrales</b>, solo aplica a Operaciones que sean de Riesgo Bajo y que sean contratadas
|
||||
presencialmente. Dependiendo del monto de estas, se ubicarán dentro del <b>Umbral 1 o 2.</b>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info1" class="info b2 p-2">
|
||||
<p class="mb-0">
|
||||
<b>El Umbral 1 sólo aplica a personas físicas y morales</b>, no a fiduciarios. En caso de que un cliente con la
|
||||
misma o varias operaciones rebase los montos de las operaciones de este umbral, pasará al <b>número 2</b> y se
|
||||
le identificará conforme a este.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info2" class="info b3 p-2">
|
||||
<p class="mb-0">
|
||||
<b>El umbral 2 aplica a personas físicas y morales. </b>Cuando un cliente con la misma o con varias operaciones rebase los
|
||||
montos del umbral 2, deberá ser identificado bajo el Régimen Ordinario (el cual solicita información específica dependiendo el tipo de persona).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info3" class="info b4 p-2">
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<p class="mb-0">
|
||||
Para conocer los diferentes montos y datos que debes solicitar en función del régimen y el tipo de persona, te invitamos a descargar el siguiente documento.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="btn-pdf"><a href="material/mapfre_pld_regimen_de_excepcion.pdf" download><img src="img/pdf.png" class="mx-auto d-block" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R6 = newSound("audio/Audio_6_Ruben.mp3");
|
||||
|
||||
Audio_R6.on("end", function() {
|
||||
$('.personaje_r_4').removeClass('play').addClass('personaje7 stop');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.staggerFromTo(".anim3",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 1);
|
||||
tl2.call(fn_slide);
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R6);
|
||||
$('.personaje_r_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_slide(){
|
||||
$("[id*='btn-item']").each(function(index, el) {
|
||||
$(this).attr('data-item', '#info' + index);
|
||||
$(this).addClass('btnitem');
|
||||
});
|
||||
TweenMax.to('.btnitem', 1, {scaleX:1.1, scaleY:1.1, repeat:-1, yoyo:true});
|
||||
$("[id*='btn-item']").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
TweenMax.killTweensOf($(this));
|
||||
$('.info').removeClass('active');
|
||||
$(this).addClass('active visit');
|
||||
$('.info').hide();
|
||||
var num = $(this).data('obj')
|
||||
var obj = $(this).data('item');
|
||||
console.log(num);
|
||||
$(obj).show();
|
||||
TweenMax.fromTo(obj, .5, {opacity:0, x:-500},{opacity:1, ease: "elastic.out(1, 0.3)", x:0});
|
||||
|
||||
if ($('.btnitem').length <= $('.btnitem.visit').length) {
|
||||
instruccion(17);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.btn-pdf').addClass('animated pulse infinite');
|
||||
$('.btn-pdf').click(function(){
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
fn_end();
|
||||
})
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.obj-line { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
|
||||
.obj { position: absolute;}
|
||||
.txt_1 { top: 44px; right: 96px; }
|
||||
.txt_2 { top: 44px; right: 132px;}
|
||||
.txt_3 { top: 44px; right: 156px;}
|
||||
.txt_4 { top: 41px; right: 149px;}
|
||||
.txt_5 { top: 32px; right: 85px; width: 280px; text-align: left; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 anim anim8">
|
||||
<h5 class="title_ text-center mb-3"><b>La Política de Identificación del Cliente</b></h5>
|
||||
<div class="btn-pdf"><a href="material/mapfre_pld_documentos_validar.pdf" download><img src="img/pdf.png" class="mx-auto d-block" alt=""></a></div>
|
||||
<p class="text-center">
|
||||
Para conocer en profundidad el listado de documentos válidos, descarga la siguiente infografía.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="obj-line"><img src="img/29.png" alt=""></div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right anim anim3">
|
||||
<img src="img/24.png" style="margin-right: -26px;" alt="">
|
||||
<div class="obj txt_1">Identificaciones oficiales</div>
|
||||
</div>
|
||||
<div class="col-12 text-right anim anim4">
|
||||
<img src="img/25.png" style="margin-right: 16px;" alt="">
|
||||
<div class="obj txt_2">Comprobantes de domicilio</div>
|
||||
</div>
|
||||
<div class="col-12 text-right anim anim5">
|
||||
<img src="img/26.png" style="margin-right: 42px;" alt="">
|
||||
<div class="obj txt_3">Datos mínimos del domicilio</div>
|
||||
</div>
|
||||
<div class="col-12 text-right anim anim6">
|
||||
<img src="img/27.png" style="margin-right: 33px;" alt="">
|
||||
<div class="obj txt_4">Declaración</div>
|
||||
</div>
|
||||
<div class="col-12 text-right mt-2 anim anim7">
|
||||
<img src="img/28.png" style="margin-right: -10px;" alt="">
|
||||
<div class="obj txt_5">Documentos públicos emitidos en el extranjero</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 anim anim1">
|
||||
<img src="img/sprites/h7.png" class="mx-auto d-block" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_9 = newSound("audio/Audio_9_Marcos.mp3");
|
||||
|
||||
Audio_9.on("play", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim3",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 14.759);
|
||||
tl3.fromTo(".anim4",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 17.500);
|
||||
tl3.fromTo(".anim5",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 18.532);
|
||||
tl3.fromTo(".anim6",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 19.934);
|
||||
tl3.fromTo(".anim7",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 21.130);
|
||||
});
|
||||
Audio_9.on("end", function() {
|
||||
$('.personaje_r_4').removeClass('play').addClass('personaje7 stop');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim8",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl2.call(fn_end);
|
||||
instruccion(17);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, x:100},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_9);
|
||||
$('.personaje_r_4').addClass('play');
|
||||
}
|
||||
|
||||
$('.btn-pdf').click(function(){
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(1);
|
||||
})
|
||||
|
||||
function fn_end(){
|
||||
$('.btn-pdf').addClass('animated pulse infinite');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn-pop { position: absolute; cursor: pointer; z-index: 5;}
|
||||
.pop1{ top: -97%; left: 31%; }
|
||||
.pop2{ top: -38%; left: 53.9%;}
|
||||
.pop3{ top: 72%; left: 34%;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-6 pt-5 anim anim0">
|
||||
<div class="bubble shadow pl-5 pr-3 py-2"><h5 class="title_ m-0">Enfoque Basado en Riesgos (EBR)</h5></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="bubble bub1 shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, he escuchado que en MAPFRE también contamos con una metodología basada en riesgos para prevenir
|
||||
y detectar operaciones con Recursos de Procedencia Ilícita, la cual es un requisito indispensable para
|
||||
utilizar el <b>Régimen de Excepción</b>. ¿Puedes hablarme un poco de ella, por favor?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 anim anim5" style="margin-top: -25px;">
|
||||
<img src="img/30.png" class="mx-auto d-block" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#63a7bf"><img src="img/31.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#b9230f"><img src="img/32.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop1" data-backcolor="#eb7f3d"><img src="img/33.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-2 anim anim2">
|
||||
<div class="col-8">
|
||||
<div class="bubble bub2 shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los <b>riesgos</b> a los
|
||||
que estamos expuestos y que nos señala cuándo debemos <b>usarla</b>, así como <b>qué hacer </b>en
|
||||
caso de identificarlos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Objetivo</b></p>
|
||||
<p>
|
||||
Es una metodología para realizar una <b>evaluación de Riesgos </b>a la que está expuesta la Institución
|
||||
en virtud de sus productos, servicios, Clientes, países o áreas geográficos en las que opere, transacciones
|
||||
y canales de envió o distribución. </p>
|
||||
<p class="m-0">
|
||||
Esta metodología deberá establecer y describir todos los <b>procesos</b> que se llevarán a cabo para la
|
||||
<b>identificación, medición y mitigación de los Riesgos</b>, tomando en cuenta los factores de Riesgo que se
|
||||
hayan identificado y la información que resulte aplicable en la <b>Evaluación Nacional de Riesgos.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Periodicidad</b></p>
|
||||
<p class="m-0">
|
||||
La <b>evaluación de Riesgos </b>con base en dicha metodología deberá realizarse <b>cada 12 meses </b>y
|
||||
con <b>antelación al lanzamiento </b>o uso de nuevos productos, servicios, prácticas o tecnologías.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Acciones</b></p>
|
||||
<p class="m-0">
|
||||
Cuando los resultados de la evaluación de Riesgos revelen la <b>existencia de mayores o nuevos Riesgos, </b>las Instituciones
|
||||
deberán <b>modificar sus políticas, criterios, medidas y procedimientos</b> a fin de establecer los Mitigantes que
|
||||
consideren necesarios en función de los <b>Riesgos identificados.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_10 = newSound("audio/Audio_10_Marcos.mp3");
|
||||
var Audio_R7 = newSound("audio/Audio_7_Ruben.mp3");
|
||||
|
||||
Audio_10.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
stopAllSoundsAndPlay(Audio_R7);
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
|
||||
});
|
||||
Audio_R7.on("end", function() {
|
||||
fn_pops();
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.bub1, .bub2').addClass('d-none');
|
||||
$('.anim5').removeClass('anim');
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim0",.7,{opacity:0, x:150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_10);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="">
|
||||
<img src="img/sprites/marco_6.png" alt="">
|
||||
<img src="img/sprites/marco_7.png" alt="">
|
||||
<img src="img/sprites/ruben_5.png" alt="">
|
||||
<img src="img/sprites/ruben_6.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, recientemente leí un reportaje en el que una aseguradora tuvo que investigar a uno de sus <b>clientes extranjeros</b>
|
||||
porque algunas de sus operaciones sobrepasaban el monto permitido, ¿consideras que un cliente así o que viva fuera del país
|
||||
representa un riesgo mayor que otro cliente que sí reside aquí?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5"></div>
|
||||
<div class="personaje_r_6 d-none"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6"></div>
|
||||
<div class="personaje_m_7 d-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_11 = newSound("audio/Audio_11_Marcos.mp3");
|
||||
var Audio_R8 = newSound("audio/Audio_8_Ruben.mp3");
|
||||
var txt1 = "Ciertamente es un tema delicado, Marcos. En <b>MAPFRE</b> contamos con una <b>política de conocimiento del cliente </b>que nos permite dar un seguimiento a sus operaciones mediante un perfil y el Grado de Riesgo que representa, viva o no en el país. ¡Acompáñame para conocer más sobre ella!";
|
||||
|
||||
Audio_11.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R8);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_m_6').addClass('d-none');
|
||||
$('.personaje_m_7').removeClass('d-none');
|
||||
$('.personaje_r_5').addClass('d-none');
|
||||
$('.personaje_r_6').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_R8.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_r_6').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_11);
|
||||
$('.personaje_m_6').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje4 { position: relative; z-index: 3;}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; margin-top: -57px;
|
||||
}
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.obj { position: absolute;}
|
||||
.obj1 { top: 17.7%; left: 4.3%;}
|
||||
.obj2 { top: 61.3%; left: 21.5%;}
|
||||
.obj3 { top: 4%; left: 39%;}
|
||||
.obj4 { top: 70%; left: 56.5%;}
|
||||
.obj5 { top: 14.3%; left: 74%;}
|
||||
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg3.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-6">
|
||||
<img src="img/34.png" alt="">
|
||||
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#eba452"><img src="img/36.png" alt=""></div>
|
||||
<div class="obj obj2 btn-pop anim anim3" data-popid="#pop1" data-backcolor="#00ab9c"><img src="img/37.png" alt=""></div>
|
||||
<div class="obj obj3 btn-pop anim anim3" data-popid="#pop2" data-backcolor="#63a7bf"><img src="img/38.png" alt=""></div>
|
||||
<div class="obj obj4 btn-pop anim anim3" data-popid="#pop3" data-backcolor="#eb7f3d"><img src="img/39.png" alt=""></div>
|
||||
<div class="obj obj5 btn-pop anim anim3" data-popid="#pop4" data-backcolor="#b9230f"><img src="img/40.png" alt=""></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="title_ text-center mb-3 anim anim2">Política de Conocimiento del Cliente</h5>
|
||||
<div class="personaje personaje_r_4 mx-auto anim anim2"></div>
|
||||
<div class="bubble shadow px-3 pt-5 pb-2 anim anim1">
|
||||
<p>
|
||||
Entre las características de la <b>Política de Conocimiento del Cliente</b>, podemos destacar los siguientes puntos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>1. ¿En qué consiste esta política?</b></p>
|
||||
<p class="m-0">
|
||||
Consiste en establecer las políticas, criterios, procedimientos y controles para mitigar los Riesgos acorde a los resultaos del EBR.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>2. ¿De qué se ocupa esta política?</b></p>
|
||||
<p>
|
||||
Los criterios, políticas, procedimientos y controles deben enfocarse a: (i) la celebración, limitación o
|
||||
terminación de las relaciones comerciales, pero no las relacionadas con las Operaciones de seguros y de
|
||||
fianzas; (ii) el seguimiento de las operaciones de los clientes y su agrupación; (iii) establecer los supuestos
|
||||
en que las Operaciones de los Clientes se aparten de su perfil transaccional y, (v) para la modificación del
|
||||
Grado de Riesgo del Cliente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>3. ¿Cómo se construye el perfil transaccional del Cliente?</b></p>
|
||||
<p>
|
||||
El <b>perfil transaccional del Cliente</b> se basa en la información que proporciona, en el monto, tipo,
|
||||
naturaleza y frecuencia de las operaciones que realice, el origen y destino de sus recursos y la
|
||||
geolocalización del Dispositivo en el caso de operaciones no presenciales.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>4. ¿Cómo se clasifican a los Clientes?</b></p>
|
||||
<p>
|
||||
Las <b>Instituciones </b>deben clasificar a sus Clientes en un <b>Grado de Riesgo</b>, de
|
||||
tal manera que, cuando el <b>Grado de Riesgo sea mayor</b>, la Institución deberá recabar
|
||||
mayor información de éste y realizar una supervisión más estricta de su comportamiento transaccional.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop4">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>5. ¿Qué perfil de Cliente requiere un seguimiento mayor?</b></p>
|
||||
<p>
|
||||
Se consideran <b>Clientes de Grado de Riesgo Alto</b> a las <b>Personas Políticamente Expuesta extranjeras</b> y los <b>Clientes no residentes en el país</b> que operen seguros con
|
||||
componentes de inversión en moneda extranjera, así como aquellas personas que la Aseguradora o la Afianzadora clasifiquen con tal carácter bajo su metodología
|
||||
de evaluación de Riesgos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R9 = newSound("audio/Audio_9_Ruben.mp3");
|
||||
|
||||
Audio_R9.on("end", function() {
|
||||
$('.personaje_r_4').removeClass('play').addClass('stop');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.staggerFromTo(".anim3",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 1);
|
||||
tl2.call(fn_pops);
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R9);
|
||||
$('.personaje_r_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.headone { background-image: linear-gradient(to left, #dbfbe5, #b8e7d9, #97d3cf, #7abdc7, #63a7bf);}
|
||||
.headtwo { background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);}
|
||||
.headthree { background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd);}
|
||||
button { outline: none!important; box-shadow:none!important; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center pt-3 anim anim1">
|
||||
<div class="col-12 text-center"><h5 class="title_">Política de Conocimiento del Cliente</h5></div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Por último, es importante reconocer que de los Clientes catalogados como <b>Grado de Riesgo alto</b>,
|
||||
se deberán recabar <b>cuestionarios de identificación </b>que permitan:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header headone" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="flase" aria-controls="collapseOne">
|
||||
1. Si son personas físicas o morales
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Obtener mayor información sobre el origen y destino de los recursos, así como las Operaciones que realizan
|
||||
o pretenden realizar y, cuando sean extranjeros, las razones por las que han elegido realizar Operaciones
|
||||
en territorio nacional.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header headtwo" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
2. Si son personas físicas
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Obtener información de su cónyuge, concubina, concubinario y dependientes económicos, así como sociedades y asociaciones con las que mantenga vínculos.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header headthree" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
3. Si son personas morales
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Obtener información sobre la estructura corporativa y los principales accionistas o socios.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R10 = newSound("audio/Audio_10_Ruben.mp3");
|
||||
|
||||
Audio_R10.on("end", function() {
|
||||
fn_accordion();
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R10);
|
||||
$('.personaje_r_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_accordion(){
|
||||
$('.card-header').click(function(){
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).addClass('visit');
|
||||
$(this).removeClass('animated pulse slowly infinite');
|
||||
if ($('.card-header').length <= $('.card-header.visit').length) {
|
||||
instruccion(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="">
|
||||
<img src="img/sprites/marco_6.png" alt="">
|
||||
<img src="img/sprites/marco_7.png" alt="">
|
||||
<img src="img/sprites/ruben_5.png" alt="">
|
||||
<img src="img/sprites/ruben_6.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Ahora te compartiré algo nuevo Marcos. Recientemente en MAPFRE hemos recibido el reporte de tres casos en los que
|
||||
pueden aplicar las <b>nuevas disposiciones de PLD/FT. </b>Como sabes, parte de nuestras obligaciones es
|
||||
<b>reportarlas a la SHCP</b>, a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar
|
||||
a qué tipo de operaciones pertenecen?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5 d-none"></div>
|
||||
<div class="personaje_r_6"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6 d-none"></div>
|
||||
<div class="personaje_m_7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_12 = newSound("audio/Audio_12_Marcos.mp3");
|
||||
var Audio_R11 = newSound("audio/Audio_11_Ruben.mp3");
|
||||
var txt1 = "Por supuesto. Cuéntame los casos y juntos los analizaremos.";
|
||||
|
||||
Audio_R11.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_12);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_r_6').addClass('d-none');
|
||||
$('.personaje_r_5').removeClass('d-none');
|
||||
$('.personaje_m_7').addClass('d-none');
|
||||
$('.personaje_m_6').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_12.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_m_6').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R11);
|
||||
$('.personaje_r_6').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Como observaste, Marcos tiene el reto de poder identificar qué tipo de operaciones han sido reportadas.
|
||||
Mira el siguiente video para poder ayudarlo con el primer caso.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_02.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_12 = newSound("audio/Audio_12_Ruben.mp3");
|
||||
|
||||
Audio_12.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_12);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: relative; width: 590px; margin: auto;}
|
||||
.txt_paper { position: absolute; top: 158px; left: 15px; padding: 0 1rem;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h5 class="title_ text-center py-2 anim anim1">Operaciones inusuales</h5>
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Me parece que estamos ante una <b>operación inusual</b>, ya que esta es una operación de
|
||||
seguros o de fianzas, en la cual la actividad, conducta o comportamiento del Cliente
|
||||
no concuerda con los antecedentes o actividad conocida de él por la Aseguradora o la
|
||||
Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o
|
||||
habitual de dicho Cliente, en función al origen o destino de los recursos, así como al
|
||||
monto, frecuencia, tipo o naturaleza de la Operación de que se trate, sin que exista una
|
||||
justificación razonable para dicha operación, actividad, conducta o comportamiento.
|
||||
</p>
|
||||
</div>
|
||||
<div class="paper mt-2 anim anim3">
|
||||
<img src="img/41.png" alt="">
|
||||
<div class="txt_paper">
|
||||
<p>
|
||||
En MAPFRE contamos con diferentes situaciones que pueden implicar la comisión de una <b>operación inusual</b>. Conozcámoslas más a detalle.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_13 = newSound("audio/Audio_13_Marcos.mp3");
|
||||
Audio_13.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_end);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_13);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn-pop { position: absolute;}
|
||||
.pop1{ top: 39%; left: 2%; }
|
||||
.pop2{ top: 2%; left: 17%; }
|
||||
.pop3{ top: 40%; left: 32%; }
|
||||
.pop4{ top: 4%; left: 47%; }
|
||||
.pop5{ top: 42%; left: 62%; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
|
||||
<p class="m-0 anim anim1">
|
||||
1. Es indispensable revisar la <b>situación conocida del Cliente y la Operación que quiera realizar</b>. Para ello, debemos considerar lo siguiente:
|
||||
</p>
|
||||
|
||||
<div class="paper mt-5 anim anim3">
|
||||
<img src="img/soporte.png" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c"><img src="img/42.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/43.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#162844"><img src="img/44.png" alt=""></div>
|
||||
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#63a7bf"><img src="img/45.png" alt=""></div>
|
||||
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#eb7f3d"><img src="img/46.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>1. </b>Sus<b> condiciones específicas</b>, entre otras: sus antecedentes, su ocupación, profesión, actividad económica, giro del negocio u objeto social.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>2. </b>El <b>tipo de riesgo </b>que constituye la base del contrato de seguro del cliente y la forma en que ocurra el riesgo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
3. La <b>naturaleza o complejidad de las operaciones </b>que realice y la relación de éstas con sus antecedentes y actividad económica conocida.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>4. </b>Cuando se presenten <b>indicios o hechos extraordinarios </b>respecto de los cuales no se cuente con una explicación o que den
|
||||
lugar a cualquier tipo de suspicacia sobre el origen, manejo o destino de los recursos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop4">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>5. </b>Cuando el cliente pretenda <b>involucrar </b>en sus operaciones <b>países o jurisdicciones </b>que: (i) la legislación
|
||||
mexicana considere que aplican regímenes fiscales preferentes o, (ii) que las autoridades mexicanas, organismos internacionales o
|
||||
agrupaciones intergubernamentales consideren que no tienen medidas para prevenir el lavado de dinero y el financiamiento al terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_14 = newSound("audio/Audio_14_Marcos.mp3");
|
||||
Audio_14.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_pops);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_14);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
instruccion(11);
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
instruccion(11);
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.carousel-inner { background-color: #fff; border-radius: 25px;}
|
||||
.carousel-item { height: 340px;}
|
||||
.carousel-style { border: 6px solid #68ABC1; border-radius:25px;}
|
||||
.carousel-item p { margin: 0;}
|
||||
.carousel-item .rounded { border-radius: 25px!important;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
|
||||
<p class="m-0 anim anim1">
|
||||
2. Debemos mantenernos alerta y reportar alguna operación sospechosa cuando los <b>recursos del Cliente</b> presenten alguna de las siguientes condiciones:
|
||||
</p>
|
||||
|
||||
<div class="card-body p-0 carousel-style mt-4 anim anim3">
|
||||
<div class="btn_ponter buttonss0" style="display: none;" href="#carru0" role="button" data-slide="prev">
|
||||
<img src="img/guia_navegacion/arrow_left.png">
|
||||
</div>
|
||||
<div id="carru0" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12 text-left">
|
||||
<p class="m-0">
|
||||
Los montos inusualmente elevados de las primas o aportaciones, la frecuencia en las aportaciones adicionales de prima.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
Las primas excedentes, aportaciones adicionales, montos o cualquier otro similar a seguros con componentes de ahorro
|
||||
de inversión, que sumadas sean iguales o excedan el equivalente a USD 7,500 dentro de un mes calendario.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
La manera poco usual en la que el cliente quiera la liquidación del siniestro.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
Los depósitos de prendas recibidos como contra garantías de una persona física como el fiado, el contratante o
|
||||
sus obligados solidarios, al emitir una fianza y se solicita que a la cancelación de la misma, los recursos se
|
||||
devuelvan o entreguen a un tercero ajeno a la operación garantizada.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
Las contra garantías efectuadas en efectivo cuyos depósitos fueron realizados en distintos momentos y por distintas
|
||||
personas y, en su caso, la devolución se solicita en favor de una tercera persona.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
La dación en pago con inmuebles o automóviles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="bg-white rounded w-100 h-100 p-2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<p class="m-0">
|
||||
Las Operaciones realizadas por un mismo Cliente con moneda extranjera, cheques de viajero, cheques de caja o monedas
|
||||
acuñadas en platino, oro o plata, por montos múltiples o fraccionados que, por cada operación individual superen el
|
||||
equivalente a USD 500, realizadas en un mismo mes calendario que sumen, al menos, la cantidad de USD 7,500 o su
|
||||
equivalente en la moneda de que se trate, siempre que las mismas no correspondan al perfil transaccional del Cliente
|
||||
o que, respecto de aquellas se pueda inferir de su estructuración una posible intención de fraccionar las operaciones
|
||||
para evitar ser detectadas por las Instituciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_ponter buttonss1" href="#carru0" role="button" data-slide="next">
|
||||
<img src="img/guia_navegacion/arrow_right.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_15 = newSound("audio/Audio_15_Marcos.mp3");
|
||||
|
||||
Audio_15.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl3.call(fn_slide);
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
instruccion(3);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_15);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_slide(){
|
||||
var items = 0;
|
||||
$(".buttonss0").click(function(event) {
|
||||
__click.play();
|
||||
items--;
|
||||
|
||||
if (items < 1) {
|
||||
$(".buttonss0").hide();
|
||||
$(".buttonss1").show();
|
||||
}else{
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").show();
|
||||
}
|
||||
});
|
||||
|
||||
$(".buttonss1").click(function(event) {
|
||||
__click.play();
|
||||
items++;
|
||||
|
||||
if (items >= 6) {
|
||||
//$(".buttonss1").removeClass('animated pulse infinite');
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").hide();
|
||||
instruccion(1);
|
||||
}else{
|
||||
$(".buttonss0").show();
|
||||
$(".buttonss1").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: absolute; bottom: 17px; z-index: 2; left: 25%; }
|
||||
.btn-pop { position: absolute;}
|
||||
.pop1{ top: 57%; left: -17%; }
|
||||
.pop2{ top: 2%; left: 2%; }
|
||||
.pop3{ top: -29%; left: 29%; }
|
||||
.pop4{ top: -22%; left: 62%; }
|
||||
.pop5{ top: 10%; left: 83%; }
|
||||
.pop6{ top: 53%; left: 100%; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-9">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
|
||||
<p class="m-0 anim anim1">
|
||||
3. También es importante tomar en cuenta las siguientes <b>actitudes del Cliente</b>:
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 align-self-end">
|
||||
<div class="personaje_m_9 mx-auto anim anim2"></div>
|
||||
<div class="paper mt-5 anim anim3">
|
||||
<img src="img/47.png" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#b9230f"><img src="img/48.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/49.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#b9230f"><img src="img/50.png" alt=""></div>
|
||||
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#b9230f"><img src="img/51.png" alt=""></div>
|
||||
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#b9230f"><img src="img/53.png" alt=""></div>
|
||||
<div class="btn-pop pop6" data-popid="#pop5" data-backcolor="#b9230f"><img src="img/52.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
Cuando se niegue a proporcionar los datos o documentos de identificación o cuando se detecte que presenta información que pudiera ser apócrifa o datos que pudieran ser falsos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
Cuando intente sobornar, persuadir o intimidar al personal con el propósito de lograr su cooperación para realizar las actividades que contravengan las Disposiciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
Cuando cambie inesperadamente de giro o actividad económica, sobre todo migrando a actividades de comercio internacional o de cultivo de la tierra.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
Cuando se presuma que un cliente está actuando a nombre, por cuenta o en beneficio de otra persona.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop4">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
La transferencia del beneficio de una póliza a una persona aparentemente no relacionada.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop5">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
El otorgamiento de garantías respecto de operaciones que sean simuladas e impliquen la transferencia de recursos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_16 = newSound("audio/Audio_16_Marcos.mp3");
|
||||
Audio_16.on("end", function() {
|
||||
$('.personaje_m_9').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_pops);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_16);
|
||||
$('.personaje_m_9').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
instruccion(11);
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {
|
||||
instruccion(11);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Ahora, observa el segundo caso y ayuda a Marcos a identificar el tipo de operación descrita.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_03.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_13 = newSound("audio/Audio_13_Ruben.mp3");
|
||||
|
||||
Audio_13.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_13);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg12.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: relative; width: 590px; margin: auto;}
|
||||
.txt_paper { position: absolute; top: 158px; left: 15px; padding: 0 1rem;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg12.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<h5 class="title_ text-center py-2 anim anim1"><b>Operaciones relevantes</b></h5>
|
||||
<div class="paper mt-3 anim anim1">
|
||||
<img src="img/41.png" alt="">
|
||||
<div class="txt_paper">
|
||||
<p>
|
||||
El segundo caso que me compartes corresponde a una <b>operación relevante</b>, ya que esta se caracteriza por ser
|
||||
<b>realizada en efectivo</b> por un <b>monto igual o superior</b> a los USD <b>7,500</b>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_17 = newSound("audio/Audio_17_Marcos.mp3");
|
||||
Audio_17.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
fn_end();
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_17);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Visualiza el siguiente video para conocer el último caso que debe identificar Marcos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_04.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R14 = newSound("audio/Audio_14_Ruben.mp3");
|
||||
|
||||
Audio_R14.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R14);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg7.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: relative; margin: auto;}
|
||||
.txt_paper { position: absolute; top: 125px; left: 15px; padding: 0 1rem;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg7.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-3 align-self-end">
|
||||
<div class="personaje_m_8 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h5 class="title_ text-center py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5>
|
||||
<div class="paper mt-3 anim anim1">
|
||||
<img src="img/54.png" alt="">
|
||||
<div class="txt_paper">
|
||||
<p>
|
||||
Este último caso corresponde a una <b>operación interna preocupante</b>. Esta es la actividad, conducta o comportamiento
|
||||
de cualquiera de los accionistas, socios, directivos, funcionarios, empleados y apoderados de la Institución que
|
||||
por sus características, pudiera contravenir, vulnerar o evadir la aplicación de lo dispuesto en las Disposiciones
|
||||
en materia de prevención de lavado de dinero, llevando a cabo conductas como el favorecer o no alertar sobre actos
|
||||
u omisiones que pudieran favorecer, prestar ayuda, auxilio o cooperación de cualquier especie para la comisión de los
|
||||
delitos de lavado de dinero y financiamiento al terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_18 = newSound("audio/Audio_18_Marcos.mp3");
|
||||
Audio_18.on("end", function() {
|
||||
$('.personaje_m_8').removeClass('play');
|
||||
fn_end();
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_18);
|
||||
$('.personaje_m_8').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg13.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
}
|
||||
.bubble {
|
||||
position: absolute; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; bottom: 3%; left: 0; right: 0; margin: auto;
|
||||
}
|
||||
.btn-pop { position: absolute;}
|
||||
.pop1{ top: 3%; left: 24.5%; }
|
||||
.pop2{ top: 38.5%; left: 47.5%; }
|
||||
.pop3{ top: 74%; left: 24.5%; }
|
||||
.pop4{ top: 39%; left: 2%; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg13.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-6 align-self-end">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5>
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="paper mt-3 anim anim3">
|
||||
<img src="img/55.png" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c"><img src="img/56.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/57.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#63a7bf"><img src="img/58.png" alt=""></div>
|
||||
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#274663"><img src="img/59.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble p-2 w-75">
|
||||
<p class="m-0">
|
||||
Es importante que dentro de MAPFRE, identifiquemos las <b>situaciones</b> que pudieran dar lugar a considerar que existe una <b>operación interna preocupante</b>. Algunas de ellas son:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>1. </b>Cuando se detecte que algún <b>directivo, funcionario, empleado o apoderado de MAPFRE, </b>
|
||||
mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que percibe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>2. </b>Cuando, <b>sin causa justificada, </b>algún directivo, funcionario, empleado o apoderado de MAPFRE, haya <b>intervenido </b>
|
||||
de manera reiterada en la realización de Operaciones que hayan sido reportadas como <b>Operaciones Inusuales.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>3. </b>Cuando existan <b>sospechas</b> de que algún directivo, funcionario, empleado o apoderado de MAPFRE pudieran
|
||||
<b>haber incurrido en actos, omisiones u Operaciones</b> que pudiesen favorecer, prestar ayuda, auxilio o cooperación
|
||||
de cualquier especie para la comisión de los delitos de Lavado de Dinero y Financiamiento al Terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>4. </b>Cuando, sin causa justificada, exista una <b>falta de correspondencia entre las funciones </b>que
|
||||
se le encomendaron al directivo, funcionario, empleado o apoderado de MAPFRE y las <b>actividades</b> que de
|
||||
hecho lleva a cabo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_19 = newSound("audio/Audio_19_Marcos.mp3");
|
||||
Audio_19.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_pops);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_19);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
instruccion(11);
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
instruccion(11);
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sec1 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sco .swal2-container { background-color: rgba(22,40,68,1)!important; }
|
||||
.btn_ { position: absolute; bottom: -11%; left: 72%; }
|
||||
.card_intro { background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff); border: 0; border-top-left-radius:25px; border-top-right-radius: 25px; }
|
||||
.bg-blanco { background-image: url(img/fondos/bg0.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bg_actividad { background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); border-top-right-radius: 25px;}
|
||||
.bg-gris { background-image: url(img/actividad/bg_gris.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.cuadro_gris { position: relative; background-image: url(img/actividad/gris.png); background-repeat: no-repeat; background-size: 100% 100%; margin: 0 auto; }
|
||||
.opcion { position: relative; padding-top: 10px; cursor: pointer; padding-left: 18px; }
|
||||
.opcion:hover { font-weight: bold; background-color: #D67E72; }
|
||||
.opcion:hover:before { background-color: #fff; }
|
||||
.opcion:before { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid #fff; top: 61%; left: -13px; border-radius: 25px; transform: translateY(-50%); }
|
||||
.opcion.selected:hover { content: ""; position: absolute; background-image: url(img/actividad/2.png); width: 52px; height: 52px; background-repeat: no-repeat; top: 0; left: -60px; }
|
||||
.sec2.good { background-image: url(img/fondos/bg8.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.sec2.bad { background-image: url(img/fondos/bg9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.text-rojo-1 { color: #b9230f; font-weight: bold; }
|
||||
.swal2-popup.popup-class { height: 100%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 align-self-end animated bounceInLeft">
|
||||
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="">
|
||||
</div>
|
||||
<div class="col-8 animated zoomIn">
|
||||
<div class="card card_intro shadow p-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 text-center">
|
||||
<p class="text-rojo-1 f33"><b><i>¡Bienvenido a la actividad de Aprendizaje!</i></b></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
Rubén nuevamente me ha solicitado ayuda con algunos reportes relacionados a más casos en los que se alerta una <b>Operación con recursos de procedencia ilícita.</b>
|
||||
</p>
|
||||
<p>
|
||||
¿Puedes apoyarme a identificar el tipo de operación al que pertenecen? Para hacerlo, deberás leer cada una de las situaciones
|
||||
y seleccionar la respuesta que consideres correcta.
|
||||
</p>
|
||||
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_">
|
||||
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
<b class="text-rojo-2">Instrucciones:</b> lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al cual corresponden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7 bg_actividad text-white py-3">
|
||||
<div class="qtxt"></div>
|
||||
<div class="row wopciones mt-3"></div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/sprites/marcos_actividad.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none;">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-7">
|
||||
<div class="card bg-transparent p-2 shadow-none border-0">
|
||||
<div class="row">
|
||||
<!-- <div class="col-12 text-center mb-2">
|
||||
<img class="img_change">
|
||||
</div> -->
|
||||
<div class="col-12 text-center mb-2">
|
||||
<div class="txt_final"></div>
|
||||
<div class="cuadro_gris py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja pl-1">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Total de preguntas:</div>
|
||||
<div id="totalp" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Correctas:</div>
|
||||
<div id="totalc" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Incorrectas:</div>
|
||||
<div id="totali" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Calificación:</div>
|
||||
<div id="cal" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center align-self-end">
|
||||
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="">
|
||||
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
<div class="d-none">
|
||||
<div id="pop0" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/3.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Muy bien!</h4>
|
||||
<div class="txt_retro_bien"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/4.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Incorrecto!</h4>
|
||||
<div class="txt_retro_mal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var audio20 = newSound("audio/Audio_20_Marcos.mp3");
|
||||
var preguntas;
|
||||
var quiz_object = new Object();
|
||||
quiz_object.preguntaActual = 0;
|
||||
quiz_object.maxPreguntas = 0;
|
||||
quiz_object.correctas = 0;
|
||||
quiz_object.incorrectas = 0;
|
||||
quiz_object.oportunidades = 2;
|
||||
$(".layer-load").show();
|
||||
$(document.querySelector('.wcontainer')).waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
stopAllSoundsAndPlay(audio20);
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio20.on("play",function(){
|
||||
$(".personaje").addClass('play');
|
||||
});
|
||||
|
||||
audio20.on("end",function(){
|
||||
$(".personaje").removeClass('play').addClass('stop');
|
||||
instruccion(2);
|
||||
$(".btn_comenzar").show();
|
||||
$(".btn_comenzar").addClass('animated pulse infinite');
|
||||
ImportFile();
|
||||
});
|
||||
|
||||
function ImportFile() {
|
||||
$(".quiz-loader").show();
|
||||
var excelUrl = "excel/actividad_2.xlsx";
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.open("GET", excelUrl, true);
|
||||
oReq.responseType = "arraybuffer";
|
||||
oReq.onload = function(e) {
|
||||
var arraybuffer = oReq.response;
|
||||
var data = new Uint8Array(arraybuffer);
|
||||
var arr = new Array();
|
||||
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
||||
var bstr = arr.join("");
|
||||
var workbook = XLSX.read(bstr, { type: "binary" });
|
||||
var first_sheet_name = workbook.SheetNames[0];
|
||||
var worksheet = workbook.Sheets[first_sheet_name];
|
||||
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||||
//shuffleArray(preguntas);
|
||||
transformer_options();
|
||||
quiz_object.preguntas = preguntas;
|
||||
//console.dir(quiz_object.preguntas);
|
||||
if (quiz_object.maxPreguntas == 0) { quiz_object.maxPreguntas = quiz_object.preguntas.length; }
|
||||
|
||||
|
||||
}
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
function transformer_options() {
|
||||
$.each(preguntas, function(index, pregunta) {
|
||||
var opciones = new Array();
|
||||
$.each(Object.keys(pregunta), function(index, key) {
|
||||
if (key.toLowerCase().indexOf("opcion") >= 0) {
|
||||
var opcion = new Object();
|
||||
opcion.text = pregunta[key];
|
||||
if (key.toLowerCase().indexOf("correcta") >= 0) {
|
||||
opcion.valor = 1;
|
||||
} else {
|
||||
opcion.valor = 0;
|
||||
}
|
||||
opciones.push(opcion);
|
||||
}
|
||||
});
|
||||
pregunta.opciones = shuffleArray(opciones);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
$(".btn_comenzar").click(function(event) {
|
||||
__click.play();
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(8);
|
||||
$(".sec0").hide();
|
||||
$(".sec1").show();
|
||||
siguientePregunta();
|
||||
});
|
||||
|
||||
function siguientePregunta() {
|
||||
// body...
|
||||
instruccion(8);
|
||||
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
||||
$(".qtxt").html(pregunta.pregunta);
|
||||
$(".numero").html(quiz_object.preguntaActual+1);
|
||||
$(".wopciones").html("");
|
||||
$(".btn-enviar").hide();
|
||||
$(".btn-siguiente-quiz").hide();
|
||||
$.each(pregunta.opciones, function(index, opcion) {
|
||||
$(".wopciones").append('<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
|
||||
'<div data-val="' + opcion.valor + '" class="opcion">'+opcion.text+
|
||||
'</div></div>');
|
||||
});
|
||||
TweenMax.staggerFromTo(".wopciones-info", 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
||||
$(".opcion").click(function(event) {
|
||||
__click.play();
|
||||
$(".opcion").removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
$(".txt_retro_bien").html(pregunta.retro_correcta);
|
||||
$(".txt_retro_mal").html(pregunta.retro_incorrecta);
|
||||
var valor = $(this).data("val");
|
||||
if (Number(valor) > 0) {
|
||||
var pop_bien = $("#pop0").html();
|
||||
quiz_object.correctas++;
|
||||
Swal.fire({
|
||||
title: '',
|
||||
html: pop_bien,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: document.querySelector('.sco'),
|
||||
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
||||
background: '#162844',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
customClass:{popup:'popup-class'},
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {
|
||||
},
|
||||
onOpen: function () {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
instruccion(7);
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
quiz_object.incorrectas++;
|
||||
var pop_mal = $("#pop1").html();
|
||||
Swal.fire({
|
||||
title: '',
|
||||
html: pop_mal,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: document.querySelector('.sco'),
|
||||
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
||||
background: '#162844',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
customClass:{popup:'popup-class'},
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {
|
||||
},
|
||||
onOpen: function () {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
instruccion(7);
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
$(".btn-siguiente-quiz").show();
|
||||
quiz_object.preguntaActual++;
|
||||
});
|
||||
}
|
||||
|
||||
function finActividad() {
|
||||
// body...
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
|
||||
calificacion = Math.floor(Math.round(calificacion * 100) / 100);
|
||||
$("#totalp").html(quiz_object.maxPreguntas);
|
||||
$("#totalc").html(quiz_object.correctas);
|
||||
$("#totali").html(quiz_object.incorrectas);
|
||||
$("#cal").html(calificacion + "%");
|
||||
if (calificacion >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
//$(".img_change").attr("src","img/actividad2/7.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Hemos conseguido resolver cada uno de los casos! ¡Ahora es tiempo de alertar a las autoridades correspondientes de estas irregularidades!</p>");
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
instruccion(1);
|
||||
} else {
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no hemos conseguido resolver los casos, pero no te preocupes, puedes intentarlo de nuevo</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".btn_re").removeClass('d-none');
|
||||
instruccion(15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".btn_re").click(function(event) {
|
||||
__click.play();
|
||||
__loadsco();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
A continuación, podrás observar un video en el cual conocerás las funciones de las <b>estructuras internas de control </b>
|
||||
que posee MAPFRE, mismas a las que deberás acudir en caso de haber <b>detectado irregularidades </b>en alguna operación.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_05.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R15 = newSound("audio/Audio_15_Ruben.mp3");
|
||||
|
||||
Audio_R15.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R15);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.personaje>div {margin-left: 100px;}
|
||||
.info { position: relative; opacity: 0; border: 5px solid #63a7bf; background: #fff; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; display: none; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg7.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row pt-5">
|
||||
<div class="col-2 personaje anim anim1">
|
||||
<div class="personaje_r_4"></div>
|
||||
</div>
|
||||
<div class="col-9 align-self-center mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow pl-4 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Ahora que tanto tú como Marcos conocen cuáles son las funciones de las estructuras internas, es importante señalar que los
|
||||
<b>miembros </b>del Consejo de Administración, del Comité de Comunicación y Control, el Oficial de Cumplimiento, así como los
|
||||
Directivos, Funcionarios, Empleados y Apoderados deben mantener <b>absoluta confidencialidad </b>sobre:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6"><div class="btn1 anim anim3"><img src="img/60.png" class="mx-auto d-block" alt=""></div></div>
|
||||
<div class="col-6"><div class="btn2 anim anim4"><img src="img/61.png" class="mx-auto d-block" alt=""></div></div>
|
||||
<div class="col-6"><div class="btn3 anim anim5"><img src="img/62.png" class="mx-auto d-block" alt=""></div></div>
|
||||
<div class="col-6"><div class="btn4 anim anim6"><img src="img/63.png" class="mx-auto d-block" alt=""></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_R16 = newSound("audio/Audio_16_Ruben.mp3");
|
||||
|
||||
Audio_R16.on("play", function() {
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.5,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}, 19.500);
|
||||
tl2.fromTo(".anim4",.5,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}, 23.132);
|
||||
tl2.fromTo(".anim5",.5,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}, 27.800);
|
||||
tl2.fromTo(".anim6",.5,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}, 30.343);
|
||||
});
|
||||
Audio_R16.on("end", function() {
|
||||
$('.personaje_r_4').removeClass('play').addClass('personaje7 stop');
|
||||
fn_end();
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R16);
|
||||
$('.personaje_r_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.personaje>div {margin-left: 100px;}
|
||||
.info { position: relative; opacity: 0; border: 5px solid #63a7bf; background: #fff; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; display: none; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row pt-5">
|
||||
<div class="col-2 personaje anim anim1">
|
||||
<div class="personaje_m_4"></div>
|
||||
</div>
|
||||
<div class="col-9 align-self-center mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow pl-4 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Asimismo, existen <b>otras obligaciones</b> que todos debemos realizar:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<div class="btn-group">
|
||||
<div id="btn-item1" class="btn1 anim anim3" data-obj="1"><img src="img/20.png" alt=""></div>
|
||||
<div id="btn-item2" class="btn2 anim anim3" data-obj="2"><img src="img/21.png" alt=""></div>
|
||||
<div id="btn-item3" class="btn3 anim anim3" data-obj="3"><img src="img/22.png" alt=""></div>
|
||||
<div id="btn-item4" class="btn4 anim anim3" data-obj="4"><img src="img/23.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 mt-3 anim anim2">
|
||||
<div id="info0" class="info b1 p-2">
|
||||
<p class="mb-0">
|
||||
Adoptar <b>procedimientos de selección</b> para procurar que el personal cuente con la calidad técnica,
|
||||
experiencia necesaria y honorabilidad para llevar a cabo las actividades que les correspondan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info1" class="info b2 p-2">
|
||||
<p class="mb-0">
|
||||
Establecer <b>mecanismos y sistemas</b> que permitan enviar directamente al área a cargo del Oficial de
|
||||
Cumplimiento, avisos sobre hechos u operaciones inusuales u operaciones internas preocupantes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info2" class="info b3 p-2">
|
||||
<p class="mb-0">
|
||||
Mantener <b>medidas de control</b> que incluyan la revisión por parte del Área de Auditoría Interna, o bien,
|
||||
de un auditor externo independiente, para evaluar y dictaminar la <b>efectividad</b> del cumplimiento de las
|
||||
disposiciones que hemos revisado.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="info3" class="info b4 p-2">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-9">
|
||||
<p class="mb-0">
|
||||
Si deseas conocer con mayor detalle estas obligaciones, te invitamos a descargar el siguiente archivo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="btn-pdf"><a href="material/mapfre_pld_otras_obligaciones.pdf" download><img src="img/pdf.png" class="mx-auto d-block" alt=""></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_21 = newSound("audio/Audio_21_Marcos.mp3");
|
||||
|
||||
Audio_21.on("end", function() {
|
||||
$('.personaje_m_4').removeClass('play').addClass('personaje7 stop');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.staggerFromTo(".anim3",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 1);
|
||||
tl2.call(fn_slide);
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_21);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_slide(){
|
||||
$("[id*='btn-item']").each(function(index, el) {
|
||||
$(this).attr('data-item', '#info' + index);
|
||||
$(this).addClass('btnitem');
|
||||
});
|
||||
TweenMax.to('.btnitem', 1, {scaleX:1.1, scaleY:1.1, repeat:-1, yoyo:true});
|
||||
$("[id*='btn-item']").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
TweenMax.killTweensOf($(this));
|
||||
$('.info').removeClass('active');
|
||||
$(this).addClass('active visit');
|
||||
$('.info').hide();
|
||||
var num = $(this).data('obj')
|
||||
var obj = $(this).data('item');
|
||||
console.log(num);
|
||||
$(obj).show();
|
||||
TweenMax.fromTo(obj, .5, {opacity:0, x:-500},{opacity:1, ease: "elastic.out(1, 0.3)", x:0});
|
||||
|
||||
if ($('.btnitem').length <= $('.btnitem.visit').length) {
|
||||
instruccion(17);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.btn-pdf').click(function(){
|
||||
fn_end();
|
||||
})
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.headone { background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd); }
|
||||
.headtwo { background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);}
|
||||
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center pt-5 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Gracias por tu ayuda, Rubén. Ahora sé lo indispensable sobre las nuevas disposiciones en torno a la <b>Prevención de Lavado de Dinero y Financiamiento al Terrorismo.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header headone" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="flase" aria-controls="collapseOne">
|
||||
<b>01</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan autorizados para tales efectos,
|
||||
mediante escrito en el que deberá especificarse el motivo y la clase de información que se requiera
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header headtwo" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<b>02</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
De forma previa o simultánea a que una Institución comparta, con otra u otras Instituciones la información deberá dar aviso de tal circunstancia a la Secretaría.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim2">
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Por nada, Marcos. Recuerda que también es posible el <b>intercambio de información</b> de Operaciones de Clientes entre las <b>Instituciones de MAPFRE</b>,
|
||||
únicamente cuando se tenga como finalidad fortalecer las medidas para prevenir y detectar delitos en esta materia. Para ello, debemos considerar:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_22 = newSound("audio/Audio_22_Marcos.mp3");
|
||||
var Audio_R17 = newSound("audio/Audio_17_Ruben.mp3");
|
||||
|
||||
Audio_22.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R17);
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
});
|
||||
|
||||
Audio_R17.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
|
||||
fn_accordion();
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_22);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_accordion(){
|
||||
$('.card-header').click(function(){
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).addClass('visit');
|
||||
$(this).removeClass('animated pulse slowly infinite');
|
||||
if ($('.card-header').length <= $('.card-header.visit').length) {
|
||||
instruccion(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg13.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: relative; margin: auto;}
|
||||
.txt_paper { position: absolute; top: 78px; left: 15px; padding: 0 1rem;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg7.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-3 align-self-end">
|
||||
<div class="personaje_m_8 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="bubble p-2">
|
||||
<p class="m-0">
|
||||
Antes de terminar con nuestro curso, es tiempo de recordar lo más importante en relación con las <b>nuevas disposiciones</b> para la
|
||||
prevención y detección de operaciones con recursos de procedencia ilícita:
|
||||
</p>
|
||||
</div>
|
||||
<div class="paper mt-3 anim anim1">
|
||||
<img src="img/64.png" alt="">
|
||||
<div class="txt_paper">
|
||||
<ol type="1" start="1" class="list_paper">
|
||||
<li class="my-2 anim anim3">
|
||||
Estas disposiciones establecen las medidas y procedimientos mínimos para prevenir y detectar actos, omisiones u
|
||||
operaciones que pudieran favorecer delitos de operaciones con recursos de procedencia ilícita y financiamiento al terrorismo.</li>
|
||||
<li class="my-2 anim anim4">Estas disposiciones entraron en vigencia a partir de 2021.</li>
|
||||
<li class="my-2 anim anim5">Existen una serie de conceptos previstos que debes recordar como lo son: Cliente, Beneficiario, Grado de Riesgo, entre otros.</li>
|
||||
<li class="my-2 anim anim6">
|
||||
El Manual de Cumplimiento para estas disposiciones está conformado por tres aspectos centrales: la identificación del
|
||||
cliente, el enfoque basado en riesgos, el conocimiento del cliente.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(0);
|
||||
var Audio_23 = newSound("audio/Audio_23_Marcos.mp3");
|
||||
var txt2 = "<ol type='1' start='5' class='list_paper'><li class='anim anim7 my-2'>Existen tres tipos de Operaciones que pueden ser reportadas: inusuales, relevantes e internas preocupantes.</li><li class='anim anim8 my-2'>En caso de detectar alguna irregularidad, puedes acudir al Comité de Comunicación y Control, así como al Oficial de Cumplimiento.</li><li class='anim anim9 my-2'>Toda la información que sea compartida debe mantener una absoluta confidencialidad.</li></ol>";
|
||||
|
||||
Audio_23.on("play", function() {
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 11.042);
|
||||
tl2.fromTo(".anim4",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 24.464);
|
||||
tl2.fromTo(".anim5",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 29.800);
|
||||
tl2.fromTo(".anim6",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 39.696);
|
||||
tl2.call(fn_list);
|
||||
});
|
||||
Audio_23.on("end", function() {
|
||||
$('.personaje_m_8').removeClass('play');
|
||||
fn_end();
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_23);
|
||||
$('.personaje_m_8').addClass('play');
|
||||
}
|
||||
|
||||
function fn_list(){
|
||||
setTimeout(function(){
|
||||
$('.txt_paper').html(txt2);
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim7",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl3.fromTo(".anim8",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 8.75);
|
||||
tl3.fromTo(".anim9",.7,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 16.248);
|
||||
}, 12000);
|
||||
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
.sec0{background-image:url(img/fondos/bg7.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sec1{background-image:url(img/fondos/bg6.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sco .swal2-container{background-color:rgba(22,40,68,1)!important;}
|
||||
.btn_{position:absolute;bottom:-11%;left:72%;}
|
||||
.card_intro{background-image:linear-gradient(to bottom,#ffffff,#fafaff,#f3f5ff,#ebf0ff,#e1ecff);border:0;border-top-left-radius:25px;border-top-right-radius:25px;}
|
||||
.bg-blanco{background-image:url(img/fondos/bg0.png);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.bg_actividad{background-image:linear-gradient(to right,#b9230f,#ad210e,#a21e0d,#961c0c,#8b1a0b);border-top-right-radius:25px;}
|
||||
.bg-gris{background-image:url(img/actividad/bg_gris.png);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.cuadro_gris{position:relative;background-image:url(img/actividad/gris.png);background-repeat:no-repeat;background-size:100% 100%;margin:0 auto;}
|
||||
.opcion{position:relative;padding-top:10px;cursor:pointer;padding-left:18px;}
|
||||
.opcion:hover{font-weight:bold;background-color:#D67E72;}
|
||||
.opcion:hover:before{background-color:#fff;}
|
||||
.opcion:before{content:"";position:absolute;width:20px;height:20px;border:2px solid #fff;top:61%;left:-13px;border-radius:25px;transform:translateY(-50%);}
|
||||
.opcion.selected:hover{content:"";position:absolute;background-image:url(img/actividad/2.png);width:52px;height:52px;background-repeat:no-repeat;top:0;left:-60px;}
|
||||
.sec2.good{background-image:url(img/fondos/bg8.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sec2.bad{background-image:url(img/fondos/bg9.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.text-rojo-1{color:#b9230f;font-weight:bold;}
|
||||
.txt_final p,h4 { margin-bottom: .2rem; }
|
||||
.cuadro_gris { padding: 2rem 1rem 3rem 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 align-self-end animated bounceInLeft">
|
||||
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="">
|
||||
</div>
|
||||
<div class="col-8 animated zoomIn">
|
||||
<div class="card card_intro shadow p-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 text-center">
|
||||
<p class="text-rojo-1 f33"><b><i>¡Bienvenido a la Evaluación final!</i></b></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
Para concluir con tu curso, queremos invitarte a resolver la siguiente <b>evaluación</b>, en la cual deberás tomar la <b>mejor decisión</b>.
|
||||
</p>
|
||||
<p>
|
||||
Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta.
|
||||
</p>
|
||||
<div class="w-100 text-center mb-3">
|
||||
<div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
|
||||
</div>
|
||||
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_">
|
||||
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-1 mt-3">
|
||||
<p>
|
||||
<b class="text-rojo-2">Instrucciones:</b> lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al cual corresponden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7 bg_actividad text-white py-3">
|
||||
<div class="qtxt d-flex flex-row">
|
||||
<div class="number px-3 font-weight-bold f28" style="padding-right: 10px;text-align: center;padding-left: 1px;"></div>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
<div class="row wopciones mt-3"></div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/sprites/marcos_actividad.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none;">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-7 ">
|
||||
<div class="card bg-transparent p-2 shadow-none border-0">
|
||||
<div class="row">
|
||||
<!-- <div class="col-12 text-center mb-2">
|
||||
<img class="img_change">
|
||||
</div> -->
|
||||
<div class="col-12 text-center">
|
||||
<div class="txt_final"></div>
|
||||
<div class="cuadro_gris wcars">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja pl-1">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Total de preguntas:</div>
|
||||
<div id="totalp" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Correctas:</div>
|
||||
<div id="totalc" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Incorrectas:</div>
|
||||
<div id="totali" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Calificación:</div>
|
||||
<div id="cal" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none">
|
||||
</div>
|
||||
<div class="col-12 leyenda" style="font-size: 16px;">
|
||||
<p><em>MAPFRE México S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la Federación el 19 de Noviembre del 2020.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center align-self-end">
|
||||
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="">
|
||||
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
<div class="d-none">
|
||||
<div id="pop0" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/3.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Muy bien!</h4>
|
||||
<div class="txt_retro_bien"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/4.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Incorrecto!</h4>
|
||||
<div class="txt_retro_mal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
<script>
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
/**************************************/
|
||||
var max_intentos_mapfre = 6;
|
||||
var intentos = getLocation();
|
||||
var score = getScore();
|
||||
/****************************************/
|
||||
var preguntas;
|
||||
var quiz_object = new Object();
|
||||
instruccion(0);
|
||||
var audio24 = newSound("audio/Audio_24_Marcos.mp3");
|
||||
|
||||
quiz_object.preguntaActual = 0;
|
||||
quiz_object.maxPreguntas = 0;
|
||||
quiz_object.correctas = 0;
|
||||
quiz_object.incorrectas = 0;
|
||||
quiz_object.oportunidades = 2;
|
||||
$(".layer-load").show();
|
||||
$(document.querySelector('.wcontainer')).waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
if (intentos >= max_intentos_mapfre || score >= 80) {
|
||||
resumen()
|
||||
} else {
|
||||
var disponesde = Number(max_intentos_mapfre - intentos);
|
||||
if (disponesde == 1) {
|
||||
$(".intento").html(disponesde + " intento restante");
|
||||
} else {
|
||||
$(".intento").html(disponesde + " intentos restantes");
|
||||
}
|
||||
stopAllSoundsAndPlay(audio24);
|
||||
}
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio24.on("play", function() {
|
||||
$(".personaje").addClass('play');
|
||||
});
|
||||
|
||||
audio24.on("end", function() {
|
||||
$(".personaje").removeClass('play').addClass('stop');
|
||||
instruccion(2);
|
||||
$(".btn_comenzar").show();
|
||||
$(".btn_comenzar").addClass('animated pulse infinite');
|
||||
|
||||
});
|
||||
|
||||
ImportFile();
|
||||
function ImportFile() {
|
||||
$(".quiz-loader").show();
|
||||
var excelUrl = "excel/evaluacion.xlsx";
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.open("GET", excelUrl, true);
|
||||
oReq.responseType = "arraybuffer";
|
||||
oReq.onload = function(e) {
|
||||
var arraybuffer = oReq.response;
|
||||
var data = new Uint8Array(arraybuffer);
|
||||
var arr = new Array();
|
||||
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
||||
var bstr = arr.join("");
|
||||
var workbook = XLSX.read(bstr, { type: "binary" });
|
||||
var first_sheet_name = workbook.SheetNames[0];
|
||||
var worksheet = workbook.Sheets[first_sheet_name];
|
||||
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||||
//shuffleArray(preguntas);
|
||||
transformer_options();
|
||||
quiz_object.preguntas = preguntas;
|
||||
//console.dir(quiz_object.preguntas);
|
||||
if (quiz_object.maxPreguntas == 0) { quiz_object.maxPreguntas = quiz_object.preguntas.length; }
|
||||
|
||||
|
||||
}
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
function transformer_options() {
|
||||
$.each(preguntas, function(index, pregunta) {
|
||||
var opciones = new Array();
|
||||
$.each(Object.keys(pregunta), function(index, key) {
|
||||
if (key.toLowerCase().indexOf("opcion") >= 0) {
|
||||
var opcion = new Object();
|
||||
opcion.text = pregunta[key];
|
||||
if (key.toLowerCase().indexOf("correcta") >= 0) {
|
||||
opcion.valor = 1;
|
||||
} else {
|
||||
opcion.valor = 0;
|
||||
}
|
||||
opciones.push(opcion);
|
||||
}
|
||||
});
|
||||
pregunta.opciones = shuffleArray(opciones);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
$(".btn_comenzar").click(function(event) {
|
||||
__click.play();
|
||||
setLocation(Number(intentos + 1));
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(8);
|
||||
$(".sec0").hide();
|
||||
$(".sec1").show();
|
||||
|
||||
siguientePregunta();
|
||||
});
|
||||
|
||||
function siguientePregunta() {
|
||||
// body...
|
||||
instruccion(8);
|
||||
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
||||
$(".qtxt").find(".txt").html(pregunta.pregunta);
|
||||
$(".number").html(quiz_object.preguntaActual + 1);
|
||||
$(".wopciones").html("");
|
||||
$(".btn-enviar").hide();
|
||||
$(".btn-siguiente-quiz").hide();
|
||||
$.each(pregunta.opciones, function(index, opcion) {
|
||||
$(".wopciones").append('<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
|
||||
'<div data-val="' + opcion.valor + '" class="opcion">' + opcion.text +
|
||||
'</div></div>');
|
||||
});
|
||||
TweenMax.staggerFromTo(".wopciones-info", 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
||||
$(".opcion").click(function(event) {
|
||||
quiz_object.preguntaActual++;
|
||||
__click.play();
|
||||
$(".opcion").removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
$(".txt_retro_bien").html(pregunta.retro_correcta);
|
||||
$(".txt_retro_mal").html(pregunta.retro_incorrecta);
|
||||
var valor = $(this).data("val");
|
||||
if (Number(valor) > 0) {
|
||||
quiz_object.correctas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
} else {
|
||||
quiz_object.incorrectas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
}
|
||||
console.log(quiz_object.preguntaActual);
|
||||
|
||||
|
||||
$(".btn-siguiente-quiz").show();
|
||||
//quiz_object.preguntaActual++;
|
||||
});
|
||||
}
|
||||
|
||||
function finActividad() {
|
||||
// body...
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
|
||||
calificacion = Math.floor(Math.round(calificacion * 100) / 100);
|
||||
$("#totalp").html(quiz_object.maxPreguntas);
|
||||
$("#totalc").html(quiz_object.correctas);
|
||||
$("#totali").html(quiz_object.incorrectas);
|
||||
$("#cal").html(calificacion + "%");
|
||||
|
||||
intentos = getLocation();
|
||||
setScore(calificacion);
|
||||
|
||||
|
||||
if (calificacion >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
//$(".img_change").attr("src","img/actividad2/7.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Has conseguido responder correctamente tu evaluación! Estamos seguros que con tu ayuda podremos prevenir y detectar operaciones con recursos de procedencia ilícita.</p>");
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
setLessonStatus("completed");
|
||||
|
||||
} else {
|
||||
$(".leyenda").addClass('text-white');
|
||||
if (intentos >= max_intentos_mapfre) {
|
||||
setLessonStatus("completed");
|
||||
//setLessonStatus("c");
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>, se han agotado los intentos.</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
//$(".btn_re").removeClass('d-none');
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
} else {
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no has conseguido responder de manera exitosa la evaluación, pero no te preocupes, puedes intentarlo de nuevo.</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".leyenda").addClass('text-white');
|
||||
$(".btn_re").removeClass('d-none');
|
||||
instruccion(15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".btn_re").click(function(event) {
|
||||
__click.play();
|
||||
__loadsco();
|
||||
});
|
||||
|
||||
function resumen() {
|
||||
$(".sec0, .wcars").hide();
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
var score = getScore();
|
||||
$(".txt_final").html("<p>Calificación reportada: <b>" + score + "%</b></p>");
|
||||
if (score >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
$(".personaje_good").removeClass("d-none");
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
}
|
||||
else{
|
||||
$(".sec2").addClass('bad');
|
||||
$(".personaje_bad").removeClass("d-none");
|
||||
$(".txt_final").addClass('text-white')
|
||||
$(".leyenda").addClass('text-white mt-2');
|
||||
}
|
||||
instruccion(13);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/x/bg0.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bg_crd { background: rgba(255,255,255,.95); background: -webkit-linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(203, 215, 235, .95) 100%); background: -moz-linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(203, 215, 235, .95) 100%); background: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(203, 215, 235, .95) 100%); box-shadow: 0 0 8px rgba(0,0,0,.6); border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section class="sec0 w-100 h-100 pt-4 px-2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<div class="personaje mx-auto humberto_6"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center animated bounceInUp">
|
||||
<img src="img/x/0.png" alt="">
|
||||
</div>
|
||||
<div class="col-10 animated zoomIn">
|
||||
<div class="card bg_crd border-0 p-3">
|
||||
<p>Gracias por acompañar a Humberto a cumplir su misión. De ahora en adelante, esperamos que tanto tú como él utilicen esta metodología para sus elecciones.</p>
|
||||
<p class="text-center"><strong>¡Hasta la próxima!</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
setLessonStatus("completed");
|
||||
instruccion(0);
|
||||
var audio0 = newSound("audio/Audio_13_Narrador.mp3");
|
||||
$(".layer-load").show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
stopAllSoundsAndPlay(audio0);
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio0.on("play",function(){
|
||||
//$(".personaje").addClass('play');
|
||||
});
|
||||
|
||||
audio0.on("end",function(){
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
//$(".personaje").removeClass('play').addClass('stop');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.fullvideo {
|
||||
width: 1365px;
|
||||
height: 767px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="fullback w-100 h-100">
|
||||
<video class="fullvideo" src="video/prueba_clip.mp4" buffered id="vdo" ></video>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
$(".sco").addClass('hasvideo');
|
||||
vdo = document.getElementById("vdo");
|
||||
//vdo.play();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.popup-class{ width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="fullback w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-12 text-center">
|
||||
<h1>Solo avanza</h1>
|
||||
<div class="btn btn-primary btn_pop">POP</div>
|
||||
<div class="btn btn-secondary btn_pop">POP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-12 text-left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
instruccion(6);
|
||||
$(".btn_pop").click(function(event) {
|
||||
/* Act on the event */
|
||||
var html = $("#pop0").html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: document.getElementById("wcontainer") ,
|
||||
customClass:{popup:'popup-class'},
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {},
|
||||
onOpen: function () { instruccion(7); },
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
instruccion(1);
|
||||
},
|
||||
onAfterClose: function () {}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user